However, recently I decided to make a come back, but instead of being a job board, I decided to use it as an aggregator to other job boards out there.

Currently is includes jobs from 37 Signals, Authentic jobs and Krop.

Gowork@ has an awesome search engine that can easy filter jobs out. And users can save their searches and be notified when new jobs meet their criteria.

I personally believe that this is the best job aggregator for IT jobs out there. Let me know what you think

One of the things that annoys me is the fact the I can’t change the “/etc/hosts” file in the iOS (except if you jailbreak, I know I know).
I say this because I have lots of web apps in my local linux server that I would love to test it on mobile devices.

I normally add a virtual host for each site on Apache. However in order to make this work on my local computers, I need to change the file “/etc/hosts” and add something like

...
192.168.1.3 local.myapp.com

And every time I go to my desktop browser and type http://local.myapp.com/ this request is going to be redirected to 192.168.1.3 where my apache is installed.

Well, this is all fine and dandy, but you can’t do this on iOS (Again, not without jailbreaking it…) .

So how do you solve this?

Alternative solutions…meh…

There are various ways of solving it.
Some people install a proxy server like Squid, others install a DNS server like BIND.

Personally, I think this is a little bit overkill. I don’t want to configure proxies on and off on Safari, in my case I have an iPhone and an iPad, I would need configure both every time I needed to test it. And I definitely don’t want to waste time managing a DNS server, plus wasting system resources for such sporadic testing.

My solution

So what do you do ?
You hack your own LAN for fun and (possibly) profit.

What I do is, I “attack” my own LAN computers by performing a MITM (man-in-the-middle) attack and DNS spoofing the living shit out of my target router clients with Ettercap.

POC

The first thing you want to do is to install Ettercap in your Linux box.
I’m using Debian dist, but I know you can install it on OSX and Windows as well.

Install ettercap

$ sudo apt-get update && apt-get install ettercap

Enable IP forwarding

$ echo 1 > /proc/sys/net/ipv4/ip_forward

Edit /usr/share/ettercap/etter.dns

$ sudo vim /usr/share/ettercap/etter.dns

Add a new entry for your local domain host

...
################################
# My local web sites
#
local.myapp.com       A       192.168.1.3
*.myapp.com           A       192.168.1.3

192.168.1.3 should be the IP address of your local server where Apache is installed.
Save the file and quit to shell.

Start ettercap

$ sudo ettercap -i eth0 -T -q -M ARP:remote -P dns_spoof /192.168.1.5/ //

Make sure to change the IP address to match the one in your iPad/iPhone.
If you don’t know your IP, just touch in “Settings” > “Wi-Fi” > and touch in the blue arrow circle icon.

If you want to, you can target your whole LAN by using:

$ sudo ettercap -i eth0 -T -q -M ARP:remote -P dns_spoof 

After your entered that command you should see something like this:

ettercap NG-0.7.3 copyright 2001-2004 ALoR & NaGA

Listening on eth0... (Ethernet)

  eth0 ->	00:0C:29:90:8D:1F       192.168.1.3     255.255.255.0

  28 plugins
  39 protocol dissectors
  53 ports monitored
7587 mac vendor fingerprint
1698 tcp OS fingerprint
2183 known services

Randomizing 255 hosts for scanning...
Scanning the whole netmask for 255 hosts...
* |==================================================>| 100.00 %

6 hosts added to the hosts list...

ARP poisoning victims:

 GROUP 1 : 192.168.1.5 64:20:0C:06:FC:FB

 GROUP 2 : ANY (all the hosts in the list)
Starting Unified sniffing...


Text only Interface activated...
Hit 'h' for inline help

Activating dns_spoof plugin...

BAM ! We are all set, now open Safari in iPad/iPhone and visit http://local.myapp.com/ you should be seeing your local website.

This should show up in the shell terminal:

...
dns_spoof: [local.myapp.com] spoofed to [192.168.1.3]

Press ‘q’ to quit Ettercap.

