TechTrouts.com » development http://techtrouts.com Doin' the dev dance o/ Thu, 23 Jul 2009 10:42:09 +0000 en hourly 1 http://wordpress.org/?v=3.0 Application deployment shell script using rsync http://techtrouts.com/application-deployment-shell-script-using-rsync/ http://techtrouts.com/application-deployment-shell-script-using-rsync/#comments Thu, 07 May 2009 22:14:07 +0000 Carlos Ouro http://techtrouts.com/application-deployment-shell-script-using-rsync/ Hi all,

here is a simple deployment shell script (.sh) using rsync to deploy your local application to a productive location.

You can download it here.

Follow the README file for setup and usage.

Feedback comments are always welcome :)

]]> http://techtrouts.com/application-deployment-shell-script-using-rsync/feed/ 0 mootools: how to drag through icon (two items simultaneously) http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/ http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/#comments Fri, 11 Jul 2008 15:44:16 +0000 Carlos Ouro http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/ If you have a box (div) and a dragging icon (a anchor) on it, and you want to drag the box by clicking on the icon you just have to make the box draggable and set the handle of the drag to the icon.

Here it is, for:

1
2
3

<div id="example">
	<a id="drag_button" style="cursor:pointer;cursor:hand;">Drag</a>
</div>

Just use:

$('example').makeDraggable({handle:$('drag_button')});

Notes on IE:
The drag button element “<a>” can’t take href=”#” and can’t contain an image, as it will make it draggable by windows and will not work as supposed.
If you require to insert an image into it then use it as a background image for the drag button element, and set the element’s height and width according to the image for proper appearance:

1
2
3
4
5

<p id="example">
<div id="example">
	<div id="drag_button" style="background:url(img_location.png) no-repeat;width:15px;height:15px;cursor:pointer;cursor:hand;">
	</div>
</div>
]]> http://techtrouts.com/mootools-how-to-drag-through-icon-two-items-simultaneously/feed/ 0 Rot13 Email Protection for WordPress http://techtrouts.com/rot13-email-protection-for-wordpress/ http://techtrouts.com/rot13-email-protection-for-wordpress/#comments Thu, 26 Jun 2008 19:27:08 +0000 Carlos Ouro http://techtrouts.com/rot13-email-protection-for-wordpress/ Rot13 Email Protection for WordPress, protects all email addresses and mailto: links on your blog from email harvesters using rot13 encryption and/or text mode.
Inspired by ROT13 encryption on Textmate;

I’ve developed this plugin a while ago, i’ve now updated it to a releasable version, already working up to wordpress 2.5.1

ROT13 Email Protection at Worpress Plugins

Download ROT13 Email Protection Plugin v0.1!

In order to install it, as most wordpress plugins, just put the rot13_email_protection.php file  inside your /wp-content/plugins folder.

Any bugs, give me a comment, i’ll check on it.

]]> http://techtrouts.com/rot13-email-protection-for-wordpress/feed/ 21 Mootools: nice portfolio by 9tree using kwicks (Fx.Elements) and slides http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/ http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/#comments Tue, 24 Jun 2008 16:05:26 +0000 Carlos Ouro http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/ Hello,

I’m just finishing our new website and i’ve been posting here the effects i’ve created for it.
This one is a little more “show off”;
It’s the way we’ve set up our portfolio using Fx.Elements for the togglers and Slides for the presentation images.
You can check how it works here.

Using this html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div>	
	<div id="kwicks_pics">
		<a href="http://4hsa.pt" class="kwicks_pic">
		    <img src="images/portfolio/4hsa_big.png"/>
		  </a>
			<a href="http://techtrouts.com" class="kwicks_pic">
		    <img src="images/portfolio/techtrouts_big.png"/>
		  </a>
			<a href="http://webandcookies.com" class="kwicks_pic">
		    <img src="images/portfolio/wac_big.png"/>
		  </a>
	</div>
	<div id="kwicks">
	  <a href="http://4hsa.pt" rel="image" class="kwick">
	    <img src="images/portfolio/4hsa1.png" title="4HSA - Qualidade e Seguran&ccedil;a Alimentar" alt="4HSA - Qualidade e Seguran&ccedil;a Alimentar"/>
	  </a>
		<a href="http://techtrouts.com" class="kwick">
	    <img src="images/portfolio/techtrouts1.png"/>
	  </a>
		<a href="http://webandcookies.com" class="kwick">
	    <img src="images/portfolio/webandcookies1.png"/>
	  </a>
	</div>
</div>

