I Read All the W3C Specs !

😉

Sanders Kleinfeld

O'Reilly Media, Inc.

@sandersk / #ReadingW3C

WHAT?

Yes, I read…

  • All the W3C Technical Reports published between January 2014 and today
  • Encompassing Working Drafts, Candidate Recommendations, Proposed Recommendations, Recommendations, and Group Notes
  • Total of 227 documents…
  • …and 7,064 PDF pages

Includes hits such as:

As well as lesser-known B-sides, e.g.:

WHY?

Well, I’ve always been a little pedantic.
Let’s flash back to 2006…
“What is a web app? It’s software that you use right in your web browser. Rather than installing an application on your computer, you visit a web site and sign up as a new user of its software. Instead of storing your files on your own hard disk, the web app stores them for you, online. Is it possible to switch entirely to web apps? To run nothing but a browser for an entire day?”
Today, the Web is the place we want to do our work by default!

A few disclaimers:

#1. I am not formally affiliated with the W3C. Opinions are my own.

#2. Most of the specs discussed in this presentation are not yet formal recommendations.

Spec statuses are indicated with the following key: WD = Working Draft; CR = Candidate Recommendation; PR = Proposed Recommendation; R = Recommendation; WGN = Working Group Note

#3. By focusing on the W3C, I mean no offense to other great organizations such as WHATWG, Ecma, IEEE, ISO, IDPF, or any other body that produces really long documents that 99% of its constituency doesn't read.

#4. Any inaccuracies in this presentation are completely attributable to poorly written specifications totally my bad!

Four Recurring Motifs in W3C Spec Corpus

#1. “Tentacles” of the Web

