Bruce's tour of the Sausage Factory

The noisiest of those competitive battles (between suppliers) will be about standards … in the computer industry, new standards can be the source of enormous wealth, or the death of corporate empires. With so much at stake, standards arouse violent passions.

Break of gauge would prove to be a nightmare during the American Civil War (1861–1865), often hindering the Confederacy's ability to move goods efficiently over long distances.

Following the Civil War, trade between the South and North grew and the break of gauge became a major economic nuisance. After considerable debate and planning, most of the southern rail network was converted from 5 ft (1,524 mm) gauge to 4 ft 9 in (1,448 mm) gauge, over two remarkable days beginning on Monday, May 31, 1886.

Open standards will give us interoperable software, information and data in government and will reduce costs by encouraging competition, avoiding lock-in to suppliers or products and providing more efficient services.

HTTP referer

The misspelling referer originated in the original proposal by computer scientist Philip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945.

CSS colours

The first versions of Mosaic and Netscape Navigator used the X11 colors as the basis for the Web colors list, as both were originally X applications. The W3C specifications SVG and CSS level 3 module Color eventually adopted the X11 list with some changes. It is a superset of the 16 “VGA colors” defined in HTML 3.2 and CSS level 1.

X-11 colours

It is not known who originally compiled the list. The list does not show a continuity either in selected color values or in color names, and many color triplets have multiple names. Despite this, graphic designers and others got used to them, making it practically impossible to introduce a different list.

CSS colour…or ...?

• Alice Blue
• Rosy Brown
• Burly Wood
• Deep Pink
• Honey Dew
• Papaya Whip

CSS colour…or ...?

• Hot Pink
• Violet Blue
• Misty Rose
• Lavender Blush
• Peach Puff
• Goldenrod

Retrospective standardisation

• XmlHttpRequest
• contentEditable
• Quirks mode
• <canvas>

<canvas>

Special thanks to Richard Williamson for creating the first implementation of canvas in Safari, from which the canvas feature was designed.

<canvas> sausage

The path to proper standardization wasn’t very smooth. This began with the lack of a proper proposal coming from Apple’s side, resulting in the initial specification being based on reverse engineering works by Ian “Hixie” Hickson, editor of the HTML5 specification.

P*****s

Bruce: What’s the biggest danger to a free, open Web at the moment?

Hixie: Patents.

<canvas />

canvas was originally implemented in Safari as an empty tag like img, but standards and other browsers have all gone with making it require an explicit close tag, to support fallback content.

Fallback content

When a canvas element represents embedded content, the user can still focus descendants of the canvas element (in the fallback content). When an element is focused, it is the target of keyboard interaction events (even though the element itself is not visible). This allows authors to make an interactive canvas keyboard-accessible.

<video src="foo.vdo">
  <p>Your browser is, like, a massive loser.<p>
  <img src=loser.gif alt="loser!" />
  <p><a href="foo.webm">Download the video.</a><p>
</video>

<picture> YAY!

<picture>
  <source src=…>
  <source src=…>
  <img src=… alt="I'm accessible!">
</picture>

XHTML2 <img>

    
<img alt="W3C Logo" src="W3C.png">
W3C
</img>
    

RIP XHTML2

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed.

XHTML 2 was a beautiful specification of philosophical purity that had absolutely no resemblance to the real world.

Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work. The large HTML-generating public did not move, largely because the browsers didn't complain.

The HTML5 parsing algorithm

HTML5 is not trying to support old browsers. It's trying to support old content.

HTML 3.2 "Wilbur"

Relative to HTML 2.0, HTML 3.2 adds widely deployed features such as tables, applets, text flow around images, superscripts and subscripts.

What happened to HTML3?

HTML 3.0 was a proposal for extending HTML published in March 1995 … However, the difference between HTML 2.0 and HTML 3.0 was so large that standardization and deployment of the whole proposal proved unwieldy. The HTML 3.0 draft has expired, and is not being maintained.

What was new

The BANNER element is used for corporate logos, navigation aids, disclaimers and other information which shouldn't be scrolled with the rest of the document.

The <PERSON> element is used for names of people to allow these to be extracted automatically by indexing programs.

The NOTE element is designed for use as admonishments such as notes, cautions or warnings, as commonly used in technical documentation.

HTML 3.0 supports the following kinds of fields:

• Checkboxes
• Range controls (sliders, or knobs)
• Single/multiple choice menus
• Scribble on image

Scribble on image?

These fields allow the user to scribble with a pointing device (such as a mouse or pen) on top of a predefined image … If the user agent can't display images, or can't provide a means for users to scribble on the image, then the field should be treated as a text field.

