Reading Room

Speed up your web development with AutoHotKey

by master

Share this article:

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 3marks 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 3will 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.     Sleep100
  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 clipboardalways 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