Note: When you quit Ettercap, iOS will still cache this new IP. So make sure you refresh again your connection to flush you DNS cache when you no longer need it.

Erm…not working dude.

- Make sure you flush your DNS cache on iOs. You can do this by restarting your wi-fi connection. Sometimes it requires a few tries before it actually gets to work.

- Try the “ping” command and see if it’s pinging the right host.

Conclusion

And that’s it, for some it may seem a bit complicated, but remember that after the installation and configuration, you just need to run one command.

I think this is a much easier and cleaner way of testing websites with a virtual-host organisation.

Have another approach on this ? Leave it in the comments below.

It has been a long way since we used Javascript mostly to validate forms and show alert boxes.

Today we have so many good tools that allows us to write better front-end applications, that’s hard to keep up.

Recently I’ve been playing with Backbone.js, an awesome library that helps you separate content/logic in your front-end application. And while I’m no expert on it, one of the first things I noticed is that Backbone doesn’t explain how you should lay out your code.

This can be good, but it can also lead to architecture design disasters if not used correctly. Specially if you are developing multi-pages website.

So, in this tutorial I’m going to show you how to create a good foundation for your application using AMD design pattern with Backbone.js and RequireJs.

Notice: This is not a tutorial for beginners on BackboneJs or RequireJs. It's expected that you have some experiencie with these tools.


TL;DR

I show you how to create a basic boilerplate multi-page using Backbone.js and RequireJs.
I’ve placed a improved version of this tutorial on github.

Intro

I’m not going to explain in full detail what each of these libraries do, I assume most of you already know it, if not, just click on the likes above.

We’re going to create a sort of boilerplate, that can be reused in future projects, so in order to do this we will need a few extra things to keep everything tidy.

Bower Setup

The first thing you want to do, is to install Bower. This is a very light and solid package manager for the web. You can install/update/remove external vendor packages from your command line.

From your command line, create a folder somewhere in your web root folder.

$ mkdir myapp && cd myapp/

At the root of myapp/ create a new file called “.bowerrc” and add this

{
  "directory": "src/scripts/vendors"
}

This will make bower install it’s dependencies under the “directory” param.
Save the file and go back to the command line.

Create another file called “component.json” and past this.

{
	"name": "MyApp",
	"version" : "1.0.0",
	"dependencies": {
		"jquery": null,
		"backbone-amd": null,
		"underscore-amd": null,
		"requirejs": null,
	}
}

This file will allow Bower to install all of this dependencies for us.

Let the magic begin. From the command line type:

$ bower install

You should start see Bower fetching all those libraries from git and copying them into “src/scripts/vendors”.
By default, Bower copies the entire repository of each library. So it’s up to you if you want to delete some extra files you don’t want. You can also just specify a single file, but read the Bower documentation for more info about this.

Defining a directory structure

Now, let’s create our bundle root folder.

$ mkdir src/scripts/bundles

This folder will be the home of our bundles.

$ mkdir build/

This folder will contain our building scripts, that will merge and minify our dirs into an output dir.

Loading…

Now, let’s get our hands dirty.
Open up your favourite code editor, and create a file “src/index.html”

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width'/>
    <title>Backbone Boilerplate</title>
    <script data-main="scripts/main" 
        data-root="/myapp/src/"
        src="scripts/vendors/requirejs/require.js"></script>
</head>
<body>

    <h1>My title</title>

</body>
</html>

Notice that data-root is a custom field we add. This field defines the default web url root path. If your root path is “/” you can remove this.

data-main is the main entry point for RequireJs, this will load the file “src/scripts/main.js”, notice that we didn’t need to add “.js” extension. RequireJs does this for us.

So let’s create this file.

(function () {

    'use strict';

    requirejs.config({
        baseUrl: "scripts/",
        paths: {
            "jquery": "vendors/jquery/jquery",
            "underscore": "vendors/underscore-amd/underscore",
            "backbone": "vendors/backbone-amd/backbone",
        }
    });

    require(['app'], function (app) {
        app.initialize();
    });

}());

