HTML5 Tutorials

  • QUOTA_EXCEEDED_ERR in Mobile Safari

    I've been working on an HTML5 application for the new Mozilla Marketplace, writing a tutorial along the way to help all of you create and promote your HTML5 web-powered app.  The HTML5 app uses localStorage to save basic search history, as well as other newer APIs.  While testing my application on my iPhone, I was seeing the following error:

  • HTML5 Element Printing in Internet Explorer

    I was recently working on a website created with HTML5 elements like header, footer, section, and more, and got a rude awakening by Internet Explorer 8. I knew about the hack to ensure the elements render and style as they should on screen...

  • HTML5 Context Menus

    Update: These context menus display even when JavaScript is disabled; so best practice will be to create these menu structures via JavaScript. Mass innerHTML injection can be used or basic DOM node injection.

  • JavaScript Battery API

    Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its charging status, and allows you to be notified of changes via a few events. Let's check it out!

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? The Page Visibility API allows developers to react to changes in page visibility via the visibilitychange document event. New document.hidden and document.visibilityChange properties are also available.

  • dat.gui: Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don't have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs.  To each their own;  I don't have a strong feeling either way, as it depends on the project.

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations, yet up until recently, you couldn't drag files into a browser to upload them, making file uploading within the browser unintuitive.  With recent advancements in browser technology, the drag and drop method is now supported, but it doesn't look good without a bit of work.  Luckily MooTools Core Developer Arian Stolwijk has created a set of classes to accommodate styling drag and drop file uploading within the browser.  Let's have a look at how it works!

  • The element.dataset API

    A while back I showed you the awesome classList API, which allows simple addition, removal, and toggling of CSS classes without the need for parsing the className.  Another simple API available in FireFox Aurora Firefox 6, at time of print and Chrome 8 is the element.dataset API.  This tiny API allows developers to get and set data- attribute values on HTML elements.   Let's take a look at how it works!

  • window.postMessage Tip: Child-To-Parent Communication

    I wrote a super epic post a few months back about the window.postMessage API that's sweeping the nation.  window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains.  My post showed interaction from parent to child and back to the parent, but didn't detail passing messages from a child to a parent without the parent initializing the conversation.  Let me show you how you can initialize that conversation from child to parent

  • HTML5 Placeholder Styling with CSS

    4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.