The Status of Living HTMLThe Status of Living HTML
(highlights)(highlights)
Daniel Davis, W3CDaniel Davis, W3C
@ourmaninja...
●
getUserMediagetUserMedia
●
Web SocketsWeb Sockets
●
WebGLWebGL
●
WebRTCWebRTC
Cool existing thingsCool existing things
●
Web ComponentsWeb Components
●
Responsive ImagesResponsive Images
●
Service WorkerService Worker
●
JSON for form dataJSO...
Browser supportBrowser support
caniuse.comcaniuse.com
status.modern.iestatus.modern.ie
Photo byPhoto by twitter.com/mamipe...
Web Components: TemplateWeb Components: Template
●
Re-usable HTMLRe-usable HTML
●
Only parsed when they are neededOnly par...
Web Components: Custom ElementsWeb Components: Custom Elements
●
Extend existing elementsExtend existing elements
●
Make y...
Web Components: Shadow DOMWeb Components: Shadow DOM
●
An “unseen” DOM attached to an elementAn “unseen” DOM attached to a...
Shadow DOM:Shadow DOM: createShadowRoot()createShadowRoot()
Shadow DOM: renderedShadow DOM: rendered
Web Components: More...Web Components: More...
w3c.github.io/webcomponentsw3c.github.io/webcomponents
html5rocks.comhtml5r...
Responsive ImagesResponsive Images
●
srcsetsrcset attribute forattribute for <img><img>
●
<picture><picture> elementelemen...
Responsive Images:Responsive Images: srcsetsrcset
●
For high pixel density screens (e.g. “retina”)For high pixel density s...
Responsive Images:Responsive Images: <picture><picture>
●
With singleWith single <source><source>
<picture><picture>
<sour...
Responsive Images:Responsive Images: <picture><picture>
●
With multiple sizesWith multiple sizes
<picture><picture>
<sourc...
Responsive Images:Responsive Images: <picture><picture>
●
With multipleWith multiple <source><source>
<picture><picture>
<...
Responsive Images:Responsive Images: <picture><picture>
●
With multiple filetypesWith multiple filetypes
<picture><picture...
Responsive Images: More...Responsive Images: More...
responsiveimages.orgresponsiveimages.org
Service WorkerService Worker
●
Goodbye ApplicationCacheGoodbye ApplicationCache
●
Hello page-independent scriptsHello page...
Service WorkerService Worker
●
Decides how to respond to a URI requestDecides how to respond to a URI request
navigator.se...
JSON for form dataJSON for form data
●
Currently:Currently:
– enctype=”multipart/form-data”enctype=”multipart/form-data”
–...
Others (your homework)Others (your homework)
●
PerformancePerformance
– Performance Timeline APIPerformance Timeline API
–...
How you can helpHow you can help
●
Community Groups:Community Groups:
– w3.org/communityw3.org/community
●
Testing:Testing...
The Status of Living HTMLThe Status of Living HTML
(highlights)(highlights)
Daniel Davis, W3CDaniel Davis, W3C
@ourmaninja...
The status of living HTML (highlights)
Upcoming SlideShare
Loading in …5
×

The status of living HTML (highlights)

435
-1

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
435
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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 caniuse.comcaniuse.com status.modern.iestatus.modern.ie Photo byPhoto by twitter.com/mamipekotwitter.com/mamipeko
  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: – mothereff.in/custom-element-namemothereff.in/custom-element-name
  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... w3c.github.io/webcomponentsw3c.github.io/webcomponents html5rocks.comhtml5rocks.com
  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... responsiveimages.orgresponsiveimages.org
  18. 18. Service WorkerService Worker ● Goodbye ApplicationCacheGoodbye ApplicationCache ● Hello page-independent scriptsHello page-independent scripts ● ProposalProposal – github.com/slightlyoff/ServiceWorkergithub.com/slightlyoff/ServiceWorker
  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: – http://darobin.github.io/formic/specs/json/http://darobin.github.io/formic/specs/json/
  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: – 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
  23. 23. The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×