This css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#kwicks_pics {
	visibility:hidden;
	clear:both;
	width:880px;
	height:300px;
	text-align:center;
}
#kwicks_pics .kwicks_pic {
	display: block;
	background:none;
	border:none;
}
#kwicks {
	clear:both;
	width:auto;
	height:180px;
}
#kwicks .kwick {
	float:left;
	/*width should be the same as javascript's var szNormal*/
	width: 55px;
	background:none;
	border:none;
}

And this Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

window.addEvent('domready', function(){
 
	var sequential = false; //changed to true requires to pass every intermediate image on slide
	var szNormal = 55; //should be the same as css #kwicks .kwick{width}
	var szSmall  = 50, szFull = 250, selected=0;
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 350, transition: Fx.Transitions.Back.easeOut});
	var kwickspics=$$("#kwicks_pics .kwicks_pic");
 
	var kwickspics_obj={
		movingTo:(kwickspics.length-1),
		selected:(kwickspics.length-1),
		next_i:false,
		checking:false,
		on_move:false,
		wait_delay_move:false,
		the_fxs:[],
		init:function(){
			kwickspics.each(function(kwickspic, i){
				kwickspics_obj.the_fxs[i]=new Fx.Slide(kwickspic, {
					duration: 200,
					//transition: Fx.Transitions.Back.easeOut,  -- transitions here return error on IE7, no idea why :/
					onComplete:function(){
					if(kwickspics_obj.wait_delay_move){
						kwickspics_obj.wait_delay_move=false;
						setTimeout(kwickspics_obj.checkStep,100);
						return;
					}
					if(kwickspics_obj.next_i!==false){
						kwickspics_obj.wait_delay_move=true;
						kwickspics_obj.the_fxs[kwickspics_obj.next_i].slideIn();
						kwickspics_obj.selected=kwickspics_obj.next_i;
						kwickspics_obj.on_move=false;
					}
				}});
				kwickspics_obj.the_fxs[i].hide();
			});
			$('kwicks_pics').style.visibility='visible';
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideIn();
		},
		moveTo:function(i){
			kwickspics_obj.movingTo=i;
			if(!kwickspics_obj.checking) kwickspics_obj.checkStep();
		},
		checkStep:function(){
			if(kwickspics_obj.on_move || kwickspics_obj.movingTo==kwickspics_obj.selected) {
				kwickspics_obj.checking=false;
				return;
			}
			kwickspics_obj.checking=true;
			kwickspics_obj.on_move=true;
 
			if(sequential){
				//requires to pass every image
				kwickspics_obj.next_i = kwickspics_obj.selected&gt;kwickspics_obj.movingTo ?  kwickspics_obj.selected-1 : kwickspics_obj.selected+1;
				//go directly to final image
			} else kwickspics_obj.next_i=kwickspics_obj.movingTo;
			kwickspics_obj.the_fxs[kwickspics_obj.selected].slideOut();
			return;
		}
 
	}
	kwickspics_obj.init();	
 
	kwicks.each(function(kwick, i) {
		kwick.addEvent("mouseenter", function(event) {
			var o = {};
			o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
			kwicks.each(function(other, j) {
				if(i != j) {
					var w = other.getStyle("width").toInt();
					if(w != szSmall) o[j] = {width: [w, szSmall]};
				}
			});
			fx.start(o);
			kwickspics_obj.moveTo(i);
		});
	});
 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	});
});

Hope you’ll put it to good work ;)

]]> http://techtrouts.com/mootools-nice-portfolio-by-9tree-using-kwicks-fxelements-and-slides/feed/ 2 MooTools: smoothscroll highlight element id and highlight anchor onload http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/ http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/#comments Mon, 23 Jun 2008 23:25:04 +0000 Carlos Ouro http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/ Hi,

i’ve created a little script for highlighting an element onComplete of the Mootools’ SmoothScroll.
I’ve also added a line to highlight the selected anchor onload, in case the url already contains the anchor hash on page load.

Here it is:

Mootools 1.1 Version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color' aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined'){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
		var fx = new Fx.Styles(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') &amp;&amp; $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') &amp;&amp; $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});

