Check user's input without js using regular expressions and HTML5 !

HTML5 now allows you to check input attributes of the user using regular expressions without the use of any javascript using "pattern" attribute -

A simple example for email check -

<input type="email" pattern="[^ @]*@[^ @]*" value="">

Content security policy explained

HTML5 Rocks has a complete article on content security policy to save us from cross site scripting!

Ways to customise html5 form validation options

Link here.

Prefetch a link using html5

If you know, where a user might navigate to from your current page, prefetching the page is a good idea.
This has been made really easy by html5 by using the prefetch attribute.

For eg -

<link rel="prefetch" href="http://www.examplesite.com/page2">

Here, the user might be on page 1 of the site and with the help of html5, we can prefetch page 2 before the user even navigates to it making the page load faster.
Smart and simple.

Starting with windows 8 apps using html5

Link here.
Nice resource to kick start with windows 8 metro apps using html5! 

APP development using pure html !

Link here.
Maybe this is not new.
But for me, this was the new awesomeness.
I can simply create chrome - firefox web pages, apps for android and ios etc..
All by simply using HTML5 !
Tried it on my android by creating a dummy app.
And a dummy extension on chrome.
And its all working !

Change url without reloading the page !

Link here.
Yes, it's possible now in all the browsers to change the url of a page with html5 using javascript without using hash-hack except earlier versions of IE 10.
 To do this, add the line
 window.history.replaceState("object or string", "Title", "/another-new-url");

Executing this line of code will change the URL to my-domain.com/new-url (3rd option). The "Title" string (2nd option) is intended to describe the new state, and will not change the title of the document as one might otherwise expect. The W3 documentation states: "Titles associated with session history entries need not have any relation with the current title of the Document. The title of a session history entry is intended to explain the state of the document at that point, so that the user can navigate the document’s history." So if you want the document’s title to change to match the title of the history entry, you’ll need to write a hook for that (hint: just tie a function to the onpopstate event). Finally, "object or string" (1st option) is a way to pass an object to the state which you can then use to manipulate the page. Check out the link above if you want to even control the invocation of the back and forward functions.

Bits and pieces about HTML 5 FORMS !

Link here.
A look into the browser support for different new html5 forms by wufoo.

Link here.
Modernizr helps to check which css3 features are available in the current User Agent easily. 
Even, a specialized and minified js can be generated here which checks for only those features that we want.
This helps a lot in front end designing front ends on different browsers.

Link here.
Webforms2 is a script to implement cross browser html 5 forms. Even for old browsers like IE6-7, Safari 3, Mozilla 1 etc.

Link here.
To dive into html 5 input types ! and form validation types ! I love the way, the author has explained small simple changes that can be done for html5 upgradation. 

Link here and here.
Pretty interesting html5 form validation techniques. Also features a script that runs fallback functions for browsers not supporting html5. But, the posts are 2 year old. So a lot of changes would have taken place since then. Still, is a good read.

Link here.
A javascript library for non supporting html5 browsers at github basically for forms.


Link here.
To check which input attributes are supported by which browsers on desktops.
&
Link here.
To check which input attributes are supported by which browsers on mobile.