Using guard-livereload to reload your browser when files are modified

We all do it when building a website, we hit the refresh button to reload our latest changes. This process of saving and reloading the browser can be eased using a plugin called Guard-LiveReload. This plugin is part of a ruby gem called Guard. Note, I am doing this on a windows box.

Installing/Using

  1. I will be going with the assumption that you have ruby installed locally. If you don’t head over to http://rubyinstaller.org/
  2. Install Guard gem and Guard-Livereload
    		gem install guard
    
    		gem install guard-livereload
    
  3. Go into your project root directory, and the project must run under a local server.
  4. Create a Guardfile and paste the following into it and save it without a file extention.

    		guard 'livereload' do
    		  watch(%r{.+\.(css|js|aspx|php|html?)$})
    		end
    

    The watch method allows you to define which files are watched by a Guard. It uses a regular expression. Here I am just looking for files with .css, .js, .aspx, .php and .html. You can always add to it.

  5. This works best with google chrome, so head over and install the livereload extension.
  6. Now you can go to your command prompt and cd into the project root directory and run. Make sure you have activated the chrome extension as well.

    		guard
    

    If all is well you should see “browser connected” in your command prompt.

My new addiction Coderwall.com

I ran into this awesome social service via a tweet. Its called coderwall.com and I spend some time browsing their “pro tips”.  A pro tip is just a snippet of code you can share with the community. They also have “networks” which is basically categories. I have found some useful tips there and maybe you can too! So join! and share.

Front end Engineer’s Manifesto

In the fast paced world of Front End Engineering, change reigns supreme. Dormant for years, the Browser Wars are back and have broken web development wide open. Led by competing vendors championing their own implementations of HTML5, CSS3, and other Web Standards, they’re unchaining us from the desktop computing environment. We’re seeing web browsers in our favorite Mobile Phones, E-Book Readers, and Tablet devices. Does your web site work with the Android Browser? On the iPad? How about the Kindle browser? IE9? Do you even know what version Google Chrome is on?

As web programmers, how do we keep up with this blistering, nauseating pace while still taking time to improve our skills? I’ll go through a set of principles and guidelines I use to simplify the world of Front End Engineering. These criteria will help you write better future-compatible flux-resistant code. They will help you evaluate new toolsets, APIs, frameworks, and even file formats and codecs. They will improve the quality of your web sites and applications.

http://www.zachleat.com/web/manifesto/

F2EM.com – Front end Engineer Manifesto