• 09 May 2014

    Making your build process more meaningful with Grunt

    Grunt Logo

    So you remember grunt and how it powers my blog right? At SweetPixel Studios we have been using it extensively for building and deploying our websites. I have always wanted it to do more, for instance run all of our mocha tests, lint through the strict .jshintrc I have in place, compile minify my javascripts & stylesheets (it already does that FYI), tag and commit automatically and finally let the team know on slack that the website has been deployed.

    Read More...

    Posted under grunt

  • 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