The document discusses the status of emerging web technologies, including Web Components, Responsive Images, Service Workers, and JSON form data. It highlights several cool existing technologies like WebSockets and WebGL. It also outlines new and promising technologies under development like Web Components templates, custom elements, and shadow DOM. The document encourages supporting these technologies through community involvement, testing, and documentation to help the web platform progress.

1. The Status of Living HTMLThe Status of Living HTML
(highlights)(highlights)
Daniel Davis, W3CDaniel Davis, W3C
@ourmaninjapan@ourmaninjapan

3. ●
getUserMediagetUserMedia
●
Web SocketsWeb Sockets
●
WebGLWebGL
●
WebRTCWebRTC
Cool existing thingsCool existing things

4. ●
Web ComponentsWeb Components
●
Responsive ImagesResponsive Images
●
Service WorkerService Worker
●
JSON for form dataJSON for form data
●
OtherOther
Shiny new thingsShiny new things

5. Browser supportBrowser support
caniuse.comcaniuse.com
status.modern.iestatus.modern.ie
Photo byPhoto by twitter.com/mamipekotwitter.com/mamipeko

6. Web Components: TemplateWeb Components: Template
●
Re-usable HTMLRe-usable HTML
●
Only parsed when they are neededOnly parsed when they are needed
●
Useful for a large suite of documentsUseful for a large suite of documents

7. Web Components: Custom ElementsWeb Components: Custom Elements
●
Extend existing elementsExtend existing elements
●
Make your own elementsMake your own elements
●
Custom elements must contain a hyphenCustom elements must contain a hyphen
●
Name validator:Name validator:
– mothereff.in/custom-element-namemothereff.in/custom-element-name

8. Web Components: Shadow DOMWeb Components: Shadow DOM
●
An “unseen” DOM attached to an elementAn “unseen” DOM attached to an element
●
Encapsulation in HTML:Encapsulation in HTML:
– ““private” scopeprivate” scope
– independent of global stylesindependent of global styles
●
Multiple shadows possibleMultiple shadows possible

9. Shadow DOM:Shadow DOM: createShadowRoot()createShadowRoot()

10. Shadow DOM: renderedShadow DOM: rendered

11. Web Components: More...Web Components: More...
w3c.github.io/webcomponentsw3c.github.io/webcomponents
html5rocks.comhtml5rocks.com

12. Responsive ImagesResponsive Images
●
srcsetsrcset attribute forattribute for <img><img>
●
<picture><picture> elementelement
●
““Art direction” is possibleArt direction” is possible
●
<img src=”...”><img src=”...”> fallbackfallback

13. Responsive Images:Responsive Images: srcsetsrcset
●
For high pixel density screens (e.g. “retina”)For high pixel density screens (e.g. “retina”)
<img src="small.jpg"<img src="small.jpg"
srcset="small.jpg 1x, large.jpg 2x">srcset="small.jpg 1x, large.jpg 2x">

14. Responsive Images:Responsive Images: <picture><picture>
●
With singleWith single <source><source>
<picture><picture>
<source srcset="small.jpg 1x,<source srcset="small.jpg 1x,
large.jpg 2x">large.jpg 2x">
<img src="small.jpg" alt=”Portrait”><img src="small.jpg" alt=”Portrait”>
</picture></picture>

15. Responsive Images:Responsive Images: <picture><picture>
●
With multiple sizesWith multiple sizes
<picture><picture>
<source sizes="100%"<source sizes="100%"
srcset="pic400.jpg 400w, pic800.jpg 800w>srcset="pic400.jpg 400w, pic800.jpg 800w>
<img src="pic400.jpg" alt="Portrait"><img src="pic400.jpg" alt="Portrait">
</picture></picture>

16. Responsive Images:Responsive Images: <picture><picture>
●
With multipleWith multiple <source><source>
<picture><picture>
<source media="(min-width: 600px)"<source media="(min-width: 600px)"
srcset="large.jpg">srcset="large.jpg">
<source media="(min-width: 300px)"<source media="(min-width: 300px)"
srcset="small.jpg">srcset="small.jpg">
<img src="small.jpg" alt=”Portrait”><img src="small.jpg" alt=”Portrait”>
</picture></picture>

17. Responsive Images:Responsive Images: <picture><picture>
●
With multiple filetypesWith multiple filetypes
<picture><picture>
<source type="image/webp"<source type="image/webp"
srcset="small.webp, large.webp 2x">srcset="small.webp, large.webp 2x">
<source type="image/jpg"<source type="image/jpg"
srcset="small.jpg, large.jpg 2x">srcset="small.jpg, large.jpg 2x">
<img src="small.jpg" alt="Portrait"><img src="small.jpg" alt="Portrait">
</picture></picture>

18. Responsive Images: More...Responsive Images: More...
responsiveimages.orgresponsiveimages.org

19. Service WorkerService Worker
●
Goodbye ApplicationCacheGoodbye ApplicationCache
●
Hello page-independent scriptsHello page-independent scripts
●
ProposalProposal
– github.com/slightlyoff/ServiceWorkergithub.com/slightlyoff/ServiceWorker

20. Service WorkerService Worker
●
Decides how to respond to a URI requestDecides how to respond to a URI request
navigator.serviceWorker.register("/assets/v1/worker.js").then(navigator.serviceWorker.register("/assets/v1/worker.js").then(
function(serviceWorker) {function(serviceWorker) {
console.log("success!");console.log("success!");
serviceWorker.postMessage("Howdy from your installingserviceWorker.postMessage("Howdy from your installing
page.");page.");
// To use the serviceWorker immediately, you might call// To use the serviceWorker immediately, you might call
window.location.reload()window.location.reload()
},},
function(why) {function(why) {
console.error("Installing the worker failed!:", why);console.error("Installing the worker failed!:", why);
});});

21. JSON for form dataJSON for form data
●
Currently:Currently:
– enctype=”multipart/form-data”enctype=”multipart/form-data”
– enctype=”application/x-www-form-urlencoded”enctype=”application/x-www-form-urlencoded”
●
New alternative:New alternative:
– enctype=”application/json”enctype=”application/json”
●
Proposal:Proposal:
– http://darobin.github.io/formic/specs/json/http://darobin.github.io/formic/specs/json/

22. Others (your homework)Others (your homework)
●
PerformancePerformance
– Performance Timeline APIPerformance Timeline API
– User Timing APIUser Timing API
– Page Visibility APIPage Visibility API
●
Push APIPush API
●
Resource PrioritiesResource Priorities
●
Clipboard APIClipboard API
●
Network Service Discovery APINetwork Service Discovery API

23. How you can helpHow you can help
●
Community Groups:Community Groups:
– w3.org/communityw3.org/community
●
Testing:Testing:
– github.com/w3c/web-platform-testsgithub.com/w3c/web-platform-tests
– testthewebforward.orgtestthewebforward.org
●
Documentation:Documentation:
– WebPlatform.orgWebPlatform.org

24. The Status of Living HTMLThe Status of Living HTML
(highlights)(highlights)
Daniel Davis, W3CDaniel Davis, W3C
@ourmaninjapan@ourmaninjapan