Mootools 1.2 version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

 
window.addEvent('domready',function() { 
 
	//default colors - if 'background-color' or 'color aren't defined in css
	var default_bg_color='#fff';
	var default_color='#000';
 
	//highlight colors
	var h_bg_color='#eeeebb';
	var h_color='#999';
 
	highlight_anchors=function(item_id){
		if(item_id=='') return false;
		if(!$(item_id)) {
			if(typeof $$(item_id)[0] == 'undefined' || typeof $$(item_id)[0].id == 'undefined' || $$(item_id)[0].id==''){
				return false;
			} else item_id=$$(item_id)[0].id;
		}
 
		var fx = new Fx.Morph(item_id, {duration:400, wait:false});
 
		var has_bg_color = $(item_id).getStyle('background-color') &amp;&amp; $(item_id).getStyle('background-color')!='transparent'?true:false;
		var has_color = $(item_id).getStyle('color') &amp;&amp; $(item_id).getStyle('color')!='inherit'?true:false;
		var cur_bg_color= has_bg_color ? $(item_id).getStyle('background-color') : default_bg_color;
		var cur_color= has_color ? $(item_id).getStyle('color') : default_color;
		fx.start({
				'background-color': h_bg_color,
				'color': h_color
			}).chain(function(){
				this.start({
					'background-color': cur_bg_color,
					'color': cur_color
				}).chain(function(){
					if(!has_bg_color) $(item_id).setStyle('background-color', 'transparent');
					if(!has_color) $(item_id).setStyle('color', 'inherit');
				});
			});
		return true;
	}
 
	//if anchor hash already exists, highlight onload
	if(typeof window.location.hash != 'undefined') highlight_anchors(window.location.hash);
 
	//setup smoothscroll
	new SmoothScroll({ duration: 1000, onComplete:function(){
		highlight_anchors(this.anchor);
	}});
});

You can check it working here.
Hope it will get useful for someone ;)

]]> http://techtrouts.com/mootools-on-complete-smoothscroll-highlight-element-id/feed/ 0 What about backward compatibility modules? http://techtrouts.com/what-about-backward-compatibility-modules/ http://techtrouts.com/what-about-backward-compatibility-modules/#comments Sat, 21 Jun 2008 18:32:53 +0000 Carlos Ouro http://techtrouts.com/what-about-backward-compatibility-modules/ Hi again,

being working a lot with mootools, dojo, wordpress and some other frameworks and toolkits lately, my question today is this:
Why, most of the times, don’t frameworks and toolkits developers launch any backward compatibility modules at all?

It might seem pretty complicated getting old deprecated funcionalities working  on newer, better versions, but, apart from some real specific embembed funcionalities, it really shouldn’t be that hard.

For the following example i’ll use Mootools as an explanatory example:

All you need is a nicely designed dynamic version transitioning system.
One that allows you to, anytime on the execution, define which version will the following code run on.

Imagine you design a backward compatibility plugin from version B to version A.
On version C you’ll design a backward compatibility plugin to version B.

So now, on a page running “mootools-C.js” you should include the backward compatibility modules “mootools-back-C-B.js” and “mootools-back-B-A.js”, or a compiled version (having just a copy paste of both previous files content) “mootools-back-C-to-A.js”.

So if you run something like “Mootools.use_version(‘A’);” the dynamic version transitioning system would automatically look for it’s previous version compatilities execution for version B at, let’s suppose, “MootoolsBack_C_B();” and then rerun the same command (“Mootools.use_version(‘A’);”) while already running on version B to travel back to version A (the dynamic version transitioning system, already on version B would run something like “MootoolsBack_B_A();”).

This method would, in theory, work for multiple version transitions without having to design a specific plugin for each version to version compatibility. It would save developers hours in trying to put two different tools, based on two different framework/toolkit versions, together on the same execution – like using both MOOdalbox 1.3 beta 2 and mooflow v0.2 in the same page.

The system would work both ways, as you could “Mootools.version_reset();” or “Mootools.use_version(‘C’);” to travel back to version C on the rest of the execution, the system would run the consecutive version travel functions eg. “MootoolsBack_A_B();” and “MootoolsBack_B_C();” and the rest of the code would be running on Mootools version C.

This “dynamic version transitioning system” will be used for every release transition on NaturePhp.
It might not work perfectly at first, but it will certainly relieve many developers’ headaches.

I hope in the future more and more projects start using a system like this.

]]> http://techtrouts.com/what-about-backward-compatibility-modules/feed/ 0 Mozilla Firefox 3 for Mac is awesome http://techtrouts.com/mozilla-firefox-3-for-mac-is-awesome/ http://techtrouts.com/mozilla-firefox-3-for-mac-is-awesome/#comments Fri, 20 Jun 2008 11:53:52 +0000 Carlos Ouro http://techtrouts.com/mozilla-firefox-3-for-mac-is-awesome/ Hi there,

i’ve used firefox for development for quite some time now, but on a mac i’ve always liked Safari better for regular web browsing, as it always been much faster and cute.

But the recently released Firefox 3 for Mac really changed my mind. It is, without a doubt, awesome. Runs perfectly smoothly, really nice design, fastest browser ever.

Firefox 2 versions really dragged around with heavy Javascript applications such as Gmail or our upcoming FallForward, but this new version handles javascript even better than Safari 3.
This release has been a really nice boost for my web browsing as i’ve not been much into the latest beta versions of Firefox 3.

The bad part is Firebug still hasn’t come out on it’s official release for Firefox 3. However, i’m using the beta and it works really nice – and everything is perfect again.

