Category: code

Code linting for JS, CoffeeScript & CSS with Sublime

Code linters are tools that analyze code and flag suspicious portions of it. It encourages proper usage of the language and can detect flaws that compilers can’t by enforcing best practices.

SublimeLinter brings linting to the Sublime Text code editor. It supports JS, CoffeeScript and CSS (among others).


Save yourself some trouble and install SublimeLinter via Sublime’s Package Control plugin.

Interestingly enough JS (and CSS) linting runs on JS and therefore needs a JS engine (Mac OS X comes with JavaScriptCore but you will be using node.js in 99% of the cases)


If you need to edit your setup you’ll do so on the user file: SublimeLinter.sublime-settings (Preferences->Package Settings->SublimeLinter->Settings - User). Here you can indicate, for instance, the path to node.js if it’s not found in its default location.

JS Linter

JS linting is built both via jslint and jshint and can be configured as follows:

"javascript_linter": "jshint",

If you don’t have an opinion on jsHint vs. jsLint, you are probably better off sticking to jsLint. And if you are curious you can read about their differences and (all the drama).

The main advantage of jsHint is that it is highly configurable (see details:

    "curly": true,
    "evil": true,
    "regexdash": true,
    "browser": true,
    "wsh": true,
    "trailing": true,
    "sub": true

CSS Linter:

Can be configured as well through csslint_options.

CoffeeScript Linter:

Will run without any special setup as long as the coffee package has been installed in your machine globally. If CoffeeScript is not installed in your machine, you can easily intall it running the following command (you should have Node Package Manager installed):

npm install -g coffee-script

How to use

If everything went ok while installing you should be all set once you restart Sublime. Offending lines will be highlighted and the status bar will give more details just by hovering those lines.

Sublime Text code hinting

Support Sublime.

Book review: Mobile First

Introduction to mobile best practices, intended for designers/UX folks with limited mobile exposure. The book failed to convince me that “mobile first” is valid premise.

Good read but not a book for coders really.

My favorite quote from the book is this:

Your time is precious so this book is short and to the point.

And so is this review.


  • Level: beginner/intermediate
  • Who is this book for: designers/UX folks with limited mobile exposure.
  • Rating: ★★★ (3/5)

node.js, the morning after

Follow up post to Getting started with node.js covering the basic node app setup (package.json), npm package manager and the connect and express frameworks.


This file, located on the root of every node project, describes the basic configuration of your app. Mainly in contains metadata describing the app itself. It also details the package dependencies needed for the project.

    "name": "myApp",
    "author": "omarrr",
    "description": "my first node app",
    "version": "0.0.1",
    "dependencies": {
        "connect": "2.3.6",
        "express": "3.0.0beta5"
    "engine": "0.8.1"

where “engine” describes the version of node this app is running under.


npm (node package manager) comes pre-bundled with node, it installs packages and manages dependencies

npm is to node what rvm is to Ruby.

npm install [package]

Install the dependencies in the local node_modules folder. npm defaults to always install all packages locally to your current project. You can overwrite this behavior with –global (but it’s probably a good idea not to 🙂

Basic usage

npm install

Will read the package.json file in your app dir and install all its dependencies

npm install package

Will install the package (registered with npm) in your local folder


Selfdescribed as a “middleware framework for node” (or rather node’s HTTP server), Connect it’s build to easily plugin other middleware and comes itself bundled with a selection of them.

Connect is to node what Rack is to Ruby.

You can install connect by simply running:

$ npm install connect

This will create –if needed– a subfolder in your app folder called “node_modules” where connect can be found (and it’s dependencies under another “node_modules”).


Express is a “fast, unopinionated, minimalist web framework for node”. Express sits on top of Connect to extend it, as Connect sits on top of node’s http.

Express is to node what Sinatra is to Ruby.

You can install express by simply running:

$ npm install express

This will also store the package and its dependencies under the “node_modules” folder.

Creating a fresh Express app

Express can also easyly generate an app skelleton for new express+node projects.

To do this, express must be installed globally:

$ npm install -g express

Once express is globally available it can create the app

$ express myApp

This will create a new folder named “myApp” and create a new node server app that utilizes the Express framework.

Next we need to install all the new project dependencies (listed on the newly created ./myApp/package.json)

$ cd myApp
$ npm install

Now we can run the server

$ node app.js

Getting started with Node.js

Easy as pie install of node.js.

Although Node.js is frequently mentioned as a backend alternative to Ruby on Rails it is neither a language nor a framework. Node is an asynchronous I/O library build on V8 (Google’s open source JavaScript engine). Express.js is a framework built on top of node.js and it’s a better comparison to RoR than node itself.

From Node’s site:

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Installing node (& npm)

Donwload (on Mac get PKM) from & double click easy installer 🙂

Testing node

Write a hello world example: ‘hi.js’ (from nodejs)

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello Worldn');
}).listen(1337, '');
console.log('Server running at');


$ node hi.js
Server running at

Goto to check out the results

No markup whatsoever. Inspecting the source code of the page will get simply:

Hello World

Done and done.


REPL (Read-Eval-Print-Loop) is an interactive shell for node that can be invocated by simply calling node with no app.js to execute. It works just like the debug console in Chrome.

$ node

> 2+3
> console.log('hi');
> ["Hello","Word"].join();

What’s next

Testing express.js, a framework over node, installing brunch, an app assembler and scafolding tool build on top of node, integrating node backend with a front-end MV* framework such as backbone.js, etc, etc, etc…

Book review: Responsive Web Design

‘Responsive Web Design’ is a perfectly succinct and to the point introduction to the topic. It covers both the philosophy behind responsive design, the design principles to make it happen and the actual code to put it all together.

The key learning of this book can be sumarized by the following quote:

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:

  • A flexible, grid-based layout,
  • Flexible images and media, and
  • Media queries, a module from the CSS3 specification.


The book covers multiple topics: scalable typography (w/ CSS’s em unit), the math behind adapting a grid-based layout to be flexible, fluid images, how to approach media queries and what are the most useful breakpoints, introduction to device vs display units and the viewport, the “mobile first” philosophy,…


  • Level: intermediate
  • Who is this book for: mid to senior level developers inexperienced with responsive design/development.
  • Rating: ★★★★ (4/5)