Tools of the trade

This is a continuation of the series on what happens behind-the-scenes during the development process when I work on a site or project. Today, I will outline some productivity shortcuts that I use constantly that makes an hour of my time these days worth a few hours of my time when I first started out. I'm going to start out with smaller things and work up to the major ones.

• First up is a small program called SlickRun. It is a launcher for Windows. It's highly customizable and very handy - it also comes with something called QuickJot, which is a tiny program that lets you put in arbitrary text and stores it for you (it is completely persistable, in that it will re-appear even if your comp crashes). You call up SlickRun with Win+Q and QuickJot with Win+J. These two shortcuts are now almost like reflex reactions.
  Why are they important? Well, pressing Win+Q then "ps" pops up Photoshop, "wiki" and then a query opens up a new tab with search results in Wikipedia, "ie" pops up IE; the list goes on. It's very handy.
  Win+J is also a time saver. It lets me hold something in memory while copy-pasting, like license keys, unformatted HTML, etc. and is also my place to store ideas that I have that I can think about later.
• In the same vein as the above is a small utility called AutoHotKey. It allows you to program "macros" for Windows. It's hard to describe, but you can make it do just about anything. I've currently got it only doing basic text-replaces for things I type so often that I would get RSI doing it as many times (URLs, my email addresses, the basic HTML template page markup, etc.) It's very powerful though, and I could technically replace SlickRun with it if it weren't for QuickJot.
• In order to keep track of projects and to estimate my time, I use a program called ToDoList. It is very easy to use, and in all my searching, I haven't found a better tool.  I am consistently getting very good results for my estimations these days, as I can look back on previous projects and use the estimated/actual times from them to help me.
• Coming in to actual coding, I've got my IDE of choice - NotePad++. It has some excellent features and plugins by default, which save me a lot of time: ZenCoding plugin, escaping " to \" and back, upper/lower case, HTML Tidy, block and line duplication, multi-caret (allows you to type the same thing in multiple places in the file simultaneously), search-replace in multiple files, conversion of tabs to spaces and back, split line by clipboard character, and so many other little things that can all be assigned keyboard shortcuts. Some very common scenarios are below:
  
  • Inline CSS to block
    
    Say I had this CSS:
    
    #elem { background:transparent url(/someurl) no-repeat 0 0; color:#FFF; text-decoration:none; display:block; padding:3px 0 5px; margin:0 5px 0; }
    
    Now I want to re-write it block-format. All I have to do is copy ";" to the clipboard, highlight the line, hit my shortcut (Ctrl+Alt+1) and it splits it all into lines that I can re-indent with block-level indenting with the tab key.  You might think to do this with a search-and-replace, but this is a lot quicker.  For search-and-replace scenarios, I use The RegEx Coach, which I'll discuss later on.
  • ZenCoding
    This is possibly the the best plug-in for an IDE that was ever made.  It is completely unbelievable that you can type the following:
    

    table#someID>(thead>tr>th*4)+(tbody>tr*2>td*4)

    and get back this:
    

    <table id="someID">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>  

  • HTML Tidy
    
    This plugin allows you to take some formatted text, say from a Word document, and convert it to HTML using configurable settings, saving you hours of typing and formatting. Of course, you need to do some work configuring it to be useful (it's not by default), but once you have it down, you can enjoy hours of saved effort.
    
• The Regex Coach is a program that I use almost constantly. You can say that I might be a little like the character in XKCD who proclaims, "Stand back! I know Regular Expressions!"
  
  I don't think I can name a single project where I have been given copy to put on a page, and I did not use this program to reformat the content into HTML for me (usually to shove into HTML Tidy).  It's blazing fast too.  For instance, let's take the example of my previous blog post, where I needed to list out the RSS feeds that I use.  The program only exported the feeds as "OPML", which was not useful to me.  I used the Regex Coach to pull out the important bits (URL and feed name) and used the replace function to generate some nice HTML anchor links as shown in the image below (the four text fields are my search expression, the original string that I needed to format, my replacement expression, and finally the HTML markup I could use in my blog post).
  
  
  
  
  There is the added advantage that using this program has taught me a lot about regular expressions in general, and I am confident about a lot of concepts like look-aheads, greedy * and +, grouping, escaping, and which abilities are available in the languages I use. Also, I now know a lot more of the inner-workings of the engines, and can plan for optimization. I would not say I am an advanced user of regular expressions, but I am a lot further up than when I first started out.
  
• Firebug/IE Developer toolbar/ Webkit Inspector
  These tools are miles apart in terms of their capabilities, but together, they let you debug just about any problem you have with front-end development.  My general rule-of-thumb is: use Firebug first; if there is a problem with it or to debug $(document).ready, use IE.  Use Webkit inspector last.
  
  I don't particularly like the Webkit inspector as an alternative to firebug.  I find it doesn't scroll into view the correct element, and you can't edit the properties like you can in Firebug.  In fact, with Firebug, you can edit all the HTML/CSS on the page and see your changes live, while using the console to make changes to the scripts or to do further modifications via jquery.
  
  What Firebug lacks, the Web development toolbar add-on can fill in.  You can peek at all the javascript on a page, all the CSS, manipulate forms and elements, and outline specific groups of elements in  a page (broken images or table cells, for instance).
  
  I find myself using IE's dev toolbar a lot to debug javascript, as it throws a bigger tantrum for errors.  Some errors just don't show up in Firebug, especially when they are in the $(document).ready function.  Of course, as with all other things in javascript, the error messages themselves are completely useless, but at least you know that an error occurred!
• Javascript beautifier / Closure compiler
  
  These two tools go hand-in-hand.  The Closure compiler minifies javascript for you, and the js beautifier allows you to glimpse minified javascript and trace out what others have done.  This is useful in certain instances like when using third-party tools in inherited projects, when you don't really have access to the code but need to debug a problem.  It has helped me before to look at problems with Sharepoint's weird functions for dynamic menus (especially the nefarious left-hand nav), Omniture code (don't get me started), and to catch a glimpse into how certain sites accomplished some javascript that I thought was interesting (20 things comes to mind).

The combination of these and other tools let me confidently declare that the present me is orders of magnitude more efficient than the me from 5 years ago who was just starting out professionally coding websites. This doesn't even take into account the efficiencies in actual code - just in the tools that I have learned to use.