A “must have” indeed.

Great work for the guys at Mozilla!!
By the way, great website design for http://www.mozilla.com ;)

]]> http://techtrouts.com/mozilla-firefox-3-for-mac-is-awesome/feed/ 0 NaturePhp 0.1 now waiting for php 5.3.0 … http://techtrouts.com/naturephp-now-waiting-for-php-530/ http://techtrouts.com/naturephp-now-waiting-for-php-530/#comments Fri, 13 Jun 2008 17:43:06 +0000 Carlos Ouro http://techtrouts.com/naturephp-now-waiting-for-php-530/ Because it requires a few of the upcoming PHP features, naturePhp 0.1′s release is now on standby for PHP 5.3.0′s release. For now i can only say it is my favorite toolkit ever, and we’ve been using and improving it quite a lot on it’s limited PHP 5.2.6 version…

- ok, so it’s a biased opinion… :/

NaturePhp itself is basically a plug-in system for the coolest functionalities around – most of the upcoming functionalities are either gathered from wordpress, joomla!, CodeIgniter and others, as well as a few of our own – *and a few RubyOnRails original ideas implemented in php ;)

The functionalities are organized into classes, and the classes are organized into namespaces, providing a great deal of “space” for future plug-in developments.
It uses __autoload() for all classes, meaning it is just as fast no matter how many plug-ins you have installed.
NaturePhp does not aim being labeled as a framework, but, being a pluggable toolkit itself, it allows future developers to build their own frameworks as plug-ins. – The idea is to provide a stable ground for common development and lot’s of easy to use functionalities for developers – much like Phyton’s libraries.

We are currently using Namespace_Class::method() instead of Namespace::Class::method() and Class::callStatic($func_name, [$arg1, $arg2... $argN]) instead of Class::func_name([$arg1, $arg2... $argN]) to workaround the lack of “Namespaces” and method overloading “__callStatic()” support on PHP 5.2.6, as these two features are required for most of the toolkit functionalities.
It’s ugly, but it keeps the toolkit usable and developed while we wait for PHP 5.3.0.

As soon as PHP 5.3.0 comes out we’ll implement the necessary namespaces and change all the Class::callStatic($func_name, [$arg1, $arg2... $argN]) calls to Class::func_name([$arg1, $arg2... $argN]) – so probably a couple of weeks after PHP 5.3.0′s release we’ll have a NaturePhp 0.1 out ;)

While we wait, we’re also finishing the NaturePhp’s website at http://naturephp.org ;

]]> http://techtrouts.com/naturephp-now-waiting-for-php-530/feed/ 0 php cycle through object properties http://techtrouts.com/php-cycle-through-object-properties/ http://techtrouts.com/php-cycle-through-object-properties/#comments Fri, 13 Jun 2008 10:35:05 +0000 Carlos Ouro http://techtrouts.com/php-cycle-through-object-properties/ for the example object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class Test{
 
    //public props
    public $var1="Value 1";
    public $var2="Value 2";
    public $var3="Value 3";
 
    //private props
    private $var4="Value 4";
 
    //public method
    public function public_function(){
         return true;
    }
 
    //private method
    private function private_function(){
         return true;
    }
 
}

You can cycle through the public object properties as you would with an array:

1
2
3
4
5
6

$test=new Test();
 
foreach($test as $prop_name=>$prop_value){
    print $prop_name.'=&gt;'.$prop_value;
    print "<br".">";
}

The result will be:

var1=>Value 1
var2=>Value 2
var3=>Value 3
]]> http://techtrouts.com/php-cycle-through-object-properties/feed/ 0 Using MySQL Stored Procedures in PHP ( MySQL error #1312 ) http://techtrouts.com/using-mysql-stored-procedures-in-php/ http://techtrouts.com/using-mysql-stored-procedures-in-php/#comments Sun, 08 Jun 2008 11:31:32 +0000 Carlos Ouro http://techtrouts.com/using-mysql-stored-procedures-in-php/ Hello again,

in order to use Stored Procedures in MySQL through PHP you usually either use pdo or mysqli connections.
However if do not wish to redo your application connections and you don’t require any out parameters you can use “mysql_connect($host, $user, $password, true, 65536);” on connection, using the 65536 ( CLIENT_MULTI_STATEMENTS ) internal magic constant. But you can make only one stored procedure call per connection, and there is no support for OUT parameters. It is not currently documented, but can be found in the php header file.

If you do not use this connection method, you’ll get a “#1312 – PROCEDURE database.procedure can’t return a result set in the given context” error whenever you CALL a procedure that returns a result set.

]]> http://techtrouts.com/using-mysql-stored-procedures-in-php/feed/ 1