Moin Zaman Web & UX Ninja ♦ Investor ♦ Powerlifter ♦ Nutrition Nut

Can you code faster than me?

5 Sep 2011

I recently gave a 5 minute presentation in Melbourne at an event oragnised by John and Maxine of Web Directions fame. My talk was titled 'Uber Ninja Coding' and was a walkthrough of some tips & tricks that I use everyday to speed up my coding significantly. I was quite pleased to get a 3rd place audience vote out of the 11 speakers that night. The feedback I got afterwards from folks was that they could start using this stuff straight away.

The screencasts of the presentations and audio from Melbourne and Sydney are up now. Some great ones to check out there.

I'd like to put my recipes down here as a reference and go into some more detail about things, my specific setup etc.

Background

I am a lazy bugger, esp. when it comes to coding, which is actually a good thing :) If something shaves even a few seconds, I obsessively want to know how to do it and make it part of my toolset.

So here are the ninja tricks I presented in the 5 minutes I had.

Warning: I am a proud Windows 7 user. Mac alternatives do exist unfortunately. Unix fan's mileage may vary.

Autohotkey text expanding hotstring foo

I love this. Its custom DIY regex autocomplete styles but its system wide and not just inside your editor. So if you're coding in notepad++ or in IntelliJ, or you like to jsfiddle, or answer Qs on stackoverflow, you'll be hooked up everywhere.

Ingredients:

• AutoHotkey - an macro and automation scrpiting
• 1 simple hotstring script - for simple text expansion
• 1 advanced hotstring script - for numeric replacements
• Any editor or anywhere that you can put your cursor to type

Recipe:

1. Go install AutoHotkey
2. Save the two script files above somewhere and double click to run them.
3. Go try it out. Open up an editor. Type in html and hit Tab. Voila.
4. Optional: Put shortcuts to the script files in your Programs -> Startup folder

Note: You do need two separate scripts or else it won't work. All snippets and shortcuts should be self explanatory in the script files below.

Zen Coding

Sergey has made this absolute gem. This thing allows you to code markup as you think. Almost. You can read up the details on all the cool things it can do, meanwhile here's my setup and some of the stuff I did.

Ingredients:

• Zen Coding Plugin for your editor - I use the Notepad++ plugin. Other plugins are available for most major IDEs and editors.

Recipe:

1. Drop the Zen Coding Plugin for Notepad++ into the Program Files\Notepad++\Plugins folder.
2. Restart Notepad++.
3. A 'Zen Coding' menu should be available in the top menu bar.
4. Try typing in div#page.foo>div.logo+ul.nav>li*5>a[href="www.foo.com"] and hit Ctrl+E. Voila!
5. You can also try hitting Ctrl + Alt + ] to go to the next edit point quickly.
6. Another thing to try is a list of items in plain text, each item separated by a new line, then hitting Ctrl + Shift + A, then entering ul>li*>a and hitting Enter to wrap this with markup.

Firebug extensions

There are a bunch of very useful firebug extensions, Yes, not firefox add-ons but firebug extensions that add some cool functionality to this already indispensable development tool. One I use everyday that I spoke about is FirePicker. It adds a color picker to any color property in the CSS pane. Very handy when trying out things and designing in the browser.

cssUpdater

Ever wish you didn't have to copy paste styles over and over again from firebug to your css file? The cssUpdater add-on and accompanying AIR app make it possible. A few things to watch out for but it will definitely save you time.

Ingredients:

• cssUpdater Add-on for Firefox.
• cssUpdater AIR desktop application.
• cssUpdater code from the cssUpdater website after regsitering.

Recipe:

1. Install the add-on and the AIR app.
2. Restart Firefox.
3. Start the AIR app and enter the validation code you got from the cssUpdater website.
4. Drag a CSS file from your computer into the bottom part of the AIR app.
5. Open the html file that links to the CSS file above in Firefox and edit using Firebug.
6. Add or change some properties and then hit Sync in the AIR app or hit Sync from the cssUpdater tab in Firebug.

Note: If in your CSS you leave the ; out on the last property, cssUpdater will append a new property from firebug without adding a ; before it. So you'll have to add the ; at the end of all properties.

Wrap Up

Thats it for now. I've got more ninja tricks up my sleeve and some that I'm still refining at the dojo. Watch this space for more uber ninja tricks to come.