Bootstraps

Twitter Bootstrap is something that single handedly improved the speed of building websites. It’s strength involves covering all the bases in terms of styling buttons, navbars, etc. which is great in the case of prototyping up an application as well as it’s powerful grid system that makes building responsive websites and building up sites a pleasure.

Mock out your project in minutes rather than hours

Auto-magic

Livereload, what a wonderful thing. For the uninitiated it is a simple script or application that looks for changes in your file system and accordingly reloads the browsers. There are many ways of going about this. The moment I found about it. I scoured the internet looking for a suitable alternative to add to my workflow. I finally settled on a Chrome extension that worked perfectly.

I purchased a second monitor and after that working was easy I could see changes in the browser as I coded. I no longer had to rely on the browser inspection tools to find out the exact number of pixels that made something look pefect.

Code. Compile. Code. Compile.

The Advent of Grunt

Grunt is a task runner. A task runner is an application that takes a list of actions and triggers and runs them according to a configuration you set. Why use a task runner you say?

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you — and your team — with basically zero effort.

If you haven’t tried it out already. I suggest giving it a go.

So now I could get Grunt to not only compile my LESS or SCSS whichever I happened to be using but I could get it to livereload my browser whenever I changed them. I wrote tasks that would handle concatenation, minification (reducing file sizes by removing unnecessary characters), and a lot more.

Just Code. Forget everything else.

Bower Power

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Bower is pretty self explanatory but it gives us an excellent way to load dependencies such as jQuery and the other scripts and stylesheets you need for a project.

One stop shop for your favorites scripts and styles

And Now

Nowadays me and my friends are mostly into the Ruby on Rails framework and I’ve started learning AngularJS on the side.

When I develop simple web pages and apps and work on my AngularJS side-projects I use the ever wonderful Yeoman.

Yeoman is a scaffolding tool that aims to scaffold workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry. It uses the afore mentioned Grunt and Bower to build, preview and test as well as manage your dependencies as well. Twitter Bootstrap is optional but an excellent addition.

When I work on Rails, the standard sprockets asset pipeline is an effective tool if used correctly.

I hope to elaborate on Yeoman as well my development workflow in Rails in the future.

I’d love to hear your experiences with front-end development, and what your opinions are. Tweet to me at @KartikLuke