If you hand code your website pages (like we do at Clearmedia), reducing the amount of times you punch letters on the keyboard can drastically improve productivity and therefore increase your profit margins.
Over the years I have tried various methods, technologies and programs to make coding an easier and faster process. The following are what I find to be the perfect combination for smooth and quick front end web development.
Sublime Text – text editor
A fully featured and easily customisable text editor, Sublime text (we use version 2) is a lightning quick but sophisticated program. Easy to use and with a slick minimal interface, there is nothing I have come across that I haven’t been able to handle using this program. It features syntax highlighting for just about every language, has awesome find / search tools, multi-selection edit functionality and there’s a massive plugin repository that is constantly being updated.
By far my favourite feature of Sublime Text is its Rich Snippets. There are loads of pre-defined snippets you can use by searching (or using shortcuts if you already know them), but you are also able to simply create your own snippets and associated shortcuts to speed up repetitive tasks or frequently used code blocks.
If you’re looking for a great text editor or just want to check it out – head over to the Sublime Text website and see for yourself.
Emmet – abbreviations for super quick coding
Available as a plugin for Sublime Text 2 (and just about every other text editor out there), Emmet is by far the quickest way to hack out a whole bunch of code in record time. Formally known as Zen coding, it provides a whole bunch of abbreviations that gets converted on press of your TAB key. I could really go on and explain every type of abbreviation available but I think and example is the best – after all seeing is believing!
By typing something simple like this:
When you hit the TAB key you get this:
As you can see, it saves you a whole lot of time typing or copy/pasting!
Koala – LESS / SASS pre-processor
Now I was a slow adopter of using LESS (or SASS if you prefer) for streamlining my development, but once I got started I can’t imagine ever writing style code any other way. Just the ability to use variables, mathematical functions and nesting is more than enough to make me a convert for life.
It seems the standard these days is to pre-compile your LESS files into one standalone CSS file, mainly for improving page load times by not having it compiled at run time. So this means there has emerged a plethora of programs that run in the background on you machine and compile the raw LESS into CSS for you.
I’m not sure why I eventually settled on Koala for this purpose, but I do love the real-time compilation and error notifications. Every time you change any one of your LESS files, if something is not right, Koala will pop up a big red error message highlighting your mistake but if all is ok, will save all files and compile into either a full length or minified CSS file. Pretty neat hey!
If you are going to use LESS or SASS for pumping through your front-end dev work, I would suggest you take a good hard look at Koala.
CSS refreshFrame – automatic page reloading
This bookmarklet is just one of those awesome time saving technologies that make life in code land a bit more bearable. Drop the bookmarklet onto your bar and when working on a page click the link. Rather than having to refresh / reload your page after every little edit – it listens for changes and reloads automatically. Brilliant.
Get it now and stop driving yourself insane “command + r”ing every 20 seconds!
So that wraps up our top 4 tools for speeding up your front-end web development. I urge you to employ them all now (if you aren’t already) and start spending more time on the things you love; well love more than coding anyway 🙂
Feel free top drop us a comment if you have any other suggestions that we may have overlooked!