1. Code
  2. News

How I Can Code Twice As Fast As You

Read Time:6 minsLanguages:

We're all familiar with text expander programs; though I would surmise that the percentage of us who use them when coding is quite low. To change things up a bit, today I'm going to you how to create custom text-expander scripts that will save you a great deal of time. If you're unfamiliar with such programs, you must watch this! After reviewing the screencast and tutorial, I'd love to hear how you save time when developing.

Okay - so I'm mostly teasing with this article's title. Many, many techniques factor into writing quick and efficient code. Nevertheless, you'll be astounded at how much time you can potentially save by using a simple text-expanding program. Watch the screencast below to learn one of my tricks.

Why Use a Text Expander?

How many times have you typed the following:

Granted, it only takes ten seconds or so, but imagine multiplying that figure by 100. How much time can you potentially save by assigning a simple keystroke to a block of code? With a text-expanding program, I can simply type "startjs" (or any other key that I define), and press tab. Once I do, all of the code above will be pasted in.

Many IDEs offer a snippets section. Definitely utilize these for more complicated procedures. However, it's important to keep in mind that Texter works anywhere. It's not dependent upon one specific program.

How Fast?

As an example, I took a 100% blank page and was able to create all of the code below in about ten seconds, without copying and pasting. I utilized about five snippets.

What You Need to Get Started

Your best option is to do a Google search for "free text expander". There are plenty of pay versions, but if you look hard enough, you should be able to find a few apps that will work perfectly. Here are some worth consideration.

Out of the options listed above, only "Texter" is 100% free. The other two offer a free 30-day trial. If any of you have other options, leave a comment and I will update this list. For this tutorial, we'll be using Texter (Windows), but most of the techniques can be easily translated into a different piece of software.

How Do I Use It?


It's easy! Grab a block of code and paste it into your clipboard. Try to keep the code as general as possible; that way you won't have to modify it too much. Open Texter, or your expander of choice, and choose a unique key. Next, paste in your code - and you're done! To test it, return to your document, type in your key and press tab!

What Else Would I Use it For?

I literally have dozens of shortcuts assigned - ranging from simple snippets to more complicated scripts (which you'll learn about in the screencast). Some of my favorites are listed below:

Import jQuery

Open Inline Javascript Stuff

Insert Lipsum Text

Simple Conveniences

Don't forget about the simple three second timesavers. Those add up quickly over the course of a week!

If we'll spend an extra minute or so, we can write a quick script that will position the cursor between the "src" quotation marks. (Remember - the goal is to touch the mouse as little as possible.) Change the option in Texter from "Text" to "Script", and paste in the following:

In this little script, We add our image tag, and then use a combination of "Control Left" and "Left" to place our cursor correctly.

  • ^ = Control
  • + = Shift
  • # = Windows Key
  • ! = Alt

  • {TAB} = tab key
  • {BS} = backspace key
  • {LEFT} = left arrow key
  • {HOME} = home key
  • ...etc.

Tutorial Writing!

Any time that we post a tutorial on nettuts+ that contains scripts, we must add the correct "name" and "class" attributes to our pre tags. This allows for the syntax highlighting. For example...

As you can imagine, it can be a pain to type, or even copy and paste, those wrapping pre tags fifteen times per article. Sounds like a great usage for text expanding! However, just inserting that snippet into our program of choice isn't enough. We need to add a simple script. The following will work for Texter; just make sure that you've selected the "Script" option, rather than "Text".

When we wish to tell Texter to perform a specific keystroke, we simply wrap the name of the key within braces. For example, when I typed {UP} at the very end, I did so because I wanted the cursor to ultimately end up between the two pre tags, not after.

Keep In Mind

You might have to tweak your scripts for your IDE of choice. Keep in mind that some IDEs apply automatic indentation, code completion, etc. This can screw up your scripts slightly. To compensate, it might be easiest to disable those features.

What Are Your Tricks?

I'm always on the lookout for shortcuts. It's all about keeping your hourly wage as high as possible, without producing an inferior product. How do you save time when developing?

Paste Your Scripts Into the Comments

I, and I'm sure the other readers, would appreciate it if you'd paste in your custom Texter "mini-scripts" along with a short description of how they help you!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.