Switching from Windows to MAC for development

About two months ago I switched to using my Macbook Pro for all my development. So far it has been pretty awesome.

The Terminal: Using a UNIX-based terminal is awesome, especially with built-in SSH! However I’ve switched from using the built-in terminal to using iTerm2 which with its “visor” mode I can have a terminal (or more) at my finger tips with a single key press.

Alfred App: (website) Probably one of the best programs I’ve ever used. Insanely fast, customisable and an immense time saver. Since installing this I’ve not once used either launchpad or the applications folder. With the ability to extend it with plugins you can do pretty much anything with only a few key presses on the keyboard!

Better Touch Tool: (website) This is an absolute must for anyone using the magic mouse. I’ve also become fairly accustomed to the “Windows 7 Like” window snapping feature which I’ve missed in OS X. Checkout my setapp.me page to view all the applications I’m using.

I’ve also switch from using Netbeans to using Sublime Text 2 (even though Netbeans works with OS X). I honestly thought it would be quite a shock switching from a full-blown IDE to a “simple text editor” however I’ve barely missed any of the features. The one thing I really love is how, if set-up correctly, your fingers barely have to leave the keyboard. With functionality to very quickly open files (yay fuzzy searching); plugins to perform file system functions; being able to jump to functions or css selectors in a file; automatic alignment; indent setting auto detection and blazing fast speed it really meets all my requirements.

The main thing I’ve missed is the built-in ability to act as an XDEBUG client, however MacGDBp for OS X has proved fantastic.

CakePHP session cookie path

Recently when working on a CakePHP 2.0 project I came across the situation where I needed to have the session cookie saved in the “base” directory.

To accomplish this simply put the following line into your app/Config/core.php within the Session configuration

'session.cookie_path' => str_replace(str_replace(DS, '/', str_replace(ROOT, '', WWW_ROOT).'index.php'), '', $_SERVER['SCRIPT_NAME']).'/' 

This sets the cookie path to the same path you get from, within a controller, calling: $this->base

Camera Lens

Accessing the webcam in javascript

Recently I’ve been looking into the getUserMedia/Stream API which allows Javascript direct access to a users webcam. I decided to throw together a small jQuery plugin which will allow you to stream the webcam into an element of your choosing.

You can view it on Github https://github.com/SamFleming/userCam

View the demo here http://samfleming.me/examples/userCam/.

At the time of writing only Chrome 21+, Opera 12 and Opera Mobile 12+ support this (view browser support here).

You can also stream the webcam to a canvas and access the raw data to create some really awesome effects. I’ll make a blog post on how to do that using the plugin soon!

Checkout some of the other awesome demos out there, especially WebCam Toy.

If you want to find out more about getUserMedia and applying effects checkout a recent article from the Chromium blog http://blog.chromium.org/2012/07/introducing-getusermedia-and-javascript.html

Get an elements index within its siblings in jQuery

Recently when working on a project I came across an issue whereby I had to workout the index of a <div> element, relative to its siblings, but only within other <divs>. Normally you would use the jQuery .index() method to get its index:

<ul id="list"> 
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
$('#list').on('click', 'li', function (e) {
    console.log('Li index = ' + $(this).index());

However method also accepts a “selector” parameter allowing you to specify what it classes as its siblings. This allows you to get an index when you have different types of tags within the same parent – perfect for a definition list:

<dl id="list">
        <dd>Having the size, form, or characteristics of a tree; treelike.</dd>
        <dd>Shaped like a rhomboid or rhombus.</dd>
        <dd>A fear of dirt.</dd>
// Store a reference to the list definition terms
var definition_terms = $('#list');

// When a term is clicked log the index of the clicked item
definition_terms.on('click', function (e) {
    console.log('Dt index = ' + definition_terms.index(this));

You can check it out here:


Sass - Syntactically Awesome Stylesheets

Initial thoughts on Sass

So if you haven’t already checked out Sass I highly recommend checking it out http://sass-lang.com/. It extends CSS and pretty much speeds up your development. To start with Sass I first read through the tutorial and then left the reference open during my first project.

I’ve been using it for a few days now and it has really made life easier – between mixins and nesting selectors it has helped save precious keystrokes.

I primarily use Netbeans for development therefore have installed this plugin http://plugins.netbeans.org/plugin/34929/scss-support which I have been happy with. The only downside is that (for some reason) if I put a variable at the top of a SCSS file it completely screws the syntax highlighting for the rest of the document :(

After noticing this issue I switched to using Sublime Text 2 and installed the Sass plugin for that (using the Sublime Package Manager) which has been fantastic – the only downside being no compile on save like the Netbeans plugin. However using sass –watch is easy enough.

Overall it has definitively saved my fingers some strokes and I shall most likely continue using it.