How to use TextMate

Jeffrey Zeldman Presents

For nearly 13 years, I created websites with PageSpinner, a charmingly old-fashioned HTML coding environment from the days of Netscape 1.0. But two years ago, seeking updated web page encoding and other modern conveniences, I switched to TextMate, “the missing editor for MacOS X.”

PageSpinner greatly helps coders (but offends the aesthete’s eye) with Microsoft-Word-like menu bars containing buttons that let you instantly create paragraphs, list items, and so on. In contrast, TextMate has no UI chrome whatever. A screenshot of the TextMate interface is like a photograph of snow.

For two years, I’ve created web pages in TextMate, hand-coding every entity with no help from the application because I didn’t know it offered any. But my friend Ethan Marcotte knew, and today, responding to my cry for help, he sent the following info:

I highly recommend starting here. (If you only read one thing in this email—and who could blame you?—make it that link.)

Moving on! Here’s a more exhaustive “getting started” tutorial.

Random feature blogs:

Macromates has some helpful screencasts (most of which could use a good editor, but they might be good train fodder):

Because I have no life, I’ll occasionally trawl through Vimeo to find random tips.

And here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice versa).

47 thoughts on “How to use TextMate

  1. I can’t remember a time I pushed a button to produce code. Long live the text editors of the world!

  2. and don’t forget about all those cool bundles, they’re what makes TextMate so great :) btw, Zen Coding is on the top of my most awesome TextMate bundles ever list!

  3. Your post is very timely. I was using Homesite for the longest time. After my transition from PC to Mac last year, I chose textmate as my editor. I tried to read textmate’s documentation but found it really unhelpful. I had another look just yesterday to see if I could figure out how to use code snippets, but gave up.

    I’ll be checking out those tutorials.
    Thanks for sharing.

  4. Although I primarily use Coda for my editor now, I still use TextMate occasionally, especially for quick edits. It’s fast and gets out of your way. I also suggest the Zen Coding bundle as it really helps speed-up some common repetitive typing tasks.

    PageSpinner, huh? Wow, that brings back some memories. Made me think of the old embedded Netscape editor I used for so many years. :)

  5. TextMate has been my favorite editor for years—still is. I’ve tried Zend Studio, Aptana, Coda, Espresso and so on, but I always come back quickly to TextMate.

    Thanks for the links, will surely take a look and see if there’s anything new to learn!

    Oh, by the way: TextExpander is another tool that combines extremely nicely with TextMate or any app for that matter. You’ve probably heard of it.

  6. Ohhhh my gosh, I used to LOVE Pagespinner, it was really instrumental in helping me make the transition to hand-coding. I don’t own a Mac at home anymore, but I definitely will check this out in the future when I get one!

  7. I very desperately want the leading Web developer to learn Unicode, learn to write and most of all accept and publish Unicode HTML files, and above all forget that “entities” ever existed.

    Will my dream come true?

  8. Honest to god, typing ‘lstn’ and hitting tab to get ‘list-style-type: none;’ is a life changing experience. Seems weird but after a day, you’re just moving right along. The abbreviations just make sense. ‘fl’, ‘bgi’,’db’ (float: left, background-image and display: block)

  9. I, too, occasionally go back to Textmate for the simplicity factor and love that about it. I just miss Homesite/Dreamweaver-type code-hinting in Textmate. Coda has also spoiled me with all-in-one, non-bulky FTP/Terminal/Editor/CSS that Textmate doesn’t have yet (as well as my beloved code-completion).

    If Coda would incorporate the bundles from Textmate for HTML/CSS/JS as well as the Textmate Find simplicity/functionality (why do I have to click a dropdown menu to change from finding only in a selection or document in Coda?), along with good code-hinting, it’d nearly be the perfect HTML editor app.

    BTW, funny how Textmate has literally lived on version 1 for several years now but is still as popular as ever.

  10. I still love coding in Dreamweaver. CS5 is excellent. While I use minimal WYSIWYG some of it is useful and a huge timesaver. Highlight text and enter the link into the field. Done. Double click to swap an image. Done. Working with tables is easier. Built in FTP. Pasting in copy from a client is also done faster in DW. Gasp all you want but I’ve tried them all and DW is king.

  11. Started coding on Mac using Subethaedit. Great program, still very strong & helpful when one encounters encoding issues with other languages such as German, French or CJK. But for the look & feel & work flow it has become TextMate. Works great and there a bunch of tools out there improving the overall experience a great deal. Caleidoskope is the latest discovery – a dream if you diff a lot, eg. working with svn & co.

  12. I am personally a Coda guy. However it has become obvious to me of late that the “coding tool” debate is errily similar to the “CMS tool” debate which usually sounds a bit like the “Mac vs. PC” debate and so on. They are all great-for me Coda’s ability to edit files directly on the server makes it a perfect fit. For someone new to coding the WYSIWYG features of Dreamweaver might be a nice way to learn a bit. I guess they are like car, take them all for a test drive and buy the one that hurts your ass the least when you hit a bump.

  13. I *still* use PageSpinner and used to think that I was the only one in the world to do so. Being scriptable (AppleScript) was useful over a decade ago for creating static template driven websites (before I discovered PHP and then WordPress).

    I dabbled with Espresso about a year ago but found myself reverting back to something more familiar after a couple of months. I’ll have to check Optima System has added HTML5 support.

    Before PageSpinner I used BBEdit and used TextMate occasionally for brief spells over the years. Maybe it’s time I gave TextMate a little more attention.

  14. I can’t say that I have tried them all, but I agree with RK – I love my Dreamweaver. I don’t do hip projects like all of you probably do, but I work in a big law firm on all kinds of projects from straight web pages, to designing webb app UIs, to the Dark Art of HTML email and I find Dreamweaver indispensable.

  15. @kazuhito. I’m using with the fake CJK. The issue is that for long japanese text it is not very readable, when it is only a few words. It is ok.

  16. i am a coda guy too. i loved it since the release and i was able to play with it in the office. since a few month i got my own mbp, finally and my first purchase was coda. but i am just in the beginning. and when i worked with windows i used notepad++. since i am lucky to call the cs5 my own, i find myself using dreamweaver once in a while and love it. if ut wasnt too expensive, its a good recommendation for people that just started (wysiwyg)

  17. I’ve tried all the newer contenders but always keep coming back to TextMate as well.

    One of my favorite, somewhat hidden super keyboard shortcut is “Control+S”. It gives you a find within text field row at the bottom of your window chrome that’s faster and less obtrusive than opening up the standard Find dialog. Just start typing and it will try to find the occurrence. Type “Control+S” again to find the next occurrence.

  18. Used to really get on well with Textmate but now find myself using Coda more and more. Built in FTP and version control is great for work-flow. Also really like TEA for coda that among other things enables ZEN coding.

    Thanks for the links

  19. But wait! There’s more. TextMate is also a great lightweight IDE. Use command R on a Ruby or Python file and see what happens. Also, I just developed a need to typeset math. Yep, there’s a Latex bundle with its own command R to preview.

    TextMate does tend to choke on very large files, for which I use BBEDIT.

  20. I’ve only just switched to mac and so far I’ve been enjoying espresso.
    It’s got some great automation for html/css coding and seamless ftp integration.

    I’ll give coda and textmate a go before making a decision but I probably will buy espresso.

    I also tried CSSEdit, the inspect function confuses me right now, it’s not like firebugs.

  21. I’m finally starting to get into TextMate thanks to the ExpressionEngine plugin – entries->tab works beautifully. It is a light but dense package though – I moved from BBEdit and I really miss the three-window Compare command in TextMate.

    @Ahmed El Gabri – cheers for the video.
    @Lewis Nyman – Give CSSEdit some time – the keyboard functionality is brilliant and its x-ray mode really makes it shine. I wish Expresso had it built in.. (I also hope they’re updating it soon…)

  22. I use a very cobbled-together setup these days.

    I’ve always like Dreamweaver’s editing pane – the code hinting and so forth but I just don’t use anything else in there. Tried Coda, Espresso and so forth and just couldn’t get into them.

    I stumbled upon skEdit which, to sell it short, is essentially DW’s code editor with a files pane on the left and (if you need it), SVN integration. I love it. $35? Bargain. Since it was coded by someone from Apple, it is still a good OS X citizen, even though the last change was in 2008.

    I moved to Transmit 4 and so simply mount my servers as disks and do a straight copy in Finder, only opening the main application to, say, change permissions.

    Server files I edit in Textmate, especially Apache configs and the like.

    MAMPstack + Postrgres gives me a local test environment, and Versions maintains a code repository locally (since it’s just there for me to undo any mistakes I make). The working copies are in the htdocs folder in MAMPstack, so I can test by hitting CMS-S and refreshing the browser window.

    It sounds disjointed, but it works for me. I really under-utilize Textmate, but it’s a vital part of my workflow.

  23. Thanks for the post.

    As a PC guy, Notepad++ is my tool of choice. It’s open-source (absolutely free), it’s lean and clean–you do have to hand code everything, but that’s the way I like to code.

    It supports color coding for about 50 different languages, and has a nice FTP plugin. It won’t finish your tags for you, but the color-coding automatically highlights both the opening and closing tag, parentheses, brackets, or curly braces, and if they aren’t highlighted, you didn’t open or close it (depending on what you’re looking at).

    All WYSIWYG editors may look down upon me, but I’m a simple man who likes tools that mostly stay out of the way.

  24. Textmate is the best text editor I’ve ever used. gEdit on Ubuntu with the gMate plugin package is also quite good but nothing matches the ease of use I’ve had with Tm. The keyboard shortcuts, the project organization (simple, and effective) and various macros are boss. Also, if anyone has yet to use SVN with their projects (I have no idea how we functioned before using it) Tm has a great plugin for that too with good diffing, great shortcuts and a simple GUI that lets you use SVN really easily without having another program or resorting to the command line. My only question is why no Textmate on Linux or Windows!?

  25. Textmate just keeps getting better and better, and it can handle just about anything with all of the bundles and plugins available.

    Started out on Dreamweaver (still miss the sites pane and quick previews) moved to Coda for awhile (built-in FTP and SVN was nice but needed little things here and there such as code folding) and tried quite a few other editors (espresso, coffeecup, GoLive, Expression Web, RapidWeaver, Taco Edit, etc.) before deciding on Textmate.

    It seems like I’m finding new techniques and ways to improve my Textmate experience almost daily (such as this article). Plus with Transmit and Cornerstone to do the heavy lifting, and the transmit bundle and svn bundle to do the little things my workflow has really streamlined.

  26. skEdit was just picked up by another company, and we’ll hopefully see a little bit more growth now. I’ve loved it for a long time for it’s absolute simplicity. I can see how TM would be more powerful to super-geeks, but for hand-coding HTML/CSS, I still love skEdit.

Comments are closed.