You have to love the developer network. Whilst HTML5 remains a relatively new standard, there are plenty of open source and paid for resources available to help you work with HTML5 using JavaScript.
JavaScript is necessary for many HTML5 elements such as <canvas>, <audio> and WebGL. However, as I said, there are tools, libraries and framework resources to help you, so let’s get started looking at some of them.
1) HTML5 Boilerplate
It’s likely that if you’re already working with HTML5 then you already know about this. Boilerplate allows you to build great sites using the downloadable template, which includes Normalize.css, jQuery and Modernizr (more on the latter later). You can also request a custom build of the framework if you need something that little bit different that you can’t create yourself.
HTML5 Boilerplate also includes Apache settings to make it easier for you to deliver great performance.
2) Fabric.js
This is a JS library for use with new elements of HTML5 such as canvas. You can use it to parse SVG elements and use built in objects such as grouping and shadowing. Fabric.js helps you to create animations easily, from simple geometrical shapes through to real images or ones that use 1000s of pixels.
Whilst of course you don’t need Fabric.js to create drawings on canvas, it does allow you to create more complex shapes and manipulate/animate with ease. It has an extensive events system to allow you to perform actions such as mouse over. It also allows you to create per pixel drag and drop.
3) Modernizr
Mentioned above, Modernizr is one of the most popular JS resources on the Web and is included in a few frameworks. With Modernizr, you can write both conditional JS and CSS to help create pages even when the browser doesn’t yet support the new HTML5 elements.
It works by running on page load in order to pick up features and then create a JS object, which in turn adds classes to HTML elements in order for you to use with CSS. It’s open source and allows designers to use HTML5 and CSS3–through conditional loading–with fallbacks so that users who don’t have the most up-to-date browsers don’t find their browsing experience ruined.
If you’re a WordPress enthusiast, then there is also a Modernizr plugin that you can use which can be installed manually.
4) Backbone.js
This allows you to structure web apps by adding models with key-value binding and custom events. It can be connected to all of the preconfigured JSON API and is in itself a rich API with numerous event handling functions. Backbone allows you to represent data as models and when a user action causes changes to occur, the model automatically triggers a change event. This means that rather than having to “write glue code”, if the model changes it updates the HTML accordingly.
Document Cloud was made using Backbone, you should check it out.
5) Dirty Markup
Prefer to use online tools than work locally? Then give Dirty Markupa go, especially if you’re not over-confident when it comes to JS or you’re relatively new to web development. It’s a free app that can be used for cleaning up code quickly and easily and it’s not just for use with JS. You can also clean up HTML5 and CSS code with it as it combines HTML Tidy, CSS Tidy and JS Beautify together to give you a great resource for tidying your code all in one place.
Alongside all of this it uses the Ace Editor, which is an online code editor that has similar features to editors such as Sublime Text. For Dirty Markup you have the option to choose the code you want cleaning up; just paste it into the editor box next to the options box and then just press the ‘clean’ button. Simple!
6) JFormer
This is a simple and effective resource for adding forms and is written on top of jQuery. It allows you to validate forms, client and server-side, and process them, using Ajax, without changing pages. Forms that are generated using JFormer all comply with the necessary standards.
It’s free to use under the MIT license and there are ready-made templates to help make things all that much quicker and easier for you. You can edit the CSS in order to style forms to suit the project too.
7) Live.js
This is a monitoring tool that keeps an eye on Javascript and CSS by sending HEAD requests to the server. Any necessary changes are then applied dynamically for CSS, or for HTML and Javascript the page will be automatically reloaded.
It’s framework and language independent, meaning that it can be used with a number of languages and is compatible with Firefox, Chrome, Safari, Opera and IE6+. According to the developers, Live.js means you can “say goodbye to Alt-Tab”!
8) Chart.js
This is a handy tool for creating charts of all kinds (pie-charts, polls, donut chart etc.) using the canvas and SVG elements in HTML5 and the JS ‘getcontext’ method. It’s not for use with interactions though, use Fabric.js for that one. However, it can be used for animation with SVG.
It allows you to create complex charts and when used with SVG will allow for better scrolling and page performance.
9) Grunt
Already a hugely popular resource, Grunt is a task runner for Javascript and allows you to automate common tasks that tend to be repetitive, including minification; compilation; unit testing; and more … Grunt also has a large and useful ecosystem which contains plenty of plugins to help you automate many tasks and take more of the boring stuff out of coding.
10) Cocos2D-javascript
For those among you that like to develop games, Cocos2D-javascript is a 2D games and graphics engine for running games in the browser. This means that you can perform 2D rendering in browser without the need for additional plugins such as Flash or Java.
Whilst the documentation points out that not all browsers support in-browser rendering due to a lack of HTML5 support, this isn’t really the case any longer. Most browsers that I’ve tested canvas and SVG projects in do the job. However, there’s never any harm in creating a fallback to allow the game to be played via a plugin for users with older browsers.
That’s all folks!
Let’s face it, the web is becoming deservedly more and more user-friendly and UI and UX have become one of the most important aspects to design. JS is powerful enough to make this become even more so and with that in mind, any good developer will want to at least gain enough knowledge to be able to slot it into HTML5 elements effectively.
There are some truly great examples of how JS can be used out there, so why not give it a go and start experimenting with the new HTML5 elements, if you haven’t already.
