In the battle of text editors, Textmate continues to come out on top for me, and I hope for you as well. The sheer versatility of the application when it comes to anything text edit related is the reason so many of us cannot leave the editor even though its updated release may have been lost with Duke Nukem.

One of my absolute favorite parts of Textmate is the ability to make custom snippets to do, quite literally, whatever you want. In fact the other day I wrote a command to make me a cup of coffee. It worked flawlessly, but sadly I can’t show you that one, as it is still top secret hush-hush. But, what we can do here today is learn how to make fun little snippets that support text overwriting and tab stops! What does that mean?? Exactly, read on…

What We Want To Accomplish

One thing that is popular and easy to implement now thanks to the growing support for CSS3 is rounded corners. No longer must we rely on images, yay! But, sometimes with all the prefixes, -moz and webkit and the like, I found myself getting lost and forgetting them, so this was the first snippet I made for textmate and it incorporates a few ideas that you can use to make many more of many varieties.

Here is what we are after, being able to type a few letters and have the magic happen. Our “complex” code writes itself, and the borders are beautifully rounded. If we want all four corners rounded the same then we have a shorter mess to write, simply

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Which is not too bad, but what if we wanted only select corners rounded, or even all of the corners to have different radii?!? OH NOES then we have this mess,

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft : 2px;

-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 4px;

Ok, now I realize this is an extreme example with examples that will never be used, but you get my point. It is a lot of yuck to remember. So, let’s make us not have to remember it again!

How To Begin

Go ahead and hit ctrl+optn+cmd+b, this will open up the Textmate Bundle Editor, and we begin our magic.

Bundle Editor

Now if you have not created anything for yourself before, head down to the bottom left corner and hit the down arrow/plus symbol deal, choose the create new bundle option, and name it something remarkable, I chose to name it “My Bundle”, quite awesome.

Create a New Bundle

Once named, click your bundle name so it is highlighted, then click the bottom arrow again and choose New Snippet. You then have the option to name it, and once again in all my cleverness, I named mine Round Corners.

Over in the right area, you will see a bunch of text, for now you can just delete it all. This is just showing us some of the syntax and variables that Textmate has prepared for us to use. Once that is gone, anything you type in that box is going to be what your snippet places in the area it is called. So, here is where we put what we want our end product to be.

Naming Your Snippet

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Down under the main window, notice the activation drop down. I recommend setting snippets to a tab trigger, works great for the workflow. Next to that is a text field,type in here what you want to be the activation keyword to send in your snippet. I chose roundcorners, go figure, so when I type the word and hit the tab key, it is replaced with the code for rounded corners. This is already awesome, but go ahead and check it out!

Trigger Name

Pushing Forward

Welcome back, that was cool right? I know, right now you are thinking of all the shortcuts and sweet ideas you can map to snippets now, but wait, as they say, there’s more! Remember how much it would suck to type out each radius individually for all 4 corners in both mozilla and webkit browsers? Yeah, let’s go ahead and kill that right now. Open up your bundle and add a new snippet to it. I named this one ‘Round All Corners.’ In the big area, paste this in,

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft : 10px;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

That is just the standard code to set every corner individually, all to a default of 10 pixels. We are going to make it much more versatile in this next step.

A Step Beyond

Textmate spoils us with its Unix prowess and gives us access to simple variables to use here, and we are going to create some selected text that we can overwrite, and then tab to the next selected item. Giving us the ability to, once our snippet is inserted, the initial 10px will be highlighted and we can just overtype it, and type 5px for example. Then a tap of the tab key will jump and highlight the next 10px for us to overtype it as well, and so on… Until the last one, the final tab will jump us out of the list all together so we can carry on. I know, it is hard to hold back your excitement for the power you are about to receive. So let’s do it.

Start once more by going into the snippet we just made. And take the very first line, where we round the top left corner for mozilla. After the colon in the definition put a dollar sign, $ , to signify the start of the variable. Right after that drop in an opening curly brace {. What this has done is opened up where we are going to be creating a Selected_Text area. So, because we will have many, type the number one, 1, and then a colon. You should now have the top line looking like this,

-moz-border-radius-topleft: ${1:

Heh, looks like a ninja just chopped it off. Ok then, what comes next is what we want the default value to be, here I use 10px a lot, so I will type that in. Go ahead and type whatever you use most, then after the number, but before the px, type the closing curly brace, }. Then finish the line with the standard semi-colon, ; and that one is done! Now rinse and repeat for the remaining seven lines, doing the exact same thing, only increase the variable number on each consecutive line. So you should end up with something that looks like this.

-moz-border-radius-topleft: ${1:10}px;
-moz-border-radius-topright: ${2:10}px;
-moz-border-radius-bottomright: ${3:10}px;
-moz-border-radius-bottomleft : ${4:10}px;

-webkit-border-top-left-radius: ${5:10}px;
-webkit-border-top-right-radius: ${6:10}px;
-webkit-border-bottom-right-radius: ${7:10}px;
-webkit-border-bottom-left-radius: ${8:10}px;

Code for all corners

The Prestige

We are almost done, in order to get ourselves out of this tab loop with ease, Textmate gives us a nice shortcut, beyond the final line, type in $0 and this will be the kill tab stop, meaning that once we tab to there, we can type and tab as normal again, we are out of the scope of the snippet. Speaking of scope, you may have noticed the text field labeled ‘scope selector’ which we have not used yet. This is up to you, depending on where you want this snippet to be available. For example, if you only plan to use it inside of a CSS document, then set the scope to “source.css” and this will ensure that anytime you type in your keyword, followed by a tab, the snippet will only be invoked when working in a CSS document.

Setting Scope

Yes, yes, enough jabber and hop over to your CSS page and give this a test! Type your keyword and tab this snippet in there. Notice now how the very first 10px is highlighted? Sweet, simply type your new number there, and it overwrites the default 10, no mouse needed! Tab to the next, then next then next and…you get the idea. The final tab should drop you right out of the loop and you are back to normal. How swell was that!?

Well I hope you learned something you can use here today. Textmate once again is so awesome I can never see myself leaving it, and things like this ability are beyond handy. I have made a lot of tricks like this, have you made any? Would you like to see any other ones made, or any Textmate tips/tricks at all, just let me know in the comments. Thanks for reading, and happy coding!

About the Author: thatryan