Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 22 2012


TextExpander for Web Developers

For those unfamiliar, TextExpander is a fantastic productivity app for Mac that has the potential to save you hundreds of hours over the course of a year, and, with the latest release of Version 4, it’s now better than ever. The basic idea is simple: allow the user to assign abbreviations, which will be expanded to larger strings of text. But, once you really dig into the app, you'll discover just how powerful it can be for web developers.

1 - Basic Usage

Before we dig into some of the more fun techniques, let's first review basic usage for the app.

Let's say that you want to save yourself a bit of time, when creating HTML. Rather than manually typing:


…you instead want to simply enter blockquote, and have that text expand to the HTML snippet above. In TextExpander, that's a cinch.

We begin by creating a new snippet.


Next, within the "Content" window, we can paste in the full text, and specify an abbreviation.


Notice how, in the image above, we also specified, via the %|, where the cursor should be placed after expansion.

We've now created a direct link between the string, "blockquote," and the HTML snippet above. The next step is to determine when we want the expansion to occur. There are a couple of choices:

  • Expand immediately after the abbreviation is entered
  • Expand after a specific delimiter, such as the "Tab" key

Personally, I prefer the latter; otherwise, occasionally, accidental expansions may occur when you least expect it. If you do choose the first method, I encourage you to think wisely about how you name your abbreviations; perhaps a special naming convention will help.

To set a delimiter, choose "Preferences -> Expand Abbreviations," and choose the option that best fits your needs.


Now, try it out! Open a text or code editor, type "blockquote," followed by your specified delimiter (if any), and watch it instantly expand to the HTML fragment, while placing the cursor in the correct location.

Excellent! Very helpful – but we can do more.

2 - The Clipboard

For our next trick, let's imagine that your blog requires specific formatting, when adding images. Perhaps there needs to be a caption, or maybe it should be surrounded by a div – much like we do on Nettuts+.

<div class="tutorial_image">
  <img src="path/to/image.jpg" alt="image">

The only problem is that this is a pain to write manually each time. TextExpander to the rescue!

Create a new snippet, give it an abbreviation of "tutimage," and paste in:

<div class="tutorial_image">
  <img src="%clipboard" alt="%filltext:default=image%">

This looks a bit scary, but TextExpander will help you with the specifics. First, the expansion will assume that you have the source of the image pasted into your clipboard. Then, when you type "tutimage," it'll paste the contents of your clipboard as the value of the src attribute. Notice where we added %clipboard? You'll use this feature often!

But what about that confusing alt attribute section? We can separate this logic into three parts.

  • %% – Represents the beginning and end of the TextExpander logic
  • filltext – The desired command
  • default – The default text that should be applied ("image")

However, if you worry that this will be difficult to remember, TextExpander can auto-populate the data for you.


Now, when creating a new blog post, simply copy the source of the image into your clipboard, and then type, "tutimage." Because we chose for the alt text to be filled in, a pop-up dialog will be displayed.


Either stick with the default, and hit Enter, or set a custom value for the attribute. Once you press Enter, the following snippet will be added to your editor:

<div class="tutorial_image">
  <img src="my-path.jpg" alt="some image">

Nifty! This trick is especially useful, when, for example, copying an image’s source from Amazon S3.

3 - Personalized Messages

It's not that we enjoy form emails (in fact, we hate them), but there are only so many hours in a day. Sometimes, it's easiest to paste in a template and click, "Send." Let's get the best of both worlds instead. We'll use a template, but personalize it for each person.

Create a new snippet, give it an abbreviation of "invoice," and add:

Hey, %filltext:name=person%, 

Thanks so much your business. Please note that I have attached an invoice to this email for $%filltext:name=amount%.

Let me know if you have any other questions, %filltext:name=person%!

Thanks again!  

First, note how we’ve added two `filltext` commands that have the same identifier: “person.” Because the value for each should be identical, when we apply a name for the first fill-in, it will automatically be added to the second occurrence as well.

We’ve also set a fill-in for the amount of the invoice.

Now, when we type “invoice,” along with the delimiter, we’ll see:

Invoice Snippet

These are simple conveniences, but quickly add up to huge time savings over the course of a year.

4 - Vi Fan

Maybe you’re a faithful Vim user, and would like to take advantage of some of those helpful keyboard commands in the browser – perhaps, when creating a new blog post.

