HTML5 Archives

10 performance optimization tips I learned after rebuilding two course landing pages

I recently rebuilt the landing page for both AppSync Masterclass and Production-Ready Serverless. The sites were hosted on Shifter (think serverless WordPress) and Wix respectively. In both cases, the performance of the sites (especially on mobile) left a lot to be desired. A large portion of the user traffics to these sites comes from mobile. …

10 performance optimization tips I learned after rebuilding two course landing pages Read More »

Echo websocket server using websocketd – as if by magic!

.Net, HTML5, Programming, WebSocket

I stumbled across this little gem the other day – websocketd – which turns anything that takes standard-in and standard-out into a websocket server! To build a dead simple echo server, follow these steps: follow the download instructions here (don’t forget to add it to your PATH) create a new console application in Visual Studio …

Echo websocket server using websocketd – as if by magic! Read More »

Having fun with HTML5 – Simple painting app using Canvas

HTML5, Javascript, Programming

It feels like a little while since I last played around with the <canvas> element, so I spent some time over the weekend and put together a simple painting app using the canvas and here is the end result. Here’s some screenshots: Spray Tool One of the interesting things with this simple painting app …

Having fun with HTML5 – Simple painting app using Canvas Read More »

Test your maths skills at the MathDOJO!

CSS3, Games, HTML5, Javascript, Programming

Another productive weekend bares fruit for another mini game! This time I’ve put together a dojo-themed mini game whose sole purpose is to test your ability to do simple (well, mostly) arithmetic calculations in your head and your tolerance for my sense of humour (which is not so bad I hope ;-) ). Screenshots Here’s …

Test your maths skills at the MathDOJO! Read More »

Creating a sticky note app with HTML5, CSS3 and Javascript

CSS3, HTML5, Javascript, Programming

I saw this tutorial the other day, it’s cool but I fancied taking it a step further and make it useful as an app rather than just a fancy way to show some structured data on the screen. Here’s a list of the features which I wanted to add: being able to edit the title …

Creating a sticky note app with HTML5, CSS3 and Javascript Read More »

Having fun with HTML5 – Canvas, part 5

HTML5, Javascript, Programming

In part 4, I put together the foundations for a mini shooting game, with targets moving on the screen and you can ‘hit’ them by clicking inside the targets, etc. etc. I promised an update to make it feel more like a game, so here it is! Adding a background The black background was more …

Having fun with HTML5 – Canvas, part 5 Read More »

Having fun with HTML5 – Canvas, part 4

HTML5, Javascript, Programming

Following on from part 3 where we basically made a little app that lets you scribble with HTML5’s canvas element, let us push on and see what else we can achieve with the canvas element. The logical next step would be to made animations, and give you a way to interact with the animation. So …

Having fun with HTML5 – Canvas, part 4 Read More »

Having fun with HTML5 – Canvas, part 3

HTML5, Javascript, Programming

Following on from part 2 where I wrote a simple page with a canvas area where you can scribble, I thought I’d add a couple of new features: ability to show the image as PNG image so user can save it change the line cap change the line join change the shadow settings (colour, offset, …

Having fun with HTML5 – Canvas, part 3 Read More »

Having fun with HTML5 – Canvas, part 2

HTML5, Javascript, Programming

Earlier I explored some of the basic drawing methods available on the 2D context of the new canvas element in HTML5, moving on from there, I’ve put together another quick demo here (see image below) which lets the user scribble inside the canvas element. HTML The HTML for the page is simple enough, the key …

Having fun with HTML5 – Canvas, part 2 Read More »

Having fun with HTML5 – Canvas, part 1

HTML5, Javascript, Programming

One of the cool new features introduced by HTML5 is the new <canvas> tag, which defines an area for you to draw graphics on using javascript. Basics To create a canvas element is as easy as inserting a <canvas> tag like this: Typically you will give it an ID as you will need to look …

Having fun with HTML5 – Canvas, part 1 Read More »