Day 006 - Tools - Writing

Web development is getting increasingly more complicated as time goes on. Gone are the days of learning tables, then divs, then CSS properties as they are invented and introduced.

Nowadays there's a Fucking Shitload of Stuff (Yes, that is a technical term in case you were wondering) with a multitude of various platforms, browsers and devices to test on. Luckily there's some great tools out there to help out with your workflow.

This topic could warrant its own site in itself, there's so much going on (If you're interested I've done a few screencasts), but for now let's concentrate on some JavaScript helpers.

First thing you're going to want is a Text Editor, there's a few out there, I'd recommend Sublime Text 2. Then you'll want to get Package Control. Once you've installed this, package installations are a piece of cake.

Open up Sublime Text 2, then press cmd + shift + p, you should see a new window open. You can then start typing and it will filter down, if you start typing package you can see all the package options that are available, we're after Package Control: Install Package when you have this selected hit Enter. This will now go and grab all the latest packages and again you can start typing for the package you'd like to install and it will filter down.

I find it handy to keep a gist of all the packages installed:

Bracket Highlighter
CSScomb
Dotfiles Syntax Highlighting
FileDiffs
JsFormat
JSLint
Package Control
Prefixr
SFTP
Side Bar
Closure Linter (Google) https://developers.google.com/closure/utilities/
SublimeLinter
Tag

Emmet (previously ZenCoding)
EditorConfig

Theme - Phoenix

The main 2 packages I'd recommend for JavaScript are; Bracket Highlighter, this is useful to see where code opens and closes. JSLint, this will output helpful improvements and help debugging.

As well as packages it's also possible to change the theme, I use a custom theme https://github.com/simonowendesign/Monokai-Phoenix fusing the beauty of the Monokai theme together with Phoenix which I find does a great job on improving the UI for Sublime Text 2.

When writing code you'll most likely find yourself using sections of code on a regular basis. This is where snippets come in handy, the snippet created in Day 005 allows you to simply type siaf which will then output the code to create a Self Invoking Anonymous Function.

Here's another snippet that you'll find yourself using over and over again:

# Console Log Snippet for Sublime Text 2:

<snippet>
    <content><![CDATA[console.log($1);$0]]></content>
    <tabTrigger>cl</tabTrigger>
    <scope>source.js,source.js.embedded.html</scope>
    <description>console.log()</description>
</snippet>

Here cl creates code that allows you to log to the console. Not sure what the console is? You guessed it! Head on over to Day 007.

Day 006 - Tools - Writing

Tweet