Jun6
How to set up a sexy jQuery TextMate bundle
- posted by: Bruce
- 9 comments
- post a comment
Here at Imulus we’re massive fans of jQuery. We use it on a lot of our projects. We’re also fans of TextMate, an awesome text editor produced by the folks at MacroMates. Over the last few years we’ve refined our TextMate bundles (code highlighting and language recognition packages) to work ideally within the Imulus process.
So, during my recent love affair with jQuery I’ve heavily relied on their documentation section to look up specific functions and commands. And while their documentation is awesome, it’s still a slow process. Luckily, an awesome guy named Karl Swedberg has put together a beautiful jQuery bundle for TextMate that has tons of snippets for common jQuery tasks. And, it’s free!
Installation
Head over to GitHub and grab the lastest version of the bundle. When you download it you’ll get a weird filename like this:
kswedberg-jquery-tmbundle-b0622e4f889112c37e03400a6a3e63241ab29c31.zip
Unzip the file and change the folder name (which is the same as above) to:
jquery.tmbundle
Open up TextMate and then double click the jQuery bundle file you’ve just created. Boom! The bundle is installed.
Making it work within HTML documents
By default the jQuery bundle is set to only work within .js files. However, if you’re planning on using it within HTML pages you’ll need to do another few steps of work. First, copy the following code to your clipboard:
{ name = 'source.js.jquery.embedded.html';
begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)';
end = '(?<=</(script|SCRIPT))(>)(?:\s*\n)?';
beginCaptures = {
1 = { name = 'punctuation.definition.tag.html'; };
2 = { name = 'entity.name.tag.script.html'; };
};
endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; };
patterns = (
{ include = '#tag-stuff'; },
{ begin = '(?<!</(?:script|SCRIPT))(>)';
end = '(</)((?i:script))';
captures = {
1 = { name = 'punctuation.definition.tag.html'; };
2 = { name = 'entity.name.tag.script.html'; };
};
patterns = (
{ name = 'comment.line.double-slash.js';
match = '(//).*?((?=</script)|$\n?)';
captures = { 1 = { name = 'punctuation.definition.comment.js'; }; };
},
{ name = 'comment.block.js';
begin = '/\*';
end = '\*/|(?=</script)';
captures = { 0 = { name = 'punctuation.definition.comment.js'; }; };
},
{ include = '#php'; },
{ include = 'source.js'; },
);
},
);
},Then open up the TextMate bundle editor and drop down the HTML arrow.
You should now see a huge list of snippets, commands, and preferences. Located in this list is an HTML language icon, it looks like this 
. Once this is selected you should see a large amount of code to the right. Paste the above code directly in the following position after patterns = (
That’s it, you’re done. How you can access tons of jQuery snippets and code examples directly inside TextMate.
Once in a while you come across a script that makes your life dramatically easier. Today that script was 
Yes, you can track file downloads with Google Analytics. Although it doesn’t automatically give you that capability by just dropping in the Google Analytics Code, here is a simple method to add that tracking ability. For each file that you want Google Analytics to track, you need to create a “virtual page” using the pageTracker function in each file HREF in your site. 
A constant problem that we run into here at Imulus is clients that want tables with alternating color rows but don’t understand the concept of editing HTML to add a class of odd or even to them. 
Google Notebook
Google Music Trends
Google Trends
Google Code Search
Google Mars
Google Information / 411
Transit 
