Sublime Text

Sublime Text Front End Workflow

When programming finding a workflow that works for you is one of the most important elements behind how effective or productive you are. Below is my take on a Sublime Text front end workflow.

One of the traps you can fall into when starting out is to find someone else’s workflow and try and suit your style to it, It’s really important that you find a way that suits you and more importantly lends itself to the way you want to work.

With that said it’s always useful to cherry pick from other developers anything you think would suit you or help speed up any aspect of your work.

I’m a front end web guy so obviously my interest is focused on ways I can speed up my design / css / html or javascript. I personally use Sublime Text with a few extra packages installed.

I’ve tried many programs and services to try and find a match for the way I work, I started out playing with Dreamweaver it was good, it had code completion/suggestion and it allowed me to be a bit lazy with closing tags etc but it also had a lot of extra bulk on top that I didn’t want to get into and didn’t like the way it tried to force me into using some tools that I didn’t want to. I used notepad++ when I was working on my PC but I find myself working on my mac to do all my work so notepad++ fell to the side of the road. While I was working with PHP i came across NetBeans and I have to say it’s great, very clear concise and simple which suited me to the ground, at the same time though I was using Sublime Text for my Html and CSS and I started to really carve out a nice workflow with that so again NetBeans fell away, though I do still go back to it with PHP projects sometimes. One of NetBeans’ great strengths for me was it’s git highlighting, I knew what I’d changed in my code purely from the differences highlighted from my last commit, this speeds up debugging no end if you start working across multiple dependant classes or files.

I came across a video from Jeffrey Way of NetTuts+ around this point with a detailed breakdown of some of the best features of Sublime Text and also a deeper introduction to it’s strongest feature, packages. You can find those videos here.

So I thought I’d put down some of what I use with Sublime Text or within my workflow and hopefully you will find some of them useful.
 

Sublime Text Packages

Sublime Text packages are little addons that help you customise Sublime Text to how you like to work. By far the easiest way to work with them is to install Package Manger.

To install Package Manager you are going to want to open up your console window in Sublime.

  • View -> Show Console Menu (ctrl+`)
  • Then paste in the following
  • import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

  • Now hit enter and then restart Sublime when prompted.

Once you’ve restarted Sublime you should be ready to go. Please bear in mind the above code is for Sublime Text 2.

To use Package Control you need to hit Cmd + Shift + P or Ctrl + Shift + P this will open a little box at the top of sublime now start typing out the word package and you will be greeted with a list of functions preceded by the title Package Control:, Install Package, List Package and Remove Package are the ones you’ll use most.

Sublime Text Front End Workflow - Package Control Window

 

Live Reload

Live Reload is a massive time saver and helps me to keep working without the constant need to switch windows and refresh a site i’m working on every time I change a css rule. It saves so much time and allows you to code with a lot less interruptions.

If you are on OSX you can buy LiveReload from the app store, it’s about £6 ($9.99).

Sublime Text Front End Workflow - Live Reload Window

As you can see you can add a script tag to the top of any page you are working on once you’ve added the folder to the list of folders for LiveReload to monitor. I prefer to use the Chrome extension though as you don’t need to add any unnecessary script tags to your document and all you need to do is open your page, activate the chrome extension and then you should be good to go.

Sublime Text Front End Workflow - Live Reload Extension

You need to make sure the box Allow access to file Url’s is ticked though.

If you don’t wish to buy the app or you’re on windows there is a Sublime Text package that you can use that will send a signal every time you save a file to the browser extension.

Follow the instructions above to install Package Control and then head to Install Pacakge, once you’ve selected this start typing Live Reload and you will find the package you need. For This package to work you need to have node.js installed and running.

To install node.js head over to their website www.node.js and select the installer for your system.

Once installed, if you’re using a mac, you can check to see if Node installed correctly by opening terminal and typing node -v, if it comes back with a version number you know it’s working. To start node just type node in terminal. You can now use the Sublime package correctly. Though you’ll need to restart Sublime if you had it open when node was installing.

If you now open a file from sublime into Chrome, click on the Chrome Live Reload extension and then switch back to sublime you should see a message appear in the status bar at the bottom of Sublime saying that the Live Reload client is connected.

Live Reload is now working. Test it out by changing a few css rules or adding some DOM elements and you should see it work it’s magic.

 

Sublime Linter

Next up is Sublime Linter. This tool is invaluable for debugging Javascript or CSS mistakes. Again it’s a package so just follow the steps above and choose Install Package and then search for Sublime Linter and install it. Restart Sublime again and you should be good to go. Now whenever you forget a semi colon or forget to assign a variable or even leave trailing whitespace after a function or something it should leave a little warning in your line numbers column.

The default wait for the linter to look at your document after you stop typing is 2 seconds and by default it will also only leave little warning marks like break points, If like me you prefer the old style of putting a rectangle around any erroneous code then you can enable this functionality with your user settings.

Go to Preferences > Package Settings > Sublime Linter > Settings – User

and add the following

{
"sublimelinter_delay": 0.5,

“sublimelinter_mark_style”: “outline”

}

Now your document will be automatically parsed with either JsHint or JsLint (you can specify which in the options like above), any errors it finds will be highlighted and if you place your cursor within the outline block you will get a message in the bottom left of the window describing the problem.

Sublime Text Front End Workflow - Sublime Lint Error

Sublime Text Front End Workflow - Sublime Lint Error Note

 

Prefixr

Prefixr is a great little service from Jeffrey Way over at NetTuts. It will adapt your CSS to include any browser specific prefixes you need. For example when you use a box shadow, you may be using the webkit prefix to test it but completely forgot to add the opera prefix etc. Well with Prefixr you can just paste your CSS into their site and it will return a version with all the correct prefixes. Again there is a Sublime Package you can use by Will Bond. You can find the package here,
Sublime Prefixr, but again it’s easier to install it through package manager which you should know how to do now. Once it’s installed you can highlight a few blocks of css and then press Ctrl + Cmd + X and it will parse your css and automatically add any prefixes you need.

Sublime Text Front End Workflow - Sublime Prefixr

Some Others Packages of Note

  • SideBarEnhancement

    – Adds some extra sidebar functionality such as create new files, open in browser etc.

  • HTML5

    – Adds support for a few extra HTML 5 tags

  • NetTuts Fetch

    – Allows you to pull in files such as jQuery and Html5 boilerplate at the push of a button.

  • Placeholders

    -Allows you to add Lorem ipsum in your document via a shortcut.

  • jQuery

    – A package that just adds a few useful snippets for jQuery.

Overall for me Sublime Text is just quick and it allows me to get on with things quicker.

There are many more packages that you will find useful in your workflow and there may be other methods that I haven’t listed above but these are currently central to my workflow and hopefully you may have found something useful within. I would love to hear of any other little timesavers you may have.

  • Delicious
  • Facebook
  • Twitter
  • Reddit
  • StumbleUpon
blog comments powered by Disqus