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 properties 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 enlightened. Yes! The developers are regarded as the ‘superheroes’. When everything around us is getting smarter and cooler, we cannot lag behind. The current scenario encourages you to become a front-end developer.
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 development. 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.
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, effortlessly 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 instructions. 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 responsive 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 expressions, similar to CSS selectors, into HTML code. It will make your work seem like it has been carried out by an expert.
With so many tools that are available for the front-end development, 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.
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.
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.
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-requisite. All you need to do is hit save and look.
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.
If you’d like more information on this topic, please do write to the author, Sujith Kumar K S, Senior. Front-end developer at firstname.lastname@example.org and our UX/UI Methodology & Design Expert, Melvin Thambi, Lead Architect – UX/UI Design at email@example.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 firstname.lastname@example.org, we’ll be happy to hear from you.