WEBSITE

CodeKit Vs LiveReload

11/15/2012 9:23:15 AM

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 file, the contents are ‘injected’ into the browser, with no need to reload/refresh. It’s not even necessary to upload the changed files to a remote server, if that’s where you’re working, to see the result.

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 finished work once you’re happy.

The auto-reload functionality extends to other web files 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

Ratings: 4/5

Price: $25

From: incident57.com/codekit

 

Description: CodeKit

CodeKit

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 browser extensions to install and no JavaScript to contend with. It just works 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 sheets, JavaScript and images, and CodeKit makes the necessary configuration file and then automatically watches the created project.

JS Hint and JS Lint are also included. This means any JavaScript files you create can be run through these tools before 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 separate JavaScript files, CodeKit can combine and compress them together into a single file. This saves users’ bandwidth (a compressed file is far smaller) and HTTP request overheads, as only a single file is required.

A final novel feature of CodeKit is that it can create ‘frameworks’, enabling you to use a custom set of files 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 relevant website.

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 features.

LiveReload

Ratings: 4/5

Price: $11

Info: livereload.com

Description: Live reload

Live reload

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 files and LiveReload will watch the enclosed files for changes.

LiveReload provides two ways for browsers to interact with the files you’re working on. The easiest way is by installing a browser extension. Supported browsers are Firefox, Chrome and Safari. This option works fine for desktop websites.

The second option involves adding a snippet of JavaScript in the head of the document or template file. While this alternative method is a bit fiddly, 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 files.

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.

Other  
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 7) - Temporal Link Growth Measurements
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 6) - Web Traffic Comparison
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 5) - Tracking the Blogosphere, Search Engine Robot Traffic Analysis
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 4) - Rankings, Crawl Errors
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 3) - Measuring the value of a link
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 2) - Search-engine-supplied tools, Third-party link-measuring tools
  •  Tracking Results and Measuring Success : Competitive and Diagnostic Search Metrics (part 1) - Site Indexing Data
  •  How To Get Free Online Storage
  •  Introducing Windows Presentation Foundation and XAML : Building WPF Applications Using Visual Studio 2010 (part 2)
  •  Introducing Windows Presentation Foundation and XAML : Building WPF Applications Using Visual Studio 2010 (part 1)
  •  
    Most View
    Life Logging - Is It Worth The Effort? (Part 3)
    LG Optimus 3D Max Review (Part 2)
    Sony VAIO Tap 11 Ultrabook - Sleek And Sexy
    Galaxy Note 10.1 - The Pen Sets This Tablet Apart
    Windows Management and Maintenance : The Windows 7 Control Panel (part 6) - Devices and Printers
    Push Your Phone To Its Limits (Part 2) : Swype for tablets
    Windows 8 : Installing Programs - Working with Autorun, Application Setup and Compatibility, Making Programs Available to All or Selected Users
    Y-cam Bullet HD 1080 - Superb Night-Time Performance
    Solve PC, Software And Internet-Related Problems – December 2012 (Part 2)
    My SQL : Replication for High Availability - Procedures (part 1) - The mysql.com Outage
    Top 10
    Microsoft Exchange Server 2007 : Components of a Secure Messaging Environment (part 5) - Using Email Disclaimers
    Microsoft Exchange Server 2007 : Components of a Secure Messaging Environment (part 4) - Establishing a Corporate Email Policy, Securing Groups
    Microsoft Exchange Server 2007 : Components of a Secure Messaging Environment (part 3) - Hardening Windows Server 2003 - Running SCW
    Microsoft Exchange Server 2007 : Components of a Secure Messaging Environment (part 2) - Hardening Windows Server 2003 - Using the Microsoft Baseline Security Analyzer
    Microsoft Exchange Server 2007 : Components of a Secure Messaging Environment (part 1) - Hardening Windows Server 2003 - Auditing Policies
    Microsoft Exchange Server 2007 : Server and Transport-Level Security - Considering the Importance of Security in an Exchange Server 2007 Environment
    Sharepoint 2013 : List and library essentials - Organizing items by using folders
    Sharepoint 2013 : List and library essentials - Sorting or filtering a list view
    Sharepoint 2013 : List and library essentials - Creating and selecting a list view
    Windows Server 2012 : Managing and Troubleshooting Hardware (part 11) - Resolving resource conflicts