Bitesize

The HTML5 Revolution

Simple, Rich Content

Mike Lewis

Issue 1, July 2017

HTML5 provided web developers with some amazing new capabilities and tools, to create cross-platform and media-rich apps with better performance and connectivity.

The much easier doctype declaration, more semantic elements and forms, and awesome APIs such as GeoLocation, web cam access, web sockets (real-time updates on a page), WebGL (3D graphics), and access to local file data, has really opened up the possibilities of what web applications can do. Now, you can add audio, video and other file formats with very little effort; video becomes as easy as embedding an image. Gone are the days of plug-ins and codecs!

Support is good, but to be sure that any of the above features work on a user’s browser, you can test for it through Modernizr, and serve the user a fallback solution if necessary.

SOME STANDOUT FEATURES:

CANVAS: Canvas is an unbelievably powerful rectangular area, which allows pixel-level operations such as drawing a circle, box or line, enabling a web developer to render graphics on the fly. The <canvas> element and its API are controlled with JavaScript.

LOCAL STORAGE: This is used to store data from web applications within a user’s browser. It allows you to save or remember everything you type, even after you refresh or close the browser. It works like cookies, but where cookies are small, local storage allows for much larger data and files.

OFFLINE WEB APPS: You can download the site while online, then continue to use it offline. This is possible by making use of the application cache. A file called the “application manifest” stores the list of files used in your application. Files will be served from this cache and behind the scenes the app will check and automatically update these files when next online.