We’re proud to announce that our most recent piece of work, the Spillt Motion Graphics website, has been nominated for a CSS Design Award and has been added to the Favourite Website Awards 2011 Public Shortlist! It was great creating this site for Spillt, an awesome motion graphics company based in Denver, and working with designer Sean Herman! Thanks to everyone who has visited, supported, or enjoyed the site. Check it out here.

Here’s to many more exciting websites to come in 2011!

1. Find and Replace with Regular Expressions

This is by far one of the most powerful tools in TextMate. Regular Expressions allow you to edit very specific selections in your document. Regular Expressions will allow you to find any e-mail address, phone-number, or other specific type of text in your TextMate Document, giving you unprecedented control over your code. You can find some TextMate RegEx reference material here.

Here’s an example of a way to use TextMate’s Regular Expression feature. If you get confused, you can refer to the TextMate documentation (http://manual.macromates.com/en/regular_expressions) which explains all of the Regular Expressions used in TextMate.

So let’s say I want to find any group of letters followed by a colon (for example any css property). First, I want to specify that the string I’m looking for starts with 1 or more letters (but no numbers). Looking at the TextMate RegEx reference, I see that \w denotes a word character (aka letters but not numbers) so we’ll start with that. Next, we know that there needs to be a minimum of one letter before the colon, but there is no maximum amount of letters. Looking at the reference, we can see that the plus sign denotes 1 or more occurrences of a character. So, so far we’ve got the following:

\w+

Next, we know that after the series of letters, we are looking for a colon. In order to denote a colon character, we simply surround the colon in square brackets. In TextMate’s regular expressions, square brackets denote a character class. In this case, we only want the colon character, so we surround just the colon in square brackets. The final result is as follows:

\w+[:]

Go ahead and try it out! Write some text in your document, and include some words followed by a colon. Press Command + F to open the find and replace window. Make sure you have the “Regular Expressions” box checked:

If you’ve entered the above code with Regular Expressions enabled, pressing the “Find Next” button should highlight the next instance of a word followed by a colon in your document. While this is a very simple example, it gives you an idea of the power of TextMate to cut down your work time!

2. Projects

In TextMate, you can create projects that will keep all of the files for a particular website or program organized. All you need to do to create a project is go to File>New Project File.

Next, click on the gear icon on the Project Drawer and select “Add Existing Files”.

You can now select any files or folders you want included in your project. The files can be organized into folders, and any time you open your project, all of the files will be there, ready to edit. Once you’ve added the necessary files and folders, click File>Save Project As to make sure your project is ready anytime you need to get to work. You’ll be surprised how much this improves your workflow!

3. Editing Multiple Lines

There are several ways to do this, and they are all incredibly useful! First let’s cover editing the same column on multiple lines. What do I mean by this? Look at the following block of text:

First, I’m going click right before the first letter of the first line, so the cursor sits just before the letter “A” on the first line. Next I’m going to Shift + Click right before the first letter of the last line. This will select all of the text between the first letter of the first line and the first letter of the last line like so:

Finally, I’ll press the ALT (option) key to place the cursor at the beginning of all three lines. It may be a little faint, but in the next screenshot, you should be able to see the cursor spanning all three rows of text:

Now when I type “<li>” to make these into list items, I only need to type it once and it will appear on all three lines! AWESOME!

Alright, so we managed to quickly and efficiently add the <li> tag to the beginning of each line. Next, we’re going to add the closing </li> at the end of each line at the same time. First, I’ll select the end of the first line. Then, just as we did earlier, I’m going to Shift + Click the end of the last line, selecting the text between the end of the first and last rows of text. Once this is selected, I’ll go to Text>Edit Each Line in Selection:

Now, when I type, whatever I type will appear at the end of each line:

If that’s not a time saver, I don’t know what is! Use this to shave off valuable minutes from your coding. It may be a small amount of time, but use these tools on every project and you’ll ultimately save yourself from hours and hours of wasted productivity!

4. Bundles

With Bundles, you have access to code snippets for many of the most popular programming languages! And what’s better, you can write your own scripts to perform tasks for you! Jonathan Kemp over at www.kempwire.com wrote this article on how to make a Bundle that will delete blank lines in your document! It’s a useful tool if you end up with extraneous formatting when pasting text from another document into TextMate. Jonathan shows you step-by-step how to create the bundle, so I won’t go into detail. This technique serves as a good illustration of the power of even the most basic Bundles in TextMate!

5. Color Coding

Alright, so this may not seem as useful as some of the other features, but you’ll be surprised how much a clear color-coding system helps when coding! Having a sensible color scheme helps you spot mistakes easily and allows you to find important pieces of code in a flash.

For example, any misspelling of CSS properties will result in an oddly colored line of code. Having the right color scheme will allow you to see syntax errors as you make them, leaving less busy work later to correct mistakes. As you can see in the screenshot below, syntax and spelling mistakes become glaringly obvious with a color scheme in place:

Experiment with different schemes until you find the right one. It’s crucial to be able to recognize what colors mean. This will help you avoid a myriad of mistakes and ultimately saves your eyes the effort of looking for a specific line of code buried within a large block of text!

Well that’s all for this article! Please contact me if you have any feedback about this (or other) blog posts! I’m interested to hear what’s working and what’s not! Thanks for reading and I hope these tips save someone many hours of valuable coding time!