Category: HTML5

Creating a Parking Game With the HTML Drag and Drop API

Among the many JavaScript APIs added in HTML5 was Drag and Drop (we’ll refer to it as DnD in this article) which brought native DnD support to the browser, making it easier for developers to implement this interactive feature into applications. The amazing thing that happens when features become easier to implement i...

Game AI: The Bots Strike Back!

The following is a short extract taken from our new book, HTML5 Games: Novice to Ninja, written by Earle Castledine. Access to the book is included with SitePoint Premium membership, or you can grab a copy in stores worldwide. You can check out a free sample of the first chapter here. We have all the tools at our dispo...

20+ Docs and Guides for Front-end Developers (No. 12)

It’s that time again to get learning! As before, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help you get up to speed in different areas of front-end development. So please enjoy the twelfth installment of our Docs and Guides series and don’t forge...

How You Can Use HTML5 Custom Data Attributes and Why

In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer. Why Custom Data Attributes? Very often we need to store information associated with different DOM elements. This informati...

Front-end Tools: My Favorite Finds of 2016

Another year has passed and, as we all expected, the Web Platform is continuing to explode with innovation, irritation, fatigue, and a huge influx of new tools and technologies that promise to make our lives as developers easier. As usual, we’ve seen updates to popular tools like React and Angular, while new tools li...

Everything You Should Know About Progressive Web Apps

A Progressive Web Apps is a web application which takes advantage of modern browser features and can be added to your homescreen, behaving just like a native application. In this tutorial we’re going to show you everything you need to know about PWAs, step by step, with practical examples and a demo app. To n...

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

   Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, because I’ll be using terms that assume a basic ...

Quick Tip – Installing the Ionic Framework for HTML5 Apps

Ionic is a framework for building hybrid mobile apps using the web technologies you know and love, Angular and Cordova. The Ionic 2 release (currently in beta) leverages Angular 2 (also in beta) and ES6, and you can opt into TypeScript if you prefer. It allows you to write your application code once in HTML, CSS and Ja...

HTML5 Media Source Extensions: Bringing Production Video To The Web

   In the last decade, plugins such as Flash and Silverlight have enabled a rich consumption of video in browsers, powering popular services such as YouTube and Netflix. However, this approach has shifted towards HTML5 over the last few years. Almost two years ago, the W3C published the final recommenda...

JavaScript AI For An HTML Sliding Tiles Puzzle

   Sam Loyd (1841–1911), American chess player and puzzle maker, created the sliding tiles puzzle in the 1870s. The puzzle is represented by an m×n grid, where m is number of columns and n is number of rows, and each cell can be any imaginable value (number, letter, image, and so on.) The purpose of...