Our goal is: when we copy a bit of text and type “s” (for “surround”), that text will then be surrounded with an HTML tag. Let’s make it happen!

Create a new snippet, set the abbreviation to “s”, and add:

<%filltext:name=Tag Name:default=strong%>%clipboard</%filltext:name=Tag Name:default=strong%>

Important: for this to work correctly, make sure that you choose "Abandon Delimiter" within Preferences. Otherwise, the expansion will retain the Tab.

Again, what we have here is really very simple. We let the user specify what the tag name will be (a default of strong), and then we set the contents of the clipboard within the tags.

To try it out, select some text in your code editor, copy it with Control/Command + C, and then type s + Tab.


Once you specify a tag name, hit Enter, and the selected text will now be surrounded with the designated HTML tag.

Okay, okay – it's a bit of a gimmick; but it works!

5 - Those Dang Form Inputs

You hate them as much as I do; create a label, set the for attribute, set the text, create the form input, set the value, name, and id fields. It's all very time consuming. Let's fix that, using an abbreviation of "forminput."

    <label for="%filltext:name=Input ID:default=name%">%filltext:name=Input ID:default=name%: </label>
    <input type="%filltext:name=Input Type:default=text%" name="%filltext:name=Input ID:default=name%" id="%filltext:name=Input ID:default=name%">

Remember: you don’t have to enter this verbatim; TextExpander will provide the necessary menus to make the process as easy as possible.

Now, when we type, "forminput," we get:


If you think about it, there's a lot of duplicated text, when creating labels and form inputs. That's why this technique can be so useful. Set the first for attribute value, and that text will automatically be applied as the label's text, and the input's name and id value.

Now, we end up with:

    <label for="name">name: </label>
    <input type="text" name="name" id="name">

So much easier!

6 – Optional Items

Going back to that previous trick, there might be times when we don’t need a wrapping list item for the label and input. Let’s update the snippet to make those optional, using an “Optional Section.”

Delete the wrapping list item, and choose “Fill-Ins -> Optional Section.”

Optional Items

The key is to make both the <li> and </li> parts optional, but give them both the same name, so that the toggle checkmark affects both.

Here’s the generated output:

%fillpart:name=Wrapping List Item?:default=yes%<li>%fillpartend%
	<label for="%filltext:name=Input ID:default=name%">%filltext:name=Input ID:default=name%: </label>
	<input type="%filltext:name=Input Type:default=text%" name="%filltext:name=Input ID:default=name%" id="%filltext:name=Input ID:default=name%">
%fillpart:name=Wrapping List Item?:default=yes%</li>%fillpartend%

This time, when you trigger “forminput,” you’ll have the option to exclude the wrapping list item.


7 – New File

Mac users: we are all irritated by the fact that there’s no easy way to create an empty new file. Well, here’s a little trick. Even if you’re not typing into a text editor, TextExpander is still listening.

Even better: we can also execute Shell scripts and AppleScripts in TextExpander!

Get where I’m going here? Let’s assign a shortcut of “file,” which will create a new file on the Desktop when triggered.

This time, within the content window, at the top, choose “Shell Script,” and paste in the following:

#! /bin/bash

cd ~/Desktop
touch %filltext:name=file name:default=index.html%

The first line is standard for shell scripts, and points to Bash. Next, as you would do in the Terminal, cd to the Desktop, and create a new file, by using the touch command.

TextExpander Window

That’s it; try it out! Anywhere on your Desktop (even outside of a text editor), type “file” along with the delimiter that you specified. A dialog will popup, with a default of index.html; once you hit enter, the new file has been created!


8 - Markdown

The problem with languages, like Markdown, is that we become dependent upon them. When I’m forced to write regular HTML, whether it be in a browser or Word processor, I silently think mean thoughts. What if we could stick with the same conveniences that Markdown offers, while still immediately outputting HTML? We can – with a bit of trickery.

Let’s consider the use of Github-style code.

echo 'some code';

Let’s create an abbreviation, ```, which will expand to whatever HTML is required to display syntax highlighting for your code. For Nettuts+, we use [language]CODE[/language], but your platform might use pre tags. Let’s take care of the latter method.

Paste in:

<pre name="code" class="%filltext:name=language:default=css%">

And that’s it! Now, type ```, fill in your desired language, and the necessary HTML will be output. Rinse and repeat for all of the other Markdown features you use.

