The status of living HTML (highlights)


Published on

A look at some exciting things happening in the world of HTML5 and related JavaScript APIs, including Web Components and responsive images.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The status of living HTML (highlights)

  1. 1. The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan
  2. 2. ● getUserMediagetUserMedia ● Web SocketsWeb Sockets ● WebGLWebGL ● WebRTCWebRTC Cool existing thingsCool existing things
  3. 3. ● Web ComponentsWeb Components ● Responsive ImagesResponsive Images ● Service WorkerService Worker ● JSON for form dataJSON for form data ● OtherOther Shiny new thingsShiny new things
  4. 4. Browser supportBrowser support Photo byPhoto by
  5. 5. 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
  6. 6. 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: –
  7. 7. 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
  8. 8. Shadow DOM:Shadow DOM: createShadowRoot()createShadowRoot()
  9. 9. Shadow DOM: renderedShadow DOM: rendered
  10. 10. Web Components: More...Web Components: More...
  11. 11. Responsive ImagesResponsive Images ● srcsetsrcset attribute forattribute for <img><img> ● <picture><picture> elementelement ● ““Art direction” is possibleArt direction” is possible ● <img src=”...”><img src=”...”> fallbackfallback
  12. 12. 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">
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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>
  17. 17. Responsive Images: More...Responsive Images: More...
  18. 18. Service WorkerService Worker ● Goodbye ApplicationCacheGoodbye ApplicationCache ● Hello page-independent scriptsHello page-independent scripts ● ProposalProposal –
  19. 19. 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); });});
  20. 20. 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: –
  21. 21. 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
  22. 22. How you can helpHow you can help ● Community Groups:Community Groups: – ● Testing:Testing: – – ● Documentation:Documentation: –
  23. 23. The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan