Hi everyone,
It’s with great pleasure that I’m showing you my first jQuery plugin.
It’s called jPictag and it enables any website to have a image tagging system, much like the ones you see on Facebook or Flickr.

Official website: http://www.jpictag.com/
Demos: http://www.jpictag.com/demos

NOTE I’m also giving away 5 free copies to the first ones to comment on this.

Erm..yeah, what’s a regular expression anyway ?

Ah, my dear friend, regular expressions are like women, hard to understand, but you can’t-live-without once you find them.
So in a nutshell, regular expressions are well, a string containing it’s own syntax to match search pattern.
You are probably familiar with wildcards right ? “dir *.exe” or “ls *.sh”, regular expressions work like this but on a more advanced and more useful way. Their main purpose is to search,find,and get data out of text string or a file, or anything you want actually.

Where to start ?

So, I’m going to keep this simple and I’m targeting my examples for PHP.
Fire up your IDE or Text editor and past this:

<?php
	// My first regular expression
	$my_string = "I love regular expressions";
	preg_match_all("/love/", $my_string, $output);
	print_r($output);
?>

I’m only going to explain line number 4 of this example.
We could translate this in plain english to something like: “find any love words in $my_string variable and put any find matches in $output var as an array”. Easy right ?

The output of that code will be:

Array ( [0] => Array ( [0] => love ) ) 

One match found, great uh ? Well, yeah, but not very useful, I bet that you can find a couple of PHP function that would this as well. But hey you gotta start somewhere right ?

Let’s try another one, let’s find out every vowel in that string, let’s change our RE to:

"/[aeiou]/"

“What, are those square braces ?” you may ask. They’re called character classes and they represent what your search content must contain, and nothing else, this means that if preg_match_all find any letter of those, they will include it in our $output array.
The output will be:

Array
(
    [0] => Array
        (
            [0] => o
            [1] => e
            [2] => e
            [3] => u
            [4] => a
            [5] => e
            [6] => e
            [7] => i
            [8] => o
        )

)

It found 9 results, but more aware minds might find out that an “I” is missing, the actually only upper case char. Why ?
Simple because our our expression only included low case chars, let’s change it to

"/[aeiouAEIOU]/"

Array
(
    [0] => Array
        (
            [0] => I
            [1] => o
            [2] => e
            [3] => e
            [4] => u
            [5] => a
            [6] => e
            [7] => e
            [8] => i
            [9] => o
        )

)

Ah, there it is, but hey, that is actually stupid. RE actually have a shortcut to include upper and down case it’s “/i” at the end of our RE. So

"/[aeiou]/i" // <-- notice the "i" at the end

The last “i” is a shortcut that will find any upper or down chars. Awesome right ? Yeah, I get excited pretty easily…let’s move on.

This is all fine and dandy, but what if you want to make sure no vowel is not in that phrase ? The anwser to that is “^”.
“^” is the no-go in regular expression. Lets look at another example.

"/[^aeiou]/i" // <-- notice the the ^ inside []

Ouput:

Array
(
    [0] => Array
        (
            [0] =>
            [1] => l
            [2] => v
            [3] =>
            [4] => r
            [5] => g
            [6] => l
            [7] => r
            [8] =>
            [9] => x
            [10] => p
            [11] => r
            [12] => s
            [13] => s
            [14] => n
            [15] => s
        )

)

Now, there will be times where you probably want to include all the alphabet in that equation.
Let me introduce to you, ranges or “-”
Example:

"/[a-z]/i" 

This means: “find everything between A and Z including lowcase and upper case”. Easy right ?
You can also include numbers

"/[a-z0-9]/i" 

any letter from A to Z and any number from 0 to 9. Some might ask “what about the “-” char, what if I want to find that ?”, pretty simple just put in at the beginning of the square braces.

Let wrap it up…

• PHP has a lot of functions to use with RE (preg_match_all, preg_match, preg_grep, etc..)
• An expression is a string that must contain at least “//”
• [...] Character classes and negate character [^...] allows you to list any matching or non-matching chars. The “-” dash them represent a range of chars or number, look a it as a shortcut
• “/i” at the end allows you to make that expression valid both for upper case and downcase

On the next chapter we will go a little more deeper and starting to actually doing something more useful with our expressions.

Any association with the web show “Will it blend” are merely coincidental. Or is it ?
This article targets on the most top asked question today for developers and anyone related to technology. Which is “Yeah, but does _____ scale ?”.

Everyone seems to worry too much about scalability, people turn down frameworks and databases based on that argument. My question however is “Do you really need to scale it?”.

For example, one of the most recent myths is that Rails can’t scale, and people say it because Twitter, yes, that huge 50 million messages per day website had some issues scaling itself. I know it’s good to have some vision, but come on, do you really expect to get that kind of traffic on your website ?
And if you remotely do, would you blame Rails for it ?

Don’t get me wrong, you SHOULD build with scalability in mind, it’s one of the “must have principles”, but what you don’t need is to stress yourself and neglect some good technology just because some random top 10 website is having some slightly issues with it. Scalability from my point of view is not something directly related with a framework or database, but with how you plan your application, and how you architect it. A couple of months ago I’ve a met this guy who was brainwashing his entire team with how good CouchDB was and how it would improve their app performance , yes CouchDB piece of software but this comes from the same guy that was creating a CRM using iframes with meta http-equiv=”refresh” content=”600″ all over it. See where I’m heading ?

Scalability should be in all aspects of you project, from optimized code algorithms to server infrastructures. Because in the end the main goal is: Speed and uptime. But you shouldn’t rely only on one technology or trash another because your site won’t scale. From what I know, everything scales, yes, sometimes it can be a really pain in the arse, but for most of us, worrying about it and waste precious time debating it , is in fact, worse, because you don’t get anything done.

We worry too much, we over analyze things too much, we are very pessimistic and we are always expecting that the world will end tomorrow. The truth is , no it won’t. If you build it with good principals in mind, no matter what technology you use, and write this down, “It will scale”.
So just free yourself of this “should I use this ?” and get your stuff done.

PS: just look at Facebook and their PHP

As a professional web developer for almost 9 years and a web/internet enthusiast for, well…almost my entire life, I’ve came across with a lot of different ways of doing things.
I remember when some people said “man, you gotta learn Flash/JAVA, it will be the end of HTML for good”, I think Apple is laughing at them right now. Oh, and I never really learned flash, except for some little AS script skills. Point being is, technologies come and go and you either learn them or reject them. At the end of the day it’s really up to you. Do you really want to kill a bird with a bazooka , or an elephant with a mouse trap ?

Today however, language frameworks are the ones in the spot light, you have, Ruby on Rails; Django; Kohana, etc.. and some people just simply refuse to use it.
Why ? Well, some of them argue that in order to become a really programmer you need to know how to create a framework, you have to know how things are done.
You can agree with them, in fact, if you are learning a new language, doing things from scratch can really help you. Or can’t ?

It depends, are you a very good programmer ? Or a lousy one ? If you are a lousy one, chances are you will not learn anything by creating a framework, in fact it will even make you a worse one. Why ? Well, a framework is a very overwhelming piece of software, it’s like building a factory for creating not just one type of product but a lot of different ones. And if the factory is not correctly build, your products will not be good, or worst case scenario, your factory won’t fit your needs in a long run.
Besides, most of this custom frameworks are created by one person, which leaves them with a lot of stuff to think of, while open source can be contributed by many, and so it can get more stable much faster. And don’t get me started on bugs and security. Also, the fact is, if you don’t comment or document your code in a year or two you will not know what your code is actually doing, and then you start to think of creating a new one from scratch.

I’m against creating a custom framework without being OS. Not against custom code of course. But call it whatever you want, but building custom code should meet a very specific purpose. Look at Facebook for instance, they’ve created their own app, hell, they even created their own PHP compiler, but because they really need it. On the other hand you have Twitter with almost 7TB of tweets per day, and they are running RoR (Or were, according to Techcrunch). So what’s your purpose for creating your framework ?

In fact, I believe most of people who create custom frameworks for their own are unexperienced programmers. Why ? Most of the professionals programmers I know use or learn a framework, not because they don’t know how to code, but because they’ve all done what the framework does, and we are sick reinventing the wheel every time. Been there, done that, got the t-shirt. So why waste more time creating it ? Why not just use that time to create something meaningful, instead of worrying about ORM, Cache, template, form validations, etc. It’s old and it’s boring. I could that if I wanted, but I don’t have to, it won’t add any more value to me as a programmer.

If you need something more specific that a framework can’t do, do it yourself, nothing wrong about that, this is where you will learn something, because you never done it.

At the end, I believe that the good programmers who create their own framework are afraid of just letting go. Are afraid of stopping to worry about specific issues that their users won’t even know it’s there, like core code. It’s like they need to do that from bottom up, in order to believe that they are the hardcore-kick-ass-coders.

So, do you really need to create your own framework ?

Well, it’s really up to you.
I will however try to help you. Here are some of books you should be reading in order to improve your technical and personal skills.

The Definitive Guide to Django: Web Development Done Right, Second Edition
If you don’t know what Django is, you really should come out of that rock more often. Django is a MVC MVT Python framework, and in one word, “awesome” is what comes to my mind. Django is an ORM, fully OO, already build with a cool template system, plus a ready-to go admin interface. If you don’t know Python don’t worry, it’s a very easy language to learn.

CouchDB: The Definitive Guide
CouchDB is a fully high-scalable database, it’s also known as a NoSQL database, and if you are building web apps for a huge crowd, you will definitely need to know this.

Don’t make me think
What can let your application to fail , even if it’s a good tool ? Speed ? Marketing ? No, usability, if your application is hard to understand and to use, users won’t, well….use it, even if it do wonders behind it. So get this book and start doing some designs with user usability concerns.

Rework
This book is mind blowing if you like me hate the way some of the IT companies are run out. It was written by Jason Fried and David Heinemeier Hansson from 37Signals. It’s all so simple stuff that really makes you think, for instance, why some projects fail and why workaholics are bad for a company, why less is more, and why VC funding is not always the best option. I’ve read it in 3hours, awesome.

Web Application Design Patterns (Interactive Technologies)
This is not a so technical book, but has great tips on how to design great web apps by comparing with some of the best web sites right now. Once again, it’s never enough to bold the statement that a great web app can’t be just a good tool, it must be user friendly and easy to use.

Beginning HTML5 and CSS3: Next Generation Web Standards
I really shouldn’t even tell you why you should read this. Specially if you are front end dev.

Update: This book is not yet published, but you should really consider it in a couple of months.

A lot more could be added, give me your feedback and what books should be here for a second part of this series.

Download (1kb)

Everytime I start to learn a new language I like to create some simple scripts or applications, just to try to apply some of the knowledge I’ve acquired .
So, this time I will create a simple script that will fetch from a directory a random image and put it as your wallpaper.

Objective

• Change the wallpaper every time we run the script
• Let the user choose the searching directory as a parameter
• Define as a startup script

Requirements

• Python 2.5 (duh…)
• Python Image Library

Code

import ctypes
import Image
import os
import sys
import random

These are the libraries that we will use, there it is Image aka PIL.
Now, I won’t lie, I’m pretty new at Python, so I really don’t know if Python brings a more simple Image lib, in these case to convert to .bmp, so for now we will use PIL.

def wallpaper_dir(path):
	try:
		directory = os.listdir(path)
	except WindowsError:
		print "Directory does not exist"
		exit(0)
	wallpapers = []
	types = ['jpg', 'png', 'gif']
	for file in directory:
		ext = file[-3::]
                if ext in types:
        		wallpapers.append(path + file)
	return wallpapers

This function we be responsible for the search on a specific directory for image files, in this case i’ve used only the most used types, jpg, gif and png.
It’s not a recursive function, so it will not search on sub directories. The main purpose here it’s to have a dir with a lot of images and let our script search for one,
I think the code speaks for himself, you can rapidly know what’s going on. The var directory will keep on a List every file found by the method os.listdir by the param Path of our function.

After that, it will go through the List and search for every .jpg, .png and .gif files, as in, the last 3 chars of each item ext = file[-3::]. I as you may guess, it will not validate if it’s an image or not, but you can do that pretty easily with PIL.

def set_wallpaper(wallpapers):
	random.seed()
	random.shuffle(wallpapers)
	wallpaper = random.sample(wallpapers,1)
	im = Image.open(wallpaper[0])
	im.save("wallpaper.bmp")
	MY_WALLPAPER = "wallpaper.bmp"
	SPI_SETDESKWALLPAPER = 20
	ctypes.windll.user32.SystemParametersInfoA(SPI_SETDESKWALLPAPER, 0, MY_WALLPAPER , 0)

This is like the main function of our script, by the param wallpapers which in reality it’s nothing more than a List of the previous result, this function will randomly choose a file and covert it to .bmp, and using WIN32 API function it will change your wallpaper.
Again, the code speaks for itself, that’s on the things I love about Python, the code speaks for himself.

def main(argv):
	if len(sys.argv) > 1:
		sys.argv[1] = sys.argv[1] + "/"
		wallpapers = wallpaper_dir(sys.argv[1]);
		if len(wallpapers) > 0:
			set_wallpaper(wallpapers)
		else:
			print "No wallpapers were found."
	else:
		print "Usage: wallpaper.py <dir>"	

if __name__ == "__main__":
	main(sys.argv)

At last we have main() function, that will receive a parameter from the command line indicating where’s the wallpaper directory.

Now we just need to run it, e.g “wallpaper.py c:\wallpapers” and let it work his magic.

For the startup, all you need to do is a shortcut and drag it to your “startup” folder in “Start” windows menu.

I hope you’ve enjoyd it.

Download (1kb)

Source Code(25KB) | See Demo

Some love it, some hate it the way digg’s show their comments in a scroller way.
I for one, love it, in a sense that don’t make the visitor to go through every page to read user comments (boring…).

WARNING, this is only a prototype, we will not create DB or reply functions. It will only serve as a base, even though the rest can easily be implemented

HTML

To start, lets define our HTML. I will not stretch too much on this step. I will simple try to reproduce the digg comments style presentation.
index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Digg comment style</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="comments">
	<ul>
		<li>
			<div class="comment" id="comment_1">
				<div class="avatar">
					<img src="img/avatar.jpg" align="left">
					<strong>User</strong><br>
					<div  class="date">Today, 15:31</div>
				</div>
				<div class="message">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</div>
				<div style="clear:both;"></div>
			</div>
		</li>
	</ul>
</div>

<div id="scroller">
	<a href="#" id="vermais">See more</a>
</div>
<div id="status" style="display:none">Loading...</div>
</body>
</html>

Like I said, this is only a prototype, a div comment_1 is there only to make some data appear visible, obviously that if this was a production site, there will be a foreach.
You may have noticed that the div comment_1 is inside a UL and LI, this will help us in case you need, to have replys inside an comment, and became organized in a hierarchy way.

Look at this.

<div id="scroller">
	<a href="#" id="vermais">More</a>
</div>
<div id="status" style="display:none">Loading...</div>

Two divs, the last one status, will only became visible when we are loading through Ajax the next comments.

Comments

Since this is only a example, we will have to create a PHP file to simulate the comments request from ajax.
For our example I’ve created the file comments.php.

<ul  style="display:none">

