Web developers often suffer a familiar and
repetitive work-flow. You change a CSS file – perhaps adjusting font size or a
color; save it; then upload to the server. Then you click Refresh in the
browser to see the change. Repeat ad nauseam.
If that sounds familiar, you need either
LiveReload or CodeKit. The principal selling point of these apps is easy to
appreciate: as you write and save a CSS ﬁle, the contents are ‘injected’ into
the browser, with no need to reload/refresh. It’s not even necessary to upload
the changed ﬁles to a remote server, if that’s where you’re working, to see the
So, rather than change the CSS for a
project in incremental steps, each punctuated with an upload and refresh, you
can see the changes as you go, and upload the ﬁnished work once you’re happy.
The auto-reload functionality extends to
other web ﬁles such as HTML and PHP, although these changes aren’t injected;
they require the browser to refresh.
While the two apps share a lot of essential
functionality, they do differ in both price and additional features.
Codekit, in its current version (1.2.3),
doesn’t enable you to inject CSS styles across mobile devices. However, it can
still force a refresh of the browser, saving you doing a manual refresh, so
working with handheld devices in tandem with Adobe Shadow is still possible, if
slightly slower than with LiveReload.
CodeKit currently only works with Chrome
and Safari, not Firefox or Opera, due to those browsers’ lack of AppleScript
support. However, the trade-off is that it’s easier to work with: there are no
straight off the bat, with no frustrations.
CodeKit also has a powerhouse of useful
tools that more than justify the extra expense. For example, it offers built-in
image optimization (using the PNGC rush and OPTIMJ peg tools). Just click
‘Optimize all project images’ and every applicable image in a project is
stripped of surplus information. This shrinks image data size in addition to
any optimization work already done in Photoshop, Fireworks and the like.
Developers working with the popular Sass
framework Compass will also appreciate the ability to create Compass projects
directly from the interface. Enter the preferred folder names for Sass, style
and then automatically watches the created project.
JS Hint and JS Lint are also included. This
upload, catching common problems (missing semicolons, trailing commas and so
on) that could choke browsers such as Internet Explorer 8. In addition, CodeKit
provides a concatenation tool. If you’ve written or you’re using a number of
single ﬁle. This saves users’ bandwidth (a compressed ﬁle is far smaller) and
HTTP request overheads, as only a single ﬁle is required.
A ﬁnal novel feature of CodeKit is that it
can create ‘frameworks’, enabling you to use a custom set of ﬁles across
multiple projects. Perhaps you always use a reset.css or nor-malize.css set of
styles in a project. Using a CodeKit framework, you could store these in a
single physical location and reference them from a framework called ‘resets’,
for example. Then, in any project file, these files could be included with a
command like @import “normalize.css”. There’s no need for relative
folder paths or any such shenanigans.
There are also some beautiful,
well-considered touches in the CodeKit interface. For example, choosing About
CodeKit from the menu gives not just quick links for the CodeKit website, but
also all the compilers in use, along with the version numbers and links to the
Live reload is half the price of CodeKit,
but isn’t as easy to get to grips with, nor does it offer quite the breadth of
Once installed, it loads into the status
bar. Clicking its icon reveals a window where you can add projects. Click the
‘+’ icon at the bottom left, browse to the folder holding your local ﬁles and
LiveReload will watch the enclosed ﬁles for changes.
LiveReload provides two ways for browsers
to interact with the ﬁles you’re working on. The easiest way is by installing a
browser extension. Supported browsers are Firefox, Chrome and Safari. This
option works ﬁne for desktop websites.
The second option involves adding a snippet
alternative method is a bit ﬁddly, it allows LiveReload to work on mobile
devices. This means it can also work in tandem with Adobe Shadow, which is
useful if you’re developing websites or applications across multiple devices,
such as iPhones or iPads.
LiveReload can also compile a host of
popular preprocessing languages. So if you’ve considered using a CSS
preprocessor such as Sass and been put off by its apparent complexity,
LiveReload will save you from the command line. It can also compile
CoffeeScript, Eco, HAML, IcedCoffeeScript, LESS, Jade, Slim and Stylus ﬁles.
If you spend much time refreshing the
browser to see changes made in your code, you owe it to yourself to buy one or
both of these incredibly useful apps.