Tooling for Modern Web App Development

My slides from Coffee @ DBG are up now.

Front-end development workflow is becoming increasingly demanding as the complexity of the environment grows. Thankfully, there are many tools that can make your life as a front-end developer easier and perhaps, more rewarding.

The primary objective of this session is to get an idea about end-to-end front-end workflow and useful tools. We will discuss hot tools like Yeoman, Grunt and Bower. But the session is not limited to these tools - we will touch each phase of front-end development like boiler-plating, preprocessors, performance, documentation, code quality, reporting and architecture etc.

Tooling for modern web app development

Linktomob - Share Your Links Quickly and Easily on Mobile Devices.


Linktomob Linktomob created with an aim to share link between multiple devices without any hassles. Switching links between mobile and desktop browsers is a difficult process. We face this issue when building responsive site, mobile apps/sites or like to view site on mobile device when you are on a desktop. In such situations we will mail link and open it on mobile device. But if we want to test that link on a friends device or on a public testing device, in such situation sharing the same link on magnitude of devices will be a Herculean task.

Getting Started With Yeoman 1.0 Beta on Windows


April 8th 2013

Yomen normal installation (npm install) works fine now. No need to do extra steps for windows.

  1. install -g yo grunt-cli bower
  2. yo webapp
  3. npm install && bower install
  4. grunt


Yeoman 1.0 Beta out a few days ago. Its not officially supported on Windows, as of now we have to do some extra work to make it work on windows. Installing this version is simpler than previous Yeoman 0.9 on windows.

Yeoman 1.0 Beta

Don’t use Yeoman 1.0 Beta in production, it may have bugs.

In new version tools are divided into 3 category.

Yeoman yo, bower and grunt

Simple Responsive Image Technique

RWD (Responsive Web Design) is increasingly popular over past few years. One important problem faced by RWD is lack of a standardised solution to deliver resized images into multiple devices. We have wide range of device categories, screen resolutions, pixel densities and lack of bandwidth/connection detection methods, all made this process difficult. There is no simple silver bullet to solve this issue.

This is a quick post on a simple technique I used to create responsive image. This is a javascript solution, but it will work in javascript disabled environment by using a noscript fallback. This technique will start with mobile image first & there is no need to parse and replace image sources.

Moving From Wordpress to Octopress Redesign Notes

Why I migrated from Wordpress to Octopress.

Speed and performance
Octopress framework uses Jekyll SSG (Static Site Generator) to build pages. All pages are static and no server side processing involved. Requested page can deliver instantaneously by the server into user’s machine.

Hosted at Github
Site is hosted on Github as Github Pages. Since its in Github, server uptime and response time are guaranteed.

Ease of use
After setting up everything, 2 steps involved in creating and publishing your next post

$ rake new_post["new post"]
$ rake deploy.

Octopress uses Markdown. Its simple & clean as writing a text file/email.

Site Preloading Methods

It is a quick post about site preloading. In one of my recent project there was a requirement for site preloading effect. When I googled I got some jQuery plugin. But some of them are bit heavy and loads the resources twice. I have used QueryLoader2. But I noticed increase in page load because of images are loading twice.

1.Using queryloader2 jquery plugin (Size 4.42 MB)

Using queryloader2 jquery plugin

PIXI : Tool to Create a Pixel Perfect Site.

I hate making sites pixel perfect, but some times its very important to match the site exactly with design. Earlier I have used tool like Pixel perfect – a Firefox Addon & also tried some JavaScript implimentations. Recent versions of FF is not supporting pixel perfect Addon. I filed to find anything that can serve my purpose. PIXI is small js & css file. When you activate PIXI you will get an overlay & you can drag n drop design mockup into it. You can adjust opacity, position and z-index.

Sublime Text 2 Bidirectional Language Support – Plugin

10th Oct 2012 :
Fixed Arabic broken text (letters are not joining) & post updated.

Sublime text 2 has so many brilliant features that saves time & effort. Sublime text 2 supports UTF-8, but right now it lacks capability to handle bidirectional languages like Arabic, Hebrew etc… Sublime BiDi Plugin will enable this shortcoming. Sublimes’s future version may support Right-To-Left Languages. Developers from MENA region will love this feature.

Mac Sublime text 2