Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I’ll show you my favorite tips and tricks today.

Sublime Text 2 is currently available for all major platforms: OS X, Linux and Windows.

1 – Bleeding Edge Versions

Sublime is in active development. If, like me, you want to use the latest possible version of the app, you can download the dev build. You’ll find that new (auto) updates are available every other day or so.

Download a dev build of Sublime 2 here.

2 – Get a Better Icon

Update: here is a better icon.

In its defense, Sublime Text 2 is still in a beta state. The official icon will likely/hopefully change with the official release. Until then, Nate Beaty created an alternative icon, if you prefer it.

 

To integrate it, you need to replace the existing “Sublime Text 2.icns” file with this new one. On a Mac, browse to Sublime 2 in your Applications/ folder, then right-click and “View Package Contents.” Lastly, browse to Contents/Resources/, and drag the new icon in, overwriting the existing one.

Please take note of the fact that, if you’re using the frequently updated development version of Sublime Text, with each update, the icon will be removed. With that in mind, don’t worry about the icon for the time being.

3 – Access the Command Palette

Similar to TextMate, we can use Sublime’s command palette by accessing the Tools menu, or by pressing Shift + Command + P, on the Mac. Whether you need to visit a Preferences page, or paste in a snippet, all of that can be accomplished here.

4 – Lightning-Fast File Switching

Press Control or Command + P, type in the name of the file you wish to access (fuzzy finder), and, without even pressing Enter, you’ll instantly be transported to that file. While Vim and apps like PeepOpen offer a similar functionality, they’re not nearly as fast as Sublime’s implementation.

5 – How Did We Survive Before Multi-Selection?

Editors like TextMate have long offered vertical selection, which is quite neat. But, with multi-selection, you can have multiple cursors on the page. This can drastically reduce the need for using regular expressions, and advanced search and replace queries. Perhaps a quick visual demonstration is in order…

To enable multi-selection, you have several options:

• Press Alt or Command and then click in each region where you require a cursor.
• Select a block of lines, and then press Shift + Command + L.
• Place the cursor over a particular word, and press Control/Command + D repeatedly to select additional occurrences of that word.
• Alternatively, add an additional cursor at all occurrences of a word by typing Alt+F3 on Windows, or Ctrl+Command+G on the Mac. Amazing!!

6 – Indent Guides

Update: this feature now comes preinstalled with Sublime Text 2.

It’s such a small feature, but I’ve always loved how Notepad++ on Windows displays indent guides; it makes the page much easier to navigate and format. Sublime Text 2 offers this ability, via a plugin created by Nikolaus Wittenstein.

To integrate this plugin:

• Download it
• Rename the folder to “Indent Guides” and drag it into the Packages folder. On a Mac, this path would be Application Support/Sublime Text 2/Packages

7 – Package Control

