Slides: http://www.w3.org/2011/Talks/1115-testing-plh/

Sourced to the slides and Sporny's live blog (the minutes start later):

• Opened with a CSS box example and asked the room what it would render; per the live blog, nobody knew and "25% of browsers will not work".
• The challenge, from the slides: "Over 100 Web specifications", stable and unstable features, browser bugs, spec bugs.
• Testing is an approximation: CSS combinations, DOM manipulation, HTML in SVG. 100% coverage will not happen, but a suite still needs a goal.
• Audience for tests: implementers, manufacturers, operators, spec editors, content providers.
• Showed the CSS 2.1 RC6 results (March 2011) and the SVG 1.1 implementation matrix (August 2011): https://www.w3.org/Style/CSS/Test/CSS2.1/20110323/reports/results.html, https://www.w3.org/Graphics/SVG/Test/20110816/status/implementation_matrix.html
• Three kinds of test: testharness.js, reftests, manual tests. Closing slide: "Every single test can make a difference!"

Slides (per Lanyrd): http://manu.sporny.org/talks/2011-community-groups/ (dead; Wayback: https://web.archive.org/web/20160328164634/http://manu.sporny.org/talks/2011-community-groups/)

Sourced to the slides only (the Wayback copy is from 2016, the deck is the 2011 one). The minutes do not cover this talk, and Sporny's own live blog has a gap while he presented. Session video, as listed on the conference page: http://cdn-smooth.ms-studiosmedia.com/events/W3C/Day1/Web_Payments.mp4

• Standards are "deeply important social contracts", but the usual process is a "sausage factory": corporation-centric, hard for an individual to bring new work, and innovating during standardization is bad.
• Community Groups: no fees, open to anyone, light to spin up, no time limit; mailing list, wiki, tracker, blog. "30+ groups created in the past two months."
• Case study: money is a closed, centralized, opaque protocol. The Web Payments CG proposes PaySwarm, "a simple Web standard for transferring money, buying and selling digital content, and crowd-funding projects", with open specs and public meetings.
• Start-up: proposed the group, "within 5 days, 20 people joined". Status: a demo at http://dev.payswarm.com/, open specs for a REST API for financial transactions, and spin-offs: RDFa, JSON-LD, graph normalization.
• New community groups
• Opening the payments process

http://www.w3.org/2011/Talks/11-schepers-w3conf/

Sourced to Sporny's live blog (not minuted). Scheduled as "Shortcuts: Developer Documentation".

• Asked who learned the web from view source (nearly everyone) and who still does (most hands went down).
• The document web was easy to learn; the application, media and social web since about 2000 are not, and "people can't read standards".
• Named W3Schools and W3Fools, the Opera Web Standards Curriculum, SitePoint, MDN, Google's "Ground Up" videos, the Web Standards Project and the InterAct curriculum (which teachers can drop into a classroom).
• W3C's own tutorials, primers and wiki reference guides exist but are "scattered everywhere".
• Announced the Web Education Community Group: learning material, curriculum, training, translation. Pitch: write, review and translate articles. "We need to change it from a hobby to a craft."

The slides are a set of SVG/HTML mini-apps (one per slide) and render only the navigation help without script.

• w3Fools.com

