The status of living HTML (highlights)
Upcoming SlideShare
Loading in...5
×
 

The status of living HTML (highlights)

on

  • 458 views

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

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

Statistics

Views

Total Views
458
Views on SlideShare
457
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The status of living HTML (highlights) The status of living HTML (highlights) Presentation Transcript

  • The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan
  • ● getUserMediagetUserMedia ● Web SocketsWeb Sockets ● WebGLWebGL ● WebRTCWebRTC Cool existing thingsCool existing things
  • ● Web ComponentsWeb Components ● Responsive ImagesResponsive Images ● Service WorkerService Worker ● JSON for form dataJSON for form data ● OtherOther Shiny new thingsShiny new things
  • Browser supportBrowser support caniuse.comcaniuse.com status.modern.iestatus.modern.ie Photo byPhoto by twitter.com/mamipekotwitter.com/mamipeko
  • 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
  • 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
  • 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
  • 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.comhtml5rocks.com
  • Responsive ImagesResponsive Images ● srcsetsrcset attribute forattribute for <img><img> ● <picture><picture> elementelement ● ““Art direction” is possibleArt direction” is possible ● <img src=”...”><img src=”...”> fallbackfallback
  • 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">
  • 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>
  • 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>
  • 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>
  • 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>
  • Responsive Images: More...Responsive Images: More... responsiveimages.orgresponsiveimages.org
  • Service WorkerService Worker ● Goodbye ApplicationCacheGoodbye ApplicationCache ● Hello page-independent scriptsHello page-independent scripts ● ProposalProposal – github.com/slightlyoff/ServiceWorkergithub.com/slightlyoff/ServiceWorker
  • 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); });});
  • 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/
  • 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
  • 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
  • The Status of Living HTMLThe Status of Living HTML (highlights)(highlights) Daniel Davis, W3CDaniel Davis, W3C @ourmaninjapan@ourmaninjapan