Last month, I tweeted about one of my recent projects, the Hacker News mobile web app. It's a simple little app to read Hacker News' stories and comments in Mobile Safari. It started out as an experiment for me to try one of the new CSS extensions introduced in Mobile Safari in iOS5, -webkit-overflow-scrolling: touch which uses native-style scrolling in an overflow: scroll element.

As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you'll be glad you did.

Some examples of working with html2canvas and StackBlur by Mario Klingemann to create a blur effect on content on a website. All the examples should work on all modern browsers with canvas support

This example shows the power of the History API when combined with infinite scroll. Fluid user experience and hard linking all in one. Scroll down, click a link & press the back button, refresh the page — it all just works (well, mostly — still needs some polish).

This article will try to give you the tools and techniques to work on improving the experience of your own application.

HTML5 Video over Airplay (in iOS 4.3) #

In writing POSH HTML we should use the most suitable or semantically accurate element. In HTML4 <div> is a general block-level container element; it doesn’t have any semantic meaning beyond being block-level, and is used when there are no more appropriate elements (i.e. all the time). There is no requirement for the things inside the <div> to be related to each other.

Click to select or drag-and-drop multiple files (review the Notes for this demo):

The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar. Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.

And, lo and behold, we have one. The local storage API (or session storage, with the only difference being that session data is lost when the window is closed) is ridiculously easy to use. All you do is call a few methods on the window.localStorage object – or even just set the properties directly using the square bracket notation:

Storing information locally on a user’s computer is a powerful strategy for a developer who is creating something for the Web. In this article, we’ll look at how easy it is to store information on a computer to read later and explain what you can use that for.

(Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.)

The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). For the class attribute, there is no such limitation. Classnames can contain any character, and they don’t have to start with a letter to be valid.

You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

I’ll show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.

Exhausting exhaustion of HTML5 features and explanations.