Application Independent Front-End Dev Environment

I've made significant progress in re-creating the coding environment that I once enjoyed in HomeSite (may it rest in peace), using AutoHotKey. Basically, I've set up all the HTML, JS, and CSS oriented key commands and a number of the tag completions so that no matter what environment you happen to be stuck using, anything from Notepad or UltraEdit, to a textarea in a browser (like this one on Blogger) you'll always have the same shortcuts available.

To be able to customize it for your own preferences (I use a DVORAK keyboard, so some of the keys may be a stretch on QWERTY) you'll want to download AutoHotKey and use that to auto-compile frontEnd.ahk. But if you'd just like to try it out stand alone, here's the compiled version: frontEnd.exe. Here are the key commands I've set up thus far:

Ctrl+Enter = <br />
Ctrl+Shift+Space = &nbsp;
Ctrl+Shift+. = &#8230; (ellipse)
Ctrl+Shift+- = &#8211; (n-dash)
Ctrl+Shift+a = <a href=""></a> //with all sorts of cleverness, see update below
Ctrl+Shift+p = <p></p>
Ctrl+Shift+u = <ul><li></li></ul>
Ctrl+Shift+e = <em></em>
Ctrl+Shift+b = <strong></strong>
Ctrl+Shift+l = <label for=""></label>
Ctrl+Shift+i = <input type="" name="" id="" value="" />
Ctrl+Shift+j = <input type="" name="" id="" value="" />
Ctrl+Shift+d = <div id=""></div>
Ctrl+Alt+a = <span></span>
Ctrl+Shift+t = <table class="" cellspacing="0"></table>
Ctrl+Shift+r = <tr></tr>
Ctrl+Alt+c = <td></td> //Changed do to Photoshop conflict: "copy merged"
Ctrl+Shift+/ = /* */
Ctrl+Shift+m = <!--  -->
Ctrl+Shift+h = <h*></h*> //*=user input
Ctrl+Shift+f = function *() {} //*=user input

While setting up the auto-completions of various tags I made some interesting observations that may be applicable beyond this little project. Say we're dealing with the auto-completion of a DIV tag, the resulting code will always be this: <div id=""></div> but where should I put the cursor after the auto-complete fires, between the tags, or inside the ID attribute? To answer the question I observed my own behavior in HomeSite. When I type the complete the complete tag, <div>, I am roughing out structure, not worrying about attributes yet, so I set up frontEnd.ahk to put the cursor between the tags. When I only type <div and hit the space bar my intent is to start adding attributes to the tag, so I put the focus inside the ID attribute.

The concept that may be portable to other problems is to watch for clues regarding the user's intended next action, and where appropriate facilitate that next action.

Wish list, should anybody else decide to work on this:

1. Tag Wrapping: select some text, hit a key command, wrap the tag around the text.
2. Tag Insight: When < is pressed show a list of tags, filtering the list as you type (so typing <s narrows the list to <strong, <style) and allowing you to hit Enter to complete it.
3. Attribute Insight: When you place your cursor inside a tag and hit the space bar, a list of possible attributes for that tag appears, and behaves like Tag Insight.
4. List Wizard (New): An unordered/ordered list key command that makes each line of a multi-line selection into a list item.
5. Comment Toggling (New): Highlight code that has been commented out, hit the appropriate HTML, CSS or JS key command, and the comments are stripped out.

Update: I figured out how to wrap tags around highlighted text. Moved the logic to functions (with optional parameters even) so that the code is actually getting more readable as it expands. I have some ideas for new features which I've outlined in the comments, like an exceedingly clever anchor command that searches the clipboard and your selection for a web address.

Update: June 23, 2006 The anchor key command (Ctrl+Shift+a) has been updated to become "the ultimate (PC) blogger's shortcut". It searches your clipboard and the text that you've highlighted for a web address, and then spits out a full link element complete with pre-populated href (if it found an address), link text (if you had text highlighted) and a title attribute. It also moves your cursor into the next logical place based on the information that you provided. In order of priority those are: href attribute, in between the <a> tags, title attribute. It will occasionally freak out clobber the old contents of my clipboard, but I haven't been able to reproduce this in a controlled manner, so it may be user error.