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…
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/)


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:

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


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


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/)


CSS Pseudo-Elements Module Level 4

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


Audio Output Devices API

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


Tracking Preference Expression (DNT)

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


Subresource Integrity

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


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

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/