Grow your CSS skills. Land your dream job.

#90: Simple TextMate Tips

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you've been watching these screencasts for a long time, you know I used to mostly use Coda. Since I've been working a lot more locally, I've been using much more TextMate, which I've always considered to be superior as a code editor but just wasn't as convenient as Coda being all-in-one. I'll cover some things I find cool and useful in TextMate, like vertical text selection, mass indenting, commenting, code folding, find in project, using the minimal bundles, zen coding, and more. I'm sure there are some TextMate gurus out there, so please feel free to share your own tips.

Links from video:

Download Video File

Comments

  1. Good screen cast Chris, I was a bit disappointed when you said it was going to be an all text-mate video because I’m a pc user but many of the things you mentioned apply to Notepad++ which is a very similar text editor for windows so good job.

  2. Jordan Myers
    Permalink to comment#

    Another alternative to TextMate if you are on a PC is Sublime http://www.sublimetext.com/

    • In all fairness, it’s an alternative to Coda on windows that I really need. At the moment I’m using notepad++ for quick changes and stuff away from my computer and Dreamweaver at home but that’s a bit clunky, I need something lightweight with ftp support.

    • I’ve tried every single code editor for Windows in my time, I mean Aptana, Dreamweaver, Sublime, E-TextEditor, Notepad++ and whatnot.

      The best (and I mean T H E best) is RapidPHP 2010.
      Coda compared to RapidPHP is like Notepad compared to MS Word 2010.

    • Permalink to comment#

      Nice one I have been trying different text editors for a while. I will give RapidPHP 2010 a bash now!

    • Permalink to comment#

      Jamie,

      You ought to try UltraEdit, it’s my favorite windows text editor. It’s lightweight and has FTP support.

    • Sebastian Gonzalez
      Permalink to comment#

      notepad++ just released a new version (5.7, I believe) and it has a GREAT FTP client with it that they actually approve of and support. It’s made my life a whole lot easier than having to have 2 different things open. (which I hate.)

  3. brian
    Permalink to comment#

    I also like the single line css format. When I get files that are in the multi-line format. I just do a command + a to select all and hit control+option+Q and BAM single lines. use that one all the time.

    • Jörg Gudehus
      Permalink to comment#

      What is the advantage to put css code in a single line????
      No structure, long lines that break somewhere.
      Tell me one reason to do this.
      To save linefeeds?

    • Super stud! Thanks man.

    • Stefan
      Permalink to comment#

      I wrote CSS in one line for a long time, because it’s more scanable. But now I use traditional style. It’s super fast to find in TextMate with “Go to Symbol”. And one line isn’t good for Version Controll.

  4. Permalink to comment#

    “Uh, there’s no open tags dood”

    Chris Coyier, explaining the error beeps to the rest of us.

    As for Windows, N-Type, E, and Sublime are incredible text editors. Notepad++ is my choice. On Linux, you have the options of Kate and GEdit (as well as Emacs and Vim, of course). All of the above, maybe with the exception of NP++, support soft-tabs. That’s especially helpful if you are doing python development and the previous author used soft-tabs themselves.

    Also, you missed my favorite tip: Holding option should turn the cursor into a crosshair. With it, you can block select text and move it. Jetbrains’ IDEs and Aptana also do this, I know for sure. Some people call this rectangular selection, but I call it block selection. Uberly userful.

    Also, the video, both the flash and downloaded, is cutting out at around 10:00. Could be just my computer, but I was able to reproduce it both here and in VLC.

    • Permalink to comment#

      Found the problem. There’s a bug in Chrome dev that is limiting all file downloads, in browser or saving, to 40MB. In case anybody else had that problem.

  5. Chris, you should check out Yoast’s WordPress TextMate Bundle. http://yoast.com/tools/textmate/

  6. Chris,

    cool screencast. pretty convincing pitch here. a h3ll of a lot of cool and handy features. I’m looking this up to install, and it’s got to be purchased – single user license (€39).

    Come on. With the number of free coding softwares out there, you had to pick that one… lol

  7. Chris
    Nice overview of some useful TextMate features.

    Just to answer your (pseudo) question to yourself in the video:

    When you tab out from certain lines of text (like when the anchor tag didn’t work at 11:03) it is actually going to the end of the “current” snippet. If a snippet has a placeholder of “$0″ it is defining the final location from the tabbing through of placeholders. If the snippet doesn’t have a final placeholder (“$0″) then you can start a new snippet like you tried.

    If you go to the Bundles Editor and select the “li” snippet in that bundle you’ll probably find that there is a $0 placeholder at the end of the list item line.

    So there you go

    Thanks for the video Chris

  8. Alex
    Permalink to comment#

    I don’t know the exact key in TextMate, but in e text editor, when you press Control+L it pulls up a list of “symbols”, these are all of your elements with ID’s in the document. Not as useful for HTML, but very useful for searching through css files. I’m guessing it’s Command or option + L on textmate

  9. The ones I use all the time are:

    Ctrl + Shift + <
    This will create a tag pair which you can then continue typing and it will copy what you write into the opening and closing tag

    Ctrl + Shift + w
    Hitting this whilst something is selected will wrap your selection in a tag pair. Like the command above simply continue to type after you hit this command and you will be able to specify what the tag is

  10. As a few other have mentioned E – TextEditor for windows is very very similar form what I’ve seen from Textmate. It supports most of if not all the features you showed in this clip. Direct support for Textmate bundles and themes as well.

    I just started using it a little over a month ago (trial) and bought it right away… I love it.

  11. dave
    Permalink to comment#

    I like netbeans

  12. Pixoo
    Permalink to comment#

    Hi,

    About the find feature, you were talking about a quicker alternative. Try ctrl+s ;) it’s the scanning feature. I recommend you the TextMate book. Very interesting things in it :)

  13. Scott
    Permalink to comment#

    Just wanted to say thank you so much Chris.
    this was a great help to make better use of this great tool.
    Also thank you for taking the time and energy to help others improve their craft.

  14. If you like the twilight-theme you should check out idleFingers

    Also is there any difference between cmd+bracket in stead of plain old option(+shift)+tab?

    • I was just looking for a way to match the cmd+bracket combo, as I prefer using the tab personally. Turns out that the method you’re asking about is actually an alternative meant for european keyboards, so the functionality is exactly the same.

  15. Brilliant screencast! It’s going to re-ignite my personal TextMate vs. Coda debate…

  16. I hate these Mac-specific screencasts. No use for windows people! :(

    • Yeah I know – It’s a bit annoying, but a lot of the design industry are going over to Macs, same with education.

      Most of these tips can be applied in some way to E-Text Editor which is pretty much like Textmate only for Windows.

  17. NewWaveDave
    Permalink to comment#

    Another great screen cast though I have no clue what you’re talking about. I hate being such a noob. Any chance you could throw together another converting PSD to CSS screencast and show how to get the footer to stay on the bottom of the page. I can never get that to work right.

  18. Jason
    Permalink to comment#

    Nice screencast, as always. Although I’ve never quite understood the reasons behind the anti-Dreamweaver folks. Especially when they then try to recreate much of its functionality through a bunch of bundles.

    • I used Dreamweaver daily for 10 years. Nothing wrong with it, but I forced myself to try Coda and TextMate this year partly as a reaction to Adobe upgrade pricing, and part just to see what they’re about. Honestly, it was very disorienting at first. I found I relied heavily on DW’s CSS panels and built-in FTP. After six months of using TextMate and working in a pure text-based environment, I feel that my coding knowledge has improved and I’m actually able to write code faster a) because it forced me to remember more code syntax, an b) TextMate + Transmit FTP makes for very quick code/preview site/code transitions. Again, nothing wrong with DW but as a 10 year DW user, I’d recommend giving TextMate an extended trial. I’m sold.

  19. My favourite is Komodo edit:

    http://www.activestate.com/komodo-edit

    Not many people know about it I guess, but is has a ton of useful features, like the ones you explained, and FTP support, things like split view and all kinds of handy stuff. Plus this version is free.

  20. I used to use TextMate and Coda, but MacRabbit has been working hard on Espresso. Once it got updated and stable I’ve been using it ever since. It’s a joy to use, it just feels good.

    http://macrabbit.com/espresso/

    Try Espresso with TEA (Text Editor Actions) and the HTMLBundle.sugar and it’s excellent. http://onecrayon.com/tea/

    http://onecrayon.com/products/htmlbundle/

    One Crayon and others have this stuff for Coda too.

    http://onecrayon.com/tea/coda/

    http://www.panic.com/coda/developer/community/plugins.php

    Once Panic releases the next version of Coda, knowing those Panic guys, it’s definitely possible I’ll be switching back to Coda. But until then, Espresso’s where it’s at.

  21. Argh! This is persuading me to move away from Coda and towards TextMate. Do a similar thing for Coda! ;)

  22. Daniel
    Permalink to comment#

    Chris -

    You always hit the nail right on the head. I subscribed to a variety of coding/wp related blogs and yours has the highest post rate for relevant, interesting, down-to-earth-and-downright-actionable posts.

    This TextMate screencast just strengthens my point.

    Why is it again you don’t have a Twitter account posted anywhere? Am I that blind?

    I really look forward to your updates popping up in NewsFire.

    Here’s to you!

  23. Seth
    Permalink to comment#

    Awesome screencast Chris! I definitely learned alot from it and now enjoy using TextMate after installing these bundles…Zen Coding, however, is going to take some getting use to.

    Question for the TextMate guru’s…Is there a way to create some kind of command to quickly display a base of a new html5 document? For example: maybe type “html or html5 + the tab key” to generate the following

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>Title of the document</title>
    </head>
    <body>
      
      
      
    </body>
    </html>
    • Daniel
      Permalink to comment#

      I’m hardly a guru, but AFAIK:

      1. Open the Bundle Editor & select the + sign with the arrow key (more options)

      2. Choose “New Snippet”

      3. Delete the default code that appears in the editor window and replace it with your code template.

      4. Go down to the “Activation” box, make sure that “Tab Trigger” is selected, and enter “html5″ as you tab-trigger.

      Now, anytime you type html5+tab, your template will appear in your TextMate document.

      Hope this helps!

    • Seth
      Permalink to comment#

      Thanks Daniel…worked like a charm. I appreciate it!

    • Seth
      Permalink to comment#

      Hey, I’m also looking to change Textmate to when I open the program…it opens up with the language as HTML instead of the default Plain text. Any suggestions? I’d appreciate it.

  24. Permalink to comment#

    I really enjoyed this. I’ve been using TextMate but not going in and doing anything like the zen stuff.

    Off topic, I’d love to see a screencast about using WP 3.0′s Custom Post Types and Custom Taxonomies together.

  25. Sam
    Permalink to comment#

    there is this very simple alternative to coda in pc named ftpedit , so you can try that , it’s nothing near coda but lets you edit using ftp

  26. Vipul Sharma
    Permalink to comment#

    zen coding is relay speed up to build your site

  27. Awesome screencast, very well done.
    One thing just to mention: If you like Tabs more than Spaces (I think it’s easier to navigate with the keyboard) and get a file where spaces are used, don’t waste time replacing all those spaces with tabs but rather use ctrl + shift + alt +t.

    Oh and you can find all keyboard commands by pressing cmd + alt + t

  28. Permalink to comment#

    Thanks for the share. LT

  29. Mladen
    Permalink to comment#

    You can edit multiple lines at once by selecting them and presing Cmd+Option+A. It’s different than vertical selection, but a bit difficult to explain, so better try it yourself.

    And regarding search in css, press Cmd+Shift+T and type in name of ID or class :)

  30. Nice video explanation for text-mate… Thanks for sharing

  31. Permalink to comment#

    Nice video for beginners :)
    Search and replace shortcuts are very productive (see screencasts on macromates.com).

    @chris : 19:30 : Super fast way to do it is hitting CMD+SHIFT+T (go to symbol)

  32. Wladek
    Permalink to comment#

    Hey,

    Nice video! Which tool did you use to make this video?

    Best regards.

  33. Permalink to comment#

    Oh thank god! Finally I found a place that told me the hot key to activate the Zen Coding shortcuts on TextMate. This like, the 20th blog about Zen Coding I’ve looked at.

  34. Permalink to comment#

    Textmate isn’t picking up any of the newer semantic codes from HTML5. Correct me if I am wrong, but when I plug for example ….. it won’t close itself off.

    Is there a plug-in/update for this?

    • Permalink to comment#

      Sorry, forgot to add this…I can’t collapse those sections in Textmate and I want to know how I can enable that.

  35. Sparkup is more hip than Zen Coding http://goo.gl/eJ7e9

  36. Permalink to comment#

    Great news, everyone! Macromates is coming out with a major upgrade (2.0) to TextMate – sweet! They do not have much in the way of details, as you see here: blog.macromates.com/#post-236

  37. dzul
    Permalink to comment#

    The video cannot be viewed now?

  38. Lejo
    Permalink to comment#

    check this out, for pc user or linux user, this is textmate recharged
    every thing is a text file (preferences, snippet .. .. .. ..ect)

    http://www.sublimetext.com/

  39. Great tutorial! Would love to see a similar one on NetBeans if you get the chance.

  40. Great tips. I want know if I can use TextMate with SVN? Im trying to do this a long time and I dont have progress. Can you help me? Thank you

  41. Tony
    Permalink to comment#

    Nothing is working your video doesn’t play and the download is a txt file that doesn’t open ?

  42. Spun

    hey Chris Thank you a lot for your great work, you are Helping a lot of people out there Greeting from Morocco Keep up the good work.

  43. Mary Pieroszkiewicz

    Is it possible to have Monokai theme in Dreamweaver CS6 ?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".