

HTML5 Features you need to know - daker
http://daker.me/2013/05/5-html5-features-you-need-to-know.html

======
aidos
A useful list. I was surprised to find that I'd only heard of one of these.

The pattern attribute for regular expressions looks like a great addition.
Obligatory comment that _"no more...server side code to check if the user's
input is a valid email"_ is clearly a terrible advice. _Always_ validate on
the server.

~~~
ancarda
I should point out it's generally not a good idea to try to use regex on an
email address. It's surprisingly complex and very easy to miss something. I'd
rely on type="email" and send a verification link server-side.

~~~
ubernostrum
You know, I really think at this point that the random historical crap that's
technically legal in an email address should be treated the same as if you
walked into a restaurant and tried to order in Latin. It's time to retire a
lot of it and tell people to move on.

~~~
MrDOS
That doesn't change the fact that a lot of validators disallow common,
everyday things like + tags or even . characters. The only good way to be sure
is to make sure the address contains an @ SOMEWHERE other than the last
character (.+@.+, maybe), and then send a validation e-mail.

------
pornel
Pattern is super useful, but not for type=email, which guarantees syntax check
already. Use it with type=text for special fields like serial numbers, SKUs,
credit card numbers (for which type=number is not appropriate).

dns-prefetch and prerender are not "HTML5". They're experimental/proposals
from couple of browser vendors.

------
pyre
Is there any reason that:

    
    
      <link rel="dns-prefetch" href="//fonts.googleapis.com">
    

is using a protocol-relative URL, or _any_ URL at all? Since we're controlling
a DNS lookup, we would only care about the FQDN.

