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

Tagged: html5

Legend of Canvas image/svg+xml

An introduction to HTML5 Canvas using the Legend of Zelda. Recorded at Fluent 2016 in San Francisco. Presented by Rich McLaughlin.

A good introduction to game development, the slides are here. I’ve not done any work with the canvas element for a few months, but after watching this, I think I’ll get back into it. I’ve got some partially finished games and it would be good to get them finished.

HTML5 Canvas Blocks #4

The thought of having to choose a colour for something does not sit comfortably with me. I have read all about colour theory, like a million times, but I still feel mentally paralysed when faced with having to pluck a colour from the rainbow. It’s a sickness, I tell you.

So, anyhow, I currently find myself in said position. Normally, my first line of defence is to revert to good old black ‘n’ white, however, this time I’ve made a mental promise to myself to go wild and choose some actual colours. To be clear, I’m not planning on using the colours below. I think they’re a little too wild, but I do the like the combination. The colours are those featured on the Beastie Boys album art for Hot Sauce Committee Part Two.

See the Pen HTML5 Canvas Blocks #4 by Philip Newborough (@corenominal) on CodePen.

Or maybe I should?

Minefield, HTML5 Massively Multiplayer Online Minesweeper image/svg+xml

Play massively multiplayer online minesweeper together with your friends on an endless field.

Hour and hours of fun to be had here. Also, bonus points awarded to the developer for including some ASCII art in the HTML.

 __   __  ___   __    _  _______  _______  ___   _______  ___      ______
|  |_|  ||   | |  |  | ||       ||       ||   | |       ||   |    |      |
|       ||   | |   |_| ||    ___||    ___||   | |    ___||   |    |  _    |
|       ||   | |       ||   |___ |   |___ |   | |   |___ |   |    | | |   |
|       ||   | |  _    ||    ___||    ___||   | |    ___||   |___ | |_|   |
| ||_|| ||   | | | |   ||   |___ |   |    |   | |   |___ |       ||       |
|_|   |_||___| |_|  |__||_______||___|    |___| |_______||_______||______|

Want to know how it works? Ask me

HTML5 Canvas Stripes #2

This is the HTML5 canvas animation that I’m currently using in the header of this site. I’m not sure how long it will last on this site, so here is the CodePen. The animation is supposed to look like a giant barcode. It is randomly generated, so the chances of seeing the same barcode twice are quite slim. Anyhow, I love playing around with the canvas element :)

See the Pen HTML5 Canvas StripyWipy #2 by Philip Newborough (@corenominal) on CodePen.

How to Use The HTML5 Sectioning Elements image/svg+xml

HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

In this post you’ll learn how to use these sectioning elements in your own web sites. I’ll be explaining when you should use certain elements over others, as well as when it’s best to stick to a good old <div>.

A good guide (with example code) to using HTML5 sectioning elements to markup your web pages.