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.

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:

Input from external devices

Gamepad
(http://www.w3.org/TR/gamepad/)
Output to external devices

Presentation API
(http://www.w3.org/TR/presentation-api/)
“Remote control” for external devices

Vibration API
(http://www.w3.org/TR/vibration/)
Interfacing with sensors

Media Capture and Streams
(http://www.w3.org/TR/mediacapture-streams/)
Web application SDK

Manifest for a web application
(http://www.w3.org/TR/appmanifest/)
Offline capabilities

Indexed Database API
(http://www.w3.org/TR/IndexedDB/)
UI standardization for any of the above

IndieUI: Events 1.0
(http://www.w3.org/TR/indie-ui-events/)
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/)

Vibration API

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

IndieUI: Events 1.0

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

#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:

Total lines:

Sink lines:

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};@counter-style binary {
  system: numeric;
  symbols: '0' '1';
  suffix: ". ";
}

ol {list-style-type: binary};@counter-style fingers {
  system: additive;
  additive-symbols: 5 "\1f591", 4 "\1f596",
  3 "\1f58f", 2 "\1f594", 1 "\1f446";
  suffix: "   ";
}

ol {list-style-type: fingers};

New York
Los Angeles
Chicago
Houston
Philadelphia
Phoenix
San Antonio
San Diego
Dallas
San Jose
Austin
Indianapolis
Jacksonville
San Francisco
Columbus
Charlotte
Fort Worth
Detroit
El Paso
Memphis
Seattle
Denver
Washington D.C.
Boston
Nashville

@counter-style : Decimal Binary On Fingers

* 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:

red

orange

yellow

green

blue

brown

* Among major browsers, works only in Firefox

@page; string-set

#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 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"
}

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