Digital Conversations
autohotkey-featured

Speed up your web development with AutoHotKey

8th November 2011

AutoHotKey is a free, open-source utility that allows you to automate almost any series of keystrokes or mouse clicks and assign them to a hotkey.

I’ve been using it for a couple of years now and the amount of time (and pain) it has saved me as a web developer is just nuts.

Before explaining how to use it, I’ll just show you some of the things it can do. This tutorial assumes you are using a PC and Notepad++. Download this zip, unzip it and run the file autohotkey-tutorial.exe.

Introduction to Hotkeys

Open up the file index.html in Notepad++ (note: some of the following hotkeys may not work if you already have the same shortcut keys set up for other things in Notepad++, or globally).

Put your caret between the body tags and type in the word ‘container‘ (without speech marks). Select the word, and press CTRL-ALT-SHIFT-D.

AutoHotKey has transformed this one word into a div with the id of container, along with opening and closing comments. Not only this, but the caret has been placed between the div tags, ready for you to type in more code!

  1. <!– container –>
  2. <div id="container">
  3.     |
  4. </div>
  5. <!– /container –>

Go ahead and create another div with a different ID within the container.

Now, type out a list of items, each on a new line, e.g.

  1. Item one
  2. Item two
  3. Item three
  4. Item four

Now select all of these items, and press CTRL-ALT-SHIFT-U. These items are transformed into an unordered list!

  1. <ul>
  2.     <li>Item one</li>
  3.     <li>Item one</li>
  4.     <li>Item one</li>
  5.     <li>Item one</li>
  6. </ul>

Now select the text ‘Item one‘ and press CTRL-SHIFT-A. The list item is transformed into a link:

  1.  <li><a href="#">Item one</a></li>

Introduction to Hotstrings

What we’ve been using so far are Hotkeys. I’ll now show you some Hotstrings. These basically allow you to expand an abbreviation into a longer string of text.

Stick your caret between curly brackets of the #container rule (within the style tags). Type in ‘bgc:‘. You will see it changes to ‘background-color:‘. Type in a color such as #eee. Press enter then type in ‘td:‘. This expands to ‘text-decoration:‘.

  1. #container {
  2.     background-color: #eee;
  3.     text-decoration: uppercase;
  4. }

Now stick your caret between the script tags. Type in ‘docready‘ then hit TAB. AutoHotKey has typed out the usual jQuery document ready function and placed your caret right where you want it to carry on coding!

  1. $(document).ready(function() {
  2.     |
  3. });

Now type in ‘click‘ and hit TAB. AutoHotKey has filled out a click event and selected the area where we would type in our selector. Now type a selector (e.g. ‘a.button’) and hit TAB again. Our caret again, is placed right where we want it!

  1. $(document).ready(function() {
  2.     $('a.button').click(function () {
  3.         |
  4.     });
  5. });

These examples barely even scrape the surface of what AutoHotKey can do. It’s real power comes when writing your own hotkeys/hotstrings that are applicable to you, and your particular needs/languages. So really, you need to learn how to code these scripts yourself.

Write your first hotkey script

Close the autohotkey-tutorial.exe script by right-clicking the green ‘H’ icon in your Notification area and clicking Exit.

Download a copy of AutoHotKey, install it, then double click the file autohotkey-tutorial.ahk that you downloaded earlier in the zip.

This script should work in the same way as the exe, except we can now edit this script and add new hotkeys/hotstrings.

Lets code our first hotkey – one that puts <p> tags around the currently selected text when the user presses CTRL-SHIFT-P.

Open up autohotkey-tutorial.ahk in Notepad++. Scroll to the bottom and type in the following:

  1. ^+P::
  2.     MsgBox, User pressed CTRL-SHIFT-P!
  3. return

The first line represents the hotkey that will be used to trigger this function. In AutoHotKey, ^ represents the CTRL key, + represents the SHIFT key and ^ represents the ALT key.

So ‘^+P::‘ means ‘do the following when the user presses CTRL-SHIFT-P‘. Line 2 should show us a pop-up, and Line 3 marks the end of the hotkey function.

Save the file, and reload it by right clicking the green ‘H’ icon in the notifcation area and clicking Reload this script. Now, in Notepad++, press CTRL-SHIFT-P. You should see the following pop-up.

AutoHotKey pop-up

Now, lets make this function do something useful. Delete the message box line and replace it with the following:

  1. ^+P::
  2.     SendInput, ^x
  3.     SendInput, <p>^v</p>
  4. return

Line 2 simply sends the key combination CTRL-X which will cut the selected text and save it in the clipboard. Line 3 will type out the opening <p> tag, then send CTRL-V (paste) before finally closing it off with the closing </p> tag.

Save it, reload the script and type in some text on the html document. Select the text and press CTRL-SHIFT-P. Boom! Your text has been quickly converted into a HTML paragraph!

