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.
4. ●
Web ComponentsWeb Components
●
Responsive ImagesResponsive Images
●
Service WorkerService Worker
●
JSON for form dataJSON for form data
●
OtherOther
Shiny new thingsShiny new things
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
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