9 - Placeholders

A big part in the initial stages of creating websites is setting placeholders, whether that be the generic “lorem ipsum” text, or image placeholders.

The “lorem ipsum” part will be a cinch. Let’s knock that out right now.

Before we do, though, it’s important that you adopt a system, so that you can remember these shortcuts. For my projects, all placeholder snippets follow a naming convention: the word, “place,” and the name of the snippet.

So, to place a single paragraph of “lorem ipsum” text, I would use an abbreviation of “placelorem1.” And, for two paragraphs, “placelorem2.” If I instead add a placeholder image, then the correct abbreviation would be “placeimage.”

Lorem Ipsum

Well that was easy. Rinse and repeat for as many paragraphs as you need.

For placeholder images, we’ll take advantage of the excellent service. The only problem is that I often forget what the correct URL is. If we instead use TextExpander, that becomes a non-issue.

<img src="" alt="placeholder">

While we’ve set a default image size of 350×150, the popup menu will allow you to override that setting, if necessary. Now, we can add placeholder images to our projects in seconds.

10 - More Options

If you think about the previous placeholder tip, when it comes to image services, there’s a lot of them! Why don’t we modify “placeimage” so that the user can instead select from a variety of choices. As of TextExpander v4, this is now possible.

In addition to single-line fill-ins, TextExpander offers a few others as well, including a Popup menu.

Popup Menu

This allows us to provide a drop-down list of potential fill-ins.

Adding Options

Above, I simply pasted in the correct URLs for several different placeholder services.

<img src="" alt="placeholder">

And, now, when we trigger “placeimage,” we get:


So cool! Anything that allows me to think less, and work faster is a good thing.

11 – Can’t Remember?

If you’re like me, even with a naming system in place, sometimes our brains leak, and we can’t figure out what we named a particular snippet. TextExpander offers some helpful hotkeys for suggesting snippets, creating new ones, and more.

Here’s what I have set for the two that I use most frequently.


Now, if I can’t remember what I called a particular snippet, I press Option + Command + s (“s” for suggest), and now I can search for it. If you’re working along, type “place,” and then see what suggestions it presents.

Suggest Snippet

Once you find the correct snippet, press Command along with the correct number, and your snippet will be pasted in.

Closing Thoughts

I consider TextExpander to be one of the power-house apps in my development toolkit. It only takes a quick peak at the TextExpander Stats to show that I’ve saved an insane amount of time as a result. Give it a try if you haven’t; Nettuts+ gives it a big thumbs up!

October 29 2010


Port the Best Vim Commands to your Favorite Text Editor

I’m sure everyone can agree that the power and control afforded by a program like Vim is incredible. However, understandably, many aren’t comfortable with the various modes, and the command-line feel of it. It’s hard to compete, visually speaking, with a beautiful UI, like Espresso. But, what if we could take some of the more popular Vim commands/shortcuts, and manually port them over for use in Espresso? Wouldn’t that be the best of both worlds?

A Visual Preview

If you’re more of a visual learner, Premium members or marketplace buyers can also watch a 40-minute screencast on this process.

The Goal

You’ll get the most from this tutorial if you have a modest familiarity with Vim and its syntax.

Let’s get a few things straight, right off the bat. To Work with Vim is to work with a language; this is specifically why it’s so powerful. Want to delete the next four words? Easy, type c4w (change four words). What about the next two words? Well we know the syntax: c2w. Hmm…what if I need to delete the next three lines from the cursor’s position? Again, we don’t have to memorize a separate keyboard command; we, instead, use the language: 3dd (delete the next three lines).

Our goal is to port as much of this functionality over to the popular editor, Espresso for Mac. The reason why this is Espresso specific is because we’re going to use macros to mimic a handful of tasks for each command. The specific tasks/keyboard strokes will vary from editor to editor.

It’s my hope that members of the community will begin creating their own ports for their favorite editors. At that point, we can developer a repository on Github.

We certainly can’t port the entire language and its modes over to Espresso; that’s impossible. But we can mimic many of the more popular commands with macros.

Why Bother?