(Wayback: https://web.archive.org/web/20111117090935/http://w3fools.com/)

• Google's "Ground Up"

http://code.google.com/edu/submissions/html-css-javascript/ (dead, now redirects to Android docs; Wayback: https://web.archive.org/web/20111111134941/http://code.google.com/edu/submissions/html-css-javascript/)

• Opera Web Standards

http://dev.opera.com/articles/wsc/ (dead, now redirects to the Opera blog; Wayback: https://web.archive.org/web/20111117161347/http://dev.opera.com/articles/wsc/)

• MDN
• Web Standards Project
• InterAct Curriculum

http://nimbu.in/w3conf/#intro (dead; Wayback: https://web.archive.org/web/20111117191053/http://nimbu.in/w3conf/)

Scheduled as "5 CSS Magic Potions for your Layout Troubles from the Future" (Divya Manian, Opera). Sourced to the slides ("Layouts in CSS", archived 2011-11-17), the day 1 minutes and the live blog:

• Today: floats, positioning, inline-block, negative margins, table-cell. Drawbacks: not content agnostic, floats need clearing, vertical centering impossible, breaks on small screens.
• Five futures: paged media (@media paged), multiple columns with column-span and break properties, regions (content flowing between distant boxes), exclusions (wrapping around arbitrary shapes), grid, and flexbox ("very much in flux"). IE10 has the grid draft, which "will change".
• Mix and match: a region can be an exclusion and have columns; a flexbox or grid cannot be an exclusion nor have columns.
• Slide: "Not ready for production, probably not for a year or two." Minutes: "Be VERY careful using it in production - experiment, not putting it on stable sites."
• Feedback goes to www-style@w3.org and browser bug trackers. Pointed to Nicole Sullivan's media object and Isotope.

Recently in the news:

http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/comment-page-1/ (comment page is gone; Wayback: https://web.archive.org/web/20111116043004/http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/)

• Layout proposals
• HTML5 boilerplate

http://svg-wow.org/ (no longer answers; Wayback: https://web.archive.org/web/20111110114555/http://svg-wow.org/)

Scheduled as "Web Graphics - a large creative palette" (Vincent Hardy, Adobe). Sourced to the day 1 minutes and the live blog:

• Two models. Canvas is imperative and "immediate mode": draw calls leave pixels. SVG is declarative: elements persist in the DOM, take events and CSS.
• SVG event handling is per object; with canvas you work out hit testing yourself. Canvas gives pixel access and video filtering; SVG has SMIL animation (everywhere but IE) and filter effects that apply to video.
• Mix them: foreignObject, toDataURL, SVG drawn into canvas. Graffiti Markup Language uses both.
• Frameworks: Raphael, Paper.js, Easel.js; D3 and canvg also named.
• Gaps: SVG fonts (Firefox, IE), SMIL (IE), WebGL arriving, inline SVG issues. Coming: filter effects and CSS shaders, SVG 2.

Scheduled as "Web Performance: Making the Web Faster" (Arvind Jain, Google, chair of the Web Performance WG). Sourced to the day 1 minutes and the live blog:

• Four parts: Navigation Timing (IE9, Chrome, Firefox, Android), Resource Timing, User Timing (ms-precision marks and measures), Performance Timeline (one interface over all of them).
• Resource, User and Timeline implementations expected around March 2012.
• Page Visibility: document.hidden plus a change event. Already used by Google Analytics (do not count impressions in never-viewed tabs), the YUI idle timer, and Instant Pages prerendering.
• Cross-origin resource timing can expose proxies; the WG judged the benefit worth it, with an opt-in header.
• In production use: Google Analytics Site Speed, WebPagetest, Dynatrace, Boomerang. "If you can't measure it, you can't improve it."

Scheduled as "Shortcuts: Getting off (line) with the HTML5 appcache". Slides: http://westciv.com/speakEasy/presentations/appcache/appcache-presentation.html (from the minutes). Sourced to the minutes and the live blog:

• A manifest with three sections: CACHE (always cached), NETWORK (never cached; "bypass the old browser cache, too"), FALLBACK (used offline).
• Gotchas: must be served as text/cache-manifest; one missing resource fails the whole cache; the cache is effectively permanent, so do not develop with it on; only listed files are available.
• Change the manifest (a # version comment) to force a re-fetch. Some browsers cap at 5-10MB. IE10 adds support.
• Tool: ManifestR, http://www.westciv.com/manifestr

Just a three-part approach to what should be cached.

http://www.slideshare.net/rajeshlal/n-screens-problem-w3c-conference-redmond2011

http://widgets-gadgets.com/html5/index.html (now flagged by a safe-browsing redirect; Wayback: no snapshot found)

Scheduled as "The N-Screens Problem: Building Apps in a World of TV and Mobiles" (Rajesh Lal, Nokia). Sourced to the minutes and the live blog:

• Four screens: phone (2-4", one foot, finger, interruptible), tablet (7-14"), PC (12-27", focused), TV (25-65", ten feet, D-pad).
• Web apps over native: in-browser or wrapped in a native container (hybrid, which also lifts cross-domain limits).
• Seven challenges, each with a preference order: feature detection, layout (media queries), graceful degradation, animation, audio, cross-domain Ajax, API fallbacks. The ordered lists are the headings below.
• Quoted William Gibson: "The future is here already, it is just not very evenly distributed."

Scheduled as "The Great HTML5 Divide: How Polyfills and Shims Let You Light Up Your Sites in Non-Modern Browsers" (Rey Bango, Microsoft). Sourced to the minutes and the live blog:

• The problem is non-modern browsers and fragmentation within and across them; caniuse.com for the map.
• Feature detection, never browser detection; Modernizr for the hard cases.
• A polyfill replicates the standard API; a shim provides the function under its own API, which means code changes later. Prefer polyfills.
• html5shiv for the new elements in old IE, plus CSS to make them block.
• Third-party polyfills are a maintenance cost. Take-aways: "avoid browser detection, use polyfills, do smart fallbacks."

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, nav, section {
    display: block;
  }
</style>

function on(el, type, fn) {
  if (el.addEventListener) {          // DOM Level 2 / IE9
    el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {        // IE6-8
    el.attachEvent('on' + type, function () { fn.call(el, window.event); });
  }
}
if (Modernizr.canvas && Modernizr.audio) {
  startGame();
}

Scheduled as "Shortcuts: Web Typography" (Christopher Slye, Adobe). Sourced to the minutes and the live blog:

• Two outline formats (TrueType, PostScript) and two containers: EOT (IE only) and WOFF, compressed and with metadata, "the first interoperable Web Font Format".
• CSS Fonts 3 brings @font-face and access to OpenType layout features: kerning, ligatures, small caps, old-style figures, fractions.
• Subsetting can break OpenType layout. Font services handle subsetting, licensing, format conversion.

@font-face {
  font-family: 'Minion Web';
  src: url('minion.eot');                                  /* IE6-8 */
  src: url('minion.eot?#iefix') format('embedded-opentype'),
       url('minion.woff') format('woff'),
       url('minion.ttf') format('truetype');
}
body {
  font-family: 'Minion Web', Georgia, serif;
  text-rendering: optimizeLegibility;          /* kerning + liga in WebKit/Gecko */
  -moz-font-feature-settings: "liga=1, dlig=1, onum=1";
  -ms-font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
  font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
}

http://dl.dropbox.com/u/39519/talks/html5-foundation/index.html#1 (dead; Wayback: https://web.archive.org/web/20111123173447/http://dl.dropbox.com/u/39519/talks/html5-foundation/index.html)

Scheduled as "HTML5: The Foundation of the Web Platform" (Paul Irish, Google). Sourced to the minutes and the live blog:

• <!doctype html>, because browsers ignored the variants anyway; <meta charset=utf-8> before <title> because of the UTF-7 script attack.
• Standardized parsing of broken markup: every browser now recovers the same way. Optional tags (html, head, body, p end tags), though he would still close <p>.
• innerHTML: Mozilla implements it in 2000, specified in 2007.
• Tags are strings; elements are DOM objects with dataset, firstChild.
• Tricks: data:text/html,<pre contenteditable> as an editor; a snowman is a valid id; unquoted attributes. The spec is a record of browser reverse-engineering: switch the doctype, then upgrade piece by piece.

Scheduled as "Shortcuts: Data Visualization with Web Standards" (Mike Bostock, Square). Sourced to the day 2 minutes:

• D3 maps data to the DOM in two steps: datum to element, data attribute to element attribute.
• Bar chart: a linear scale from value to width, index to y.
• D3 does not wrap HTML, SVG and CSS; it uses them directly, so browser tools and interop come for free.
• Examples: calendar heat map of US flight data (1997-2008), hierarchical edge bundling, scatterplot matrices, zoomable hierarchies.

data driven documents

create the base visual encodings for linear or ordinal (as an example).

Standards-based for

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

var chart = d3.select("body").append("svg")
    .attr("class", "chart")
    .attr("width", 420)
    .attr("height", 20 * data.length);

chart.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("y", function(d, i) { return i * 20; })
    .attr("width", x)
    .attr("height", 20);

Scheduled as "Making Accessibility Mainstream" (Becky Gibson, IBM). Sourced to the day 2 minutes:

• Reasons: legal, purchasing, independence, respect.
• Semantic HTML first: real headings, alt text, labelled form controls.
• Keyboard: tabindex"-1"= (focusable by script), "0" (in tab order), positive values (fixed order, avoid).
• Windows High Contrast detection: style a div with differing border colours and compare the computed values.
• ARIA landmarks, role"presentation"= for layout tables, live regions, aria-required, aria-invalid, aria-describedby.
• Support: VoiceOver with Safari; IE8+ with JAWS 11+. Dojo and jQuery UI for widgets.

Dojo is used by IBM and there were accessiblity reviews for the widgets.

PhoneGap is under current review by IBM.

http://www.weba11y.com/ (no longer answers; Wayback: https://web.archive.org/web/20111129002551/http://www.weba11y.com/)

Scheduled as "Securing the Next Generation of Web Apps" (Brad Hill, PayPal; Scott Stender, iSEC Partners). Sourced to the day 2 minutes:

• OWASP Top 10 sorted into attacker-as-impersonator and attacker-as-client.
• Same-origin policy has held since the mid-1990s but was not built for apps that run mostly in the client.
• "mindedsecurity.com tested a sample of alexa top 1M and found 56% are susceptible to exploitable DOM XSS vulnerabilities." In DOM XSS the server never sees the payload, so server-side filtering cannot help.
• JSONP invites arbitrary code; use CORS, XHR2, Web Sockets.
• Content Security Policy as a least-privilege header. Code should be compartmentalized and testable: no inline script, no code from strings.
• Tools: DOMinator, DOM Snitch, WebDriver, Selenium.

Scheduled as "Shortcuts: Touch Events" (Grant Goodale, Massively Fun). Sourced to the day 2 minutes:

• touchstart, touchmove, touchend, touchcancel, from iOS 2; touch objects carry identifier and client/page/screen X/Y.
• The W3C draft largely mirrors iOS. IE10 has a parallel model with different names that abstracts finger, pen and mouse.
• Disable pan, zoom and scroll where you take over; handle events in the animation loop rather than per event; fall back to single touch; handle both touch and mouse without processing twice.

var events = ["touchstart", "touchmove", "touchend", "touchcancel"];

document.querySelector('#log').innerHTML = 'events';
for (var event in events) {
        document.querySelector('body').addEventListener(
                events[event],
                function(e) {
                        console.log(e);
                }
        );
}

var canvas = document.getElementById('pad');
var pending = {};                                  // drained in the rAF loop

function onTouch(e) {
  e.preventDefault();                              // no pan/zoom/scroll
  for (var i = 0; i < e.changedTouches.length; i++) {
    var t = e.changedTouches[i];
    pending[t.identifier] = { x: t.pageX, y: t.pageY, type: e.type };
  }
}
if ('ontouchstart' in window) {
  ['touchstart', 'touchmove', 'touchend', 'touchcancel'].forEach(function (type) {
    canvas.addEventListener(type, onTouch, false);
  });
} else if (window.navigator.msPointerEnabled) {    // IE10
  canvas.addEventListener('MSPointerDown', function (e) {
    pending[e.pointerId] = { x: e.pageX, y: e.pageY, type: e.type };
  }, false);
} else {
  canvas.addEventListener('mousedown', function (e) {
    pending.mouse = { x: e.pageX, y: e.pageY, type: e.type };
  }, false);
}

Scheduled as "Hello. Games. HTML5 Gaming Today." (Grant Skinner). Sourced to the day 2 minutes:

• Built Pirates Love Daisies to show HTML5 could carry a Flash-class game.
• Loading: no real progress until XHR2; app cache is powerful but has no granular updates.
• Graphics: SVG/DOM ubiquitous but heavy; Canvas 2D an order of magnitude faster; WebGL fast and low level.
• Audio: format differences, one sound at a time on iOS; sound sprites; Web Audio as "a WebGL of the audio world".
• Input and devices: keyboard, mouse lock and fullscreen for shooters, touch, orientation. Network: XHR, Web Sockets, WebRTC.
• Tools: WebStorm, profilers, EaselJS; the Games Community Group.

Scheduled as "Shortcuts: Modernizr" (Faruk Ateş). Sourced to the day 2 minutes:

• Modernizr reports features as booleans and as classes on <html>; start with class"no-js"=.
• Fork in JS and CSS only where needed. Design for the browsers of the future: "three years ago you would have missed Chrome"; "Websites last a long time."
• End user-agent sniffing: easy to get wrong, almost impossible to get right.
• Modernizr does not add features, except the HTML5 shiv; performance matters more than pixel-identical rendering.

<html class="no-js">
<head>
  <script src="modernizr-2.0.6.min.js"></script>
  <style>
    .cssgradients #hero    { background-image: -webkit-linear-gradient(top, #fff, #ccc);
                             background-image: -moz-linear-gradient(top, #fff, #ccc); }
    .no-cssgradients #hero { background: url(hero-bg.png) repeat-x; }
  </style>
  <script>
    Modernizr.load({
      test: Modernizr.geolocation,
      nope: 'geo-polyfill.js',
      complete: function () { initMap(); }
    });
  </script>
</head>

Panel, "Browsers and Standards: Where the Rubber Hits the Road": Art Barstow (Nokia), Paul Cotton (Microsoft), Tantek Çelik (Mozilla), Charles McCathieNevile (Opera), Chris Wilson (Google), Peter Vosshall (Amazon). Sourced to the day 2 minutes:

• SPDY: encryption and full multiplexing without pipelining's problems; Cotton expected it could move to the IETF in 2012. Chaals on WebP: it will not replace JPEG given camera and editing investment.
• Tantek warned against "delayed open": technologies launched before any open discussion.
• Vendor prefixes: Cotton wants them until CR and a faster process; Tantek pointed at <video> shipping unprefixed; "Flash was the vendor prefix for video?" drew agreement.
• Dart and Native Client are "not the ultimate end of languages" (Wilson).
• Privacy: Do Not Track work at W3C; Schepers noted the crypto API and identity work.
• How to help: file bugs, join Community Groups, read caniuse.com and MDN.

http://www-03.ibm.com/able/resources/dojo.html (dead, redirects to IBM Accessibility; Wayback: https://web.archive.org/web/20130115222539/http://www-03.ibm.com/able/resources/dojo.html) http://dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11y.html (dead; Wayback: https://web.archive.org/web/20111114175427/http://dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11y.html)

Use this as part of a comparison with Closure and YUI

http://code.google.com/p/closure-library/source/browse/trunk/closure/goog/dom/a11y.js?r=550 (Google Code is gone; Wayback: no snapshot found)

http://yaccessibilityblog.com/library/tag/yui (no longer answers; Wayback: https://web.archive.org/web/20111104041320/http://yaccessibilityblog.com/library/tag/yui)

http://dev.w3.org/html5/markup/aria/aria.html (410 Gone; Wayback: https://web.archive.org/web/20111128114417/http://dev.w3.org/html5/markup/aria/aria.html)

This isn't really a front-end considerations: plan for purely static implementation of core features that allow no Ajax functionality but includes metadata, link rel, ARIA.

Will need to build this internally if not using a library.

http://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security

Strict-Transport-Security: max-age=31536000; includeSubDomains