Try Tuts+ Premium, Get Cash Back!
Quick Tip: Use TextMate Bundles to Increase your Productivity
videos

Quick Tip: Use TextMate Bundles to Increase your Productivity

Tutorial Details
  • Topic: TextMate
  • Format: Video
  • Difficulty: Easy

TextMate is one of the most versatile tools any web developer can wield. This video aims to show you one of the easiest ways to increase your productivity and workflow while having fun doing it!

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://newarts.at Drazen Mokic

    Snippets are definitely awesome, thanks for rhe demo.

    Btw: When you create teh Bottom Round in the Video it`s actually Top, not Bottom. Later in the “Round Each” part it`s correct :)

    • http://thatryan.com Ryan
      Author

      Ah dangit!

      I actually noticed that when I went to use the snippet the other day and confused myself, didn’t even notice it. lol

      Sorry ’bout that!

  • edwinhollen

    Fantastic screencast! This really helps! I didn’t know how to use the variables or tab stops in the Textmate snippet tool. Thank you very much.

  • Nick

    Thanks Ryan for the handy tips.

    Can you share your own rolson’s bundle? It would be great. thanks.

    • http://thatryan.com Ryan
      Author

      Hey Nick,

      I will work on cleaning them up and put a proper release together sure. ;)

  • http://krike.cmstutorials.org krike

    great screencast as always :) I just love textmate :D

  • Joshua Gdovin

    I will watch this later, so if this was said in the video then I am sorry, but I am a windows and mac user. There is a great equivalent to textmate in Windows called e-texteditor, so far any bundle ive ever found was a direct drop into e-texteditor without any problems plus it supports ftp out the box and has a great undo history system.

  • http://lostwebdesigns.com Guillaume

    Great screencast, thanks, textmate just rocks!!!

  • http://dryadales.tk Jeremy

    I want this, but i got windows :/
    I made a google search and found this :)
    http://www.e-texteditor.com/

    Gonna try it know! :) You guys got something more like Textmate on Windows?? :)

    • http://www.windkr89.nl Erik

      Already tried it? I am also looking for a Windows alternative….

      • http://None Mike

        I use E actually, and love it. It’s got all the power of TexMate as far as bundles go. 50 bucks for a lifetime license, deffinately worth it.

        I’ll see about maybe (if I can get over this cold) putting together a screencast on it.

  • http://www.twostepmedia.co.uk Ben Howdle

    Awesome screencast! You do sound like Seth Rogen…

  • http://thatryan.com Ryan
    Author

    Thank you guys! Glad you like it, guess I should make some more..
    Suggestions?

  • http://ashitvora.com Ashit Vora

    This is awesome. I wish I knew this before.
    Looking forward to more such tutorials on increasing productivity.

    Just curious, does text expander have any other benefits over creating bundles in textmate.

    • http://thatryan.com Ryan
      Author

      Thanks! :)

      As far as text expander, I would say yes and no. The benefit is that you can generally use tex expander snippets in any program, while TM is limited to TextMate documents.

      The benefit of TM snippets is the amount of control you get, such as tab stops, placeholders, mirroring etc.

      • http://ashitvora.com Ashit Vora

        Thanks Ryan :)

        Keep posting such nice tuts.

  • http://ufomuffin.com Alex

    Hey, nice this will be super useful, videos always make a difference.
    I’m a big TextMate fan

  • Damion

    Great Tutorial, But you could make it into one snippet by using shorthand.

    e.g. border-radius: (top-left) (top-right) (bottom-right) (bottom-left);

    • http://thatryan.com Ryan
      Author

      Right you can, and I have that one also, but this was to show how sometimes you need to have each corner have a different radius :)

  • http://iusik.ru iusik

    Can somebody help me, how can i open file with Encode windows-1251?

  • http://www.graphiics.com Graphiics

    Snippets are really cool

  • http://haskovo.co Хасково

    Nice article :) I really enjoy reading it =) Thanks again !

  • mustafa

    hi nice post
    im developing an asp.net app
    and i wnt 2 send an sms from that app free of cost
    is it possible
    can u help me plzzz thnks

  • Mark

    TextMate after all these years is still amazing, I switched to Coda in October 2007 but after 2 painful years of trying to convince myself to use an all in one IDE and a sexy UI (I’m a sucker for good looking apps), I ran back to TextMate. Coda 2.0 probably won’t reel me back in, it’s just an awesome editor that keeps on keepin’ on. The bundle support destroys Coda and Espresso’s community by about 500%, it’s just that good. Watching the bundles on Github amazes me how much support and love TextMate still gets.

    (sorry didn’t mean to turn this into a I hate Coda now, I really appreciate it’s efforts).

    • Joayo

      I too forced myself to use Coda for a good year or so. Happily back to Textmate. GetBundles is amazing.

  • Promethius

    Why can’t we get a tutorial that doesn’t require you to have a mac?

    I am a mac hater and tired of all the platform dependent tuts…

    • Mark

      http://www.e-texteditor.com/

      There is the TextMate cousin for PC Prom!

      Jeff does do tutorials on windows also, but their isn’t many text editors on the Windows platform that have a community behind it like TextMate. Well maybe Visual Studio but this site is focused around Web not Application Development. Here is a link from an older review on Nettuts on Windows editors.

      http://net.tutsplus.com/articles/web-roundups/22-neat-code-editors-for-windows/

      Cheer up mate!

    • Joshua M

      Like Mark Said… E-Text Editor is actually textmate for windows.

      It’s not simply a clone, it shares some code – apparently the guy started E to emulate Textmate, then realized that the guy that makes TextMate lived in teh same city as he did and reached out… thats why it’s so similar… it shares some of the code base, especially around the bundle system.

      Also, you can have similar functionality in other editors as well – so you can apply this logic to others. I used to be a very big textmate user, but i’ve switched over to vim (macVim to be specific) since it does all that TM does, plus a lot more…

      But, you have to expect heavy mac use and focus from a modern web development tutorial site. It’s not that more devs use macs – there are probably still more on the windows side – but mac users in general are more “excited” about their tools and more community driven than windows users it seems. Not to mention with things like ruby on rails or even node.js to a degree, its a pain in the ass to work on a windows box because you have to emulate what should be the core of any os (a proper terminal/CLI) to get work done…. so you just kinda gotta accept that there will probably be a lot more tut’s about mac software than the windows counterparts.

  • http://justinkopepasah.com Justin

    Great video and tip!

    Why not just use the border-radius feature that allows you to stack multiple radii into one attribute?

    Example:

    .class {
    border-radius: 8px 7px 4px 6px ;
    -moz-border-radius: 8px 7px 4px 6px;
    }

  • http://www.iMatt.si Matt

    Just what I needed! I just bought myself an iMac and figuring out textmate. This was definetly a BIG help!

    Thumbs up for textmate!

  • http://twitter.com/exceptionalish Nicholas

    I use TextMate for all of my web design, but I’ve never known about Snippets at all–this is incredible, and I’ll definitely be taking full advantage of this! Thank you so much for this badass screencast!

  • Jordi

    Textmate is cool, and this tutorial is also cool!
    Thank you!

  • Fily

    Wow! Great tutorial! I have been using TextMate for a while now but I didn’t know how to use the variables and tabbing stops.

    I will be waiting for the next tutorial!

  • adam van den hoven

    A couple things:

    You’re specifying corners twice for each corner. The corners aren’t top and left they’re top-left so you have border-top-left-radius for both top and left. Its a nit to pick but what ever. The point isn’t the code its the technique.

    But there is an even cooler way to do what you’ve done.

    use substitution for the default values as in:

    border-top-left-radius: ${1:10}px
    border-bottom-left-radius:${2:$1}px
    border-top-right-radius: ${3:$1}px
    border-bottom-right-radius:${4:$1}px

    Now the snippet defaults to 10, but if you change the top left radius they change until you tab into that specific one.

    Perhaps this is more to your liking:

    border-top-left-radius: ${1:10}px
    border-bottom-left-radius:${2:$1}px
    border-top-right-radius: ${3:$1}px
    border-bottom-right-radius:${4:$3}px

    Now the default behaviour is a little different, the bottom right will always follow the top right rather than top left. on the assumption that left and right corners tend to match. If your top and bottoms tend to match more frequently than left/right use:

    border-top-left-radius: ${1:10}px
    border-top-right-radius: ${2:$1}px
    border-bottom-left-radius:${3:$1}px
    border-bottom-right-radius:${4:$3}px

    Snippets are the best.

  • Ed

    Ryan –

    Excellent tutorial! Thanks!!!

    Ed

  • Tim

    Thanks much! Great job!

  • Ciwan

    This was awesome.

    Thank You. :)

  • http://www.wpvine.com Vishu

    Great screencast! Just got my first mac & I am on a lookout for great tips these days :D

  • Rigel

    This is so helpful thanks so much. Will save so much time