The steps outlined in the previous tip (#6) are a bit tedious, aren’t they? Instead, we can install the excellent Sublime Package Control, which streamlines the entire process.

To install “Package Control,” open Sublime and press Control + `. Next, paste the following snippet into the console.

Don’t worry if you don’t understand the code above; just copy and paste!

Lastly, restart Sublime Text, and browse to Preferences -> Package Settings. If the installation was successful, you’ll now see a Package Control item in that list.

With Package Control installed, the process of adding new plugins and functionality becomes incredibly simple!

For a usage example, refer to the next item in this list.

8 – Alignment

If you’re the type who prefers to line up your equal signs – for example, in your JavaScript…

…this process can be automated, via the Sublime Alignment plugin. Rather than downloading and installing it manually, let’s instead use Package Control (outlined in #7).

• Press Shift + Command + P
• Type “install,” to bring up the “Package Control: Install Package” option, and press Enter
• Look for “Alignment,” and press Enter to install it.
• You’re done; so easy! Type Shift + Command + A to auto-align.

This process can be repeated for all of the typical plugins we install, such as Zen Coding.

9 – Vim Fanatic

I’m a huge fan of Vim. The amount of power it provides is insane. The fact that I’ve switched over to Sublime Text 2 should speak volumes then!

If you’re using a dev build of Sublime Text (see #2 in this list), you can enable Vintage mode, which provides support for the Vi commands that we know and love — okay…some of us love. The rest of you hate it!

To enable Vintage mode, browse to Preferences/Global Settings - Default. Once this file opens, browse to the very bottom, and change "ignored_packages": ["Vintage"] to "ignored_packages": []. Next, restart Sublime, press the Escape key, and, tada: command mode!

Block Cursor

One thing you may notice is that, in command mode, it can be difficult to find the cursor (especially when taking advantage of things like bookmarks). On more than one occasion, I’ve found myself trying to hunt down its location.

While it’s not a perfect solution, a plugin, called “SublimeBlockCursor,” attempts to remedy this issue.

Note: While the readme states that SublimeBlockCursor can be installed, via Package Control, I wasn’t able to find it. Instead, I had to clone the project manually into the Packages folder.

10 – Distraction Free Editing

Sometimes, we need to filter out all of the additional fluff that gets in the way of our coding. Use “Distraction Free Mode” to take this idea as far as possible. This option is available, via the View menu. Select “Enter Distraction Free Mode,” or use the Mac keyboard shortcut, Control + Shift + Command + F.

11 – You Can Still Use TextMate Bundles

TextMate snippets and themes port over nicely to Sublime Text. You only need to drop them in the Packages folder — .tmbundle extension intact, and Sublime will recognize the files. This means that the entire catalog of TextMate themes will work in Sublime!

For example, I’ve been working with the (fantastic) Slim templating engine a good bit lately, and needed better syntax highlighting. Fred Wu created a bundle for TextMate, but, tada, it works perfectly in Sublime Text as well! If you’re interested, you can download the Slim bundle here; it includes both snippets and syntax highlighting.

12 – Custom Themes

The default theme for Sublime Text is excellent, but I much prefer a custom light and dark theme, Soda, created by Ian Hill.

Installation

As taken from the Github page…

“If you are a git user, the best way to install the theme and keep up to date is to clone the repo directly into your Packages directory in the Sublime Text 2 application settings area.”

Using Git

Go to your Sublime Text 2 Packages directory and clone the theme repository using the command below:

Download Manually

• Download the files using the GitHub .zip download option.
• Unzip the files and rename the folder to Theme – Soda
• Copy the folder to your Sublime Text 2 Packages directory

Activating the Theme

To configure Sublime Text 2 to use the theme:

• Open your Sublime Text 2 User Global Preferences file: Sublime Text 2 -> Preferences -> User Global Settings
• Add (or update) your theme entry to be “theme”: “Soda Light.sublime-theme” or “theme”: “Soda Dark.sublime-theme”

Example User Global Settings

13 – Page Crawling

Sublime Text provides us with a few different ways to query a page (outside of the standard search functions).

Functions

Need a quick way to browse to a specific function or method?

Type Control/Command + r to reveal a popup that allows for this very thing (notice the @ symbol)! Even better, the search is fuzzy as well, which is particularly helpful for huge classes.

HTML

What if you want to immediately transition to a specific part of an HTML page – say, to the div with a class of container. Type Control/Command + p, then #, and you’ll instantly see a tree of your document.

Go To Line Number

To quickly move to a specific line number on the page, you can press Control + g. However, you’ll notice that, once again, it’s pulling up that palette (Control/Command + p), and appending the : symbol. This is adopted from Vim.

This means, in addition to Control + g, you can also type, Control/Command + p, and then :LINE_NUMBER.

14 – Fetch Remote Files with Ease

Let’s say that you’re a fan of Normalize.css. Perhaps, you download it and save it to a snippet, or store the stylesheet, itself, in an assets folder. That way, for future projects, you only need to copy and paste.

The only problem with this method – as we’ve all discovered – is that, if a few months have passed, it’s more than possible that the asset (in this case, Normalize.css) will have been updated by the creator. So your options are to either use the, now, out-dated version of Normalize, or, once again, return to the GitHub page and pull in a fresh copy. This all seems tedious.

Created by Weslly Honorato, Nettuts+ Fetch is the solution to our dilemma. It can be installed, via Package Control.

Usage

You’ll only use two commands, when working with Fetch. First, we need to save some file references. Again, bring up the command palette, and search for “Fetch.” For now, choose “Manage Remote Files.”

What’s great about Sublime Text 2 is that configuration is incredibly simple. To assign references to online asset files, we only need to create an object, like so (don’t worry; one will be pre-populated for you, after installation):

So, to pull in the latest copy of jQuery (if you don’t want to use a CDN):

Learn more about using Nettuts+ Fetch.

15 – Prefixr Plugin

Built by by Will Bond (creator of Package Control), the Nettuts+ Prefixr plugin allows you to automatically update your entire stylesheet to include support for all of the various required CSS3 vendor prefixes. This way, you never have to visit the website itself; you merely type a keyboard command, and:

…will be converted to:

Usage

Once installed (via Package Control), select your stylesheet (or a single block), press ctrl+alt+x on Windows and Linux, or cmd+ctrl+x on OS X, and the code will instantly be run through the Prefixr web service.

16 – Launch Sublime From the Terminal

Sublime Text 2 includes a command line tool, subl, to work with files on the command line.”

To use it, create a symlink to the tool.

As long as ~/bin is in your path, that should do the trick!

Refer here for additional instructions.

17 – Autoformat HTML

A bit oddly, the ability to auto-format HTML is not included as part of the default build of Sublime Text. The Tag plugin, among other things, hopes to provide a solution, however, due to a few shortcomings – namely when dealing with HTML comments – it falls short.

The Tag plugin can be installed via Package Control.

To test its auto-formatting skills, the following HTML:

…will be changed to:

Yikes; it looks worse than it is. From my tests, it incorrectly does not place the body tag on its own line, and gets pissy when dealing with HTML comments. Until these issues are fixed (or a native solution is provided), it’s best to manually select a block of HTML to reformat, rather than the entire page.

A $200 bonus will be paid to the first Sublime Text plugin developer who creates and submits the definitive “Nettuts+ HTML Formatter” plugin.

18 – Create a Plugin

If you’re feeling adventurous, dig into Sublime Text’s huge plugin development community, and start contributing. We have an excellent tutorial on the process of building a ST plugin here on Nettuts+. Be sure to check it out if that interests you!

Conclusion

The more I work with Sublime Text 2, the more I realize how incredible it is. But all of this would mean nothing if not for the fact that it’s an insanely fast editor, and, even better, it’s not finished!

This post was written by Nigel at TwentyEleven Web Design - Web Design & Web Optimisation Services

Based in Stratford upon Avon, TwentyEleven are a professional web design company that specialises in creating effective websites and web solutions for a wide range of online businesses and organisations. We design and develop bespoke web design for everyone from business start-ups to SME’s. Our main focus is you and your target customers.

As a full service Warwickshire web design agency, TwentyEleven Web Design not only has the expertise to design and develop web sites. But also specialise and focus much of our attention on the online exposure of your website through search engine optimisation. Developing your website is the foundation but achieving high search engine rankings is an ongoing process to ensure maximum return on investment. Our prices are highly competitive when compared with other Warwickshire web design and SEO agencies so view our SEO page for more info.

With every business competing for exposure on the internet, it can be challenging to know where to start.  This is where TwentyEleven web design can help:

Whatever your business requires, we can provide specific strategies tailored to your organisational needs to effectively respond to your target market, generate targeted online traffic, position your content, and create overall brand awareness to enhance your company’s online presence and influence your sales.

For all you web design in Warwickshire, search engine optimisation and Internet marketing activities please call us on 01789 204772

This post was written by Nigel at TwentyEleven Web Design - Web Design & Web Optimisation Services

YouTube now accounts for 20% of the market share of the UK Social Media sites. Facebook still retained the number 1 spot accounting for 54.*% of the share.

YouTube also became the 3rd biggest website in UK overtaking Hotmail in Dec 2010.

What does it mean for YOU as a business owner? If you are not already using Video Marketing then there is not better time to start using it now and what better place to start than YouTube and it is completely FREE!.

Create your profile account by visiting http://www.youtube.com and start broadcasting yourself.

Below chart gives you a brief synopsis of the UK Social Networking sites traffic share:

YouTube should be an integral part of your Social Media Marketing plan no matter what products or services you sell.

This post was written by Nigel at TwentyEleven Web Design - Web Design & Web Optimisation Services

How Does The Send Button Works?

According to Facebook, the Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual.

The Send button drives traffic by letting users send a link and a short message to the people that would be most interested. They don’t need to leave the web page they’re on or fill out a long, annoying form. Compared to the alternatives, the Send button has fewer required steps, and it removes the need to look up email addresses by auto-suggesting friends and Groups. (Source: Facebook.com blog)

What Does this Mean for You?

The Send button can be used alongside the Like button. By including both on your website, people will have ability to broadcast the things they like and also send it to specific people. This will enable your content or offer to be shared virally but only to a select user group.

Facebook will also be releasing an update to integrate the Insights Dashboard with real time metrics for the Send button.

This post was written by Nigel at TwentyEleven Web Design - Web Design & Web Optimisation Services

As with any Facebook feature, there are mixed reactions on whether the new comment widget is – good, bad or neutral, especially for business users. Here’s my take on it.

How does Facebook Comment Plugin work?

Anonymous comments can often be rude, abusive and unpleasant. Facebook says it updated the Comments Box Plug-in, which links comments made on third party websites to a member’s Facebook account, to encourage personal and relevant conversations. The move is expected to minimize spam comments as it signals the end of anonymity.

Implications

Anonymity isn’t bad, but it’s heavily overused and abused in the social media world. Of course, the most obvious implication of this change is that users will be forced to think twice before they comment on any site. Therefore, a huge drop in number of comments can’t be ruled out.

TechCrunch adopted the Facebook comment plugin and observed the overall number of comments have fallen dramatically. While TechCrunch says it’s expected and “not a bad thing”, it may have serious implications for a business which thrives on traffic redirection and comments with inbound links.

The obvious benefit is that you get quality comments. There would be a decline in the number of useless comments.

Pros & Cons

TechCrunch team has done a wonderful job of highlighting the pros and cons of the new Facebook comments plugin. As expected, the benefits include a reduction in number of trolls, tighter integration with Facebook and the ability to socialize comments through Facebook “likes” feature.

The biggest disadvantage being the comments plugin does not work with Google and Twitter credentials. There are other issues as well – it compromises privacy as people may find their replies in your Facebook News stream reproduced on another site’s comments – not exactly a pleasant surprise. Further, if Facebook is blocked due to access restrictions, your site’s comments system falls flat.

It’s understandable that Facebook left out Twitter and Google on purpose. While the former is its closest competitor in social media, the latter is not in friends list. However, that accounts for a massive proportion of the daily web traffic and there’s no doubt that it will hurt the wide scale adoption of this plugin.

Good, bad or neutral?

Coming back to the original question – is the new Facebook comment plugin good, bad or neutral for your business? Do the pros outweigh the cons or vice-versa? IMO, there’s no one size fits all solution here. If your website gets quality anonymous comments, I see no reason to block them with this plugin. On the other hand, if your site is plagued with spam due to anonymous comments, the Facebook comments plugin is a blessing in disguise for your business.

Do you plan to use the Facebook comments plugin for moderating your website users? Please share your opinion by leaving a comment below this post.

This post was written by Nigel at TwentyEleven Web Design - Web Design & Web Optimisation Services