10 essential JavaScript resources for HTML5

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.

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.

A prolific technology writer, Kerry is an authority in her field and produces content for a variety of high profile sites in her niche. Also a published author, Kerry is co-founder of digital content agency markITwrite, adores the written word and all things tech and internet related.
More articles by Kerry Butters

When you originally set out to create a web design portfolio site for your business, it was most likely with the intent to use those work samples to impress prospective clients and generate more revenue. But a WordPress website is a powerful, revenue-generating tool in and of itself. You’ve invested a lot of time in creating it, so don’t let it go to waste. Your main source of revenue right now likely comes from the development projects you work on. As a web design professional, that may present some...

Evan Campbell recently wrote an informative article for employers at WebdesignerDepot titled "How to Find the Perfect Web Developer". In this article, we will share a few tips with you to help you ensure that you’re the kind of developer that Evan and his readers would want to hire. 1) Avoid becoming a “specialist” ... Trends on the Web move quickly. If you spend five years exclusively fine-tuning your knowledge of Drupal only to find that suddenly overnight everyone wants a Wordpress site (or...

In this tutorial we’re going to show you how to use the JavaScript Battery API to improve the user experience for people in desperate need of a charger. We’ll look at the Battery API itself, as well as some techniques for getting the most out of every drop of the most precious of resources! Some browsers lack support for the Battery API (you guessed it; Safari and IE), so a quick support check can go a long way in terms of debugging: if(navigator.getBattery){ // Battery API available. // Rest of code goes...

The web development industry is one that is always growing because of how we use the web. No longer do we expect the Internet to simply host a digital pamphlet for a business. The expectations nowadays are for a site to be rich with content, provide the means for visitors to interact and be dynamic in every interaction. With the demand at an all time high, freelance web developers may think that there is little they could do to harm their career. Unfortunately, there are many ways that people in this industry...

Usability testing is sometimes one of those things that developers conveniently ‘forget’ about. Why? Well do a search for it. Usability testing, as it is generally practiced, costs money. There are interviews to perform, a variety of tests to create for each and every project, services to pay for… and what if your client’s in another country? Or what if they’re a small business with a small budget, or a brand-new startup? What if the only reason you learned web development in the first...

Social media is an effective way of driving more traffic to a website and reaching a new audience for published content. If you or your clients use WordPress, you probably know there is a myriad of plugins that allow anyone to quickly share every published article across a variety of social media networks. But, sharing is not the only way to integrate social media into WordPress. In fact, there are a few other ways of making a website more social and helping your clients get more eyes on their content. 1....

What you see may be what you get, but it's not necessarily what everyone else gets. I was reminded of this when I bought a gaming monitor. I'd originally intended to get a 4K monitor of some kind, but I decided to go for speed over size. The one I did get can render my games at a brisk 144hz, and my games have never looked better. Well, they looked good after I finally got my color calibration worked out. It took a while, as I was out of practice, but after finding my monitor's ICC profile and eyeballing the calibration...

Since 2010, mobile searches have seen a 400% increase and it is estimated that by 2013, there will be more mobile Internet users than desktop users. A mobile-friendly site can thus help you connect with your customers and drive conversions. Just because your website can be seen on your mobile phone does not however mean that its mobile ready. Mobile sites are designed with mobile users in mind and fit well on small screens. They are supposed to offer simple navigation capabilities and take advantage...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.