thebeebs - html5at5

HTML5 is a much more forgiving when it comes to Mark-up than XHTML. With XHTML you needed to make sure that each opening HTML tag had it’s own closing tag. So you would always close an image tag like this: <img alt="A pretty car" src="image.jpg" />...

Sadly in Windows phone 7, although the font-face tag is supported it’s not possible to link to external fonts. This means that you can’t get WOFF fonts that are not on the phone by default working in IE9 for Windows Phone. There are 16 differences...

I got asked this question during a workshop last month and so thought I’d answer it here during the time I put aside at 5 everyday to answer HTML5 questions. Demo View Demo You can mask videos using SVG in Firefox, but that won't work for IE9 or Chrome...

There are a number of ways to create graphs in HTML5, you could use canvas for example, but one of my favourite ways is to go outside of the HTML5 spec and use an associated technology called Scalable Vector Graphics (SVG). Using SVG you can create really...

The HTML5 forms specification introduces a feature that enables you to let the browser handle validation. However, if you use this feature on your website only browsers that support HTML5 validation will validate the form fields; all the other browsers...

If you have not used postMessage (or Cross Document Messaging to use it’s proper title) it’s a way of securely sending messages between frames even when the documents passing messages are on different domains. To learn more about it you can read this...

I think I’d spin this question around and ask you to think about the kind of problems you have today in your site. If a HTML5 feature can help you solve one of those problems then great, but I wouldn’t go searching for features and then try...

I recently walked past someone in the office who was reading a web article that they’d printed off. Now putting to one-side the environmental impact of printing the internet there is also another disadvantage to reading printed webpages… the hyperlinks...

There are many new features in HTML5 but in think that App Cache is potentially one of the most important. App Cache allows you to create a manifest file that details all of the files your application uses offline. When you visit your website with no...

When I use a HTML5 feature in my website I will often test the browser that is visiting to see if it is capable of using the feature. If it is not capable I will Fall-back to something that the browser is a capable of supporting. In practice, I use modernizr...

I frequently get asked this question by people that are new to HTML5. As well as detailing lots of new elements HTML5 defines a number of new JavaScript APIs. When the HTML5 specification was formulated in 2004 it was felt that APIs were necessary to...

If you have viewed source on any website in the last few years then you will have certainly seen Minified JavaScript. This is JavaScript where all of the whitespace and unnecessary characters have been removed. Developers do this because it reduces the...

Personally I like using jQuery mobile for the projects I work on because it has really broad support and makes developing in browser mobile apps easy. To be honest though I haven’t tested or evaluated many other mobile frameworks out there. There...

Ok so you have a great idea for how you’re going to use Canvas in your next application… problem is you still have tons of visitors that use IE8 (which doesn't support the Canvas element). Not to worry, all is not lost. In many instances you can use something...

With the explosion of devices that access websites , it's becoming more important that your website works well on mobile devices. I found the process of learning how to create websites that worked on mobile devices confusing so I created the list below...

Last week at the digital barn I gave a talk called “The Way the web should be” in it I talked about the importance of Web Standards in the development of IE. In a follow up blog post Ian Parr made an interesting point: One point that I think MS people...

If you are writing anything in JavaScript that animate then you are probably more than familiar with setInterval and setTimeout . These are both useful tools to create timing loops. However, when it comes to creating animations they are both pretty inefficient...

HTML5 contains the a new feature (I say new, Opera has had it since 2006) that allows you to upload multiple files. <input type="file" multiple /> By default this allows the user to select more than one file. The file choosing is handled by...

I got asked by Gordon Rae on twitter today: @ thebeebs Martin, can you recommend a good tutorial for overlaying data on video in HTML5 ? — Gordon Rae (@socialtechno) February 21, 2012 Firstly beware that just because a browser supports HTML5 video it...

The IE test drive website has some new demos that show the use of OpenType font features . Over the next few weeks I thought I’d take a look at each of the different features in turn. OpenType is a technology that is supported by IE10 and Firefox 4+ allows...

Placeholder is a HTML5 attribute that you add to input elements, it makes it easier for users to fill out your forms. Demo view here Source on GitHub It works for on regular input fields but also works on on password types. Of course the placeholder tag...

The browser based WebSQL specification was an in browser database and has been supported by Chrome and a number of other browsers for some time. However, the specification has been dropped in favour of IndexedDB and chrome will be dropping support for...

I was asked this recently asked this by a developer attempting to place a picture over a HTML5 element. His problem was that when the image was pressed it would hide and the video would start playing. The issue that the developer was having was related...

In the statically typed code world I used to inhabit Call stacks were often used to diagnose the root cause of events. I wasn’t aware that JavaScript had a similar (albeit non ECMA5) way of performing error stack interrogation. It’s called Error.stack...

During the launch of IE9 I was asked to produce a HTML5 application that animated stitching tweets on to a canvas. During testing the application I had some really complex animations and they performed just fine, but when I added test using Text API the...