You probably know by now that we are fans of Sublime Text. It might look a very simple code editor, but it has a lot of hidden features underneath. After exploring it for a while, you might be surprised that you can do quite a number of cool things in SublimeText. We went in and dug around for a bit and here are just some fo the tips and tricks that we think you would like to play with.

Let’s supercharge your coding experience in Sublime Text.

Recommended Reading: Identify Code Error In Sublime Text With Sublime Linter

1. Selection

As a web developer, we would frequently do code editing. Below are some handy keyboard shortcuts that allow you do different types of selections in SublimeText.

Command + D	Select a word.
Command + L	Select a line.
Command + A	Select the entire content within the document.
Ctrl + Command + M	Select anything inside the bracket (which is useful when working with CSS or JavaScript)

Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

Command	Hold the Command key and click on the lines that you want to select.
Command + Ctrl + G	Select a code, line, or word first the hit this combo to select the others with the same instances.
Command + D	Hit this key to quickly select the next code, line, or word that has the same instances as you are currently selecting.

See how multi-line selection works below.

2. Sorting CSS

Commonly, we do not mind how CSS properties are sorted, as CSS will give us the desired output in the browser regardless of their position. But putting them in a particular order will make your codes more organized. In SublimeText, you can select CSS properties and hit F5 to sort the properties in alphabetical order.

You can also use a third-party plugin like CSSComb to give you more control over the property sorting rule.

3. Command Palette

You can do many things quickly with Command Palette such as rename new file, set file syntax, and inserting snippets. To show the Command Palette in SublimeText, hit Command + Shift + P, then the command you intend to perform. Here are some examples.

Renaming file

Set file syntax to HTML

Insert code snippet

4. Switching Between Tabs and Projects

We may have many files opened when working on a project. In SublimeText, we can switch through these files (or tabs) quickly with the following shortcuts:

Command + T	Lists tabs that are currently open. Select one to go to the tab.
Command + Shift + ]	This will bring you immediately to the next tab.
Command + Shift + [	While this key will bring you the previous tab.
Command + Ctrl + P	Switch between the projects that are listed on the SublimeText Sidebar.

5. Cross-File Editing

This feature would also be very useful when we are working with multiple files. For example, say that we have several code blocks that are very similar and spread across different files in the project. To change these codes efficiently, you can:

1. Hit Command + Shift + F in Sublime Text. Put the words, sentence, or line of codes that you want to change in the Find field.

Pro Tip: hit Command + E to quickly put the code selected in the Find input field.

2. Specify the file names within the Where input field or add <open files> so that it will only affect files that are currently open.

3. Put the word or code replacement in the Replace input field, and hit the Replace button.

6. File Crawling

I found this feature really helpful when I’m editing CSS. Hit Command + R. A dialog will appear with a list of CSS selectors on the document, as you can see in the screenshot below. You can search and select the selectors that you intend to navigate to.

I found this a more convenient way to search for code block than using the regular Find feature.

7. Spell Checker

I frequently write in code editor, and I also frequently made some mistake in the spelling. If you are like me, you can enable the spell checker in SublimeText in this way.

Go to Preferences > Settings – User in SublimeText, and add the following line.

 "spell_check": false, 

8. Sidebar Enhancement

This plugin, SideBarEnhancements, brings some great enhancements to the SublimeText sidebar. Once installed, right click on the sidebar, and you will find additional menus such as Open in Finder, New File, New Folder, Open With, and Open in Browser.

Tip: Hit F12 key to open the file in the browser.

Read Also: post

9. Change SublimeText Theme

We can also change the entire appearance of SublimeText, and one of my favorites is called Soda Theme, which can be installed through Package Control.

If the theme that you intend to install is not available in the Package Control repository, you can do it manually.

1. Download and Unzip the Theme package.
2. Go to Preferences > Browser Packages…
3. Put the theme folder in the Packages folder.
4. Then go to Preferences > Settings – Users, and add the following line to activate the theme.

 "theme": "Soda Light.sublime-theme" 

If you are on Windows you can check this out: Change Sublime Text 2 Theme in 3 Steps.

10. Change SublimeText Icon

Apart from changing the theme, you can also change the icon. There are a bunch of nicely designed SublimeText icons that you can pick up in Dribbble. Here’s how you can change the look of the icon:

1. Download one of the icons from Dribbble. Ensure that the icon also comes in .icns format, otherwise you can convert it first with this tool: iConvert.

2. Run the following command in Terminal.

open /Applications/Sublime\ Text.app/Contents/Resources/

3. Replace the Sublime Text 3.icns or Sublime Text 2.icns with the one you downloaded.

11. Sync Setting

If you are working in multiple computers, you might want to keep and apply the same Settings for SublimeText across these computers. We can set this up with the help of Dropbox (and a small tweak).

First, run the following command in Terminal.

 mkdir $HOME/Dropbox/sublime-text-3/ mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/" mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/" 

Then run this command in Terminal in every other computer you want synchronized with the Settings that we have put in Dropbox.

 DSTPATH="$HOME/Library/Application Support/Sublime Text 3" DROPBOX_PATH="$HOME/Dropbox/sublime-text-3" rm -rf "$DSTPATH/Installed Packages" rm -rf "$DSTPATH/Packages" mkdir -p "$DSTPATH" ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages" ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages" 

Thanks xMarekaccross for the tip.

12. Clickable URL

ClickableURLs is a tiny SublimeText plugin that would be very useful when you find a bunch of URLs within your codes. Basically, it will make the URLs clickable.

More

I have written about other things you can do with Sublime Text, including:

• Manage Notes And Lists With Sublime Text
• Easy Color Picking In Sublime Text
• How To Refresh Changes On Browser With Sublime Text
• Working With Code Snippets In Sublime Text
• Identify Code Error In Sublime Text With Sublime Linter
• Adding CSS Vendor Prefix Automatically With Sublime Text

It’s no secret that we are fans of Apple devices and the accessories that make them look good. From decals to stickers, from stands to cases, Apple accessories are a dime a dozen and for this post, we are going to look into accessories for the MacBook.

This time though, we are changing it up a bit. Instead of the usual, we are featuring accessories that will make using your MacBook a lot easier. Some of them are for managing cables, while others help you save space. Others fix nuisances that litter the regular Macbook user, and we also have one that can help you really multitask across multiple (physical) screens.

Found another accessory that you think should be part of this list? We’d like to hear about it in the comments section below.

Recommended Reading: 20 Creative MacBook Decals & Skins To Attract Attention

1. Nifty MiniDrive

If you find the 128GB or 256GB SSD on a MacBook Pro a little too small for your liking, you might wanna get a Nifty MiniDrive for an extra boost of up to 64GB.

The Nifty MiniDrive uses a MacBook’s SD card slot to add to your storage space. While conventional SD cards would stick out of the MacBook when inserted, the Nifty MiniDrive uses a MicroSD card so it would sit flush with the body, thereby creating a seamless and clean look.

As of now, it is compatible with the older MacBook Pro, Retina and Air models while support for the late 2013 models are in the works.

Price: $39.99 – Visit website

2. PlugBug

The PlugBug is a unique add-on for people traveling with iPads. It replaces the original male plug with one that has a USB at the back – this allows iPad users to charge both their MacBook and iPad at the same time.

Besides that, your iPad mini would also charge faster through this device thanks to the 10 watt power output. Although it currently only supports US sockets, more international options are said to be in the works.

Price: $34.99 – Visit website

3. ZenDock

The ZenDock is a cable management tool that helps you get rid of messy cables on your desk. It has a Firewire, USB, ethernet, Mini DisplayPort, speaker and microphone pass through, thereby creating the illusion that only one cable is attached to your MacBook. There’s even a cutout for the MacBook power cable.

The ZenDock is compatible with the older MacBook Air, Pro and Retina olders and the creators are also planning to release a version for the new MacBook when it’s made available (late 2013).

Price: $159 – Visit website

4. Snuglet

The MacBook MagSafe is made in such a way that it’s easily removable. However, this also means that when it’s used in bed or on other uneven surfaces, it’ll come off way too easily.

The Snuglet is a small metal device that sits inside the MacBook charger port to prevent the power cable from being accidentally removed when it’s pushed up or down. The Snuglet can be easily removed with a paperclip-like hook and its usage won’t interfere with charging.

Price: $19 – Visit website

5. LapTuk Pro

Here’s another tool to help minimize the usage of desk space while using a MacBook with an external screen. The solid steel LapTuk Pro is designed in such a way that you can slide your MacBook into it. You then place the monitor on top of the top layer of steel – this gives the added benefit of an elevated monitor for better posture.

Since LapTuk Pro is elevated off the table, you can slide things like a tablet or bluetooth keyboard underneath whenever they are not in use, creating a clean and clutter-free desk.

LapTuk Pro has a 4-port USB 3.0 hub that comes with its own power adapter.

Price: $99.99 – Visit website

6. LandingZone

The LandingZone is a desktop dock for your MacBook Pro or Air that allows you to easliy leave your USB and desktop peripherals in place when you take your MacBook away from your desk.

The most high-end version, LandingZone 2.0 PRO includes 4 SuperSpeed USB 3.0 pass-through ports, a Kensington Security Slot, a Mini DisplayPort and gigabit Ethernet port. The Kensington Security Slot ensures that no one can undock your MacBook while you’re away. The LandingZone also has its own power adapter if you plan to use all the ports at once.

Price: $49 – $179 – Visit website

7. Henge Docks

With Henge Docks, you can have the comfort of working with a desktop while enjoying the portability a MacBook offers as it docks a MacBook vertically, thereby saving lots of desk space for your external monitor, keyboard and mouse.

Once you have to leave the office, simply undock your MacBook to take all your work with you. Henge Docks uses extension cables (instead of built-in connectors) and feeds them nicely to get a clean desktop.

Price: $55 – $74.95 – Visit website

8. DualHead2Go

If you enjoy working with multiple monitors, you might wanna consider getting a Matrox DualHead2Go, a device that uses a Thunderbolt port on your MacBook to extend the display up to 2 additional monitors (giving you a total of 3 screens).

The tiny box is powered by a USB port and can power 2 monitors with 1920×1200 resolution. You can choose to mirror the external displays or extend it for greater multitasking possibilities.

Price: $160 – Visit website

9. mTower

Somewhat similar to Henge Docks, mTower is also a device that helps you save some desk space, taking up approximately one third of your MacBook’s footprint (about 114x24mm).

All ports and cables are still accessible when the MacBook is docked, not interfering with the device’s performance. Because of its anodized aluminium body, the sleekly designed mTower also doubles as a large heat sink for your MacBook.

Price: $49.90 – Visit website

10. PowerCurl

The good thing about a MacBook charging cable’s length is that it allows you to charge your MacBook from a power outlet that’s far away. However, that length also means that it is not that easy to bring around with you.

PowerCurl is a simple yet effective solution to the problem – you can use it to hold your power adapter in the center while winding the cables neatly around it. It’s available in 2 colors (blue and grey) and is compatible with both old and new MacBook Pro and Air models.

Price: $9.99 – Visit website

In a previous post from our Sass series , we showed you how to compile Sass into regular CSS format using Command Line. However, since not everyone might enjoy working with Terminal, this is a tip of how you can do the same using Sublime Text instead.

Compiling Sass into CSS in Sublime Text is possible with a plugin called SassBuilder, which you can install through Package Control (see screenshot).

Recommended Reading: Getting Started With Sass: Installation And The Basics

Configuration File

Before you can compile Sass, you need to create a configuration file, which is similar to the config.rb that you can find in a Compass project. To create the file, go to Tools > Sass Builder Config in Sublime Text. Save the file in the same folder where you store your .scss or .sass files, and name it .sassbuilder-config.

You can then configure the output of your compiled styles in this file, and here’s the default configuration:

 { "output_path": "../css", "options": { "cache": true, "debug": true, "line-comments": true, "line-numbers": true, "style": "nested" } } 

SassBuilder will generate the comments and line numbers that tell us where the selectors and the style-rules were defined. These are useful when you are in the development stage, but when you are about to publish the website, you would probably need to remove them. To do that, set the value in line-comment and line-number to false, like so.

 { "output_path": "../css", "options": { "cache": true, "debug": true, "line-comments": false, "line-numbers": false, "style": "compressed" } } 

The style option specifies the style for the compiled CSS – you can choose between Nested, Expanded or Compressed. Sass will automatically compile into CSS upon saving the file. If the process has been completed successfully, you’ll get the following notification (screenshot).

And that’s it, guys. We hope that you have found this little tutorial helpful. If you have any questions, please don’t hesitate to post them in the comments below.

Have you ever wished there was another way to prototype or teach about electronic circuits other than breaking out the old-school and decidedly low-tech breadboard? Something quicker, simpler and a lot more fun? Well, you can stop wishing, because there’s a new product from Electroninks Incorporated that just might do the trick for you.

The Circuit Scribe is a pen that you can use to draw working circuits on any piece of paper. No more dealing with breadboards to prototype circuits; with Circuit Scribe you can simply draw a circuit directly in your notebook or on any piece of paper, and have it work instantly.

Recommended Reading: 10 Affordable 3D Printers You Can Get Right Now

What Is Circuit Scribe?

Although Circuit Scribe is certainly not the first conducive-ink pen on the market, the ink used in Circuit Scribe sets it apart from other similar products on the market. The ink is a water-based and non-toxic silver ink, which makes it perfect for classroom and educational use.

In addition, the makers claim that, unlike competing products, the Circuit Scribe’s ink does not smell, is not viscous and dries quickly. This means that there’s less chance of smudging your circuits, and less time spent waiting for your circuits to dry.

In addition to the Circuit Scribe itself, the makers also provide a series of components that you can use in conjunction with the pen to make fully-fledged circuits. These range from basic components such as LED boards all the way to more advanced components such as potentiometers, 555 timers and sound buzzers. These components will snap directly onto your circuits, provided you have something magnetic behind your paper circuit.

Circuit Scribe will also work with open-source hardware platforms such as Ardunio and Makey Makey, so you can integrate your paper circuits into a larger project.

The Circuit Scribe pens will have enough ink to draw between 60-80 meters worth of circuits, and the lines will have a conductivity of 50-100 milliohms per square per mil. The Circuit Scribe is currently being funded on Kickstarter, and is well on its way to reaching its $80,000 goal. You can get your own Circuit Scribe by pledging just $20 if you’re in the United States.