Lesser Known Web Platform Features

Everyone talks about shiny new HTML5 APIs that are not very useful but few talk about essential web platform features that are being overlooked. This talk raises awareness of these APIs.

Transcript

1. LESSER KNOWN WEB PLATFORM FEATURES FOR PRAGMATIC DEVELOPERS AND HAPPY END-USERS
2. HI. I’m Marek. I work for Chute I’m a front-end engineer.
3. MOTIVATION. Developers don’t use many essential web platform features. Learning about oddities of the web platform is fun. And lastly, we constantly seek ways to improve our products, right?
4. <INPUT TYPE> There are a lot more input types than plain text and password. Input type controls the keyboard layout on mobile devices. Pick the right one. 
 Most popular:
 email, tel, url, number https://html.spec.whatwg.org/multipage/input.html#states-of-the-type-attribute
5. <INPUT TYPE> (CONT) type=“url” type=“tel” type=“email” type=“number”
6. AUTOFILL HINTS. Google found that users complete forms up to 30% faster when using autofill. User agent needs hints on what it should autofill otherwise it falls back to heuristics. 
 https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
7. AUTOFILL HINTS (CONT). <form> <input type="text" name="shipping-city" autocomplete="shipping address-level2"> <input type="text" name="shipping-state" autocomplete="shipping address-level1"> <input type="text" name="shipping-country" autocomplete="shipping country-name"> <input type="text" name="shipping-postal-code" autocomplete="shipping postal-code"> </form> https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
8. AUTOFOCUS. Allows a form control to be immediately focused on page load. It even automatically scrolls the page. <button type="button" autofocus> <input type="text" autofocus> <textarea autofocus> https://html.spec.whatwg.org/multipage/form-control- infrastructure.html#autofocusing-a-form-control%3A-the-autofocus-attribute
9. FORM AND CONSTRAINT VALIDATION. Leverage native form validation. Apply custom CSS with :invalid and :valid pseudo-classes. Use novalidate or formnovalidate attribute to disable native tooltips. https://html.spec.whatwg.org/multipage/forms.html#client-side-form-validation
 https://html.spec.whatwg.org/dev/form-control-infrastructure.html#the- constraint-validation-api
10. THE <BASE> ELEMENT. Set base URL for all relative links in the source document. <!-- The base url: --> <base href="http: // www.example.com/"> <!-- The anchor: --> <a href=“#anchor">Click Me </a> <!-- Refers to: --> <!-- http: // www.example.com/#anchor --> https://html.spec.whatwg.org/multipage/semantics.html#the-base-element
11. <A> HYPERLINK. Use download attribute to download the hyperlink destination resource. Adjust the security policy by providing rel=“noopener noreferrer”. <a href="http: // www.example.com/document.pdf" download> <a href="http: // www.example.com" rel=“noopener noreferrer”> https://html.spec.whatwg.org/multipage/links.html
12. SCROLL-BEHAVIOR. Make scrolling silky smooth. const input = document.querySelector('input') input.scrollIntoView({ behavior: 'smooth' }) window.scrollTo({ top: 0, behavior: 'smooth' }) /* Via CSS */ scroll-behavior: auto; scroll-behavior: smooth; https://www.w3.org/TR/cssom-view-1/#smooth-scrolling
13. INTERSECTION OBSERVER. Asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. https://www.w3.org/TR/intersection-observer/
14. INTERSECTION OBSERVER (CONT). const observer = new IntersectionObserver(onChange); function onChange(changes) { changes.forEach(change => { change.target.classList.remove('hidden'); observer.unobserve(change.target); // thank you, we don't need you anymore observer.disconnect(); }); } observer.observe(document.querySelector('.hidden')); https://www.w3.org/TR/intersection-observer/
15. PAGE VISIBILITY. Get notified of page visibility changes. window.addEventListener('visibilitychange', () => { switch (document.visibilityState) { case 'hidden': console.log('Tab is hidden') break; case 'visible': console.log('Tab is visible') break; } }) https://www.w3.org/TR/page-visibility/
16. BROWSER HISTORY. Determine whether a document is visible on the display. window.addEventListener('popstate', (event) => { console.log("location: “, document.location, ", state: “, event.state) }) history.pushState({ page: 1 }, "title 1", "?page=1") history.pushState({ page: 2 }, "title 2", “?page=2") history.replaceState({ page: 3 }, "title 3", "?page=3") history.back(); // location: http: //example.com/example.html?page=1, state: {"page":1} history.back(); // location: http: //example.com/example.html, state: null history.go(2); // location: http: //example.com/example.html?page=3, state: {"page":3} https://html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate
17. ONLINE STATE. Exposes a network connection availability information to the web. // Read Status console.log(navigator.onLine ? 'online' : 'offline') // React to changes document.addEventListener('online', onStatusChange) document.addEventListener('offline', onStatusChange) function onStatusChange(e) { console.log(type) } https://html.spec.whatwg.org/multipage/offline.html#browser-state
18. CLIPBOARD API. Standard APIs for interacting with the clipboard (copy/cut/paste). function select() { const input = document.querySelector('input') input.focus() input.setSelectionRange(0, input.value.length) } function copy() { try { document.execCommand('copy') } catch (err) { console.error(err) } } https://www.w3.org/TR/clipboard-apis/
19. STORAGE EVENT. Responding to localStorage changes across open tabs and windows. window.addEventListener('storage', function (e) { console.log(e.key) console.log(e.oldValue) console.log(e.newValue) console.log(e.url) console.log(e.storageArea) }); https://html.spec.whatwg.org/multipage/webstorage.html#the-storage-event
20. OPENSEARCH. Make your site searchable straight from the address bar. Ever wondered how to achieve this? 
 Me too! http://www.opensearch.org/Specifications/OpenSearch/1.1
21. OPENSEARCH (CONT.) <link type="application/opensearchdescription+xml" href="http: //example.com/opensearch.xml" rel=“search”> <?xml version="1.0" encoding="UTF-8"?> <OpenSearchDescription xmlns="http: //a9.com/-/spec/opensearch/1.1/"> <ShortName>Web Search </ShortName> <Description>Use Example.com to search the Web. </Description> <Url type="application/rss+xml" template=“http: //example.com/?q={searchTerms}&amp;pw={startPage?}" /> </OpenSearchDescription> http://www.opensearch.org/Specifications/OpenSearch/1.1
22. INTRINSIC ASPECT RATIO. Did you know that relative margin and padding are calculated with respect to the width of the box’s containing block? I know, odd, right? https://www.w3.org/TR/CSS22/box.html#margin-properties
23. STEP OUTSIDE OF YOUR COMFORT ZONE Your comfort zone Where the magic happens
24. SPECIFICATIONS https://whatwebcando.today https://platform.html5.org https://caniuse.com/#index https://developer.mozilla.org/en-US/docs/Web https://www.w3.org/standards/webdesign/ https://spec.whatwg.org http://ecma-international.org/publications/standards/Standard.htm https://www.rfc-editor.org/search/rfc_search.php
25. STATUS TRACKERS https://www.chromestatus.com/features https://webkit.org/status/ https://platform-status.mozilla.org https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
26. THAT’S IT. Like what you see? Come talk with me. marek.suscak@gmail.com Follow on Twitter @mareksuscak
27. PHOTO CREDITS. 1. https://unsplash.com/photos/JuLejnakAm0