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

1
2

-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,

1
2
3
4
5
6
7
8
9

-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. Here is a video of it

Creating Textmate snippet for round corners from Ryan Olson on Vimeo.

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!