• 25 Dec 2013

    Live Reload any Web App


    One of the reasons I enjoy working with Yeoman is that it has live-reload functionality out of the box, which is something very cool as it saves a lot of time and its nice to look at your UI refresh the moment you press the save key. This got me thinking what if there was a simple way to enable any web app for live-reload. I did a little research and found out that almost every framework be it rails, asp.net MVC, Django etc has its own tools and shebangs for live-reload. Today I am going to show you how you can have a unified way to enable live-reload in any web app. For this tutorial I will be using a rails application but this can be applied to any web development stack. I will be using Grunt to accomplish this feat.

    Now the first thing you need to do in your rails app is to create the following package.json at your root directory:

     {
      "name": "super-awesome-rails-app",
      "version": "0.0.0",
      "dependencies": {},
      "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-watch": "*"
      },
      "engines": {
        "node": ">=0.8.0"
      }
    }
    

    The important part in the above file is the devDependencies which include grunt and grunt-contrib-watch. You can play around with the other values as you please.

    After creating the file:

    npm install
    

    The next step is to create the following Gruntfile.js:

    'use strict';
    module.exports = function (grunt) {
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.initConfig({
        watch: {
          coffeefiles: {
            files: ['app/assets/javascripts/*.js'],
            options: {
              livereload: true,
            }
          },
          erbfiles: {
            files: ['app/views/{,*/}*.erb'],
            options: {
              livereload: true,
            }
          }
        }
      });
    }
    

    As you can see we are telling the grunt-contrib-watch to keep an eye on our javascript files and our views of the rails application. These could be anything for any other web application framework (.cshtml for Asp.net MVC, .py for Python etc.). The next step is to include the following in your application.html.erb layout(or any other view/page you wish to have live-reload on):

    <script src="http://localhost:35729/livereload.js"></script>
    

    Finally all you need to do now is to open a terminal window, navigate to your web app dir and execute:

    grunt watch
    

    That’s it now whenever we save any changes to our .erb or .js files, the browser will automatically refresh. Have fun :)

    Posted under javascript

  • 20 Dec 2013

    Got Pebble


    I got a call from DHL Peshawar at 11-ish today that a package has arrived for me and that I also have to pay its duty. I knew what it was so I ran to pick it up. Lo and behold people my pebble smart watch:

    Read More...

    Posted under gadgets

  • 13 Dec 2013

    Wifi Enable your Raspberry Pi

    I know it sucks that the Raspberry Pi does not come with a built-in wifi receiver.if you are like me and would like to be free from cables, then follow the instructions and this guide to quickly have your Pi over Wi-fi. You will need the following:

    Thats a Raspberry by in a very solid casing and a TP-Link WN823N Mini Wireless USB Adapter which works out of the box with Raspberry Pi. The Pi is running Raspbian Wheezy installed on a 16GB SD Card. Now lets get to business.

    Read More...

    Posted under raspberry pi

  • 07 Dec 2013

    Meteor Framework

    I came across meteor when it was on version 0.0.1. At that moment I knew its going to be a promising framework, call it a hunch or call it a developer’s perception, I knew what I was looking at is going to be great. It pleases me to see that meteor has grown into a very robust efort with its applications in the Enterprise as well. You will hear from a lot of people saying that meteor is not ready yet for high developing high end apps. Given below is a list of reasons why I think meteor is going to be the next big thing.

    Read More...

    Posted under javascript