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:
<script type="text/javascript" src="js/somefile.js"></script> <script type="text/javascript"> ...my code </script>
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/reset.css" />
<title>Untitled Document</title>
</head>
<body
<div id="container">
<form method="" action="">
<label for="name">Name</label><input type="text" name="name" id="name" />
<label for="name">Email</label><input type="text" name="email" id="email" />
<input type="submit" name="submit" value="Submit" />
</form>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div><!--end container-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
});
</script>
</body>
</html>
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.
- Texter : Windows only
- FastFox : Windows only
- TextExpander : Mac only
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
// Typing jquery + tab gives me: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Open Inline Javascript Stuff
// Typing beginjq + tab gives me:
<script type="text/javascript"><script>
$(function() {
});
</script>
Insert Lipsum Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Simple Conveniences
Don’t forget about the simple three second timesavers. Those add up quickly over the course of a week!
<img src="" alt="" />
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:
<img src="" alt="" />^{LEFT}^{LEFT}^{LEFT}{LEFT}{LEFT}
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…
<pre name="code" class="html"> author's script goes here... </pre>
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”.
<pre name="code" class="">{ENTER}{ENTER}</pre>{UP}
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.
<pre name="code" class="html"> (cursor will be right here) </pre>
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: sethetter.com / blog » Intro To Text Expanders: NET Tuts
Pingback: Use Texter to Supercharge Your Repetitive Typing [Video Demonstration] - 203th Edition | Technology Revealed
Pingback: Textexpanders - DoubleJWeb.Net
Pingback: Use Texter to Supercharge Your Repetitive Typing - Knowledgepedia
Pingback: JeremiahTolbert.com » Blog Archive » links for 2009-03-08
Pingback: FTL Weekly Review - Vol. 5 - ForTheLose.org
Pingback: Web and Graphic Design by Seth Etter | sethetter.com
Pingback: 30+ Amazing Mac Apps for Developers | Programming Blog
Pingback: 30+ Amazing Mac Apps for Developers - Nettuts+
Pingback: 30+ Amazing Mac Apps for Developers | Ouech.net
Pingback: Designfeed.me » 30+ Amazing Mac Apps for Developers
Pingback: 30+ Amazing Mac Apps for Developers30+ Amazing Mac Apps for Developers « Nvmindmedia
Pingback: En vrac (20090409) « Gahanima’s Weblog
Pingback: 30+ Amazing Mac Apps for Developers30+ Amazing Mac Apps for Developers « NVMIND