Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: html5

How You Can Use HTML5 Custom Data Attributes and Why image/svg+xml

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.

I can’t remember when I started using custom data attributes, it has to be five years ago at least, it’s certainly been long enough to wonder what I ever did without them. Anyhow, if you’ve yet to learn about custom data attributes, this article seems as good as any.

Cross-Browser HTML5 Form Validation is Finally Here! Now What? image/svg+xml

I’m irrationally excited because this is more than just a mundane feature shipping in a random browser preview. Safari was the last browser to implement HTML5 form validation — a feature that offers massive time savings for web developers — and it’s been a long time coming.

In this article I’d like to take a quick look at how we got here, what this change means, and why cross-browser form validation may change the way we build forms on the web.

It seems like we’ve been waiting for browser form validation forever, so it’s excellent to read that it’s finally coming to Safari. Validation and sanity checking are amongst my least favourite tasks, so any help the browser can provide to make client-side validation a bit easier and more standardised has to be a good thing.

Quick Tip: How to Make a Game Loop in JavaScript image/svg+xml

The “game loop” is a name given to a technique used to render animations and games with changing state over time. At its heart is a function that runs as many times as possible, taking user input, updating the state for the elapsed time, and then drawing the frame.

In this short article you’ll learn how this fundamental technique works and you’ll be able to start making your own browser based games and animations.

A good introduction to writing a game loop with JavaScript and the HTML5 canvas element.

Everything you could ever want to know (and more) about controlling the Referer header image/svg+xml

HTML5 added a whole bunch of useful new values for the rel attribute, one of which is noreferrer (yes, spelt correctly this time). When this attribute is added, the browser is instructed not to set the header if the user follows the link. Support for this was first added to WebKit (Chrome/Safari) way back in 2009, arrived in Firefox in late 2014 and most recently was added to Microsoft Edge (but is not supported in any version of Internet Explorer).

Interesting, I was not aware of this attribute. It’s a shame about Internet Explorer’s lack of support as I could have used it as a replacement for the Unbubble derefer service that I’ve been using.

I’m looking forward to a time when IE is nothing but a distant memory.

HTML5 Canvas Particle Emitter

A while back, I had a lot of fun creating some basic HTML5 canvas particle emitters. I don’t know why, but I love hacking on these things. They’re not particularly useful, but they are kind of mesmerising. Below is the first one I created — view full screen here.

See the Pen HTML5 Canvas Particle Emitter by Philip Newborough (@corenominal) on CodePen.

HTML5 Canvas Sprite Animation – Alien

Tonight, I made an attempt at creating a HTML5 Canvas sprite animation. The process is actually quite simple, if not a little fiddly. I figure that I’ll need to get good at this, if I want to finish my game. Anyhow, an example of one of the sprites I created can be seen below. The sprite loops through 4 states, using a spritemap to show a different alien for each state. I’m thinking of using this one as part of my game’s intro.

See the Pen Canvas Sprite – Alien Loop by Philip Newborough (@corenominal) on CodePen.