<?
	$x = 0;
	while($x <= 10){
?>
	<li>
		<div class="comment" id="comment_1">
			<div class="avatar">
				<img src="img/avatar.jpg" align="left">
				<strong>User</strong><br>
				<div  class="date">Today, 15:31</div>
			</div>
			<div class="message">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				<br clear="all" />
			</div>
			<div style="clear:both;"></div>
		</div>
	</li>
<?
		$x++;
	}
?>
</ul>

Very simple, a loop to generate 10 comments everytime we make a request.
Notice the first line:

<ul  style="display:none">

This is very important, because in our example we will “animate” from jQuery all the comments that we are requesting, giving it a more smooth look (something digg still doesn’t have haha).
Where’s jQuery ???

Ajax

In the file index.php insert:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	$(document).ready(function(){
		$("#vermais").click(function(){
			var html = $.ajax({
			  url: "comments.php",
			  async: false,
			  beforeSend: function(){
			   		$("#status").css({'display' : 'block'})
		  	  	},
		  	  complete: function(){
			   		$("#status").css({'display' : 'none'})
	  	  		}
			 }).responseText;
			$("#comments").append(html);
			$("ul:last").slideDown("slow");
		});
	});
</script>

//insert before the </body>

This code it’s pretty simple, when the vistor hits the link with the ID #vermais, a request will be made from Ajax $.ajax to our page comments.php, and it will save this data on a variable var html.
We can see that there’s two more events, beforesend and complete, these will show and hide the div status, the one the shows “loading…”.

Using the function append we will add to our #comments div the data from the var html, and for last we will use our slideDown effect.

Do you remember our first line in the HTML file from comments.php ?
In case we don’t have it, the slideDown effect will not work, because it will be already visible from the start.

As you can see, it gives a nice effect, instead of the some boring “next” and “previous” comments pages.
Like I said, this is only a simple script on how to simulate this kind of presentation.

Cool things to add:

• Allow replys
• Replace “more” with the total pages, eg: 1-10 ; 11-20; 21-30; etc.
• Show at the page’s top the total of comments
• Allow to expand all of the comments and replys

Source ode (25KB) | See more

Source code (21kb) | See demo
I will assume that most of you already know jQuery, but if that’s not the case, this is a nice way to explore some of it’s features.
I did this menu in a couple of minutes, I can even say that it took me longer to write this article and to create the menu itself.
We live happy times my friends. Does anyone still remember the huge lines of weird javascript that was neeed it to create something that moved ?
I do, web dark ages. Fortunately today we have some great top-noch frameworks that helps us in this process, and let us have more free time and to work on what really matters. So let’s get going.

Skeleton

Let’s start by creating the html skeleton.
On the header we will put our jQuery library.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

Inside the BODY tag we will create our menu.

<ul>
	<li id="m1"><a href="#">Menu 1</a></li>
	<li id="m2"><a href="#">Menu 2</a></li>
	<li id="m3"><a href="#">Menu 3</a></li>
	<li id="m4"><a href="#">Menu 4</a></li>
	<li id="m5"><a href="#">Menu 5</a></li>
</ul>

We can’t already call this a menu, but we are in a good path.

CSS

Let’s give some color to this menu.

<style>
	*{ padding: 0; margin: 0; }

	.menuitem{
		width:100px;
		height:40px;
		list-style:none;
		margin:0px;
		padding:3px;
		font: 13px "Lucida Sans Unicode";
		color:#fff;
		text-align:right;
		float:left;
	}

	.menuitem a{
		display:block;
		float:none;
		height:40px;
		color:#fff;
		text-decoration:none;
	}

	#m1{ background-color: #ef9200; }
	#m2{ background-color: #d21044; }
	#m3{ background-color: #bf041d; }
	#m4{ background-color: #350d25; }
	#m5{ background-color: #251112; }
</style>

Action

Our menu is a little bit more presentable. But, where is jQuery ?
This is were we work our magic. Read the comment lines so you can understand better what is being done.

