Houdini, Extensible Web, CSS.next

Bruce Lawson

Houdini, Extensible Web, CSS.next

Bruce Lawson, Opera Software

bruce in front of 'HTML' sign
line drawing of a group of apes
'2001' Space Odyssey poster image
a group of apes in front of a W3C monolith

XHTML 1.1 (May 2001)

Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules.
Why the need for XHTML?
an ape, yawning
microformats, RDFa, HTML5 microdata

Hixie:

It’s not so much that I dislike microdata so much as I don’t think the problem microdata (and RDF, etc.) solves is an interesting problem that should be solved.
HTML5 Doctor
Web Component and Shadow DOM

Promise of Components

Letters making up 'Web Components' morphing into 'Spec. Own. Entomb.'

Web Components

<super-button>

+ loadsa script

Extend current HTML

<button is="super-button">

Intuitive syntax?

<super-button extends="button">

Compromise syntax?

<button extendedby="super-button">
this fallback will only really be useful for very simple cases
Patrick “Herbie” Lauke

Use case?

Unless it's really just using web components for fancy styling (for instance having a "material design" button that essentially still works just like a button) - in which case, it makes more sense to work on stylability of standard elements.
W3C webapps Custom Elements: is="" Patrick “Herbie” Lauke

wwwweeeebbbb

lomg spider web
2013: 80% to 20% split between apps and web; 2014: 86% to 14%

Installable Web Apps

Opera mobile browser with a banner offering to add a site to homescreen

Opera/ Chrome differences

Chrome's mini-address bar when leaving original domain

Why are Standards slow?

Why is everything else around us developing so fast, but the web is so slow to adopt anything?
Mark Roberts' email to WHATWG, 10 Oct 2013

Hixie's reply:

Compared with…

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

Include developers

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.
extensiblewebmanifesto.org

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
extensiblewebmanifesto.org
Page not found error message page

Appcache

man alone at party, surrounded by kissing couples
http://www.lollercoasterlab.com/2011/05/forever-alone-this-party-is-crp.html

Appcache

complex diagram showing appcache logic
Thanks, Jake

What's wrong with AppCache?

AppCache is declarative -- you give the browser a manifest and magic happens. This has well-documented limitations.
Alex Russell (sinister mastermind at Google)
screenshot of Jake Archibald's A List Apart article 'appcache is a douchebag'

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.
Hixie
Service Workers
cutaway diagram of Apollo lunar module
cartoon walrus in front of lunar module
cartoon leg with lampshade on top, next to walrus and lunar module
navigator.serviceWorker.register
  ("/*", "/assets/v1/wrkr.js").then(
    function(serviceWorker) {
		  console.log("success!");
		  // call window.location.reload()
		},
	  function(why) {
	    console.error("failed!:", why);
    }
);
browser shows nothing when not connected to web
browser shows site when connected to web worker, even though not connected to web

Fetch standard

At a high level, fetching a resource is a fairly simple operation. A request goes in, a response comes out. The details of that operation are however quite involved and used to not be written down carefully and differ from one API to the next.

Explaining the platform

The Fetch Standard provides a unified architecture for these features so they are all consistent when it comes to various aspects of fetching, such as redirects and the CORS protocol.

Fetch API

The Fetch Standard also defines the fetch() JavaScript API, which exposes most of the networking functionality at a fairly low level of abstraction.
Fetch Living Standard
responsive images community group

responsiveimages.org

@respimg

HTML5 video with MQs

<video>
  <source src=foo-lowres.webm media="max-width:480px">
  <source src=foo-hires.webm>
    <!-- Fallback content -->
</video>

Notes on Adaptive Images (yet again!) (Dec 2011)

My <picture> strawman

<picture>
  <source src=foo-lores.jpg media="max-width:480px">
  <source src=foo-full.jpg>
    <!-- Fallback content -->
    <img src="foo-lores.jpg" alt="…">
</picture>
Mat Marquis
Marcos Caceres
Tab Atkins
Simon Pieters
Yoav Weiss

<picture> element

the RICG’s main contribution to the web platform wasn’t picture, srcset, or sizes… To get them done we had to punch a hole through the thick technical, cultural, and institutional walls that separate the people who make browsers from the people who make websites.
Mat Marquis

Magic

<input>

<video controls>

<img>

HTML as custom elements

The JavaScriptification of the Web?

We want web developers to write more declarative code, not less. This calls for eliminating the standards bottleneck to introducing new declarative forms, and giving library and framework authors the tools to create them.
extensiblewebmanifesto.org
Houdini
Houdini, in chains, being lowered upside down into a tank of water
Houdini with a book in front of illisory ghost of Abraham Lincoln
Houdini meeting in Mozilla Paris

CSS Magic

Parser API

Existing pre-processors and polyfills aren’t fully capable, or fully compatible and they don’t agree on the output, and need to be updated.

CSS Property and Value Extensions API

Define something that the browser shouldn’t throw away as an invalid property or value. Allow us to do stuff like 'CSS Regions' by extending rather than tons of native code.

CSS Regions

CSS Regions diagram

CSS Aliases, Custom Pseudo-classes

@custom-selector :--button input[type='button'], input[type='submit'], input[type='reset'], [role='button'], button;

:--button { color:green }

Font Metrics API

English drop caps
French drop caps, accents above top line of paragraph
Devangari initial letter aligned with hanging baseline.
Vertical text 'drop cap' that's two lines wide

Custom Layout

Custom layouts will allow us to register a custom display value and own layout computations making whole classes of new proposals possible to figure out in the community and without impossibly complex barriers.

Minimum Viable API

Custom Paint

allows you to have other things as a background apart from still images, without abusing the DOM or markup.

CSS

#myElement {
	--circle-color: red;
	background-image: paint(circle);
}
this.registerPaint({
	name: 'circle',
	dependencies: ['--circle-color'],
	paintCallback: function(ctx, geom, properties) 
	{
		// Change the fill color.
		var color = properties['--circle-color'];
		ctx.fillStyle = color;
		…
	}

Input Extensions

Create (or re-create) good custom or experimental user experiences such as those on scroll, pull-to-refresh, with correct physics.

Travis Leithead (Microsoft):

[The most exciting thing was] that nobody was arguing. We’ve wanted a lot of this since the 90s and now is the first time when someone hasn’t said “no” or “it can’t be done”.

Brian Kardell:

This extensibility and ability to adapt, refine and share sensible high-level features are the cornerstone on which we will allow the Web not just to generally improve, but to remain interesting and competitive for decades — and recapture some of the most important things that made it successful in the first place.

Join WICG

web platform incubator community group

Read more:

Thanks