Wolf’s Little Store

Part one: Textmate, Quicksilver and Textexpander

So part of your day job consists of slicing websites? Well, mine too. It’s enjoyable to see a website being built up part by part, and it’s even better if you’re slicing at a considerable rate. In this article I’ll discuss a few tools and general tricks I use to get the job done faster (and better).

You’ll need a few tools. The first one is a Mac. Just kidding Windows users! But to be honest, I don’t know if there are any good Windows alternatives to the tools I use every day. So this article is written from a Mac users’ standpoint. Feel free to point out similar Windows apps in the comments¹.

My text editor of choice is Textmate. Textmate is a text editor made by Macromates. You can download a 30 day trial off their website. It’s €39 to buy the full version - which is a bargain, considering the time I’ve saved using Textmate. On to the timesavers.

1. Learn your shortcuts

   I cannot stress this enough. This is the number one timesaver. This counts for Textmate as well as Photoshop and almost any application you use. Learning the shortcut for save for web and copy merged in Photoshop saved me many hours already.

2. Work with Textmate projects

   Projects are groups of folders. You can create a new project by hitting Option+Command+N in Textmate. When you save your project as [clientname].tmproject you can easily open the project you need by invoking Quicksilver and typing the name of the client, followed by tmp. Quicksilver finds the correct file for you and you open it instantly by hitting enter.

   We talked about Quicksilver earlier² so I won’t go any deeper into this, but here’s an introduction by Lifehacker.

3. The best Textmate shortcut

   I use Transmit by Panic software to access FTP. If you save the servers you often use as favorites in Transmit you can also open them rapidly with Quicksilver. Simply type in the clients’ name again and presto: there’s both your Textmate project and access to the FTP server.

   The shortcut I use most in Textmate is Option+Command+. - the last key is a period - this shortcut will close your current tag. Let’s say you typed <p>, followed by the shortcut, it would automatically close your paragraph tag, inserting </p>.

4. Use TextExpander

   TextExpander is a simple but -very- helpful tool. It works like this: you enter the text/code snippet you want Textexpander to remember, and you assign a shortcut to it. The default shortcuts start with a comma followed by the shortcut name. Since decent people type spaces after their commas, you’ll never run into problems of typing a shortcuts when you didn’t mean to. As long as you stay in the text editing and HTML/CSS field, I don’t know about PHP or Javascript syntax.

   One exampled of a shortcut I use during slicing is ,unorderedlist. When I type this shortcut, the following code snippet appears:

   <ul>
   	<li><a href="#"></a></li>
   	<li><a href="#"></a></li>
   	<li><a href="#"></a></li>
   </ul>

   You can even set where you want to set the mouse cursor to be when the shortcut is pasted in your document.

   Another handy thing I use this for is filling out forms, especially comment forms. Comma wls translates to http://v1.wolfslittlestore.be, comma mail translates to my email address. I also have a comma lorem ipsum :). Once again there’s a 30 day free trial available at the TextExpander website.

5. Indent selection in Textmate

   We all get tired of other people’s messy and highly unreadable code. Luckily there’s a little option in Textmate to help us out, and it’s called indent selection. By selecting all your text using Command+A and hitting Option+Command+[ your code will be cleaner in seconds. Also helpful for fixing invalidly nested divs. There’s no guarantuees though, and in most situations some manual cleaning will still be required.

That’s it for part one - to be continued!

• Category: productivity
• Back to the overview