I’ve been using Sublime Text 2 for a few months now, as it’s mega fast, it supports multi-selection, and it’s got cool features like the distraction-free editing mode. In 4 words, “I fucking love it”.
Since i’m far from the only one getting hooked on the app as the text editor for code is becoming more and more popular, I thought I would share a couple of things with you.
Sublime Package Control
For those of you who still wouldn’t know it, Sublime Text 2 can be ‘equipped’ with a full-featured package manager helping you discover, install, update and remove packages (on top of this, it supports GitHub).
To install it, follow the Instructions stated here. I personally went for a manual install as shown below:
- Click the Preferences > Browse Packages… menu entry
- Browse up a folder and then into the Installed Packages folder
- Download Package Control.sublime-package and copy it into the Installed Packages directory
- Restart Sublime Text
You may know about the LiveReload app monitoring changes in the file system, and refreshing the browser as soon as the file change has been saved. You can find the app and links to the mac app store and browser extensions here.
However, I stumbled upon another way of using the same functionality Livereload offers and this with Sublime Text 2. First of all, let’s install the Livereload package by using the package control (recently installed).
To do this, got to Preferences/Package Control and select Install Package as shown below.
Type Livereload and double click the package to install it.
Once installed, install the Livereload extension/add-on of your preferred browser.
- If you are using Chrome like me, go there. Note: If you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools > Extensions > LiveReload after installation.
- For firefox lovers, select the followin add-on.
This done, all ou need to do is activate the Livereload extension by clicking the toolbar button (it will turn green to indicate that LiveReload is active), and fire away your changes in your code editor.
I have downloaded the 320andup responsive boilerplate of Andy Clarke and placed it in my MAMP htdocs folder.
The chrome extension activated (green button), I can now edit the various 320andup files and see the changes happen live on the browser without refreshing it. In this case, I simply went with a brutal background change on the css file and saved it.
- Before Making a change on the CSS file -
- After (simply) saving the change of the CSS file -
Most Recent Posts
Special Recent Posts
July 7th, 2014
I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]
June 9th, 2014
We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]