<!doctype html>
<html data-current="post" lang="en-GB">
<head>
<!-- COMMON TAGS -->
<meta charset="utf-8">
<title itemprop="name">8 HTML5 Features You Haven't Seen Before at lwsdeep</title>
<!-- Search Engine -->
<meta name="description" itemprop="description" content="The blog of Steve - Web* Developer">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="8 HTML5 Features You Haven't Seen Before at lwsdeep">
<meta name="twitter:description" content="The blog of Steve - Web* Developer">
<meta name="twitter:site" content="@steveworkman">
<meta name="twitter:creator" content="@steveworkman">
<!-- Twitter - Article -->
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="8 HTML5 Features You Haven't Seen Before at lwsdeep">
<meta name="og:description" content="The blog of Steve - Web* Developer">
<meta name="og:url" content="https://steveworkman.com">
<meta name="og:site_name" content="The blog of Steve - Web* Developer">
<meta name="og:locale" content="en-GB">
<meta name="og:type" content="article">
<!-- Open Graph - Article -->
<meta name="article:section" content="Web Development">
<meta name="article:published_time" content="2010-09-21T00:00:00.000Z">
<meta name="article:author" content="Steve Workman">
<meta name="article:tag" content="post,HTML5,Sketchnotes">
<link rel="alternate" type="application/rss+xml" href="https://steveworkman.com/feed.xml" />
<link rel="me" href="https://webperf.social/@steveworkman" />
<link rel="me" href="https://techhub.social/@steveworkman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>:root{--turkey:#fff0eb;--white:#fff;--blue:#1777af;--headingBackground:#bbdce8;--textColor:#282828;--visibleGrey:#ccc;--pageBackground:#fff;--articleBorder:#fff;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--turkey:#fff0eb;--white:#fff;--blue:#29b0ff;--headingBackground:#083444;--textColor:#f5f5f5;--visibleGrey:#ccc;--pageBackground:#333;--articleBorder:#2a2a2a}}*,:after,:before{box-sizing:border-box}body,html{color:var(--textColor);font-family:Avenir,Avenir Next,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;margin:0 auto;padding:0}header{grid-area:header}main{grid-area:main}aside{grid-area:aside}footer{grid-area:footer}body{background-color:var(--pageBackground);display:grid;grid-template-areas:"header header header" ". main main" ". aside aside" "footer footer footer";grid-template-columns:auto 3fr 1fr;grid-template-rows:auto 1fr auto auto;height:100vh;max-width:50em}@media screen and (min-width:750px){body{grid-template-areas:"header header header" ". main aside" "footer footer footer";grid-template-rows:auto 1fr auto}main{max-width:37.5em}}code,p,pre{line-height:1.5}a[href],a[href]:visited{color:var(--blue)}a[href]:not(:hover){text-decoration:none}footer,header,main{padding:1em}main{margin:0 auto;max-width:100%;padding-bottom:2em}main :first-child,main>article :first-child{margin-top:0}pre{direction:ltr;font-size:14px;-webkit-hyphens:none;hyphens:none;margin:.5em 0;padding:1em;-moz-tab-size:2;-o-tab-size:2;tab-size:2;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}blockquote{position:relative}blockquote:before{color:var(--visibleGrey);content:"\201C";font-family:Georgia,Times New Roman,Times,serif;font-size:6rem;left:-2.5rem;position:absolute;top:-.5rem}header>em{display:block;font-size:2em;font-style:normal;font-weight:700;margin:.67em 0}header nav ul{list-style:none;padding:0}header nav ul :first-child{margin-left:0}header nav li{display:inline-block;margin:0 .5em}header nav li a[href]:not(:hover){text-decoration:none}header nav li a[data-current="current item"]{font-weight:700;text-decoration:underline}article{border-bottom:1px solid #eee;border-bottom:1px solid var(--articleBorder);margin-bottom:1em;padding-bottom:1em}article>h1,article>h2,article>header{background-color:var(--headingBackground);border-radius:.5em 0 0 0;font-size:2em;line-height:1.2;margin-bottom:.75em;padding:.25em .5em}article>h1>a[href],article>h1>a[href]:visited,article>h2>a[href],article>h2>a[href]:visited{color:var(--textColor)}article>header>h1{font-size:1.2em;margin-bottom:.25em}article>header>.subtitle{font-size:.8rem;margin-bottom:0}article>header>.subtitle>small{display:inline-block;width:50%}article>header>.subtitle>small:last-child{text-align:right}article img{display:block;margin-left:auto;margin-right:auto;max-width:100%;text-align:center}main>section>article>*{margin-bottom:.5em;margin-top:0}a[rel=tag],a[rel=tag]:visited{background-color:var(--pageBackground);border:1px solid var(--pageBackground);border-radius:.25em;color:var(--blue);display:inline-block;font-size:.625em;height:2em;letter-spacing:.1em;line-height:2em;margin:0 .5em .5em 0;padding:0 .5em;text-decoration:none;text-transform:uppercase;vertical-align:text-top}a[rel=tag]:hover{background-color:var(--blue);border:1px solid var(--blue);color:var(--pageBackground)}a[rel=tag]:last-child{margin-right:0}ul.taglist{font-size:.8em}ul.taglist li{padding-bottom:.25em;padding-top:.25em}form{display:grid;padding:2em 0}form label{display:none}button,input,textarea{font-family:Avenir,Avenir Next,sans-serif;font-size:1rem;margin-bottom:1em;padding:1em;width:100%}input,textarea{border:1px solid #000}button{background-color:var(--blue);border:1px solid var(--blue);color:var(--white);cursor:pointer}@media screen and (min-width:768px){:root{font-size:1.1rem}}.pagination>ol{list-style:none;padding:0}.pagination>ol>li{display:inline-block;width:50%}.pagination>ol>li.previous{text-align:right}table.speaking{border:1px solid var(--turkey);border-collapse:collapse}table.speaking td,table.speaking th{padding:.25em}table.speaking thead>tr{background-color:var(--headingBackground);border-bottom:1px solid var(--turkey)}table.speaking th{text-align:left}table.speaking .label{background-color:var(--headingBackground);border-radius:8px;color:var(--textColor);display:inline-block;padding:4px 8px}</style>
<script></script>
<script src="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.js" async></script>
<link href="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-18282110-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-18282110-1');
</script>
</head>
<body>
<header>
<em>
<a href="/">Steve Workman's Blog</a>
</em>
<nav>
<ul>
<li><a href="/" >Home</a></li><li>
<a href="/about/">About Steve</a>
</li><li>
<a href="/speaking/">Speaking</a>
</li><li>
<a href="/bookshelf/">CSS Bookshelf</a>
</li></ul>
</nav>
</header>
<main>
<article>
<header>
<h1>8 HTML5 Features You Haven't Seen Before at lwsdeep</h1>
<p class="subtitle">
<small>
Posted on <time datetime="2010-09-21T00:00:00.000Z">21 September 2010</time> by Steve Workman
</small>
<small>About 3 min reading time</small>
</p>
</header>
<p>This month at <a href="http://www.londonwebstandards.org/">London Web Standards</a>, two in-depth HTML5 talks, covering bits which aren't in common usage at the moment, and what you can do with the bits that are. This is part one, Google's <a href="http://mahemoff.com">Michael Mahemoff</a> (<a href="http://twitter.com/mahemoff">@mahemoff</a>) on 8 HTML5 features you haven't seen before, and <a href="https://www.steveworkman.com/?p=459">part two</a>, Opera's <a href="http://www.splintered.co.uk">Patrick Lauke</a> (<a href="http://twitter.com/patrick_h_lauke">@patrick_h_lauke</a>) on <code><video></code> and <code><audio></code>. Below are my notes and write-up. Enjoy!</p>
<p><a href="/static/img/8-html5-features.png"><img src="/static/img/8-html5-features-200x300.png" alt="Sketchnotes for 8 HTML5 Features You Haven't Seen Before" title="8 HTML5 Features You Haven't Seen Before" loading="lazy"></a></p>
<p>This talk focused on 8 less-commonly used features of HTML5. Whether they're all actually part of HTML5 is up for debate, but they're all specifications being worked on for implementation in browsers, so that's enough.</p>
<p>Firstly, Michael had made his slides using HTML5, which worked really quite well, nice flashy transitions and all that and was a good example of some of the features he showed off (notably the history API) .</p>
<p><strong>1. App Caching</strong> App caching is making web sites work offline: it tells browsers which files they should keep cached and re-load when the URL is requested. Whole apps can be cached like this and the iPhone and Android make good use of this. This is not the same as...</p>
<p><strong>2. Client-side Storage</strong> Which is data storage accessed from JavaScript. You used to do this with cookies, but now you've got access to simple storage arrays, and WebSQL and IndexedDBs are coming. Both of these together replace services like Google Gears which was a stop-gap for this.</p>
<p><strong>3. Cross Origin Resource Sharing</strong> One big problem with AJAX is that the XHR request can't request something on another domain. The work-around for this is <a href="http://remysharp.com/2007/10/08/what-is-jsonp/">JSONP</a> which is a hack if there ever was one. CORS allows people to do this in an open way... which to me, is simply dangerous. However, it will have some uses, unlike...</p>
<p><strong>4. Ping</strong> Which, apart from being a new social network, adds a bit of header information basically pinging a web site when a link is clicked. It's designed to replace redirects but I didn't really understand a good use case for it. If anyone wants to explain it, <a href="https://www.steveworkman.com/contact">please drop me a line</a>.</p>
<p><strong>5. Web Sockets</strong> Web sockets allow for a connection to a server to be kept alive and events received, much like sockets created in any other programming language. Web sites like Facebook (for chat) and <a href="http://www.swoopo.co.uk/">Swoopo</a> currently use <a href="http://en.wikipedia.org/wiki/Comet_(programming)">Comet</a> for doing this and web sockets will allow them to get updates pushed to the page from the server without the ugly hacks.</p>
<p><strong>6. History API</strong> I'm looking forward to this one: it allows for JavaScript inspection and manipulation of the browser's history stack (or array, whatever it is) without changing the URL to use the # technique. It's going to be very powerful for making applications where you don't change the page but lots of things change state and users use the back button a lot. I made a note that it's quite a bit like a view state, making an <a href="http://ASP.NET">ASP.NET</a> comparison, but that's a bit unfair.</p>
<p><strong>7. Workers</strong> Web workers enables multi-threading in JavaScript. Finally! I hear you cry. It's not widely supported at the moment and it is about 25% slower than running the process in the main thread, but means you can do all sorts of things whilst the UI keeps updating.</p>
<p><strong>8. Geo-location</strong> Used to be done by IP with big expensive databases, but can now be done with hooks into device hardware. Useful for a load of different applications, this will be one of the most widely-used of the HTML5 APIs.</p>
<p>And that's it. They're all under-the-hood improvements, and the browser makers are making it easier to do the cool stuff, which will bring in a lot of innovative web apps as people discover the power of these new tools.</p>
<p><a href="https://www.steveworkman.com/?p=459">Part two of #lwsdeep can be found here</a></p>
<p>Update: here's a picture of what's in HTML5 and what isn't by Bruce Lawson (<a href="http://flic.kr/p/81PfaR">Flickr</a>)</p>
<p><a href="/static/img/4603715307_c878c8a77b.jpg"><img src="/static/img/4603715307_c878c8a77b.jpg" alt="What's in HTMl5" title="What's in HTML5" loading="lazy"></a></p>
<p>
<a href="/tags/HTML5/" rel="tag">HTML5</a>
<a href="/tags/Sketchnotes/" rel="tag">Sketchnotes</a>
</p>
</article>
<nav>
<a href="/">Back to home</a>
</nav>
</main>
<aside>
<h2>Find me online</h2>
<ul>
<li><a href="https://techhub.social/steveworkman" target="_blank">Mastodon - @steveworkman@webperf.social</a></li>
<li><a href="https://www.instagram.com/steveworkagram/" target="_blank">Instagram</a></li>
<li><a href="https://www.github.com/steveworkman/" target="_blank">Github - steveworkman</a></li>
</ul>
<h2>Posts in other categories</h2>
<ul class="taglist">
<li><a href="/tags/Browsers/" class="tag">Browsers (10)</a></li>
<li><a href="/tags/Conferences/" class="tag">Conferences (1)</a></li>
<li><a href="/tags/CSS3/" class="tag">CSS3 (14)</a></li>
<li><a href="/tags/Facebook/" class="tag">Facebook (3)</a></li>
<li><a href="/tags/Genesys/" class="tag">Genesys (1)</a></li>
<li><a href="/tags/Gigs/" class="tag">Gigs (1)</a></li>
<li><a href="/tags/Google Wave/" class="tag">Google Wave (1)</a></li>
<li><a href="/tags/Hiring/" class="tag">Hiring (2)</a></li>
<li><a href="/tags/HTML5/" class="tag">HTML5 (20)</a></li>
<li><a href="/tags/Interviewing/" class="tag">Interviewing (1)</a></li>
<li><a href="/tags/iPhone/" class="tag">iPhone (12)</a></li>
<li><a href="/tags/JavaScript/" class="tag">JavaScript (14)</a></li>
<li><a href="/tags/Learning/" class="tag">Learning (1)</a></li>
<li><a href="/tags/Microsoft/" class="tag">Microsoft (10)</a></li>
<li><a href="/tags/Mobile/" class="tag">Mobile (12)</a></li>
<li><a href="/tags/Node.js/" class="tag">Node.js (1)</a></li>
<li><a href="/tags/Off-topic/" class="tag">Off-topic (11)</a></li>
<li><a href="/tags/Performance/" class="tag">Performance (5)</a></li>
<li><a href="/tags/Projects/" class="tag">Projects (2)</a></li>
<li><a href="/tags/Rails/" class="tag">Rails (2)</a></li>
<li><a href="/tags/Ramblings/" class="tag">Ramblings (20)</a></li>
<li><a href="/tags/Reading List/" class="tag">Reading List (1)</a></li>
<li><a href="/tags/Sketchnotes/" class="tag">Sketchnotes (19)</a></li>
<li><a href="/tags/Speaking/" class="tag">Speaking (7)</a></li>
<li><a href="/tags/Steel-Software/" class="tag">Steel-Software (2)</a></li>
<li><a href="/tags/Usability/" class="tag">Usability (9)</a></li>
<li><a href="/tags/USE/" class="tag">USE (16)</a></li>
<li><a href="/tags/User Experience/" class="tag">User Experience (11)</a></li>
<li><a href="/tags/User Interfaces/" class="tag">User Interfaces (10)</a></li>
<li><a href="/tags/Web Design/" class="tag">Web Design (12)</a></li>
<li><a href="/tags/Web Standards/" class="tag">Web Standards (33)</a></li>
</ul>
</aside>
<footer>
<small>
This content is © 2003-2023 Steve Workman and does not necessarily represent the views, strategies or opinions of my employer.<br>
This blog is made with <a href="https://www.11ty.io/">Eleventy</a>.
</small>
</footer>
</body>
</html>