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.

Keeping up

This is the first of a series of articles geared towards explaining how I work, and what you don't get to see about me during the hiring process. These are productivity shortcuts and techniques that I've adopted over the years that allow me to justify my claim that my time is highly efficient and productive.

The list below is a current view of all the RSS feeds that I currently have in my reader of choice (the desktop app Klipfolio, which is powerful, lightweight, and incredibly reliable). I've been using Klipfolio and a lot of these feeds for over 3 years now, and they have served me well.

• Slashdot
  I use it mainly for reading the comments, as the news takes a little while to get posted on the site by the curators. The users of the site are often knowledgeable and humorous.
  
• TEDTalks (video)
  This should require no introduction. I discovered it a few years ago and combed through and watched all the videos that interested me, and have since combed through the videos as they get added to the site.
  
• Hacker News (Ycombinator)
  This is my main source of information related to my programming and entrepreneurial activities. The stories and great and get to me before any other source. The comments are generally good, but I don't really read them as I read the articles long before the comments start to appear on the site. Also, the links go directly to the article and not to the site itself, so I manually go back to the site to read comments if I think that the article needed further elaboration.
  
• The Economist
  I don't read it as often as I used to, but the Economist does have some of the best written articles out there.
  
• GlobalPost
  The GlobalPost also has some very well written articles, but again, I don't have the time these days to go through them unless they are really of interest to me.
  
• optics.org research channel
  They specialize in optics, naturally, but they do feature a unique slant on the news stories. For instance, you might read an article about the full-body scans and the public outcry and media fanfare in other feeds or through other media, but from optics.org you get the perspective of the technology itself: what imaging techniques and apparatus are used, and other technical details you would not find elsewhere.
  
• Core77
  It is a good source of web development news.
  
• Smashing Magazine
  This one is mostly targeted at web "designers," but does feature occasional articles geared towards web developers. It is a little skewed towards introductory-level techniques, but if you find yourself in that boat (as I often do), it offers a good introduction and features some good out-bound links.
  
• Yanko Design
  This one is mostly to look at design inspiration, as most of their features don't exist (and probably can't exist). It offers a good perspective on UI though, as a lot of the designs feature unique views for interacting with objects.
  
• Six Revisions
  You find more in-depth articles here than Smashing Magazine, and it is a bit more skewed towards web development than web design.
  
• QuirksBlog
  It is always good to keep up with his research and tinkering.
  
• ReadWriteWeb
  This one is a fairly recent addition to my feeds. It features a lot of very current work in real-time uses of the web. You would find information about XMPP, node, and other technologies geared towards providing interactivity and presence in real-time across the web using existing protocols and technology.
  
• WebWorkerDaily
  GigaOm - I purchased the annual subscription, mainly for their work with inspecting the current state of mobile technology, but their articles are generally good.
  
• GigaOM Pro
  See above
  
• myNoSQL
  This is the latest addition to my feeds. I just couldn't keep up with the noSQL trend as there are so many different solutions out there. Each has its little niche and this site tracks the various goings-on in this rapidly emerging field.
  
• xkcd.com
  You need to read this every Monday, Wednesday, and Friday.
  
• Dictionary.com Word of the Day
  I sometimes try to use the WotD, but I mostly find myself dismissing them as too obscure.
  
• Mandership
  If you have an interest in design or interactivity, you need to read this blog. I've read every single article and I find them all extremely well-written and thought-provoking.
  
• PhysOrg.com - latest science and technology news
  This last one is usually the one with the most articles every day, and some of them are not as well-written as others. However, from a research perspective, it usually has the broadest breadth of information, and you would easily be able to find the journal article in question and read through it if you so wished. I use it generally to catch a glimpse of the state of various emerging technology from bio-tech and engineering.
  