<FIG>

<FIG SRC="nicodamus.jpeg">
  <CAPTION>Ground dweller: <I>Nicodamus bicolor</I>
  builds silk snares</CAPTION>
  <P>A small hairy spider light
   fleshy red in color with a brown abdomen.
  <CREDIT>J. A. L. Cooke/OSF</CREDIT>
</FIG>

HTML5 <figure>

<figure>
 <img src="icodamus.jpeg">
 <figcaption>Ground dweller: <I>Nicodamus bicolor</I>
   builds silk snares</figcaption>
 <p>A small hairy spider …
 <small>J. A. L. Cooke/OSF</small>
</figure>

HTML 3.2

Widely deployed rendering attributes are included where they have been shown to be interoperable. SCRIPT and STYLE are included to smooth the introduction of client-side scripts and style sheets.

What's wrong with AppCache?

AppCache is declarative -- you give the browser a manifest and magic happens. This has well-documented limitations.

SlapDache

The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess.

Service Workers CheatSheet

• registered Service Workers are invoked even when offline, so enable apps that are "offline by default"
• normal resource loading is the fallback behavior
• it forces you to have URLs! Some modern apps platforms have foresaken this core principle of the web and suffer for it. The web should never make the same mistake.

nnavigator.serviceWorker.register
  ("/*", "/assets/v1/wrkr.js").then(
    function(serviceWorker) {
          console.log("success!");
          // call window.location.reload()
        },
      function(why) {
        console.error("failed!:", why);
    }
);

this.addEventListener('fetch',
    function(event) {
  if (event.request.context == 'image'
    && new Date().getDay() == 4) {
    event.respondWith(
      fetch('/kitten.jpg')
    ) // thx @jaffathecake
  } // more: http://youtu.be/4uQMl7mFB6g
});

Service Workers + IndexedDB = Power

When combined with access to IndexedDB and a new form of Cache, the ability to respond with arbitrary content is incredibly powerful.

IndexedDB

You've got to be kidding. It's a joke, right? This is the state of the art in databases? No, it's a bunch of children recreating database assembly code from the 1960's. This is awful, awful stuff … Looking at the example, I see spaghetti control flow and data flying in all directions, like a spoiled child throwing his broccoli at the wall.

IDB heebie jeebies

This API is complex and unclear about what's going on.

idb is a beast of an API

Big catastrophe this indexedDB!

this is f*cking GARBAGE, and i will not use it.

IDB heebie jeebies

The goal of IndexedDB was to allow multiple different query processors to be built in JS. We expected few people to use it directly.

when we try to produce high-level APIs, they tend to suck for various reasons, and therefore that we should produce lower-level primitives atop which people can build nicer things

Extensible Web Manifesto

Browser vendors should provide new low-level capabilities that expose the possibilities of the underlying platform as closely as possible. They should also seed the discussion of high-level APIs through JavaScript implementations of new features

Why are Standards slow?

Why is everything else around us developing so fast, but the web is so slow to adopt anything?

Hixie's reply:

1. Have someone design the feature.
2. Have someone write a specification for it.
3. Have some people write tests for it.
4. Have one browser implement it.
5. Have another browser implement it.
6. Have another browser implement it.
7. Have another browser implement it.
8. Have people document it.

Compared with…

This is in contrast to "everything else", which just needs:

1. Someone to implement it.

There's an app API for that

• File API
• Orientation
• Sensors (humidity, ambient light)
• WebRTC
• Drag'n'Drop

Fortune 500 firms in 1955 vs. 2014

Almost 88% of the companies from 1955 have either gone bankrupt, merged, or still exist but have fallen from the top Fortune 500 companies.

Web Components

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

Extend existing HTML elements

var p = Object.create(HTMLButtonElement.prototype);
var FancyButton = document.registerElement
    ('fancy-button',
        {extends: 'button', prototype: p});
…
<button is="fancy-button">

In order for the open web to compete with its walled competitors, there must be a clear path for good ideas by web developers to become part of the infrastructure of the web. We must enable web developers to build the future web.

How to participate

Browse, discuss, propose on W3C Specifiction forum.

Use cases > pet proposed syntax. Read and use Mozilla's WebAPI/DesignGuidelines.

Thanks for help

• Hakon Wium Lie (Opera)
• Ian Hickson (Google)
• Jake Archibald (Google)
• Anne van Kesteren (Mozilla)

Image acknowledgments

• Sausage Pictures - my daughter
• Rail gauges
• Break gauge
• Horses' arses by Sarah Murray
• Appcache party
• Douchebag
HTML/ CSS Presentation Framework: Shower by Vadim Makeev. (@pepelsbey)