~~~
narsil
Based on the spec ( [http://www.w3.org/TR/html5/document-metadata.html#the-
link-e...](http://www.w3.org/TR/html5/document-metadata.html#the-link-element)
) requiring a valid URL (
<http://www.w3.org/TR/html5/infrastructure.html#valid-url> ) it would
interpret it as a relative link to a path "fonts.googleapis.com" if you didn't
specify '//' to indicate it was absolute. I don't agree that the spec should
make an exception when rel is "dns-prefetch" and consider all href tags to be
FQDNs or similar.

------
buro9
Is the dns-prefetch only useful for things that are not already
linked/included on the page? (such as redirect chains... t.co links might DNS
prefetch the domain of the end of the chain)

Or is the benefit that you can start the DNS resolution whilst receiving the
<head>, for the JavaScript resources only included near the </body>? (being a
very slight performance benefit)

Edit: And I suddenly thought... for SSL pages would dns-prefetching leak some
information to an observer about the composition pf content or the linked
resources on a page by grouping such DNS requests into a short burst at the
same time as the SSL request?

~~~
igrigorik
Correct on both counts.. Pre-fetching DNS names for origins not on the page
is, indeed, a nice use case - redirects are a good example. Similarly,
embedding a <link rel=dns-prefetch> in the head will trigger an early DNS
lookup, which _can_ , in fact, deliver big latency savings -- you would be
surprised how slow DNS lookups are in practice.

Last but not least, AFAIK, I'm not aware of any logic to group DNS-prefetch
hints or similar strategies when running over TLS.

~~~
pessimism
I tried implementing it for my blog’s pagination, but I definitely don’t see
the zero-second latency Google report in the video, and it doesn’t seem any
faster at all.

Can you tell me if it’s actually working from using the pagination at the
bottom of the front page, or the pagination inside the permapages:
<http://pygm.us/1e9KHCYt>. (Link fixed.)

~~~
igrigorik
You can see if pre-rendering is being triggered in chrome://net-
internals#prerendering.

See: [http://www.igvita.com/posa/high-performance-networking-in-
go...](http://www.igvita.com/posa/high-performance-networking-in-google-
chrome/#prerender)

And "yes":
[https://www.evernote.com/shard/s1/sh/0f3592b8-d72c-40f7-9bbf...](https://www.evernote.com/shard/s1/sh/0f3592b8-d72c-40f7-9bbf-38a12b51c57e/6682c3f17808d1dcc1e4df04afc0bb7d)

~~~
pessimism
Any idea why the prerendering fails?

<http://i.imgur.com/pxijNnq.png>

<http://i.imgur.com/QxcNIeO.png>

Thanks for the help, by the way. :)

------
abecedarius
On forcing PDFs to download: please don't. Most often I'd rather view it in
the browser and then decide whether to save.

~~~
daker
This was just an exemple :)

~~~
gbog
Surte, but one cannot underline enough the importance of relevant and correct
examples. May I suggest something like "<a href='verybiglogoftheday/'
download='log-2013-12-11.txt'>"

~~~
daker
Yes, look at my example (<http://jsbin.com/utugex/1/edit>), the href is
pointing to an .html file, so in the normal case the browser will display the
content of the page but with the download attribute the browser will be forced
to download it as "myfile.pdf".

------
abbyroad9191
The regular expression pattern checking is pretty awesome. I'll disagree
though where they say you don't need any more server side validations. You can
easily remove / change the pattern value in the DOM. Which begs the question,
what's the integrity of client-side testing if it cam be bypassed so easily?

~~~
mrtksn
anything client-side is never about security or consistency since no matter
what you do, anybody can always send you any data they want.

client side validity checking is about the user experience, I mean if the user
is doing something wrong you can guide them to the right direction without the
need of server interaction and server interaction is always slower that one
line of client side code.

~~~
abbyroad9191
Good point about user experience. Are there any tools you use specifically to
test ux that isn't manual?

~~~
saryant
You can use Selenium. Second link is an example of using it within the Play
Framework (scroll to the bottom of the page).

[1] <http://code.google.com/p/selenium/?redir=1> [2]
[http://www.playframework.com/documentation/2.1.1/ScalaFuncti...](http://www.playframework.com/documentation/2.1.1/ScalaFunctionalTest)

------
taeric
The prefetch demo is obnoxiously misleading. If it is definitely the link
you'll be loading, I doubt you will wait upwards of 7 seconds before clicking
the link. In which case, it will not be 0 seconds loading. Then there is the
equally likely, you were confident it was what I wanted, but you were wrong
case. In which case I just downloaded a ton of garbage I didn't want. (Can't
wait for ad servers to preload their assets for you...)

And this is also somewhat amusing, since if I recall firefox has boasted 0
second reloads when you hit "back" fora long time now. Does chrome support
that, yet?

~~~
daker
The prefetch is an option which you can opt-out from, and i think you are
mixing prefetch and prerender, just to let you know Firefox has actually
supported prefetching since...wait for it... 2003.

Worth reading : [https://developer.mozilla.org/en-
US/docs/Link_prefetching_FA...](https://developer.mozilla.org/en-
US/docs/Link_prefetching_FAQ)

~~~
taeric
You are correct that I was using prefetch where I meant prerender.

And... I believe I stand by my complaint regarding it.

------
quackerhacker
AWESOME POINTS! I spend alot of time on Html5Rocks.com and I studied Html5,
but I never even heard of some of these feautres....Made a new wrinkle in my
brain ;)

~~~
markdown
> I studied Html5, but I never even heard of some of these feautres

That's because they aren't "HTML5" yet.

------
kmfrk
This should make pagination really, really interesting. I just need to add
some checks to ensure I don't force users to prefetch a huge chunk of data, of
course.

~~~
daker
Yes this is a good use case.

~~~
mgurlitz
Must the prefetch/render tags be present at first load, or might they be added
dynamically with JavaScript? Pagination is a good example, since a news site
might want to load the second page of an article only after the user get so
far in. Single-page sites are another good use case.

~~~
daker
Note that those prefetching links are just hints to the browser.

------
vishaldpatel
The RegEx input checker on the client-side is not a replacement for server-
side validation. It doesn't prevent someone from sending requests to the
server with bad data, so don't forget to make sure that all requests have
valid data.

What it does is help the interface to be more responsive so the user doesn't
have to wait for a round-trip before finding out that they forgot to put in an
email address / other valid input.

------
lingben
you can also just prefetch an image or file, say a background or large image
that is on another or next page

<link rel="prefetch" href="[http://davidwalsh.name/wp-
content/themes/walshbook3/images/s...](http://davidwalsh.name/wp-
content/themes/walshbook3/images/sprite.png) />

from <http://davidwalsh.name/html5-prefetch>

------
pfisch
Are these all working right now in iOS/firefox/chrome/ie ?

~~~
lftl
Definitely not all. Here's support list for two of the features:

Download Attribute - <http://caniuse.com/download> Datalist -
<http://caniuse.com/datalist>

~~~
hayksaakian
It would be neat if caniuse had a widget that you could embed which would show
% usage at time of reading the post, so I could know right away instead of
looking each feature up.

You'd also have the advantage of the article always being relevant.

~~~
dave1010uk
It does: just add "/embed" to the URL. E.g.
<http://caniuse.com/datalist/embed>

------
kmfrk
I think you still need to use "prerender" for Chrome - and "prefetch" for
Firefox - for it to work.

<http://www.catswhocode.com/blog/mastering-html5-prefetching>

<http://colmjude.com/blog/html5-prefetching>

~~~
igrigorik
Yep. Prefetch != prendering. Prefetch only fetches the single resource, and is
meant as a "post load" hint. Whereas prerendering fetches the entire page, and
all of its assets.

[http://chimera.labs.oreilly.com/books/1230000000545/ch10.htm...](http://chimera.labs.oreilly.com/books/1230000000545/ch10.html#BROWSER_OPTIMIZATION)

~~~
MichaelApproved
Does prerendering execute JavaScript or only load assets?

------
inopinatus
I'm disappointed that DNS prefetching does not specify the record type (A, MX,
TLSA etc), thus limiting utility solely to protocols that use nothing but A
records.

Oversights like these subsequently constrain other developments, such as the
case for basing HTTP 2 on SRV records, using DANE to authenticate certificates
and so forth.

------
est
another important feature: virtual file systems

1\. upload something at
[http://html5-demos.appspot.com/static/dnd/all_types_of_impor...](http://html5-demos.appspot.com/static/dnd/all_types_of_import.html)

2\. see files list here filesystem:<http://html5-demos.appspot.com/temporary/>

3, wat?

explained here

[http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-...](http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-
filesystemurls)

as someone who worked with HTML5 FS API before, I can tell you its async API
design ins PITA to write with.

------
level09
Would be nice to have a small table showing which browsers/versions support
each of these features ..

------
waltz
What I would like to know is if you made that scrolling time-left thing, it
looks neat.

~~~
galaktor
this was immediately distracting to me and annoyed me very fast. Maybe it's
because I'm reading on a mobile device and "x mins remaining" took up ~1/4 of
my screen every time I scrolled. What value exactly does it add? It's likely
to be wrong, and just got in my way.

~~~
daker
Thanks for the suggestion, i'll try fix this :)

------
hayksaakian
Datalist is really awesome. Autocomplete with no CSS or JS? sounds good to me.

~~~
hughlomas
While it is nice to have, datalists are currently lacking in common
functionality and are no real substitute for fully featured autocompletes. For
example, datalist only matches the beginning of the values. Typing "soft" into
a datalist will not match "Microsoft".

There are some other limitations discussed here:
<http://msdn.microsoft.com/en-us/magazine/dn133614.aspx>

~~~
wavefunction
Hugh's point is incredibly important. You don't really want one hundred
thousand &lt;option&gt; elements in your DOM as your "auto-complete" solution.

To be honest, datalists are pretty worthless for every situation where I've
needed to implement auto-complete functionality in projects, simply because
the universe of possible entries has been always been huge.

------
ezraroi
Very useful list. Will try it and report, Thanks

~~~
daker
Your are welcome :)