So you see, I comb through a tonne of information on a daily basis. I find that I am well-informed, usually within a day of some emerging event or trend. I go through all of these feeds religiously, every day, and have developed the ability to scan through a lot to identify trends on my own as well. You can watch a story progress from one site to another and be able to judge the general level of activity around it. For instance, if twitter or gmail went down for a little while, you would notice it come up in Hacker News with something like "Is this service down for anyone else?" followed through with a bunch of blogs taking up the story and proclaiming them as being down. You would then see it happen again when the service came back up, and people would try and figure out what happened and what to do in the meantime. After all of it is done, within a day, you would see post-mortem analyses by various blogs, and perhaps an official story making its way around as well.

Keeping up and watching trends like noSQL emerge from nowhere and take over also helps to keep me interested in my field of choice. I am actively trying to integrate these technologies into my work, but until the opportunity presents itself, I would not jump in without a reason to do so. In the meantime, I spent about a year reading up on map/reduce and learning about the differences in the approaches that BigTable, Hadoop, MongoDB and CouchDB all take (to choose a very small sample). It is of great interest to me as a long-time user of SQL and having generated many crazy and complicated queries over the years. Some things are just not meant for SQL, though I suspect I will always be using both one SQL solution combined with a noSQL solution.

I feel that my efforts in staying current with this rapidly changing landscape makes me invaluable in helping with evaluations, planning, and coding using cutting-edge techniques. I am not afraid to delve into anything, and always make a point of checking out a site's source code (putting it through jsbeautifier if necessary). I like to incorporate techniques that I see being used in the wild, and I always make sure to recreate, not steal. It is for the purpose of learning, after all.

Android

Ok, so I have been trying to integrate CouchDB into an android app for a couple of days now, and have finally determined the cause of all my problems.  I will try and illuminate what happened, in hopes that it can help others who are just starting out.

My first problem was the emulator.  No matter what I tried to do, it simply refused to show me my app.  After experimenting with all permutations of various settings, I have discovered that removing the test project, AVDs and all the launch configurations; and starting over, creating the AVD, then choosing to launch "in foreground" (i.e. uncheck "run in background"), in manual mode, launching my app instead of the "default activity" finally gives me some output.  I suspect it is probably something to do with how I had my project laid out, but I think if you fiddle with the settings enough, you will eventually see the application launch.

Here's the important thing: once it does, you don't ever have to shut it off again!  You can just use the DDMS view to just stop your process and then hit the debug icon again and choose the emulator that is still running.  This is one hell of a time saver as you don't have to look at that boot-up screen every time you need to make a change.

Now, CouchDb.  I downloaded and integrated DroidCouch into my project, but I kept receiving an error about how it couldn't connect to the local couchDB instance.  I had a really dumb day today, and didn't see that it was looking for a couchDb instance "on the emulated instance" and not on my comp.  So really, it needs to have couchDb already installed on the machine, and not have it as a portable instance like SQLite.  Ok, so how do you go about doing that?

You need to go and find the couch-android-launcher from GitHub, download it, and then shove it into the emulator.  Ah, but how do you do that?  You can't simply put it into your project and have it go because it is only a shell.  What you really need to do is use the NDK tool to generate some native code with it and load that into your eclipse project.  See this thread.  It so happens that you need to use Cygwin for it to work in Windows.

Crash course in Cygwin (installed the Base and did a search for "awk" and "make" and selected those packages).  I had to then find where cygwin operates from (the install directory, funnily enough).  I had to then copy the ndk and couch-android-launcher directories to /var/test and then run the ndk-build command on the couch-android-launcher folder.  Finally, I went back to Eclipse, and imported the "existing project" and chose to copy it to my workspace.  When I hit debug, tada, the emulator asked me to hit a button to install couchDb.  Almost there!

Success! Some 1,600+ files later, I see two buttons : "Start CouchDB"and "Stop CouchDB".  Well, hurry up then!  I now see the couch guy lounging in the notification bar and all looks good.

Ahhh, maybe I can go lounge about on my own couch after all of that!