This file will be responsible for creating a config structure that will be used by RequireJs.

On line 17, RequireJs will need to include a “app.js” file, so let’s create it.

define([
    'jquery',
    'underscore',
    'backbone',
    'router'
], function ($, _, Backbone, router) {

    'use strict';

    // Add your modules routing here
    router.route("/*", "home", function () {
        this.loadModule("bundles/todos/main");
    });

    var root = $("[data-main][data-root]").data("root");
    root = root ? root : '/';

    return {
        initialize: function () {
            Backbone.history.start({
                pushState: true,
                root: root
            });
        }
    };
});

This file will allows to create our routing patterns for our bundles.
Inside the define() function, you’ll notice that it will include our dependencies and a new file, called “router”, you haven’t created this yet.
It will also start the Backbone History. Also, notice that it’s using our custom data-field “data-root” around line 15.

To complete our basic dynamic loading, we just need to create one last file. The router.js.

define(["underscore", "backbone"], function (_, Backbone) {

    'use strict';

     // Router
    var Router = Backbone.Router.extend({
        loadModule: function (module) {
            require([module], function (module) {
                module();
            });
        }
    });

    return new Router();
});

This file will create a new Object from Backbone.Router and add a new function called loadModule(). This function will load our Bundles dynamically. If you look at the file “app.js” you will see the following code.

router.route("/*", "home", function () {
    this.loadModule("bundles/demo/main");
});

