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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Michael Rice March 4th
I haven’t used a text expander before, or downloaded on for that matter. I do enjoy Dreamweaver’s quick inserts, though.
However, i could really do with an expander nowadays, I’ll for sure be checking some of these ones out!
( )David Singer March 4th
Any good Linux alternatives?
( )Xobb March 5th
Vim probably.
( )Michael Thompson March 5th
Yes. In fact, I could code three times as fast as the author of this article using only Vi(m).
vlasnn March 5th
you can also customize vim
http://www.linuxjournal.com/article/3805
http://varuaa.blogspot.com/2008/09/customize-vim-editor.html
is a lot of material on internet.
good look
XD
Aaron Boushley March 6th
Vim has a plugin here that has this functionality…
http://www.vim.org/scripts/script.php?script_id=1318 enjoy.
Neil March 5th
gedit does this
http://grigio.org/textmate_gedit_few_steps
( )Jorge March 5th
Geany also have this feature
http://geany.org/
Texter4Ever March 5th
snippits by Ben Kudria
http://lifehacker.com/351285/automate-repetitive-typing-with-snippits
http://ben.kudria.net/code/snippits
( )windows March 5th
Linux sucks
( )J March 5th
Yawn.
Terry March 17th
+1
Fábio Antunes November 19th
You guys say Linux sucks, but I’m sure that you mean a specific Linux Distro (Distribution such as Debian, Ubuntu, …), not Linux it self, in that case i know there is some distros that aren’t very good, but in other hand there is some that are really good, all depends on what you like and need to work / play.
Regards
J March 5th
Emacs (there’s also an X version too.)
– get YASnippets for Emacs too
http://code.google.com/p/yasnippet/
( )henry March 4th
man i have been waiting for this since you mentioned it in the php series thanks cant wait to watch it!!!
( )Tom March 4th
I have no tricks, just using Aptana and let my mind don’t go such fast to make a mistake.
( )crysfel March 5th
hahhahahahaha me too but i’m thinking to check this out
( )Brenelz March 4th
Man… Text Expander! This is something I have been looking for for an extremely long time. I like the snippet features that TextMate has, but I am not a mac user.
Other snippet programs don’t seem to do the job, and this is even a cross-browser way. Excellent!
( )Evan March 5th
You should check out e-texteditor. It is basically textmate for windows.
It uses all of the textmate bundles and snippets so if you like textmate it will feel familiar to you.
( )J March 5th
Thanks for that!
Pieter March 6th
i prefer using inType over e-texteditor. it’s still in development but works great, used it before i switched to mac and now i use textmate
Will March 7th
@Pieter
Intype has been in development for far too long. I remember it from 3 years ago and it’s still in alpha!! How you can use it I don’t know because as you’d expect with something that’s in alpha, it has very basic functionality.
Furley March 4th
Awesome! Doing this immediately.
( )Travis March 4th
Wow, that’s a time saver and a half!
( )Abhisek March 4th
I use quickphrase for such jobs. Tiny yet powerful. http://www.ad1987.blogspot.com/2008/10/download-of-day-quickphrase.html
( )mary March 4th
Excellent tutorial. +1 for helping me increase my productivity. I’ll definitely give this a try!!
( )Branden March 4th
I’ve been using this program for other uses and haven’t had the time to experiment with web dev stuff. Thanks for the great uses and ideas and usages Jeff.
( )Kevin March 4th
Uh don’t most quality text editors have this built in?
( )Roman March 5th
As you have seen in the screencast, this works in any app not just a quality text editor.
( )Brenelz March 4th
Hey Jeff, I was just wondering can you do something like select text and then wrap the selected text?
Anyone know of something out there like that?
( )James March 5th
I’m not sure if the programs Jeffey mentions are capable of this but, dependent on what IDE you use, it may be possible to do with a macro or plugin.
I use Komodo Edit and it allows you to create macros – I’ve got one which will wrap the selected text in a specified element (I’ve currently got it assigned to CTRL + ALT + W). If you also use Komodo I’ll be happy to send it to you…
( )Raman March 5th
+1 for Komodo Edit .
instead of macros i use snippets. it has saved me lot of time. any coder know that there are so many repetitive tasks so it is must for efficiently working.
Jeffrey Way March 5th
Oh I think you should definitely use a built in program, if it helps. I just like how Texter is usable anywhere.
zach March 5th
This seems too obvious but… copy the select text and then initiate the script eg “‘hotstring: wp’ ‘^v’”
( )Branden March 4th
Also another recommendation if you are a more advanced user is to use Auto Hot Key. It requires more knowledge of scripting but you can use loops and other if statements. The advantage really is you have more flexibility and control and I believe it’s compiled all in C++ so it’s quicker than texter. It’s free as well.
Long live efficiency!
( )Roman March 5th
Texter was made using AutoHotkey. And yes, AHK FTW!
( )Connor Gibbons October 17th
I agree, AHK is the way to go. You can do so much with it aside from just text expanding.
( )Jafar March 4th
Thanks,
( )How is it possible to escape { in script mode? does anyone know?
Brenelz March 5th
I have a similar issue… any solutions?
( )Jeffrey Way March 5th
Wrap the character in braces.
Reimu March 4th
I really love Coda for mac, it has a nice snippits feature. I always put basic MySQL query’s into the snippits, delete, insert, connect and retrieve rows are very handy.
( )Adam Jackett March 4th
e-texteditor http://www.e-texteditor.com has bundle support (like textmate on the mac) and it’s very easy to create your own bundles. The great thing about bundles is that not only can you add text snippets, and you can create tabstops within the snippets to type in specific pieces, like in the example, you could type link, hit tab, and it will already be on the first tab stop, which would be the word ‘default’ in default.css, and you just type the proper filename, hit tab again and you’re at the end of the line.
It also has commands, so like the wrapp example, I can select a line, or a number of lines, and hit CTRL+SHIFT+w and it wraps my selection in a tag. But it also has the ‘p’ selected so in case I wanted a different tag, like , I just type ‘h1′ and it changes both the open and closing tags. Also, if you wanted each separate line in your selection to be wrapped, it’s just CTRL+ALT+SHIFT+w and it wraps in tags, again with the ability to quickly change. I use this a lot when I’m copying in text from a word doc or something, I paste, select all the lines, wrap the selection, hit p, done. Now I have a bunch of paragraphs.
Jeffrey’s method is nice, and useful for things that aren’t programming related like his email reply, but I think E is a better solution for windows users anyways. Textmate is pretty good on the mac also, (E was modeled after it) but E has a number of features I like better.
( )mrp19 March 7th
but e-texteditor not free..i’ve always feel irritated with ‘trial’ words..ahahaha
i prefer to use jeffrey’s method..^^
ps: sorry bad english
( )saurabh shah March 4th
wow! very useful tips…. m going to usethis now onwrds… thnks for sharing …
( )Ed March 4th
I hope that image of the Flash is properly licensed.
( )Eric March 4th
Oh man, I appreciate you posting about this. I was always disappointed that I couldn’t find a suitable text snippet feature in my version of Dreamweaver. I settled for using an external program to house snippets of code, but it requires me to open the program, find the code, copy it, etc…
This will work perfectly! Oh happy day! :-p
( )Mike Smith March 4th
Going to sit down and put the 20-30 things in that I ALWAYS end up typing out by hand (emails as well as coding). Thanks so much for this tutorial. I honestly never even knew something like this existed.
I tried the email scripting and every time I try to type the response with the tab key it put the word “Hi” at the end of the response instead of before the persons name. It’s weird. Any idea why?
When I type response and hit tab in a regular text editor it types everything fine (except it doesn’t add the persons name obviously). I tried three different gmail accounts and it does it the same in all of them
( )Jeffrey Way March 5th
Mike – I experienced the same thing. What’s strange is that it only does that in…Safari (if I remember correctly). Try using a different browser, and it will work.
Very weird though.
( )Mike Smith March 5th
Thanks Jeffrey. I appreciate it. I was in google chrome when I had that happen.
crysfel March 5th
thanks for the tips, it helps me a lot
( )Rokurosv March 5th
I mostly use snippets and macros when I’m using Komodo Edit.
I recently started using a text expander on Linux called autokey, it’s actually pretty good, so if anyone here is using Linux you should check it out http://autokey.sourceforge.net/
( )James March 5th
I tried out Texter a while ago but since it runs as its own program on Windows it can be a bit of a menace. I think it has a few bugs because sometimes it would just totally disable my shift key, plus whenever I did any gaming the controls were all messed up!
I think IDE-specific macros/plugins are a better option…
( )Mike Smith March 5th
I also noticed when trying to put in some css for a simplecss option it was registering the { } tags in the css. Any way around this?
And one last thing LOL… I would love to have things tabbed in with my xhtml and my css but it doesn’t recognize the tab space I put in my codes when I add it as a text command in texter. It tabs every new line one tab over in notepad++ …. is there something I’m missing/doing wrong?
Again, great tutorial
( )Igor November 13th
The same problems with notepad++ and {if is some else between} it don’t work. I tried to use {Rawn} but it don’t help
In this example i have made a script what don’t work as I need
{left}{left}{left}{left}
i get
because symbol !(exclamation) is binded to Alt key. If I write next
{left}{left}{left}{left}
i will get
{left}{left}{left}{left}
Maybe some one know how to get right from this situation it will be good tutorial for all of us
( )Steven Dobbelaere March 5th
I mainly use code snippets in Coda and I often copy code from previously made pages. For dummy text I use a dashboard lorem ipsum generator. I’m not really a fan of code completion.
( )William Monk March 5th
Textmate is great for this, you can start a new document from a personalised template, and inserting text blocks is as easy. If you’re using textmate check out the bundles and bundle editor in the task bar.
( )Shuuun March 5th
hmm, i dont know about this..
maybe i will get some shortcuts for the xhtml basics and a css construct.
but.. i really dont like thet my pc is doing something i cannt even control anymore..
maybe i will check this out for a week or two!
BUT, the point that there is someway to do this is very exicting!
( )thanks for you gorgious video tuts!
Shane March 5th
Interesting article Jeffrey. I use Coda on the Mac and Visual Studio on the PC, and use snippets on the latter to save me a great deal of time on a daily basis. I’m surprised as to how few Visual Studio users are aware of them.
By the way, the new threaded comments are great, but they still don’t display correctly in Opera (v9.62, XP).
( )Mat Packer March 5th
Nice tut Jeff, looks like such a simple and easy way to get back an hour each day, possibly more.
Cheers
( )Mat
Ollie March 5th
Really cool. I have NetBeans and pre-made templates which behave just like that. Though I doubth it has the wrap-something-for-me function.
I always use autoreplacements for CSS, it saves my fingers from overheating. Check this out:
pa; t: 100px; l: 100px; p: 10px; m: 5px; ba image.gif) 0 0 nr;
does:
position: absolute; top: 100px; left: 100px; padding: 10px; margin: 5px; background: url(../images/image.gif) 0 0 no-repeat;
or:
mh;
does:
min-height: 100px; height: auto !important; height: 100px; /* min-height hack for ie6 */
and so on. I get really angry when I have to type it myself
Thanks for the tip, I like the idea of this and will try it out!
( )Steve Robillard March 5th
I use snippely (an adobe air app) to store code snippets to whole page templates. I also have a logitech g15 keyboard which has the programmable function keys. I have a slew of shortcuts for things like subversion shortcuts. I also have used project deploy a web app (a new version is scheduled to drop any day) that creates the basic file and directory structure for a web project.
( )Oscar Godson March 13th
The new version has already been released as public beta/RC at http://projectdeploy.org/beta
( )Ben W March 5th
I just use “code templates” within my IDE (Nusphere PhpED). Much easier! :p
I can set where I want the cursor in any template, create my own templates etc.
E.g.
Ctrl -J then fe
foreach ($| as $value) {
}
( )begs March 5th
I really like this one. I tried it but i’m stuck now:
How can i insert A Special Character like ! or # in Script mode?
Is there any escape character?
e.g. when i want to script “Hello %c !” the ! shoulkd be written, not push the ALT-Key.
Thanks for all that stuff on these pages.
( )Jeffrey Way March 5th
Hey Begs,
Wrap it within braces.
! = “ALT”
{!} = !
Hope this helps!
( )begs March 6th
Hey Jeffrey,
sorry that won’t help. I’m in script mode and warp my ! in braces like:
<{!}DOCTYPE
But when i leave Texter and come back to it, the brackets are gone:
<!DOCTYPE
And this leads to an output of
<OCTYPE
Missing the “D” of course…
Do you have any other ideas?
Thank you,
begs
Remi March 5th
For those using Coda, you can use the built-in Clips functionnality which is very similar. And you can get many clips or sets of clips on sites such as coda-clips.com. I think you can have the same functionnalities on Dreamweaver or Visual Studio (not sure how exactly though).
( )I think you should precise this on your article, so people won’t necessary download another software to do what’s already built-in their coding software. But great post anyway !
paper March 5th
没看懂………
( )Devin Rajaram March 5th
I like this screencast. Very nice
( )Dave March 5th
Very nice. Personally I use Macromedia Homesite. It’s really powerful.
For instance you can select a list of text (each on a new line) and turn into a HTML list with 1 click! Massive time saver!
( )Keith McLaughlin March 5th
Only recently I looked for a text expander program to help me write CodeIgniter code because I was sick of writing $this->load->model all the time. The one I decided on is called PhraseExpress.
( )Benjamin Reid March 5th
I’ve never heard of these before, it looks great! I’m off to get it.
( )Sean March 5th
Downloaded and installed, love it. Noticed it allows import and export of bundles. googled to find some, but can’t seem to find any.
Would love to be able to import a standard set coding shortcuts without having to recreate the wheel. Anyone got some to share or a link?
( )Mike Smith March 5th
I’m working on a set for regular wordpress codes as well as a bundle from the http://www.html-ipsum.com codes as well for easy insertion. I’ll contact Jeffrey when I get them done to see if he can add the download links to the post.
( )SEan March 5th
Actually I’ve decided to do a bundle for ExpressionEngine & HTML combined – already added some from html-ipsum.com hopefully will have this done in a couple of weeks. Full-time job, freelancing and family will slow me down, but will get done.
Will write a blog post about my plans for it and suggestions when I get home from work this evening.
( )Sean March 8th
I’ve got the ExpressionEngine & HTML combo bundle ready for download. Leave comments or suggestion on my blog.
http://createsean.com/blog/site/blog/comments/texter-pack-for-expressionengine/
( )Kevin Martin March 5th
Excellent tutorial! I will definitely get one of those text expanders ASAP. Thanks!
( )Rich March 5th
In any texter script, %| drops the cursor into the right place, rather than using the {LEFT} notation.
( )Tom March 5th
All looks pretty cool but doubt it would make things much faster for me personally as I use templates and Snipply to get all my usual code.
Only advantage i see with it is the bit where you can tell it where the cursor can go which is neat…but other than that…
( )Jack F March 5th
I think this will take me a while to get used to but I can see it helping – going to give it a go and see.
( )Eddie March 5th
To set the place where you’d like the cursor to end up after typing, you can also use “%|” (no quotes) where you want it to end up. Also, if you use this method it works as Text.
For example, you could do an anchor link like this:
and the cursor would end up between the quotes.
Much easier than ^{LEFT}{LEFT}{LEFT}…
( )Jeffrey Way March 5th
Oh – good point.
( )Gautam Chadha June 2nd
But this trick only works in text mode only, For script mode you need to do ^{LEFT}{LEFT}{LEFT}…
( )Zarathustra March 5th
Texter is of course simply built on AutoHotKey. Once you start to harness the power on tap with AutoHotKey you will never look back. Personally
( )I would skip Texter and go straight for the daddy! http://www.autohotkey.com/
Will March 7th
Thanks!
( )Jonathan Powell March 5th
For those using Coda, you should check out Coda Clips. http://coda-clips.com/
( )Patrick March 5th
Nice idea, tagged scripting
I’ll test it out.
( )Nina March 5th
Awesome! I develop sites and content in high quantities and this works better than using Dreamweaver’s concept similar to auto-text. I will definitely benefit!
( )Kevin March 5th
Extra Space was because you make a space between “This is my text” and “wrapp”.
Nice tuts thx for all
( )Craigsnedeker March 5th
WOOHOO this rocks!
( )Neil March 5th
I love both TextMate and E Text-Editor because these have this function built into them, but they are not free. Also, you can configure gedit to work this way as well.
( )Anton Agestam March 5th
I can’t get the code this code for anchords working (%|), any ideas?
( )delphiki March 5th
You need to save your hotstring as Text, not as Script
( )Somej March 5th
Ah, thanks, I had the same problem.
delphiki March 5th
Awesome! Just what i needed! Thx!
( )Saro March 5th
Thanks for pointing that out!
( )iPad March 5th
This is great!! RIM takes this idea for the Blackberrys, saves a bunch of time
( )ThaClown March 5th
Thanks so mutch for this! im saving time already!
Maybe I could make a “Auto thank Nettuts” and “JW rocks” function”…
( )Chris Simpson March 5th
haha or a kiss-ass + TAB
jokes. good post.
( )Benjamin Reid March 5th
After using it for a while it seems to be playing around with PS CS3 shortcuts. For example, when holding space to get the Hand Tool it toggles it instead & my Save for Web shortcut does nothing.
Do I have to change some settings?
( )Jeffrey Way March 5th
Okay – that explains it. I was experiencing the exact same thing. I never made the connection that it might be a Texter issue. I wonder if there is an easy way to fix it. Might be best, for the time being, to close Texter when working in Photoshop.
( )Zarathustra March 5th
Or write your own script in an hour that does exactly what you want it to do, courtesy of AutoHotkey, the scripting program that Texter is written in.
Benjamin Reid March 6th
Ah I found that if you set a ‘Global Disable’ shortcut, you can turn it on and off quickly when you are in PS. Hope this helps.
aa March 6th
I had a similar problem in PS and in CoreldDraw too, then fixed it by playing around the Texter preferences, only can’t remember which. Try turning off “Enable Universal Spelling AutoCorrect” in the texter preferences for example.
also, a cute functionality under Texter>Preferences>Stats tells you the time you’ve saved typing.
( )Timothy March 5th
Was not aware of Texter. I’ll have to check it out. I tend to use SciTE, but I don’t think it has this functionality.
( )Rick Blalock March 5th
Textmate is great for the mac for this because it’s similar to textexpander but can be “expanded on” (pun intended) to do a lot of other advance things.
Jeff is right. This stuff saves a TON of time. I created a textmate bundle for joomla just to save on the time because I am always doing joomla templates. With it I converted this template is around 15 minutes: http://vimeo.com/2744604
http://beautyindesign.com/articles/joomla-15-textmate-bundle-alpha-release/
( )123 March 5th
i bet you pasted in the lorem ipsum:D
( )Ryan March 5th
I’ve been putting this off for a long time, thanks for “push” :>
( )Joe March 5th
E text editor has this functionality, but it’s confined to that application. This program is good because it can be used for everything.
It’s an awesome little program, but I cannot figure out why the %| variable isn’t working. For example, i have a hotstring called “para” that spits out %|. It should put my cursor between the paragraph tags, but instead it prints out the %|.
I have it all set to script, but it still doesn’t work correctly. Anyone have any ideas?
( )delphiki March 5th
Save it as Text
( )Joe March 5th
Oh what the hell. It has to be text? Ugh. <_<
Jeff March 5th
Cool.
( )Somej March 5th
Wow, awesome. I’ll definitely be using this in the future.
( )Dan Cave March 5th
Isnt this just macros for notepad?
dont get me wrong i like the idea, it would take some customization to be any use, even then it would only really work in a place with a large volume of small sites going through. not so good for large bespoke web apps?
( )Mark Sanborn March 5th
Vim does this and a whole lot more.
Gmail also now has templates.
( )Bjorn March 5th
Yeah, haven’t ever used. Bookmarked for down the road…
( )Mike Kivikoski March 5th
On a slightly different note, if you are have to go through multiple folder structures daily on multiple servers you can use a program called Launchy (windows) that lets you set up shortcuts to open the specific folder or program up. http://www.launchy.net/
( )DataTat March 5th
I have to give a shout out to TypeIt4Me, a stalwart Mac alternative that I’ve been using since the days of OS 9. It has lots of advanced features, AppleScript integration, and works in every application. You can read all about it at http://ettoresoftware.com/EttoreSoftware/About_TypeIt4Me.html, and see a feature comparison chart.
For my text triggers, I always use a preceding comma. I chose this because words never start with a comma, and it helps me to use natural, descriptive language rather than of cryptic, difficult to remember descriptors. This means I can type “jQuery” when that’s the word I want, but “,jQuery” to expand my trigger into a jQuery-related snippet…
( )Joe March 5th
I just made 2 small texter bundles if anyone is interested: an HTML one and a Wordpress one.
To use them, just do Bundles > Import in Texter.
I didn’t really know where else to host them, so the file is on file dropper.
Here’s the link: http://www.filedropper.com/texterbundles
Now I know the bundles do not include EVERYTHING concerning HTML and Wordpress, but it’s a start
( )M.A.Yoosuf March 5th
Thank you brother
( )Joe March 5th
No problem
Mike Smith March 5th
ah, you beat me to the punch. I had about half a bundle done last night and am finishing it today. THANK YOU FOR THESE! When I release mine, I’ll add a link to yours on my post as well.
( )Joe March 5th
You’re welcome/Sounds good
Ariah Fine November 21st
Mind re uploading your bundle? I’d love to use it but the link appears to be dead.
( )Texter4Ever March 5th
Perhaps you could share with us your Texter snippets? Just use the export function in texter and post it online?
TIA
( )Pegaso March 5th
I’ve been using PhraseExpress for over 2 years and it’s amazing. I’m not sure about differences with Texter and which one is better.
( )weblizzer March 5th
such a great tips.. it really helps a lot thank you for sharing
( )Roland Porth March 5th
TextMate +1 – Love the tab completions (snippets) and bundles!
( )Felipe Navarro V. May 14th
+1 TextMate iks really great!
( )Muhammad Adnan March 5th
i didn’t heard this before , its great information for computer users !
its saves time !
Thanks Jeff.
( )Robert DeBoer March 5th
The possibilities goes beyond just programming too. For instance, I am heavily using my resume and cover letter at the moment. So, instead of repeatily pasting them into e-mails and forms, I have created a hot key for my resume, one for my cover letter, and one for both (useful for e-mails). Saves lots of time.
Another idea is to create a template layout hotkey – emptywordpress + tab would give you a complete index page of the basic and most common tags you use.
( )Jonathan March 5th
Great tutorial, Jeffrey. I myself am quite fond of Lifehacker’s Texter utility. Quite a timesaver.
( )Bryan Kwon March 5th
Great Tuts as always,
( )I gotta say TextMate(mac) is perfect for this and more
brian March 5th
I agree, for mac users these are pretty pointless. nothing presented here that TextMate can’t do better. I also recommend Quicksilver, and Automator for any Mac user that wants to speed up any workflow.
( )copyleftdev March 5th
sounds like snippets to me , been around for ages and most developer use it to the fullest, most programmer editors have some sort of snippet module , my favorite being textmate, vim has a decent snippet module for the Linux users it is called snippetsEmu.
( )Lee Braiden March 5th
With all due respect, I thought this solution was far from ideal, so I’ve written up my take on it:
“Jeffrey Way posted a screencast on NetTuts with the tongue-in-cheek title, How I Can Code Twice as Fast as You.
The basic premise is that repeating long blocks of code known as boilerplate that are always the same (but are required nonetheless) is time-consuming, and that it’s more efficient to use an editor with text expansion to get around this. There’s a little bit of merit in this under certain circumstances, and Jeffrey’s example was possibly contrived. However, I find it quite a wrong-headed approach to development under most circumstances — so much so, that it’s a pet hate of mine at the moment. I’m going to bemoan it a bit then, and in the process, I’ll also attempt to be constructive, sketching out an altogether nicer alternative.”
— http://irukado.org/archives/2009/03/avoiding-mundane-repetition-single-sourcing-vs-text-expansion/
( )Radu Martin March 5th
Great program
i use Editplus and it has some code snippets an i use them a lot especialy for sql query and inser and update bla la .
but i loved the part with wraping a line of code with the p element. that was sweet.
love your screencasts.
( )Joseph McLaughlin March 5th
I use TextMate’s built-in snippits and can’t live without them. Can’t really justify buying TextExpander though, seems like TextMate can do everything I want.
( )Deron Sizemore March 5th
Wow. Never seen anything like this before but am definitely going to start using it. I use NotePad++ as well, so this should come in handy. Thanks!
( )Bruno March 5th
(mac user) just create a custom textmate bundle with all the snippets you use often… that’s all you need to be fast.
( )delphiki March 5th
Here are a few scripts I made with some _indented_ html snippets. Hope it could be useful (ul, table, html base code, select…)
Some words are in french (the html base code is the french one), but you can easily modify them.
http://www.delphiki.com/downloads/TexterHtmlBundle.rar
( )J March 5th
Oh don’t forget you get all this TAB completion in BASH (programmable / extendable completion … (as in lots of the work has been done for you by others!) )
( )Francesco March 6th
Someone has an idea on how to share hotstrings between computers and/or collabs? For example using dropbox? Is it possible to save hotstrings in a custom path?
( )Jan March 6th
I’ve found kind of similar : http://flashpaste.com requires a bit more steps to get your snippets, but you do not have to remember all the shortcuts you have, please check out!
( )Luc March 6th
Clever idea, too bad you have to choose between the time saved through using your ‘texter’ short cuts & time lost + fustation caused, through conflicting program issues that seem to be generated by using this program. – like not being able to drag n drop emails in Lotus Notes or files in Explorer
( )Martyn March 6th
I’ve used TextMate and I think that’s pretty good. I can tend to remember the code i usually repeat and dreamweavers facility of predicting is ok. (just)
( )Kevin March 6th
In most Windows programs that I’ve used, to delete whole words like you were demonstrating in the video you can just use CTRL-Backspace or CTLR-Delete (I guess that would be ^{BS} or ^{DELETE}).
( )Terry March 6th
I’ve used this before. It’s pretty cool:
http://www.humanized.com/enso/
Not advertising, just sharing…
( )Adel March 6th
i just looooove u jeff.
( )thanx man, u really changed my life
Chikezie Ejiasi March 6th
This is why I love DW snippets so much. They save so much time. I use it for my CSS Framework, Mootools development, and certain XHTML site structures.
Thanks for sharing!
( )Diego Machado March 6th
If’s somebody uses some other language on Windows that’s not US will get some issues with Texter.
For example, my Windows language is Brazilian Portuguese. If i create the block of code ” name=”email” “, when i use it Texter will produce “name=ëmail”.
To solve that, just use one space before ‘e’, like ” name=” email” ” that Texter will produce as expected.
Awesome post Jeff. Already using it.
Thanks from Brazil !
( )Micheal March 6th
is it possible to add scripts like this to Dreamweaver ?
( )Blaine March 30th
Dreamweaver has what’s called “Snippets” which is located under Windows/snippets or Shift + F9.
More information can be found here:
( )http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7bd2a.html
Taimur Aziz March 6th
WaW .. That’s gonna save my time while I’m coding a dozens of Joomla templates .. Thank you so much for the cast
( )Meshach March 6th
This was on LifeHacker
( )Joe March 6th
They know… And Lifehacker made it.
( )Pieter March 7th
Hmm, never used a textexpander.
( )I think starting from a basic xhtml template speeds up your coding process enough.
jakm March 7th
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….
( )Will March 7th
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.
( )ali March 29th
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.
( )ali March 29th
and my email is : maliayas1@gmail.com
Richard Schmitt March 7th
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/
( )Tommie Hansen March 8th
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 …
( )Matthew Hunt March 8th
coda’s clip feature can save you lots of time. Although I do like text expander’s fix typo feature.
( )Ana March 8th
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.
( )Tom March 9th
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
Anton Agestam March 9th
Very useful indeed!
( )Cheers!
Pablo March 9th
Wow! I though that I was fast enough typing + using EIDEs.
Thanks Jeffrey. Great tip!
( )Pablo March 9th
Woops…. typo… blame TextExpander. I meant I was fast using IDEs
( )mildo March 10th
Great Idea.. I will try it!
( )Nico March 10th
Nice Tool Dude! I love it!
( )Surya L March 11th
%ds not working in script mode
( )paul March 13th
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
( )Meshach March 14th
Has anyone noticed texter interfering with Photoshop? It’s so annoying!
( )Jay March 16th
Yes!
( )Meshach April 15th
Help!! How do I fix it?
Steve Robillard March 14th
Jeffrey,
Typinator a text expansion app for the mac is free for signing up at macheist.com
( )SeanJA March 16th
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…
( )Ronn0 March 19th
I use this one:
+{HOME}^x{ENTER}{ENTER}{ENTER}{ENTER}{ENTER}{ENTER}{UP}{UP}{UP}{TAB}
Thanks for this screencast, love it!
( )Anraiki March 24th
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…
( )Bob Parker March 27th
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.
( )Rick Bross April 5th
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
( )Rick Bross April 5th
Just List the Gmail one, but it works with Yahoo and ATT email.
( )Meshach April 7th
How do I stop it from interfering with photoshop?? :O
Please help!
( )Ron April 16th
You could disable it temporarily while you’re in photoshop. Right click on the system tray icon and click Disable.
( )Meshach April 20th
Hey Ron,
Thanks a lot buddy.
Dave April 11th
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.
( )Steve April 23rd
Great tips! Using textexpander for mac all day and it really saves a lot of time
Btw, your voice sounds like Steve Jobs
Cheers
( )Will April 26th
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?
( )Erik April 27th
Yes, I have actually.
( )Texter v.06 is much better than .05 in Aptana
Andreas May 14th
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
Cheers
( )Andreas
_equ May 15th
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
Jack Franklin May 21st
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)
( )Ariah Fine November 21st
I’m interested! email me if you don’t mind ariahfine at gmail
( )Sathish May 26th
Notepad ++ and quicktext plugin FTW!
( )David Morning June 5th
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
( )alberto marlboro June 11th
Nice tip, now incorporated to my arsenal of weapons
( )Joel Glovier June 25th
Very nice!! Thanks.
( )ibrahim benzer July 28th
jeff, google has heard you and implemented canned responses
( )Cuijiudai August 15th
The sofeware does not work well in e-texteditor ,that a pity….
( )Raspo August 25th
This is just awesome!
( )Lagr Dagrsen September 23rd
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
( )ThaClown September 24th
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….
( )flash October 21st
Great tutorial.
I’m forever forgetting what the tags are to enter code into words press.
Now ‘addsource’ + TAB gives me
[sourcecode language="php"]{return}{return}[/sourcecode]{up}{home}
( )