Home » Archive

Articles in the html5 Category

Cool & Future Tech, Featured, Headline, html5, Web Experiments »

[17 Jul 2013 | 6 Comments | ]
Build an MPEG-DASH player from Scratch

This post will show you how to build an MPEG-DASH video player using Javascript.
tl;dr? Skip to the demo (chrome only) http://francisshanahan.com/demos/mpeg-dash.
Dynamic Adaptive Streaming over HTTP (DASH) enables streaming of media content delivered from conventional HTTP web servers. Fragments served are static pieces of media so no server-side component required. This is very similar to HLS but unlike HLS MPEG-DASH is the first adaptive bit-rate HTTP-based streaming solution that is an international standard. Reference [LINK]
The recent Build conference announced Netflix’s plan for Playready DRM+HTML5 in the browser without plugins, …

Featured, Headline, html5, Technology »

[7 May 2013 | No Comment | ]
The Truth about Netflix and HTML5 vs. Silverlight

There has been a lot of hype recently about Netflix “dumping” Silverlight in favour of HTML5.
A quick Google reveals multiple articles rotating the same sound-bytes [LINK], [LINK] or [LINK].
So what’s the truth? Is the sky really falling? In my opinion there are some inaccuracies or rather inflated truths here which are being bounced around the “lite” tech echo chambers of Gizmodo, CNET and the like.
I will offer here my opinion on what is really going on.
Is Netflix moving away from Silverlight? Yes. In fact ALL streaming media providers …

Featured, Headline, html5, Web Development »

[26 Jun 2012 | One Comment | ]
Creating Zoomable Presentations

If you work in corporate America chances are you’ll need to give a presentation sooner or later. That almost always means Powerpoint. I wouldn’t say I hate powerpoint, it’s quick, simple and it does the job but you won’t win any awards with it. Over the years I’ve tried to limit my usage to avoid long presentations with lots of slides. I generally find the more you have to rely on the slides, the worse your presentation will be. Guy Kawasaki advocates a 10-20-30 rule, have no more than 10 …

Featured, Headline, html5, Web Development »

[21 Oct 2011 | 18 Comments | ]
Sencha Touch 2.0 MVC in 5 minutes or less

I’ve shied away from JS frameworks on the mobile platform primarily due to performance. I had not been able to find one that came close to native performance on Android. This changed last weekend when I tried out the Sencha Touch 2.0 dev preview. Performance is vastly improved over Touch 1.0. Animations and transitions are smooth, even on my Android 2.2 device and I was able to get up and running very fast.
Grab the Sencha Touch 2.0 Dev Preview here: http://www.sencha.com/blog/sencha-touch-2-developer-preview/
While I was able to get a basic app …

Cool & Future Tech, Featured, Headline, html5, Things I've Made »

[19 Sep 2011 | 20 Comments | ]
Stream a webcam using Javascript, NodeJS, Android, Opera Mobile, Web Sockets and HTML5

With all the recent Goruck-ness it’s time to throw out a tech post. I’ve been prepping for a NodeJS presentation recently and wanted a unique demo. I had also come across the experimental build of Opera which supports accessing the native webcam of a mobile device. So I threw these two technologies together and came up with a Javascript powered way to stream a video camera from a mobile device to a bunch of desktop (or mobile) clients.
HTML5 had originally laid out support for a new element (the “device” …

Featured, Headline, html5 »

[6 Jul 2011 | 17 Comments | ]
Mycellium Source Code Available

Last time [LINK] I discussed how virtual Worms could “eat” a picture, seeking out the lighter or darker areas as food and leaving a trail in their wake. I’ve dumped the source here: http://francisshanahan.com/demos/worms/test.html so you can interact, create your own images and figure out how it’s done. To be honest I haven’t had much time to clean this up as I’ve been focusing on other things and doing a bit of travel for work so be gentle.
Just enter a URL of an image and click “create drawing” to …

Cool & Future Tech, Featured, Headline, html5, Web Development »

[23 Jun 2011 | 2 Comments | ]
Using Node.js, Cygwin and Web Sockets

If you have not heard of Node.js (or “Node” as Ryan Dahl calls it) [LINK] it is more fun than a barrel full of monkeys and faster than stink. Node.js is built around the Google V8 javascript engine and aims to solve the issues of concurrency and blocking IO which are prevalent in todays web servers. It also improves over traditional OS threading by using an event model to handle requests. This leads to the ability to handle many more concurrent requests but also handle them faster since less memory …

Featured, Headline, html5 »

[9 May 2011 | 6 Comments | ]
Emulating Mycelium Hyphae with HTML5

Mycelium (plural mycelia) is the vegetative part of a fungus, consisting of a mass of branching, thread-like hyphae. Hyphae are any of the threadlike filaments forming the mycelium of a fungus. And YES I had to look both of those up.
Typically they travel and branch along a source of nutrients, following the source. I came across this awesome work of Ryan Alexander [LINK] whilst messing around with Processing one evening. Ryan used Processing which is similar to Java. Processing is a great sketch-language which makes whipping up graphical wonders …

Cool & Future Tech, Featured, Headline, html5, Things I've Made, Web Development, Web Experiments »

[9 Oct 2010 | 3 Comments | ]
Solving the Traveling Salesman Problem with Genetic Algorithms and HTML5 Web Workers

Irreducible Complexity – the world is too complex to have evolved! Let’s see…
HTML5 introduces the ability to perform multi-threading in the browser using Javascript through the notion of “Web Workers”. So far I have only seen examples of using workers to calculate very high prime numbers. I took a fresh look at these from the standpoint of genetic algorithms and applied it to the Traveling Salesman Problem (a classic). The results are a multi-threaded implementation of the TSP in Javascript capable of converging on a solution for up to 200 cities, …

Cool & Future Tech, Featured, Headline, html5, Web Experiments »

[24 Jul 2010 | 4 Comments | ]
Create CSS Rules from an HTML5 Canvas

Here I show how you can re-use your Canvas images as CSS backgrounds using another interesting feature coming in HTML5. You’ll need a browser supporting CSS3 and Canvas, Chrome, Opera, Safari or Firefox will do.