This must be added by you. What this means is that everytime a url matches “/*” this will trigger an event that will load the “bundles/todos/main.js” file. We haven’t created this yet.

And we are done with the basic foundation for our multi-page app.
To wrap it up, here’s the file tree.

.
├── .bowerrc
├── component.json
└── src
    ├── index.html
    └── scripts
        ├── app.js
        ├── bundles
        ├── main.js
        ├── router.js
        └── vendors

Creating our bundle

The idea behind a bundle is to isolate specific sections of our websites in it.
For example.

http://www.myhost.com/ —> /src/scripts/bundles/home
http://www.myhost.com/users —> /src/scripts/bundles/users
http://www.myhost.com/invoices —> /src/scripts/bundles/invoices

And since we are using requireJs, we can easily create dependencies and share resources between bundles.

So let’s create a basic bundle.
Inside “myapp/src/scripts/bundles” create a directory named “demo” with the following structure

.
├── collections     --> Backbone Collections
├── models          --> Backbone Models
├── templates       --> Mustache Templates
├── tests           --> To store unit tests
├── views           --> Backbone Views
└── main.js         --> Bundle entry point

The main.js required by all bundlers. It will be used as the entry point when a bundle is loaded.

Here’s an example

define([ "./views/main"], function (MainView) {

    'use strict';

    return function () {

        var mainView = new MainView();
    };

});

This file will load a Backbone view object from “views/main.js” file.

Building

“Building” means that we will merge and minify/uglify our source code inside “myapp/src/” and output into a new folder “myapp/dist”.

We will endup with a single merged file for each bundle, and a single common file for our global dependencies like Backbone.js, RequireJs, jQuery and so on.

For eg. All of our files inside “myapp/src/scripts/bundles/demo” will be merged into one “main.js” file in the output directory.

As you know, this should be used on production only.

The major difference here, is that since we are using this for multi-page websites, we really don’t want to merge every thing into one big file, or having all bundles include the common libraries.

So by using the scripts below, we will organize our output code into single files that are loaded on demand.

When we created our directory structure, we created a dir at “myapp/build”.
Inside that directory create two new files

({
	appDir: '../src/',
	baseUrl: './scripts/',
	dir: '../dist',
	mainConfigFile: '../src/scripts/main.js',
	optimizeCss: 'none',
	paths: {
		requireLib: '../scripts/vendors/requirejs/require'
	},
	modules: [
		// WARNING: Do not remove this entry, it will be required
		// by all your bundles.
        {
            name: 'main',
            include: ['requireLib', 'main', 'app'],
        },


        //
        // Add your bundles here.
        // Make sure you always exclude 'main', 
        // unless you want to have
        // one single big file with every bundle 
        // and dependency. This is
        // not recommended.
        //
        {
            name: 'bundles/demo/main',
            exclude: ['main']
        }
    ]
})

In a nutshell, what we are doing here is specifying which bundles should be included, and make sure none of the bundles are merged with the “main” common scripts. Resulting in lighter files for the bundles.

r.js -o app.build.js skipDirOptimize=true
rm -rf ../dist/scripts/vendors
rm ../dist/scripts/router.js
rm ../dist/scripts/app.js
rm ../dist/build.txt

This is the build bash script. It will run r.js and output the result into “myapp/dist” and remove some unused folders and files.

You need to install r.js first.

$ cd build/ 
$ chmod +x build.sh
$ ./build.sh

You should start seeing a bunch of files being merged, and minified.
After it’s completed, you should see a new folder “myapp/dist”. It should contain all of your code, but without the vendors directory and other files like “router.js”, “app.js”.

Instead you should see only a “main.js” file. If you open this file it should include all the common libraries, including require.js

So in your new “myapp/dist/index.html” file you can change the script to

    <script data-main="scripts/main" 
        data-root="/backbone-boilerplate/src/"
        src="scripts/main.js"></script>

because “scripts/vendors/require/require.js” no longer exists.

Conclusion

And there you have it.
A basic boilerplate form multi-page websites using Backbone and Requirejs.

I’ve created a more completed boilerpate called Backbone-Boilerplate (creative name right?) that includes the concepts we are described here and goes a little further by using Unit testing, Template engine and including a Todo demo bundle for your to check it out.

I highly recommend your check this repository out, as it includes a more detail information on how to create bundles.

I also hope you’ve learned something, and if I missed or you have other suggestions please let me know in the comments below.

Although I love lots of rock bands and different styles, when it comes to coding I’m very, very picky.
One of the first requirements is that it can’t have people singing, or at least keep it to the bare minimum. I just find music with lyrics too distracting at times. I tend to concentrate more and get more productive while listening to hypnotic or haunting songs.

So while coding I normally listen to Post-rock, Downtempo, chill-out, progressive house and so on. Funny enough tho, I can’t listen to any sort of music if I’m learning something new.

Anyway, I decided to compile a few of my favourite albums while I’m hacking through the day/night.

Without any further due, here’s my favourite albums recommendations.

Burial – Untrue

Dubstep, 2-step garage, ambient
Listen

Deadmau5 – Lack For A Better Name

Progressive House
Listen

Explosions In The Sky – First Breath After Coma

Post-Rock
Listen

Gustavo Santaolalla – 21 Grams OST

Rock, Ambient
Listen

Hans Zimmer – Inception OST

Rock, Ambient
Listen

Justice – Justice

Electro-House
Listen

M83 – Saturdays = Youth

Electro-House
Listen

Mogwai – Zidane: A 21st Century Portrait

Post-Rock
Listen

Nine Inch Nails – Ghosts I-IV

Ambient industrial, dark ambient
Listen

Sigur Rós – Ágætis Byrjun

Post-Rock
Listen

This Will Destroy You – This Will Destroy You

Post-Rock
Listen

Trent Reznor – The Social Network OST

Dark ambient, post-industrial, experimental, electronica
Listen

Wolfgang Gartner – Weekend In America

Progressive-house
Listen

XX – Coexist

Indie Pop
Listen

Aes Dana – Perimeters

Downtempo, Progressive Trance, Ambient
Listen

Carbon Based Lifeforms – Interloper

Downtempo, Ambient, Acid
Listen

God Is An Austronaut – Age of the Fifth Sun

Post-Rock
Listen

Mono – Hymn to the Immortal Wind

Post-Rock
Listen

I’ve compiled all of these albums in a Grooveshark Playlist in case you want to hear it in the background.

Hope you’ve liked my selection, and let me know what are your favourite albums in the comments below

Learning Objective-C and Cocoa had a somehow steep learning curve, specially Cocoa framework. But hey, I did it. I’m now able to create Cocoa apps, and I’m very proud of this achievement.

However, I’m mostly a web developer, and in 2012 some technologies and trends slipped away from me due to my full focus on one language and framework.

In 2013 I’m hoping to fix this, I want to recover that time and get back on track on Webdev, even if some of it is also front-end related.

So to make it easy, I’ve compiled a small list of things I want to either learn or become more hardcore at it.

Here’s the main topics.

Languages

Javascript - I want to improve my currents skills, use better practices and understand some things better
PHP 5.4/5.5 - Learn the new features of PHP 5.4 and 5.5
Python (Due to Udacity courses I’m need to refresh my skills in Python)

Frameworks

Backbone.js - Everyone is using this lately, I need to get my hands dirty and create something out of it
AgularJS - Lots of people recommend this instead of backbone, I want to try both and see what fits me best
CoffeeScript - Heard good things about it, need to try it out as well.
Laravel - I saw their documentation and a  few videos and I got immediately interested in using it
JQuery - I need to go depth in JQuery, like javascript, code better with Jquery.
SASS - The new shiny thing for CSS, it looks awesome as well.
NodeJS - I have done a few things with nodeJS in early 2012, but I’m feeling rusty at it. So I may do a small come back here as well.

Services

MongoDB - Finally I need to get into NoSQL databases and learn/code something out of it
ElasticSearch - I’ve already tried SphinxSearch, now it’s time for ElasticSearch and it’s lovely JSON queries
PostgreSQL - I left PSQL in 2002/2003, I need to regain my skills at it and maybe ditch MySQL forever.

Concepts, practices and online courses

Unit Testing, TDD and BDD - I seriously need to start doing this, so far I’ve done just a little of Unit testing, I need more. (Shame on me)
PHP Standards - Code by PHP standards and stick to it
Hack Design - This is an amazing course for any developer who wants or needs to cross to design once and while
Udacity - Epic courses here, I’m committing myself to learn at least 2 or 3 this year

Books

Javascript – The Good Parts - Already read it by time I’m writing this. Good book to any JS coder.
The Pragmatic Programmer - Great tips on good practices, I need to finish it.
Code Complete 2nd Edition - I heard this is also a very good book, I need to purchase it first

Projects

Launch an OSS project (yet to be defined)
Launch a new Webapp (yet to be defined)
Improve Codebugapp

PHP today is hated and loved, and I’m not going into that path here, I’m very programming language agnostic. My mantra is “use what’s best for the job”. However, back then PHP was getting lot of traction, mostly because it was very easy to work with and to setup/deploy. Nothing, even today, beats the LAMP stack.

However, with great power, comes great responsibility. And in the beginning PHP was like that cool friend you had when you were a teenager, fun, irresponsible, doing fart jokes and it was easy for us to get along. The thing is, PHP grew, it’s user base grew as well, and today PHP is no longer that C-glued scripts. PHP is being used on entreprise level, on high-scaled websites, it’s complexity is also much bigger. Now we have amazing frameworks like Symfony, Laravel, Codeigniter, Kohana, Yii and other.

These frameworks help you build better and faster websites, but they can be quit complex internaly. So we need tools that help us understand how they work, how we can improve our code optimisation and so on.

In this article I’m going to show you some techniques I use to debug and profile PHP code.

Why var_dump(); sucks

First, var_dump(); it’s a cool function, it allows you to print out an object/array/variable content. However it’s being wrongly used as a debugger and to test things out. It’s amazing the number of developers that rely solely on this function and others like “print” or “echo” to test their code.

Why it sucks? Because it takes something out of context. You will never know what things got triggered along the way that make that variable hold its content.

Say for example your have a variable called $foo, that keeps returning false, when it should be returning true.
Using var_dump, you don’t get any solution to your problem, you only know what’s wrong, not how and why it went wrong. It’s like you are a detective and you know the victim is dead, but you don’t know why he’s dead.

You might say: “well, I can just put a few prints in the lines above that variable where I think it might be changing it”. Yes that might be true, but it’s still a trial and error thing. Catching bugs this way it’s a pain in the ass.

There’s a better way.

Meet Xdebug

What’s Xdebug? Xdebug is PHP debugger module, it allows you to step through your code and watch it in real time how your code is being processed by PHP interpret. With a debugger you are Neo from the Matrix, you can stop the time and see exactly how things work. How can you not want to be like that ?

By “things work”, I mean, you can literally see what function are being called, how and when variables change their values and what caused that change. You can even change a variable content in real-time. Beat that var_dump().

You can specify at which lines you want Xdebug to stop the code so in you can inspect, or you can just type “xdebug_break();” in your code to emulate a breaking point.

Using Xdebug is even more fun when you realize that you can do it remotely, from your hosting server, as long as you have a local copy of your code files you can set up breakpoints remotely.

It still beats me why PHP developers don’t use Xdebug.

I love Xdebug so much, that I even built a Xdebug client standalone for the Mac called Codebug. I created it because there weren’t real stable solution unless you wanted to use an IDE like PHPStorm or Netbeans, which in my case I didn’t. I’m in love with Sublime Text.
But if you use any of these IDEs, they already include a Xdebug frontend.

To install Xdebug it’s very easy, just follow these instruction here, or if you are using mac OSX with MAMP read it here.

Codebug – Xdebug frontend for mac

If you use PHP as a professional, you need to have Xdebug installed. Trust me, you won’t go back to var_dump() anytime soon.

Also, you can use Xdebug to learn how some class or function works. It’s a good learning tool for code you don’t exactly know how it connects.

But Xdebug isn’t just about code debugging, it also let’s your profile your code.
What profiling means is that, it allows you to see what parts of your code are using more memory, calls, and response time. This is a really useful add-on.

KCachegrind – Xdebug profiling

However, I can recommend something better for profiling.

Say hello to XHProf

XHProf was developed by Facebook development team. So you can imagine the complexity that is Facebook, and why they build this.

What this module does is to tell you exactly what parts of your code are decreasing your application performance.
Your page is taking 10 seconds to load and you don’t know why ? Try running it through XHProf.
This is a must-have tool if you care about your application behaviour.

It highlights the most memory/time consuming functions or classes in a red colour, and what was the origin of the function call in yellow, so you a complete path on how to get to that code hog and fix it.

Xhprof profiling image diagram

It’s very easy to setup and you can turn it on and off whenever you need.
I don’t know of any other tool for PHP that works this great.

Again, I highly recommend it. It’s an amazing profiling tool.

Conclusion

These tools that I’ve shown you, are only PHP related, they won’t work with your javascript code, or you database queries. Some of these techniques I will write some other time.

Web development is getting more complex each day, and we need tools that free us from doing boring tasks and we need tools that, not only helps us, but that actually makes us better developers by approaching problems in a more efficient way.

I hope you learned something new from this, and that this might help you work better with PHP.
If you have more suggestions or tools for PHP let me known on the comments below.

I was blown away how the community it’s so active and how extensible it is. I came from a VIM background, so I was a little reluctant to see if this would fit my needs. And it did, you can even simulate VIM by uncommenting just a few lines in the configuration.

However, this post is not about Sublime Text itself, but the plugins I use and that I recommend if you are a web developer.

10. Package control

This is a must-have plugin. It lets you install, remove and manage your plugins directly from Sublime Text 2. I’d love to see this plugin installed by default on ST2. I can’t recommend enough you use it, it’s the apt-get or nmp packet manager for Sublime.
After it’s installation all you need to do is to type shift + cmd + P, type “install” and ENTER.

9. Bracket Highlighter

Like the name states, it highlights the brackets, quotes and html tags. It’s a simple plugin, but helps a lot when working on big code files.

8. DocBlockr

One of the features I really missed from IDEs on ST2 was the ability to create PHPDoc style comments. This plugins does it, and not only it works with PHP, but it also supports Javascript, ActionScript, CoffeeScript, Java, Objective C, C and C++.

7. SideBar Enhancements

This plugin extends the sidebar menu, by adding lots of new and useful features like: Move to trash, open in browser, and even copy the content of a file as data:uri base64.

6. Prefixr

It allows you to run Prefixr on your CSS code. What it does, among other things, it helps get Cross-Browser CSS in place. So you just need to worry writing CSS3 code, and this plugin will do the rest.

5. Emmet

It’s a plugin based on the Emmet standard. If you never heard of it and you code in HTML, this will blow your mind. You can create complete layouts with just one line of code, press TAB and presto. Have a look a the official website. Highly recommend.

4. Git

Git is my favourite file version control system ever, and this plugin is a front-end for it. If you use Git on a daily basis this is a must-have. Very easy to work with, and after using it you rarely will go into the system console ever again to do common tasks.

3. JSLint

JSLint it’s a Javascript code quality tool created by Douglas Crockford, an Javascript hardcore developer. This tool helps you know what parts of your code you need to change in order to have a better sane code. Until now, you could only do it online, but with this plugin you can do it directly on ST2. If you are serious about Javascript you need this.

2. Sublime Linter

First off, you need this. This plugin is like a IDE itself, it finds errors in your code as you go. It supports dozens of languages, from PHP to Python, Java, etc..
This plugin is not only recommend but it should be mandatory.

1. Sublime CodeIntel

This is my favourite plugin for ST2. This plugins brings a little of IDE functionality into ST2. This plugin reads all your code and is able to code-complete, jump into definitions and function call tooltips.
Although sometimes looks a little buggy, it’s still worth having it around. It’s a huge time saver, especially when you are dealing with other’s people code.

0(bonus). Dayle Rees Themes

Even though ST2 comes with a beautiful package of themes, you might grow tired of it, so the Dayle Rees themes are an amazing beautiful eye-candy themes for ST2.

So I hope you find my top 10 ST2 plugins useful. Let me know if you use anything else that you’d like to share in the comments below.

This post is about choosing the right and correctly variables/classes or functions names for your code.
Picking up a good name convention in some cases eliminates the need for comments, because your code will explain what’s going on.

So, how do you choose a good variable naming convention ?

Use self-explanatory names

Look at the following code

foreach ($x as $c) {
	if($c->engine == 0) {
		...
	}
}

Now look at this

foreach ($cars as $car) {
	if($car->engine == ENGINE_BROKEN) {
		...
	}
}

The problem with the first is that, it lacks context, you may know what $x or $c contain, but a year from now or some other developer has no clue just by looking at that. You you see the “engine” there, but is it a boat, a plane, no…it’s wrongly used variables names (no pun intended).

In the second one, it’s obviously more verbose, but if your read it to yourself it’s almost english-readable. You can easily read it like “For each car in my cars check if the engine is broken and something about it” while the first one it’s pretty much cryptic.

So, avoid using single letters in your classes and code. They should only exists in very small pieces for code/functions.

Avoid long variables names

I see this countless times, sometimes developers get carried and create long useless, painful to read variables names.

Bad:

$firstNameWithCapitalizedWord = something();

$emailForUserWhoForgotHisPassword = something();

Better:

$firstName = something();

$userEmail = something();

The first example is horrific and I see it every now and then, long variable names are very hard to read and sometimes they include gratuitous context. You should never have more than three words as variable name.

Don’t use prepended junk

This is a classic mistake when it comes to variables.
you should never use prepended names for your variables. Here’s an example:

$Foo_firstName = ...

$MyCompany_totalEmployees = ...

Imagine this all over the code and it can be quite lame. Some will argue that this helps them identify code they created when working on somebody else’s code.
I say this doesn’t help on anything, as developers we have better tools to identify our code from the rest without having to add junk to our code.

Also, this is pretty bad if you are using and IDE, imagine typing $my and hit tab, all the variables will be listed, while if you used $firstName it should be a lot fast for the IDE and you.

Don’t be funny

Sometimes we are in a good mood and we reflect that in our code, but don’t be the funny variable name guy

$OMFG = 12;
$ForeverAlone = true;

While this may be funny to read, it’s not really that funny when a year from now you don’t have a clue what this does, worse, your co-works have no clue what it represents.

Don’t be redundant

This one is also a classic mistake.

$stringName = "Joe Doe"; // It's a name, so obviously it will be a string, not a boolean duh!
$intAge = 28; // Ages are always numeric..no need for int there
$peopleArray = array(); // This one is even more self explanatory 

I’m using PHP here, since it’s a dynamic language it’s easier to follow on this trap.

This so called “art” can define the future of your application, the sanity of your team, or worse, the future of your company.

Am I exaggerating ?

Not really. If you are a programmer with a few years of experience you’ve probably already seen this countless times, hell, you’ve probably done this already which is the so called messy, undocumented, untested and hard to read code.

Here’s a fictional story that I know lots of you can relate.

Meet Foo Inc.

The Foo Inc. company is about to release this new amazing app.

In the beginning everything was fine and dandy, the software appears to run, so the managers were happy. The developers know they could’ve do much better job than this but it’s to late to refactor, that would mean to create everything from scratch. Yes, they didn’t follow good development methodologies because they thought it was too boring and it wasn’t really that necessary.

And over time, their code is getting bigger, fattier, ugly and buggier, to the point that when a new change it’s needed a new bug pops out from some other place. So they quickly patch it, to get it over with it, and fingers are crossed.

So, the next time a new feature it’s added, they go back to that glue-patched-cryptic code and add more spaghetti code. At this stage some of them think it doesn’t even matter anymore, they just want to add that functionality to that beast and get the hell out.

Developers get demoralised, and eventually some of them quit. So the company has to replace them. They hire new people. But since this app code is uncommented, patched to the bones and cryptic, the new developers have hard time understanding it, so they talk to the managers and decide that they need to start over, a clean slate.

Now you can see where this is heading. There’s a new buzz in the company, and every developer wants to be part of this new “version”. It’s a breeze of fresh air, it’s like starting over. But it’s getting worse, because now they have two versions to maintain and nobody want’s to be part of the “old” code team.

So this company is spending more money, more resources into something that should be done right from the start if they enforced their developers into using good coding practices.

To some companies, this could be their end, the first version of the software could be so bad that they don’t have any more money to hire new developers or create a new version from scratch, because they got not clients for the fact that the first version had so many bugs that nobody bought it.

So…what’s clean code ?

Clean code it’s when you read it and you know the developer cared.
When it runs all the tests, it’s well documented, meaningful function, classes and variable names are used, it avoids code duplication. It’s when software methodologies are in place. In the end, clean code it’s when you learn how it works by just looking at it.

This is not something you learn from day one, it’s something your learn over the years. It requires practice and good taste, and this it’s why it’s called “Art”.

Explain to your team and your company why this is so important, why it’s important to use good coding practices and extend the deadline if needed in order to make your code better.

I’ve read this in the “Clean Code” book once:

Leave the campground cleaner than you found it

It really represents the Art Of Clean code mantra.

It’s where I will post my ideas, opinions on software development, programming techniques and basically everything I feel it fits the topic.

Some of you will agree, some of you won’t, other won’t even know I exist.

In the end it really doesn’t matter as long as I, somehow, help some folk out there, bring some sort of discussion to the table.

I hope I teach something good and useful for any of you, as I hope to learn from everyone else too.

Cheers