<script>
	//As soon as the document is loaded...
	$(document).ready(function(){
		//Let change the style class for every <li>
		$("li").addClass("menuitem");
		//Creates an event HOVER
		$("li").hover(
			//this is the function of hover
			function(){
				//stop all animations
				$(this).stop();
				//use the function animate, and enlarge the menu by 200px in 0,3sec.
				$(this).animate({width: "200px"},300);
			},
			//this is the function OUT
			function(){
				$(this).stop();
				$(this).animate({width: "100px"},300);
			}
		);
	});
</script>

And that’s it-
We have a sleek sexy functional menu, with clean code without the need of Flash or anything like it.
I hope you’ve enjoyed it.

Now, I don’t have the secret, that will involve knowing exactly how google’s algorithm work.
But what I will do, is to share some of my techniques that I use for myself, and how you can get filtred and indexed faster by search engines.

1. Be URL-google-friendly

People, for once and for all, forget urls like http://www.something.com/index.php?noticiaid=91919 and start using a more descriptive one, besides giving your site a more amateur look and feel, and even though Google will index it, it will be much fast to index something like, http://www.something/my-news-title. I think you can pretty much understand why this last url is much better, and yes, the hifen (-) works better than underscore (_), at least for Google.

2. 100% Flash ?!?! Google, don't read FLASH. Period.
I heard it will read in the future, but not for now.
I don't care how much animation, weird effects you can put in your flash website, for google your site is nothing more than a .swf file.
Flash is a powerfull tool, but base you site 100% in it is a huge mistake if you depend on content from search engines.
Besides, in accessibility terms, Flash is horrible. Imagine being a handicap visitor, and depending of software applications to read and retrieve the content. In html it's pretty straightforward, but what about flash ?

3. HTML

One of the things I’ve learned is that google loves to read HTML tags. Especially the relevant ones, like:

• Everytime as possible use ALT=”" and TITLE=”" over links and images, if you have a site with huge visual content it’s the best you can do. Does images.google.com ring a bell ?
• Forget content inside tables, better yet, DIE to TABLE, google hated them and so do I, used them only for what their name is for, data, not layouts.
• meta name=”description” , even tough it’s not too much relevant, it helps to have HEADER description of what the content is
• H1,H2,etc.. is fantastic for indicate a title or what’s the major content information is all about.
• Instead of B use STRONG
• FRAME and IFRAME are forbidden.

There are a lot more, more this will be a good start.

4. Link exchange

One of the things that will put your site on the top is Page Rank, this was a very important concern to SEO’s not so long time ago, it is still very important but not as in the past. PR is basically a way to let google know how many websites are linking to yours, and what is the link quality from their site to yours.
So, it’s a good strategy to exchange links inside other websites with the same ninche, or use social networks like digg.com or feedburner.com , or blogs, forums, etc. Spread the seed baby.

5. Sitemaps

Having a sitemap it’s a must.
A sitemap will help google dig around your site without too much effort finding new links.
A Sitemap is basically a xml file with all the urls from your website. Like the good old “Site map” links.

6. Accessible links

And for speaking in sitemaps…
Think on how your site flows.
Don’t use Javascript to activate/show/redirect links. Search engines will not know how to do it, so they will never find that link.
Yes, the sitemap could help in this cases, but why make it harder ?
It really wouldn’t cost to a have a more fluid website without requiring Javascript or Flash.

7. Tools

It’s worth nothing optimizing your site for SEO if you don’t know how to control the content that your visitors hit.

Google Analytics, It’s the best for this, besides having some cool statistics algorithms, Google Analytics you can check out what are your visitors search for, what type of content, what more days are they hitting, from which sites they came and so on.

Webmaster tools, another great tool from google. From here you can submit the sitemaps that we’ve talked about.

8. Update

Nothing more makes Google hating you than a site without updates.
So Updated you site often so it won’t be forgotten over time-

And that’s it,
I will try in the future to explain and focus a little bit depth in every one of these rules.