Friday, September 12, 2014

HTML5 Boilerplate

Posted by Suhel Sayyad
Boilerplate Codes is a piece of reusable code in many contexts without any alteration to the original code. HTML5 on the other hand is the latest technology of the web, which provides the skeleton to the webpages, we surf on daily purposes.
HTML5 Boilerplate, a project of H5BP that combines the need for a boiler code for HTML5 apps. It combines industry standard practices and requirements for a perfect point of execution for new projects.

Do we really need one?

Many developers would like to argue on this point, but concepts like reusability, portability gives rise to templates that can be used accordingly in conjunction with agile methodology.
Reusability and portability are two important aspects of current computer software engineering practices. Templates provide the right point of approach to many problems but not all.
HTML5 Boilerplate is the by-product of hundreds of front-end engineers who worked collaboratively through Github to provide the Front end community the best template for new HTML5 apps.

Why it’s needed in fast paced environment?

Technology is changing at very fast rate, sooner or later we will see ideas and execution of them at fairly faster than we expect them to. As humans, we fail to assert the life of technology and prediction of arrival of newtechnology, which can alter the perceptions of humans and their behaviors.
There are tons of designers and developers who fear new technology, as new technology will render them useless to a point, where they are not useful and have lost the capability to contribute. And then, boilerplate code comes into play; they help the transition from old technology to new technology much easier.
A boilerplate code provides a whole sum of ideas that can go through a developers mind when starting out. I like the idea, but sometimes this can has some drawbacks. Not all projects are same and this gives HTML5 boilerplate its drawback.

The visit to the core

File Structure Folder

File Structure HTML5 Boiilerplate
The advantages of using the HTML5 Boilerplate:
  1. Analytics, icons and more.
  2. Normalize.css and helpers.
  3. jQuery and Modernizr.
  4. High Performance.
The core elements of HTML5 Boilerplate:
  • HTML
  • CSS
  • JavaScript
  • .htaccess (Apache web server configuration file)
  • Crossdomain.xml
  • Miscellaneous (gitnore, ignore files etc.)
Normalize.css includes all the HTML5 tag styles, which can be modified according to needs, during development. There is another CSS file called main.css that takes care of cross-browser styling including print media queries for responsive design. There are few helper classes in CSS as well.
The core also contains proper documentation, included in doc folder. The veterans can choose to download the minimal version which doesn’t include documentation. It is advised for new users to download the full version from here.

Developers can also choose to download initializr, a custom build of HTML5 Bootstrap that sports three pre-configurations:
  • Classical H5BP
  • Responsive
  • Bootstrap
Initialzr, a project by Jonathan Verricchia is a HTML5 generator to yield proper pre-configured templates for different scenarios.

A visit to .htaccess

Let’s get started with code. Lines of codes don’t really reflect anything for computer scientist and developers but still it hints on the functionality added to the boilerplate code. 550+ lines of code provides much of.htaccess power to your project.

List of functionality provided by .htaccess
  • Cross-Domain Ajax Request
  • CORS-enabled images
  • Web font access
  • 404 redirects
  • Custom error message/pages
  • Better website experience
  • Cookie setting from iframes
  • Screen flicker
  • Proper MIME types for all files
  • UTF-8 encoding    
  • Rewrite engine
  • Suppressing / Forcing the "www." at the beginning of URLs
  • Content Security Policy (CSP) 
  • File access
  • Secure Sockets Layer (SSL)
  • HTTP Strict Transport Security (HSTS)
  • Server software information
  • Compression  
  • Content transformations
  • Expires headers (for better cache control)
  • Filename-based cache busting 
  • File concatenation
  • Persistent connections
.htaccess is the single most powerful file that can change the behavior of the server. So use only, when you know what you are doing. Want to learn more about .htacess? Check this neat site http://htaccess-guide.com/.

A visit to index.html

HTML5 Boilerplate index.html

The screenshot provides a view of index.html. A typical HTML5 index.html files with modernizer no-js, which detects JavaScript support. It also features Google analytics and Google CDN for jQuery.
The other directories include JS folder, robot.txt and other useful files.

HTML5 Boilerplate is a no-brainer and is a must have for developers to kick-start their project. Using initializr provides more choices for developers and designers only when they know what to discard and what to keep.