I suppose the answer to this question depends entirely on…you. When I began my 4 Weeks of Vim trial, back in September, I quickly fell in love with the modes and language. However, every editor has its advantages and disadvantages. In my case, though I still love and use Vim every day, I dislike how:

  • Even with plugins, like NerdTREE, it’s still difficult for me to work with large projects and folder structures.
  • Working with files, via FTP, was more difficult than using Espresso.
  • There’s no denying that Vim can’t be as pretty as a native Cocoa app.
  • Espresso has a kick-butt live preview feature that can be enabled, in a new tab, simply by typing Command + Option + P. Further, this window updates in real-time, as you type.
  • I struggled to find adequate debugging utilities for Vim.

Recently, as I was playing around with keyboard macros, I asked myself if there was a way port this functionality. Maybe you’ll love the idea; maybe you’ll hate it.

Required Tools

While Vim is 100% free (that’s part of its greatness), Espresso is not. Further, we’re going to be creating keyboard macros with a program, called Keyboard Maestro. This, too, isn’t free. I’m sure there are some open source macro-creation programs available around the web; however, this one is the best that I’ve been able to find. It’s worth the $35.

To follow along, you’ll need:

  • A Mac
  • A copy of MacRabbit’s Espresso code editor. Again, you can use any editor; but the macros will differ slightly. Follow along with this tut, and then create your own editor’s macros. (Next, let me know!)
  • A copy of Keyboard Maestro. If you’ve never used it, you can download a fully working trial from their website. MacAppStorm has a great article on KeyBoard Maestro, if you need a primer.

Step 1: Your First Macro

Let’s begin with a simple Macro. Using Vim in normal mode, we can type ciw (change inner word) to delete the current word, and move into insert mode.

Now, Espresso doesn’t have modes, but, as I found, that’s okay. We can still type these commands; while they’ll be entered as regular text, as soon as the macro triggers, they’ll be deleted super fast.

So, for our first macro, we want to mimic this functionality. When the cursor is on top of a word, I want to quickly type cw to change the word.

Umm…why not just hit the Command + Shift + W shortcut?

Yes, we could do that, but, in my opinion, we shouldn’t.

  • If every simple command has its own confusing modifier + key shortcut, it quickly becomes difficult to remember all of them.
  • I love the language-aspect of Vim. Once you learn it, the idea of going back to pressing multiple modifider keys becomes a big pain.
  • A big advantage to Vim is that it places great emphasis on keeping your fingers locked (as much as possible) to the center row of your keyboard. Not only does this allow you to type quicker, but you also don’t have to stretch out your fingers every time you want to perform a simple operation.

Task 1

When creating a new macro, the first step is to figure out how to perform the task manually in the code editor. In this case, Shift + Command + W will select the word. Next, the delete key, of course, will delete the word. Those two commands alone will mimic ciw in Vim.

Select a Word in Espresso

Fire up Keyboard Maestro

The next step is to create the macro. Fire up Keyboard Maestro, and, before anything else, create a new group specifically for your Vim commands.

Create a new group

This way, you can limit these shortcuts to only be applied to Espresso, and not, for instance, Microsoft Word. I’ve called my group, VimMimic.

Limit group to Espresso

Now, we need to create a new macro, set a trigger, and choose the expander.

If you’re wondering why we’re not using your existing TextExpander program, it’s because programs like that only expand text. But, we need to perform macros, or tasks.

Recording the Macro

With the preparation out of the way, now we need to record our steps. While Keyboard Maestro has numerous folders/commands available to you, what’s awesome is that it offers a “Record” button, where it’ll listen and record any keys you type, mouse movements/clicks, etc.

If you need to, go back to Espresso, and memorize the keys/commands you need to type in order to change the word. However, be smart about this. For example, should your macro select something like sheldon.couper in its entirety? Or do you want it to select only the word, up to (or after) the period? In Espresso, Command + Shift + W will perform the latter. Decide for yourself on this one. I think, I’ll do the former and select everything.

In that case, I need to be smarter about the macro. After a bit of toying around, this is what I came up with.

Recorded Macro

If you want, create a second macro, ciw (change inner word), that will only select before or after the period as well.

Trying it Out

Once you’ve completed your macro, try it out! Return to Espresso, and, once the cursor is over a word, type cw. This will then trigger the macro, in which all of your previously recorded actions will be played out, in high-speed.

I’m hoping that there’s a way to perform a macro without updating the UI until the very end. But, I’m not aware of how to do so at this time.

