Love the web
Love the web is a design, programming, and usability blogPower editing with Textmate
6 comments
David Montgomery 19 Feb 2009
This article gives us a brief look into what Textmate can do in an HTML workflow. First some everyday tricks and tips, and then onto something a little more powerful.
Some everyday examples
- Textmate knows to close quote marks when you type the first opening quote
- p + [tab] will create <p></p> cued between the brackets ready for you to type your paragraph
- lorem + [tab] - this will generate a paragraph of lipsum dummy text for you
- Select a block of text command + / - this will wrap the text in html comments
- Select your text control + shift + W - this will add open and close tags ready for you to type your element
- Command + return - this will generate a <br /> tag
Textmate power editing
Textmate has many third party bundles which allows for added functionality. One of my favourites is an HTML bundle from Minimal Design which complements the already very effective tab triggers that come installed by default. Below is an example of a step by step process to unleash some Textmate power.
Creating a simple navigation
1. With Textmate we can already create an unordered list by typing ul + [tab] which gives:
<ul>
</ul>
2. Then for the list items li + [tab] then type ‘Button 1’ etc
<ul>
<li>Button 1</li>
<li>Button 2</li>
</ul>
3. We want Button 1 to be a link – Select “Button 1” shift + control + L. This will wrap it in link tags.
<ul>
<li><a href=’#’>Button 1</a></li>
<li><a href=’#’>Button 2</a></li>
</ul>
An even better way
This is all a lot faster than coding it all by hand, but Textmate allows for an even quicker way to go about this, which is very descriptive of the power of Textmate.
1. Type your list …
Button 1
Button 2
2. Select the ‘Button 1’ and ‘Button 2’ then hit control + command + L.
A contextual menu will appear that will allow you to perform from a number of choices:
3. Type 7 and all the hard work is done for you. The code below is automatically generated for you. Textmate power editing magic!
<ul>
<li><a href=’#’>Button 1</a></li>
<li><a href=’#’>Button 2</a></li>
</ul>
Read the next post - Cross-browser Drop-shadow Text
6 comments submit a comment
nickj
Nice work Dave!
again...makes me wish I was using mac. textmate & other things like this sure do fill me with coder envy ;-)
Mike Birch
Good stuff, Dave. More TextMate tips in Jason Rudolph's
TextMate Oldie But Goodie Wrap-up.
Peter Dekkers
Those are some handy shortcuts right there. One of the other things I've always liked about Textmate is that it allows you to select vertically and type/work on multiple rows at once.
Too bad I use Eclipse for all my work though, wouldn't be able to miss it with all its PHP editing goodness. But that's another article ;)
scott
It would have been helpful if you linked to the bundle. I just happened to find it while searching around.
http://minimaldesign.net/downloads/tools/textmate-html-bundle
Mark
It is VERY misleading to say that TM does what you say. it does not. The default HTML bundle is lacking in functionality. None of what you describe, happens in the TM default. Glad Scott had a url for the bundle.
Reg Sime
Thanks Mark and Scott for your comments. I doubt Dave was intending to mislead, but probably forgot to put a link through to the bundle he's demonstrating.
Anyhoo's, I've now updated the article to link through to said bundle (and credit Minimal Design) above.