This document discusses tools and techniques for modern HTML5 development. It introduces CSS preprocessors like Sass and Compass that make CSS maintenance easier. Automation tools are also discussed, including Grunt for tasks like concatenation and minification, Bower for package management, and LiveReload for faster development. The Yeoman workflow is recommended for scaffolding projects using tools like Grunt and Bower.

1. The Superhero’s Method of
Modern HTML5 Development
A RapidValue Solutions Whitepaper

2. Contents
HTML is more powerful and smart than ever before!........................................................................ 03
More tools ! More plugins !! More automations!!.............................................................................. 04
CSS Preprocessors........................................................................................................................ 05
1. Sprite images.................................................................................................................. 05
2. Susy............................................................................................................................... 05
Emmet......................................................................................................................................... 05
Scaffold with YO, build with Grunt, manage dependencies with Bower!.............................................. 06
1. Grunt............................................................................................................................. 06
2. Bower............................................................................................................................. 07
3. LiveReload...................................................................................................................... 07
4. Yeoman generators......................................................................................................... 07
Conclusion................................................................................................................................... 07
About RapidValue......................................................................................................................... 08
02©RapidValue Solutions

3. When everything around us
gets smarter, its so hard for
us to not be.
HTML is more powerful and smart than ever before!
There was a time, when we used to spend hours and
hours, trying to fix the browser compatibility issues in our
UI. If problems persisted, we ended up cursing the
Internet Explorer at least once in a day. We were unable
to learn anything new, because nothing “new” could give
a better browser support.
Today, few years after the arrival of CSS3 and HTML5,
things have changed for good. All the major browsers are
stable and have started supporting all the essential prop-
erties of CSS3 and HTML5. Things are getting more and
more convenient, powerful, easy and user-friendly.
A new era has started and with each passing day, the
front-end developers are getting more and more enlight-
ened. Yes! The developers are regarded as the ‘superhe-
roes’. When everything around us is getting smarter and
cooler, we cannot lag behind. The current scenario
encourages you to become a front-end developer.
020203
HTML5 test score over the years
Chrome Firefox Internet Explorer Maxthon Opera Safari
Jan 2010Jan 2009 Jan 2011 Jan 2012 Jan 2013 Jan 2014
0
100
200
300
400
500
600
Score(points)
Source : html5test.com
©RapidValue Solutions

4. More tools ! More plugins !! More automations!!
0202
HTML5 developers have gone through many revolutions in
the recent years. There has been an alarming rise in the
number of innovations which has changed the notion of
who a front-end developer is and what all tasks he can
do.
A plethora of tools have emerged recently and have
completely changed the life cycle of the HTML5 develop-
ment. We now have a large arsenal of tools, starting from
boilerplates to performance tuning and building tools. This
enables us to facilitate speed and allows us to develop in
a smarter and better way.
Every successful front-end developer has these beneficial
tools in their bag. The right usage and implementation of
these tools have become critical and is considered to be
becomes the superhero’s magical method of modern
front-end workflow.
Being a front-end super hero
is not so easy. You cannot
just get bitten by a mutant
spider and start weaving the
web the very next morning.
Its all about
learn - practice - learn -
practice and practice.
020204©RapidValue Solutions

5. CSS isn’t that difficult to learn and its pretty easy to write, but maintenance of
the CSS file has become an arduous task for the developers. The mainframe
CSS preprocessor, SASS and a CSS Authoring Framework - Compass, enables
writing and maintaining CSS in a much easy way as compared to the previous
methods that were used. By creating cutting-edge cross browser, CSS, effort-
lessly takes your style sheet to the next level, and beyond. The best part is,
that you don’t need to possess knowledge like a scientist to use it.
Creating sprite images is quite challenging for all developers. Cutting the images, merging them into a
single file, measuring their positions and recording that in your CSS, can be a strenuous task. This can
add hours to a project and you may also need to redo it many times to get it right or in some cases,
the project requirements get changed. What if someone could assist you with this? Yes, compass will
do exactly that. All you need to do is to put all the images into a directory and add some basic instruc-
tions. Compass will do the rest. Your work is done.
Susy is a Compass plugin that allows you to create a customizable grid system easily. It makes respon-
sive design extremely effortless by avoiding the need to manually calculate widths. There is no need to
limit the design according to the available frameworks to create responsive websites. Susy does the
math for any markup, any design and any opinion.
Previously known as Zen Coding, Emmet is a revolutionary editor plugin for high-speed HTML, XML, XSL
and CSS coding and editing. Emmet has helped developers since many years and has now reached a
new level. The core of this plugin is a powerful abbreviation engine which allows you to expand expres-
sions, similar to CSS selectors, into HTML code. It will make your work seem like it has been carried out
by an expert.
CSS Preprocessors
Emmet
0202020205
Sprite images
Susy
div#page>div.logo+ul#navigation>li*3>a
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
...can be expanded into:
©RapidValue Solutions