A Whole Lotta Work

If you’re not a Vim user, I’d expect you to think to yourself, “All of that work just to delete a word?” And, trust me, I understand. What I can tell you, though, is that, once you’ve used Vim for a while, a language-like syntax makes far more sense to you, than memorizing countless modifier key shortcuts.

And, granted, this is a very minimal example.

j for Down; k for Up

The first time I learned that I was expected to use the letters to move up, down, left, and right (kjhl), I laughed. How old-fashioned is that!? But, once you’ve committed the keys to muscle memory, your speed increases. No longer do you have to drag your right hand to the bottom-right section of the keyboard to hit the down arrow key. Nope – your hands remain in resting position, as those keys lie directly in the second row.

Vim uses modes to switch between commands and inserting text. But, as mentioned above, Espresso doesn’t have these. So, we’ll use the Caps Lock key to serve as our normal mode.

Rerouting the Caps Lock Key

Ask yourself, “How often do I ever use the caps lock key?” If you’re like me, the answer is, “Almost never.” With that in mind, get some use out of it, and reroute its function. On a Mac, this is simple.

Go to System Preferences -> Keyboard -> Modifier Keys, and change the Caps Lock to route to the Control key, which I always have trouble targeting when I’m typing (at least on my laptop).

Reroute the caps lock key

Now, any time that you press caps lock, the control key will be triggered.

Create a new Macro

J for Down

This one is laughably simple, but it works. Now, when you type Caps Lock + J, the down arrow will be triggered. It’s important to keep in mind that you’re not forced to use this, if you don’t want to. You can still press the down arrow key. But, for those who feel more comfortable keeping their hands in resting position, this might be preferred.

Repeat for Every Direction

Your next step is to repeat the cycle for up, left, and right — using the exact same method.

Change Next '

Vim has a nice command, ci' that allows you to empty the contents of the next string, wrapped in single quotes. It’s amazingly helpful, and can really speed up your coding.

Let’s try to create a macro to do this in Espresso. This one will be more complicated, because we have to use the find tool in Espresso to search for the next occurrence of a single quote. So, the solution won’t be perfect, but it’ll get the job done partially.

Change Next Single Quote

Try it out for yourself. Anywhere in your document, type cn'. Unfortunately, at least for now, it only works perfectly for single words wrapped in quotes.

Change Until the End of Line

In Vim, if you type a capital C, in normal mode, it’ll delete all of the text on a line that comes after the cursor’s position. It’s very helpful. We can do the same in Espresso with a simple macro. However, Shift + C won’t work, because Espresso doesn’t have modes. Let’s do Caps Lock + C instead. Remember, caps now routes to the Control key!

Change until the end of the line

Delete Surrounding Tag

In Vim, with the Surround plugin, I can type dst (delete surrounding tag) to delete a wrapping tag. I use it often. Hmm – this will be a trickier one in Espresso, but it can be done. Here’s what I came up with; try it out on your machine.

Delete Surrounding Tag

It’s a bit more complicated, but it works!

Note that, if it seems like a few of those actions can be removed, they’re there because I found odd situations where they were needed. Better to be safe.

Change Surrounding Tag

Equally as useful as deleting the surrounding tag, is changing the tag name.

Change surrounding text

There’s one quirk about this particular method. Because Espresso isn’t mode-based, when you change the tag, this command will take you up until the point where you can change the value of the tag. Once you do, simply press Right, and paste in the original text (that was copied by the macro). You’ll see what I mean when you try it out. Let me know if Espresso has a built in change-tag-name command.


Okay, that should get you started. If you’re a Premium member, be sure to refer to the video portion of this tutorial for a more one-on-one demonstration. The article and video are also available, via the Tuts+ marketplace. I’ve created a repository at Github, which contains dozens of commands that you’re free to use (and improve) how you wish.

Overview of commands

Things to be Wary Of

  • Don’t choose shortcuts that you would type normally. For example, using dd to delete a line will screw things up every time you type “kidding.”
  • Be careful of overriding built in commands. This is always tough; it may take some trial and error to find the most non-intrusive shortcuts.

So, what do you think? Is this the dumbest thing ever, or do you like the idea? I’m curious, though I fit into the latter camp. You also mike like “Venturing into Vim: 4 Week Series”.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...