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!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $14.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Oh well, should have been nice, but on my system (Windows XP Sp2), it disabled Windows+Key combination (Win+R, Win+E, Win+L, etc…)
Strange enough.. I couldn’t drag (to re-arrange) Mozilla (v.3.0.6) tabs while Texter is running..
Any ideas would be appreciated….
I used to use Quicktext for notepad++ but development stopped on that a while back and it doesn’t work in Vista :(
It’s so nice have to this feature back. Thank you! Any more tips like this would be great.
I’am using Quicktext in Vista and it’s perfectly working. If you still have problem or anyone else just send me an email. I can send you the copy of the plugin i have.
and my email is : maliayas1@gmail.com
Another more advanced and free windows program is Auto-it.
An excellent, though not free program is Activeword. Give it a try. http://www.activewords.com/
This application seriously did some bad things to my Vista Ultimate 64 install. Explorer stopped working correctly, drag & drop stopped working.. PS CS3 begun to be less useful etc.
I thought i’ve been infected even though i got a pretty tight security. I tracked it down to this software and upon uninstall everything works again …
coda’s clip feature can save you lots of time. Although I do like text expander’s fix typo feature.
I saw this on your tweet and TextExpander is the best thing since peanut butter. I love it. I used it for 5 minutes and bought it.
Hey ho,
why not just use activaid? http://www.heise.de/ct/activaid/default_en.shtml
It has an extension called hotstrings and a lot of other useful stuff :)
Very useful indeed!
Cheers!
Wow! I though that I was fast enough typing + using EIDEs.
Thanks Jeffrey. Great tip!
Woops…. typo… blame TextExpander. I meant I was fast using IDEs
Great Idea.. I will try it!
Nice Tool Dude! I love it!
%ds not working in script mode
Hey Jeff
I see that texter has an nifty export option, do you fancy exporting ur key strokes for the lazy ones.
Ps im a tuts+ member wink wink nudge nudge :P
Has anyone noticed texter interfering with Photoshop? It’s so annoying!
Yes!
Help!! How do I fix it?
Jeffrey,
Typinator a text expansion app for the mac is free for signing up at macheist.com
Don’t most big name IDEs have this? It is called code completion
I know if I type swi(ctrl+space) it will build a switch statement for me in both Eclipse and Netbeans… I rarely use switch statements though…
I use this one:
+{HOME}^x{ENTER}{ENTER}{ENTER}{ENTER}{ENTER}{ENTER}{UP}{UP}{UP}{TAB}
Thanks for this screencast, love it!
I have a doubtful feeling on “Text Expander” whether it allows for faster coding or lazy programming.
I am leaning to “lazy programming”.
Then again…. I never gave it a try.
Although, Copy Pasta is always the fastest…
I used macro’s 25 years ago, but have stopped for a few reasons:
- did not know of any for Window’s (after MS DOS),
- stopped coding and doing ‘repetitive’ stuff,
- ended up on too many different computers
- kept forgetting what I had developed as macro’s
- autofill in Firefox met much of my need
Times change and this looks like a good tool to go ‘back to the future’.
For me the biggest reason to use something like this is for accuracy. Just watching the video shows how much we all tend to make mistakes, more macros/text expansion = less errors.
Heres a good script for Yahoo/ATT Mail:
Hi +{TAB}+{TAB}+{TAB}{HOME}^+{RIGHT}^c{TAB}{TAB}{TAB}{TAB}{TAB}{BS}{BS}{BS}{BS}{BS}{BS}{BS}{BS}^v{BS}, {ENTER}{ENTER}How are you? {ENTER}{ENTER}Rick
Just List the Gmail one, but it works with Yahoo and ATT email.
How do I stop it from interfering with photoshop?? :O
Please help!
You could disable it temporarily while you’re in photoshop. Right click on the system tray icon and click Disable.
Hey Ron,
Thanks a lot buddy.
But, ConText has language specific macros with scrolling navigation for variations and descriptions within a prompt in case you forgot your macro. Plus it has exe macros your can apply to scripts, ie; compile and run. I still can’t figure out why peeps use anything else to develop on a PC.
Great tips! Using textexpander for mac all day and it really saves a lot of time :)
Btw, your voice sounds like Steve Jobs :D
Cheers
I know this is an old post, but has anyone else experienced Texter being really slow in Aptana?
In every other program, it is near instant. But in Aptana, it looks like someone is actually typing it all out. It’s faster than I could type, but not faster than copy/paste. Especially on a big block of text (like lipsum).
Ideas?
Yes, I have actually.
Texter v.06 is much better than .05 in Aptana
Hi!
Gotta edmit that I’m a huge newb ^_- but I always wanted to start scripting HTML and or JAVA and stuff like that, since I love to design, scripting wouldn’t be a dum idea to know =) so my question is… WHERE SHOULD I BEGIN!?
Send me a e-mail or maybe add me to your msn if you wish to guide me :P
Cheers
Andreas
In eclipse you can use for this purpose Afae, or Clips plugins:
# Afae
http://wiki.robrohan.com/index.html#Afae
#Clips
http://code.google.com/p/clipseclipseplugin/
// for a python programmers there is also such template feature in the pydev plugin:
http://pydev.sourceforge.net
Hi Jeffrey,
I’ve been using Texter for a while and have compiled a huge bundle of CSS shortcuts such as bb (border-bottom) bc (background-color:) and so on which I have been using, they have been extremely useful, so if anyone wants a huge bundle, let me know. (@Jack_Franklin)
I’m interested! email me if you don’t mind ariahfine at gmail
Notepad ++ and quicktext plugin FTW!
If you have a script in texter, try starting it with:
{BACKSPACE}{SHIFT}+{HOME}^c
doing this means that you can type something before a trigger and use ^v to paste it into the trigger automatically. To use your example of linking stylesheets, you could use the script
{BACKSPACE}{SHIFT}+{HOME}^c
with the trigger “link”. This would let you type
stylesheet link
and because it copies all the text on the line before the trigger, replaces it then pastes it, get the result
without having to go back into the generic code
This can be expanded by using multiple lines as variables, but the scripts can get a bit ridiculous when you have too many of them
Nice tip, now incorporated to my arsenal of weapons :)
Very nice!! Thanks.
jeff, google has heard you and implemented canned responses ;)
The sofeware does not work well in e-texteditor ,that a pity….
This is just awesome!
Hey Great Tuts all around To this one O can only add that either in test, or Script more Texter will do some Xtra things with % in front of C it auto pastes the clip board contents where it finds $c, and rather than all them {UP} Just place a %| where ya would like to have it park the curor when it’s done
Just like I am Thanx again
I love this Texter, but have a problem.
At home I work an a Vista x64 pc (so I use Notepad++ and Texter)
At my job I use a MAC with TextMate (of course).
Is there any way to sync the HTML, CSS and Javascript snippets between these programs?
Or a Texter alternative that works on both MAC and PC would be nice….
Great tutorial.
I’m forever forgetting what the tags are to enter code into words press.
Now ‘addsource’ + TAB gives me
{return}{return}{up}{home}
Hi all, I wrote a text expander for Windows a few months ago called Breevy (click my username next to this post for the website).
In addition to some other cool stuff, it lets you position the cursor after the expansion (use the %(cursor) macro) and you can also insert the clipboard contents dynamically in the expanded text as well (use the %(clipboard) macro).
So you can do something like:
and in the expansion, the cursor will automatically be placed between the tags.
Breevy’s in active development, so if you have a feature suggestion, feel free to tell me about it.
Created Texter bundles based on Sergey Chikuyonok’s Zen Coding plugins.
http://code.google.com/p/zen-coding/
Texter Bundle based on ZenCSS :
http://texterbundles.googlecode.com/files/ZenCSS.texter
and.
Texter Bundle based on ZenHTML:
http://texterbundles.googlecode.com/files/ZenHTML.texter
So nice! Thank you, this idea is great!
Heard too much about the TextExpander snippets (,HTML) and forgot about ZenCoding.
Thank you so much both of you …. for such a great tutorial and such a great bundle ..think i was a bit late getting here .. anyway thanks a lot once again
Using dedicated soft-keys is an even better solution for most applications. I have the incredibly awesome Logitech G15 keyboard with 3 sets of 18 programmable keys. You can set keystrokes, scripts, or macros to each key. Some of the functions I use most are:
*Show Desktop
*Minimize/Maximize
*Zoom in/Zoom out (especially useful for Photoshop, Illustrator, Browsers, etc..)
*Move window to other monitor
*Launch Browser
*Username {TAB} Password {TAB} {ENTER} for secure logins that don’t allow your browser to remember passwords, like banks
*stop();
*gotoAndStop();
*My email address
You get the idea. Instead of remembering a keyword, typing it in and then pressing TAB, you just press one hot-key. This limits the risk of accidentally keying in a hotscript. The drawback is that you can only set a total of 54 macros. If you need more than that (which I haven’t yet), you can then start using Text Expander or whatever.
I’m really surprised that this technology isn’t more popular. I use it constantly and will never go back to a regular keyboard. In fact, I broke my last G15 by spilling a bunch of crap in it and immediately bought an identical replacement.
G15 Keyboard by Logitech:
http://www.photoshopsupport.com/photoshop-blog/07/07/logitech-g15-keyboard.html
Whoa, I just looked up the price of the G15 keyboard mentioned in the above post and it’s 250 bucks used on Amazon. An there’s only 2 left! I guess they stopped making the good model with 3×18 programmable keys for a crappier one that only has 6 hotkeys. Weak!
I’ve come to rely on my hotkeys and when this keyboard eventually wears out, I’m gonna be in trouble.
Texter looks promising, but I am have a trouble adding a curly bracket in the hotstring script. How to do that?
nice tut!!!!!!!!!! Thanks!!!!! Great!!!!!
Jeffrey,
I know this article is kinda old, and I noticed you stopped responding to comments some time ago.
But I figured I would ask…
Is there any way you could export your TextExpander snippets?
Only reason I ask is because its kinda a pain to type along to your How To videos.
I have to keep pausing the video just to catch up – Yes I’m a slow typer..
Thank you in advance
Hey Marhshall – It’s a big mix of programs (TextMate, TextExpander, Snippets, etc.) So, unfortunately, no.
try notepad++ Quicktext plugin. It’s similar to Tab Triggers in TextMate
try notepad++ Quicktext plugin. It’s similar to Tab Triggers in TextMate
Hi there! I have found live demonstration of “text expander” program in the series “CSS – Noob to Ninja” and it seems very helpful program, I am PC user and found “Texter” is a nice alternative to “text expander”.
Jeffrey Way you Rocks!!! ;-)
ive been using popchrome for chrome, its nice because synchs everything
works only in chrome
maybe i need to find some program or plugin for my text editor
i have some dummy redirect email and sample passwords to extend, i know its not secure but usually its fast to register anywhere with 8 characters :)
the problem comes when you cant remember
but you can expand “remember” then undo :D
or you can extend “STFU” to “please dont talk anymore” xD
I was experimenting with some “TextExpander for Windows” solutions lately and found an app called Autotext (http://jitbit.com/autotext), it’s cheaper that the others and support TextExpander bundles and macros commands.
Perfect for my needs.