6. With so many tools that are available for the front-end develop-
ment, sometimes it is very difficult to figure out how these tools
work together. The Yeoman workflow comprises three types of
tools - the scaffolding tool (YO), the build tool (Grunt, Gulp, etc.)
and the package manager (like Bower and npm) for improving your
productivity and satisfaction when building a web application.
Grunt is the most popular JavaScript task runner among the front-end developers. While working on a
JavaScript project, there are a few things you will want to do on a regular basis. Like concatenation of
the given files, running JSHint to detect errors and potential problems in your JavaScript code, running
tests, or minifying and combining your scripts etc.
As of now, Grunt has the following predefined tasks that you can use in your project:
In addition to the built-in tasks, you can create your own tasks.
02020202050202020206
Scaffold with YO, build with Grunt, manage
dependencies with Bower!
Grunt
concat - Concatenate files
init - Generate project scaffolding from a predefined template
lint - Validate files with JSHint
min - Minify files with UglifyJS
qunit - Run QUnit unit tests in a headless PhantomJS instance
server - Start a static web server
test - Run unit tests with nodeunit
watch - Run predefined tasks whenever watched files change
©RapidValue Solutions

7. There are quite a few Yeoman generators that are available for scaffold Web Apps (comes with SASS,
Bootstrap, Modernizer, …), AngularJS apps, jQuery apps, Ember.js apps, Polymer and over 2000 more.
We are no longer completely dependent on the legacy browsers. We are taking initiatives to stretch
further and develop everything that is possible with regards to the browser.
By doing a lot of automation, you can avoid repeated mistakes, write in a clean and concise manner, and
it becomes pretty easy to architect, maintain and extend the modular code. The life of an HTML5
developer is made pretty easy.
To conclude, ‘learn-practice-learn-practice’ and prove to be beneficial to the customers.
Bower is a package manager for the web libraries. Previously when your project needed jQuery be
included, you had to visit the jQuery website, download the file and move it into your project directory.
Bower simplifies this process by typing
which manages to get jQuery into your project.
Bower
LiveReload changes the way you develop. You, no longer have to save a file, switch to the browser, and
then refresh the page. With LiveReload, after you save a file, the browser will refresh itself, saving your
valuable and precious time. Using the dual monitor setup or a large monitor is pretty much a pre-requi-
site. All you need to do is hit save and look.
LiveReload
Yeoman generators
bower install jquery
Conclusion
07©RapidValue Solutions
If you’d like more information on this topic, please do write to the author, Sujith Kumar K S, Senior.
Front-end developer at sujithks@rapidvaluesolutions.com and our UX/UI Methodology & Design
Expert, Melvin Thambi, Lead Architect - UX/UI Design at melvint@rapidvaluesolutions.com
RapidValue has a team of domain experts and mobility consultants to help you build innovative and
comprehensive mobile applications for your enterprise. If you need guidance on building your first
mobile application, please write to contactus@rapidvaluesolutions.com, we’ll be happy to hear from
you.

8. About RapidValue
A global leader in digital transformation for enterprise providing end-to-end mobility,
omni-channel, IoT and cloud solutions. Armed with a large team of experts in
consulting, UX design, application development, integration and testing, along with
experience delivering projects worldwide, in mobility and cloud, we offer a wide range
of services across industry verticals. We deliver services to the world’s top brands,
fortune 1000 companies, Multinational companies and emerging start-ups. We have
www.rapidvaluesolutions.com www.rapidvaluesolutions.com/blog
+1 877.643.1850 contactus@rapidvaluesolutions.com
August 2014
offices in the United States, the United Kingdom and India.