Eight “Tentacle” Genres:

  1. Input from external devices

    Gamepad

    (http://www.w3.org/TR/gamepad/)

  2. Output to external devices

    Presentation API

    (http://www.w3.org/TR/presentation-api/)

  3. “Remote control” for external devices

    Vibration API

    (http://www.w3.org/TR/vibration/)

  4. Interfacing with sensors

    Media Capture and Streams

    (http://www.w3.org/TR/mediacapture-streams/)

  5. Web application SDK

    Manifest for a web application

    (http://www.w3.org/TR/appmanifest/)

  6. Offline capabilities

    Indexed Database API

    (http://www.w3.org/TR/IndexedDB/)

  7. UI standardization for any of the above

    IndieUI: Events 1.0

    (http://www.w3.org/TR/indie-ui-events/)

  8. Accessibility standardization for any of the above

    Accessible Rich Internet Applications 1.1

    (http://www.w3.org/TR/wai-aria-1.1/)

Gamepad

(http://www.w3.org/TR/gamepad/)

function runAnimation()
{
  window.requestAnimationFrame(runAnimation);

  var gamepads = navigator.getGamepads();

  for (var i = 0; i < gamepads.length; ++i)
  {
    var pad = gamepads[i];
    // ...
  }
}

window.requestAnimationFrame(runAnimation);

Vibration API

(http://www.w3.org/TR/vibration/)

navigator.vibrate(1000);

IndieUI: Events 1.0

(http://www.w3.org/TR/indie-ui-events/)

  • collapse
  • delete
  • directionalfocus
  • dismiss
  • expand
  • linearfocus
  • manipulationcancel
  • manipulationchange
  • manipulationend
  • …

#2. “There’s a CSS Module for That”

CSS Inline Layout Module Level 3

(http://www.w3.org/TR/css-inline-3/)

initial-letter: total-lines sink-lines;

Dropcap Config:

Among other public buildings in a certain town, which for many reasons it will be prudent to refrain from mentioning, and to which I will assign no fictitious name, there is one anciently common to most towns, great or small: to wit, a workhouse; and in this workhouse was born; on a day and date which I need not trouble myself to repeat, inasmuch as it can be of no possible consequence to the reader, in this stage of the business at all events; the item of mortality whose name is prefixed to the head of this chapter.

* No support in major browsers at present; brought to you by dropcap.js polyfill

CSS Counter Styles Level 3

(http://www.w3.org/TR/css-counter-styles-3/)

@counter-style custom_counter_name

Largest U.S. Cities by Population (Source: Wikipedia)
ol {list-style-type: decimal};
  1. New York
  2. Los Angeles
  3. Chicago
  4. Houston
  5. Philadelphia
  6. Phoenix
  7. San Antonio
  8. San Diego
  9. Dallas
  10. San Jose
  11. Austin
  12. Indianapolis
  13. Jacksonville
  14. San Francisco
  15. Columbus
  16. Charlotte
  17. Fort Worth
  18. Detroit
  19. El Paso
  20. Memphis
  21. Seattle
  22. Denver
  23. Washington D.C.
  24. Boston
  25. Nashville

@counter-style :

* Varying degrees of limited support in Firefox, Chrome, and Safari

CSS Custom Properties for Cascading Variables Module Level 1

(http://www.w3.org/TR/css-variables-1/)

--varname; var()

section.css-example.variables aside {
	  --color: 255,0,0;
		background-color: rgba(var(--color), 0.1);
		padding-bottom: 10px;
		width: 300px;
		box-shadow: 10px 10px 15px;
	}

	section.css-example.variables aside h1 {
	  padding: 3px 9px 3px 9px;
	  font-size: 15pt;
	  text-shadow: none;
	  background: linear-gradient(to right, rgba(var(--color), 1), rgba(var(--color), 0.1))
	}

	section.css-example.variables aside p {
	  margin: 10px;
	  font-size: 12pt;
		text-align: left;
	}

--color:

* Among major browsers, works only in Firefox

CSS Paged Media Module Level 3

(http://www.w3.org/TR/css3-page/)

CSS Generated Content for Paged Media Module

(http://www.w3.org/TR/css-gcpm-3/)

@page; string-set

@page {
  size: 5.5in 8.5in; /* width, height */
  margin: 54pt 0.75in 54pt 0.75in; /* page margins */
  @bottom-right {
    content: string(ChapterTitle);
  }
}

section.chapter > h1 {
  string-set: ChapterTitle content()
}

#3. Posthuman Ontologies

console.log("By 'posthuman ontology', I mean");
console.log("A vocabulary expressing the 'human' condition…");
console.log("As projected via virtual communities");

Activity Streams 2.0

(http://www.w3.org/TR/activitystreams-core/)

Activity Vocabulary

(http://www.w3.org/TR/activitystreams-vocabulary/)

Activity Stream Representation (JSON-LD)

{
  "@context": "http://www.w3.org/ns/activitystreams",
  "@type": "Favorite",
  "actor": {
    "@id": "https://twitter.com/tim_cook"
    "@type": "Person",
    "displayName": "Tim Cook"
   },
   "object": "https://twitter.com/Jamacouve/status/586127004136779776"
}{
  "@context": "http://www.w3.org/ns/activitystreams",
  "@type": "Follow",
  "actor": {
    "@id": "https://twitter.com/oreillymedia"
    "@type": "Organization",
    "displayName": "O'Reilly Media"
  },
  "object": {
    "@id": "https://twitter.com/safari"
    "@type": "Organization",
    "displayName": "Safari"
  }
}{
  "@context": "http://www.w3.org/ns/activitystreams",
  "@type": "Post",
  "actor": {
    "@id": "https://twitter.com/cuteemergency"
    "@type": "Identity",
    "displayName": "Cute Emergency"
  },
  "object": {
    "@id": "https://twitter.com/CuteEmergency/status/551429293599776769"
    "@type": "Note",
    "content": "Golden retriever bath bomb"
  }
}{
  "@context": "http://www.w3.org/ns/activitystreams",
  "@type": "Share",
  "actor": "https://twitter.com/oreillymedia",
  "object": "https://twitter.com/CuteEmergency/status/551429293599776769"
}

Twitter Action

Emotion Markup Language (EmotionML) 1.0

(http://www.w3.org/TR/emotionml/)

Vocabularies for EmotionML

(http://www.w3.org/TR/emotion-voc/)

EmotionML:

<emotionml version="1.0" xmlns="http://www.w3.org/2009/10/emotionml">
  <emotion category-set="http://www.w3.org/TR/emotion-voc/xml#big6">
    <category name="happiness" value="0"/>
    <category name="sadness" value="0"/>
    <category name="anger" value="0"/>
    <category name="surprise" value="0"/>
    <category name="disgust" value="0"/>
    <category name="fear" value="0"/>
  </emotion>
</emotionml>

Rate your emotions*

😐😀

😐😢

😐😠

😐😮

😐😖

😐😨

* Ekman’s six universal emotions

#4. Security and Privacy

30% of W3C reports I read contain at least one section devoted to security and/or privacy considerations

Web Cryptography API

(http://www.w3.org/TR/2014/CR-WebCryptoAPI-20141211/)

“...care must be taken when introducing future revisions to this API or additional cryptographic capabilities, such as those that are hardware backed…Considering that such storage is designed to prevent any two users from having the same underlying key data, such APIs may represent a real risk of being used as a permanent identifier against the user's wishes.”

CSS Pseudo-Elements Module Level 4

(http://www.w3.org/TR/2015/WD-css-pseudo-4-20150115/)

“Because the styling of spelling and grammar errors can leak information about the contents of a user’s dictionary (which can include the user’s name and even includes the contents of his/her address book!) UAs that implement ::spelling-error and ::grammar-error must prevent pages from being able to read the styling of such highlighted segments.”

Audio Output Devices API

(http://www.w3.org/TR/audio-output/)

“For example, suppose a user is in a library or other quiet public place where she is using a laptop with system audio directed to a USB headset. Her expectation is that the laptop’s audio is private and she will not disturb others. If any Web application can direct audio output through arbitrary output devices, a mischievous website may play loud audio out of the laptop’s external speakers without the user’s consent.”

Tracking Preference Expression (DNT)

(http://www.w3.org/TR/tracking-dnt/)

GET /something/here HTTP/1.1
Host: example.com
DNT: 1

Subresource Integrity

(http://www.w3.org/TR/SRI/)

<link rel="stylesheet" href="https://site53.cdn.net/style.css"
integrity="sha256-SDfwewFAE...wefjijfE">

Honorable Mentions

Most Readable

Good Practices for Capability URLs

(http://www.w3.org/TR/capability-urls/)

Best Primer on Accessibility

Using WAI-ARIA in HTML

(http://www.w3.org/TR/aria-in-html/)

HTML5: Techniques for providing useful text alternatives

(http://www.w3.org/TR/html-alt-techniques/)

Most Controversial

Encrypted Media Extensions

(http://www.w3.org/TR/encrypted-media/)

Best Shout-out to Gutenberg

Requirements for Latin Text Layout and Pagination.pdf

(http://www.w3.org/TR/dpub-latinreq/)

Best Explication of the Cascade

CSS Cascading and Inheritance Level 3

(http://www.w3.org/TR/css-cascade-3/)

Best Hope for RDF

JSON-LD 1.0

(http://www.w3.org/TR/json-ld/)

Most Visionary

Web Annotation Data Model

(http://www.w3.org/TR/annotation-model/)

Thanks!

Follow me: @sandersk

Slides available at: http://sandersk.github.io/reading-w3c/