This script is fine, but it will always overwrite the clipboard, which is probably undesirable. Let’s tweak it so that it saves the clipboard at the beginning and restores it at the end.

Update the script as per the following:

  1. ^+P::
  2.     clipsave = %clipboard%
  3.     SendInput, ^x
  4.     SendInput, <p>^v</p>
  5.     Sleep, 100
  6.     clipboard = %clipsave%
  7. return

Line 2 will grab the current contents of the clipboard and store it in a variable called clipsave. The variable clipboard always contains the current clipboard. We put % signs around it so that ‘clipboard’ isn’t taken literally (as a string).

Line 5 waits for 100 miliseconds before processing the next line. This is to make sure the previous line has been executed before we restore the clipboard.

Line 6 simply restores the clipboard to its previous state.

Save, reload and try it out. Copy some text to the clipboard, create a paragraph using our hotkey, then press CTRL-V. You should see whatever was previously in the clipboard pasted out.

Now, go save yourself a flipload of time and tedium by making some of your own hotkeys and hotstrings for whichever languages you code in! If you want to go furher with AutoHotKey, I would suggest you start by following the tutorial that comes with the software.

Here are a few of the hotkeys and hotstrings I use:

Hotstrings

  • lorem* - types out a load of lorem ipsum
  • date* – types out the current date/time and my name
  • loads of css hotstrings – e.g. bo: – border, ff: font-family, mr: margin-right: etc
  • animate[TAB] – jQuery animate function
  • al[TAB] – alert() (with caret placed in brackets);
  • hover[TAB] – jQuery hover function
  • if[TAB] – if statement
  • ifelse[TAB] – if else statement

Hotkeys

  • CTRL-SHIFT ( – enclose selected text in brackets
  • ALT-UP/ALT-DOWN – increase/decrease currently selected number (great for font sizes, margins, widths etc)
  • CTRL-SHIFT-E – enclose in em tags
  • CTRL-SHIFT-B – enclose in strong tags
  • CTRL-1/2/3 – create h1/h2/h3 heading from selected text
  • CTRL-SHIFT-I – image
  • CTRL-ALT-SHIFT-P – converted selected lines into paragraphs
  • CTRL-ALT-SHIFT-O – convert selected lines into a select box with options
  • CTRL-SHIFT-T – create a table from selected text (with each row on a new line and each cell separated by a TAB)
  • SHIFT-MOUSEWHEEL(UP/DOWN) – scroll horizontally, left or right

Tagged: |


I'm an Interface Developer with Reading Room Manchester. I'm currently excited about responsive design and mobile apps. I'm obsessed with finding quicker/better ways of doing things.


6 Responses

  1. avatar Danny August 2, 2012 at 8:18 am

    Considered getting an Enterpad, but then saw the price.

    $279.00? Are they having a laugh?

    Reply

  2. avatar Danny August 2, 2012 at 8:00 am

    I don’t find hotkeys difficult to remember. How often do you forget OS keys such as ALT-TAB, Win-L, Win-D, Win-E, Win-R etc? Never!

    Once you’ve used a hotkey several times it just sticks. I find it helps if you use letters in your hotkeys that match the function, such as CTRL-ALT-SHIFT-P for Paragraphs, CTRL-U for an unordered list etc.

    Reply

  3. avatar ITman August 1, 2012 at 8:51 pm

    Easy enough. You see, if you print out a stencil for the Enterpad (like that one), you’ll find out all the keys have numbers (001 to 120) beneath them. This is the key position number. Then, you download the default AHK script for the Enterpad (available here). In the script, you’ll find the key position numbers easily (eg. ::001). Match the key on the Enterpad with the key in the script, write your code right after the key number in the script file. Save and reload the script and you’re ready to rock!

    Reply

  4. avatar technopolis July 28, 2012 at 7:22 pm

    @ITman: how do you manage your autohotkey script files w/ the enterpad?

    Reply

  5. avatar ITman July 17, 2012 at 3:10 pm

    That’s right Tetedemont, using AutoHotkey with an overlay keyboard is quicker and more efficient. Why people don’t use AutoHotkey as much as they would like? Simply because hotkeys are difficult to remember and selected hotkeys can disable other software features. I use an Enterpad to solve these two problems: No hotkeys to remember and no hotkeys to select. The Enterpad has 120 touchkeys to trigger AutoHotkey scripts instantly without concentration and without error. It’s amazing!

    Reply

  6. avatar Tetedemont July 11, 2012 at 2:14 am

    As a Web developer myself, I was looking for a solution to improve my productivity with numerous repetitive tasks such as HTML programming and the like. Autohotkey saved me a lot of trouble and time as it renders code instantly from a script. Moreover, with an overlay keyboard which can launch any of the above macros without the use of the regular keyboard, it is much quicker and more efficient.

    Reply

Leave a response

  • Your email address will not be published.

  • + 8 = nine

  • You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>