SV_MEETING_TITLE -- 15 Nov 2011

<scribe> scribe: chaals

Divya (starting in "media res")

Divya: Multiple columns - a ways to control columns in pages and let test flow through them
... break-* properties and column-span to let you put headings and stuff into the flow across the columns (like ehadlines in a newspaper)
... default fill is balance - keep them all the same length.
... or you can fill a given height first
... Browser support is good, backward compatibility story works too.
... have a new spec called Regions.
... lets you connect different content boxes

[/me thinks of SVG text areas and flow from a decade ago]

Divya: You name a flow, and then associate it to elements.
... positioning then works relative to the regions defined, not the viewport as a whole
... there are limited properties you can set directly for the content flowing through regions.
... There is getNamedFlow API, and getRegionsByContentNode
... overflow tells you if the region is full, contentNode says which nodes are in a flow.
... Also have exclusions, to take things outside the normal flow, e.g. in the way that magazines layout pictures
... wrap-flow lets you define where things will flow into and where they won't.

[shows the idea in action]

scribe: wrap-margin as well
... and wrap-padding.
... Shape-outside lets you use SVG-style shapes to wrap things more interesting than rectangular boxes.
... can also use SVG itself, or an image.

[shows wrapping a star and a circle inside it]

Divya: Grid is another proposal. Everyone loves grids, there have been several proposals and frameworks.
... http://dec.w3.org/csswg/css3-grid-align
... shows a demo of what and how.
... IE10 has support of a current version, but the spec is likely to change.
... Finally flexbox. Who uses it?
... too bad, it ahs changed so you need to change your work.
... helps deal with more powerful use of box layout.
... instead of a lot of script or complex structures of elements and CSS this simplifies things

<ajf> oh, I see

Divya: [talks about triggers for different flows, too fast for scribe to catch]
... A box can be a region, grid or flexbox, but not all at once.
... A flexbox can't be something else...

[shows a table that clarifies this]

Divya: Be aware that the specs are changing - syntax is in flux, as well as semantics.
... So be *VERY* careful using it in production - experiment, not putting it on stable sites.
... use feature detection, and make sure that things work whether or not the particuar shiny toy works.

[recommends Nicole Sullivan's article on mediablocks ()@stubbornella)]

Divya: There is also a jQuery plugin called isotope
... shows what it does.
... can't do that with CSS *today* easily
... We always want feedback. There is a mailing list - www-style@w3.org
... most of what is there comes from people who have too much spare time - be prepared to filter the "fire hose" of content.
... but if you have an issue to raise - unclear wording in a draft, a use case not covered, whatever, that's where to send them so people can figure out what to do.
... Experiment. Submit Bug Reports to tools
... That's it. Questions?

<ajf> Yes, I have a question, are you reading this?

<ajf> Apparently not.

Vincent Hardy - graphics.

<ajf> RRSAgent: pointer?

Vincent: I'm passionate about the web and graphics.
... I spent a lot of time on 2d imperative graphics, then stated to work on SVG 10 years ago.
... and got a passion for graphics (I learned to do other computation stuff)
... Then went to ork on data visualisation.
... Wworking with what was available on teh web 5 years ago
... Here I have some thumbnails of interesting demos. Slides will be available so you can peek into the demos including things I can't show during the presentation.
... [Shows a graphical clock made with Raphael - JS framework from Dmitry Baranovsky]
... [shows some moving blotches that are cool]
... There are a lot of cool things you can do. So... How?
... You have 3D capability from WebGL, CSS shaders coming, 2d with SVG and canvas, lots of stuff for animation in CSS and the SVG animation markup.
... You can choose to work with imperative or declarative models.
... You can do layout (that's what CSS is for), visual effects, and there is a wide spectrum of JS frameworks.
... I won't cover everything now :)
... Most immediate thing is 2D graphics. SVG and canvas are in all browsers today so I will focus on that.
... There are two models:
... imperative, which is canvas, and declarative which is SVG
... (cf Web3D, WebGL for 3D)
... In an imperative model you have a rectangle, and you draw pixels on it so you have a big array of pixels.
... In SVG you have something that looks like HTML. You have nodes that you put in a DOM and they behave like HTML nodes do.
... There are reasons for choosing one or another in a different case.

[who has used each one? A few...]

Vincent: [shows picture] How many circles are there?
... [looks like 4, it is 2 in the code, using a different colour to stroke the outline]
... [shows SVG source - elements for circle, attributes controlling visual rendering]
... This is declarative - you are not writing a program.
... Canvas is different. You make a canvas element, and then write scripts to describe how to put pixels into the canvas.

<ajf> s/Cavas/Canvas

[shows more source code, for canvas example]

scribe: [describes what is happening in the code]
... This is called "immediate mode because you just give instructions, they are done, and what you have left is just a set of pixels.

<ajf> /s/"immediate mode/"immediate mode"

Vincent: What is rendered? Shapes, text, images are the three basic kinds of object.
... in SVG you render elements, in canvas you make calls to drawing methods in script
... There is a rendering context. In canvas it is the context object, in SVG it is implicit.
... all the things you define resolve into the computed rendering.
... [notes that CSS works in SVG too]
... Rendering context has lots of things in it - transforms, styles, text properties, ...
... You can define things like opacity, compositing a specific piece, ...
... filter effects are a very cool feature, to blur, create shadows, etc.
... and masking, clipping, ...
... Rendering context is not the same in SVG and canvas, but at a high level they do the same basic things
... Events in canvas means you have to work out what the pixels that got clicked on actually meant in the image.
... in SVG you're clicking on an object, so it is like HTML - you know what thing got clicked.
... SVG has pointer-events that let you decide what kind of events will work where.
... e.g. pointer-events: visible-painted means anything visible catches the event - visible-fill catches on visible things that are fill, but not the stroke ...

[more source code...]

Vincent: Some hooks for scripting in canvas and SVG
... canvas *is* scripting. SVG has a DOM, so you have APIs that let you poke things around with script - text properties, manipulating path data, ...

[demo of randomly putting dots on a defined path. Which is done by getting the path and then scripting things onto it]

Vincent: Animation can be done with scripting (as per last demo). A lot of people resort to that because animation support is not yet universal.
... and in canvas that is how you do it.
... In SVG you can use SVG declarative animation (except in IE at the moment), CSS animation coming.

[shows demo]

Vincent: [explains the code]
... It can also be further manipulated with the DOM
... Big fan of CSS animation, but doesn't have timing and synchronisation
... I have to hook in scripts to do it, and a slight delay can make a mess.
... Advantage of declarative animation is that I can have one animation start when another is finished, etc.

[more demos - building a newton's cradle with a few lines of SVG animation]

Vincent: Hope we get those features into CSS animation some time.
... SVG uses CSS styling so you can do things you do in HTML documents
... So I can easily provide high-contrast mode, etc.
... Multimedia integration is interesting.
... there is audio tag in HTML5 (and in SVG)
... so you can get events and manipulate it.
... Web audio API (in development, currently multiple proposals) is really interesting. Lets you do interesting connection between graphics and audio

[Demo of using graphic effects alongside audio, based on timing the sound and making graphics to match]

-> http://svgwow.org some of these demos

[Next demo triggers directly from the audio to generate objects accoding to particular frequencies being hit]

Vincent: Canvas can render video into a canvas and then let you mess with it...
... filtering, seeking into some part of the video, ...
... pretty straightforward DOM programming.

[demos applying a filter effect live to a video]

Vincent: Why do we have two different models? Do we need them?
... Canvas is low-level, useful, but missing lots of nice features. SVG has all that but no pixel-level access...
... The debate is false. You *could* do everything with one or the other, but you probably should choose depending on your actual use case

[Demo: graffiti effects and the use cases for mix'n'match]

Vincent: To spray lots of dots canvas is great - simple, quick, while SVG is good for saving a path...
... Sometimes the two can be combined.
... How to do that is interesting - how do we mix HTML5, canvas and SVG?
... HTML5 into SVG via foreignObject
... To integrate SVG and canvas, can have a canvas in a foreignObject within an SVG

[demo SVG/canvas layer upon layer upon...]

Vincent: Or use toDataURL

[Demo of rendering a pattern into a canvas, using that to create an image to use as a pattern - much lighter than doing it in pure SVG]

Vincent: planned toBlob will be better - manipulating base64-encoded images is clunky. Hoping this will be widely supported soon.
... Or use SVG in canvas, since it lets you draw images into it.

[demo using SVG to create part of an image, and canvas to repeatedly paint it for a visual effect]

Vincent: Takeaway - combinging SVG and canvas lets you do things more efficiently.
... There are also lots of Frameworks you can use... why would you?
... There are some that implement a feature which is not yet widely supported.
... Or provide a feature specifically useful to a given domain. Or help portability...
... Raphael.js is popular, isloates you from platform so it can render to VML in old IE.
... Paper.js sits on canvas. Easle.js comes from a flash developer, check out his game "pirates love daisies" which he developed the framework for.
... Follw the D3.js talk later in this conference
... And there are frameworks to extend support across browsers by faking things not available in some browsers.
... There are lots more, of course. Choose carefully.
... Canvas good in all browsers. SVG very good, missing fonts (ff/ie) and animation (ie) still
... that's unfortunate. Would be nice to get the interoperability to developers.
... WebGL is coming - some support in most browsers.
... Also some issues with foreignObject and inline SVG that are still being worked on.
... Lot of coolness coming, too.
... e.g. typography, and more.

[Questions bumped to lunchtime]

Ian Jacobs: It is really ahrd to build a large complex platofrm in a standards body.

scribe: SVG, canvas, etc are developed by groups that are originally different communities. How do we bring them together and make them merge nicely?
... That's somewhere you the people can help by participating

[LUNCHTIME]

<scribe> scribe: ajf

<scribe> scribe: chaals, ajf

<scribe> scribe: chaals

<scribe> scribenick: chaals

<ajf> good, you're back

<ajf> scribe: chaals

Housekeeping...

IanJacobs: Pleae limit number of devices used, IPv4 is running out.
... Video will be linked tonight, and broken into chunks tomorrow. Presentations linked this week.
... We will have a feedback form later, please start thinking about your feedback.

Arvind Jain, Web Performance

Arvind: I work at Google, going to talk about new APIs designed to improve performance on the Web.
... W3C performance group created last year to build things that make pages fast.
... To make things faster, you need to know how fast they are now. So we have the Web Timing APi.
... show developers what things are using time on what device/browser/...
... needs to be detailed information.
... At multiple levels - network, DOM, ...
... 4 Specs: Navigation timing, resource timing, user timing and performance timeline.
... Will talk about this.
... Navigation timing allows developer to see timing attributes at network, DOM, HTTP level.
... and where the page comes from - cache, live navigation, ???
... because that is important information to understand what is happening to slow things down.

[chart of the process that happens to load a page]

Arvind: How long does the DNS lookup take? DOM events? when is the page completely loaded, ...?
... So now it is possible to get a complete picture instrumenting the entire process.
... support already in IE, FF, Chrome, Android. Specification is almost through the process (aiming for Proposed Rec this month)
... Navigation timing isn't fine grained enough. Pages have lots of resources, and fetching them is often most of the time spent.
... Resource timing API provides time spent on individual resources (images, scripts, ...)
... How long does it take to connect to the server that hosts a particular resource, etc.
... attributes like fetchStart, connectEnd, secureConnectionStart, etc...
... redirectStart is interesting. Sometimes there are a chain of these to follow through.
... User timing provides high precision timer and method to buffer/retrieve information provided.
... add a mark (name, time value).
... and measure time between two marks.
... Performance Timing API is really just a wrapper around the others.
... giving a single interface to access them.
... Timeline: expect implementation early next year, and then move the specs to Recommendation.
... Some security things we ran across developing this.
... with resource timing we allow a resource to send a header back to the browser on a cross-domain request, to get the timing information.
... It is easier to detect if a user is behind a proxy.
... Deducing from the relative times to connect. Real concern that browser cannot mitigate.
... We ended up deciding this isn't a sufficiently big problem to outweight the benefits
... We think we're not adding much value for fingerprinting attacks.
... There are live usage of these APIs on the web.
... allowing developers to find out how fast their apps run.

[shows screenshot and describes Google analytics' use]

Arvind: Page Visibility. This allows developer to know when the visibility of a page changes.
... quite a few use cases. Many applications are doing a lot of owrk, but if they knew the app was not visible they could scale back resource use.
... Also allows tracking of how long a user spends on a particular page.
... (metrics used to be pretty inaccurate for this)
... has document.hidden (boolean) or a visibility state that has more info
... e.g. preview thumbnails, etc.
... and an event for when things change.
... similar timeline.
... Some implementation, more coming.
... Used in Google Analytics to see exactly what users are looking at.
... and for preloading content to give it faster.
... If you guess right what the user is going to look at.
... Questions?

Ni: Engineer from Disney. We're looking into HTML5 video streaming live. We are using Apple's HLS, but nothing like that for Android. So, what are browser vendors thinking about this?

Arvind: I don't work on it, so can't really comment. Seems like a good standard that could make live streaming work.

Paul Cotton, Microsoft / HTML5 co-chair: W3C's HTML5 and Web/TV Interest groups met 2 weeks ago and had good discussions on making streaming work beter

scribe: I will be here today tomorrow and happy to talk about this more.

???, U Washington: Can you use this for usability testing? Is anyone doing this?

Arvind: That is what people are doing - what takes time and how does that affect the user experience?
... if something takes too long to load there is a performance problem. We can see other interesting things, e.g. how long does it take for a user to click on something as a pointer to whether the right things are there.

??: Would you encourage using image bundles or keep images as individual resources?

Arvind: More resources == slower load. There is a tendency to consolidate objects. Mostly works well, but it depends on the case.
... large cacheable images, probably not so helpful.
... we want to improve this. SPDY an example of trying to minimise the issue of multiple requests.
... hopefully the question becomes irrelevant in the future, with new protocols....

Ben, UWash: ?? + what about people faking the metrics

Arvind: The benefit is primarily for the publisher, so there isn't that much value in them doing it.

Chaals, Opera: If we keep opening very very small increases in exploit surfaces, how do we decide that we've added a lot of them and they add up to a real problem?

Arvind: Difficult question. We really defer this to security people, but we do need to consider it.

John Allsopp - Appcache and offline apps.

John: G'day.
... A common criticism of the web is that it only works online, whereas native apps can work offline.
... But that isn't true. I'll talk about appcache - which also helps performance but I won't talk about that today.
... To use appcache: create a manifest.html, and then upload and serve it.
... Appcache manifest is a textfile specifying three kinds of files - those that are always in cache, those that are never, and those that can do it either way.

[slides, which are online, are pretty clear :) ]

John: Stuff that is always coming from the cache comes from it even if the files are actually available because the network is there

[CMN: That lets you preload and store things to reduce load time eg for large images or something]

John: Network section specifies things that should never be taken from cache.
... and Fallback - things to use if you can't get a resource from the web.
... NETWORK includes meaning "bypass the old browser cache, too"

[Tips and tricks, clearly expressed in the slides]

John: Version number in the manifest file being changed causes the manifest to be recached - it's like "touch"
... I have a mistake here. IE 10 *does* support appcache now.
... Backward compatibility story is clear. "You're offline - what did you want?"
... Introduces http://www.westciv.com/manifestr
... bookmarklet to make pages use appcache. But think when you use it for best results.
... -> http://westciv.com/speakEasy/presentations/appcache/appcache-presentation.html slides, links, ...

Rajesh Lal, apps for mobile and TV world.

Rajesh: The N-Screens problem - you'll hit it developing apps for multiple connected devices
... talking about mobile smartphone, PC, tablet, TV

[/me wonders where the millions of feature phones went]

Rajesh: When creating an app for these devices, start from the design problem.

[slides describe more - 1' / 3' / 9', differences in input, user focus, etc]

Rajesh: You don't want to get interrupted when watching TV.
... You have a choice between native and web app.
... Native is great for THAT device, but expensive.
... not scalable.
... Web app solution is the step in the right direction. HTML5 is the engine. (HTML5 was originally called web applications 1.0)
... Apps can be on the browser, or wrapped in a native container as a hybrid application built in HTML5 but easy to distribute to devices.

[a "history" adding various functionalities at various stages]

Rajesh: Simultaneous with development there was a mobile revolution.
... Web app - easy to develop, but web platform is work in progress. Challenges in porting to n-screens.
... Challenges. 1: Feature detection.
... stop browser sniffing, just look for the feature you want.
... use Modernizr / jquery
... 2. Layout detection. Ladder of better and better scenarios.
... Media queries [example], or use jquery if it isn't there, or ... down to JS window.width etc
... via viewports, device oreientation/layout, and so on.
... 3. Advanced graphics. CSS3 etc.
... you start with -ms-foo -o-foo -mos-foo etc etc, and end up with a standard property.
... 4. Animation.
... WebGL, SVG, Canvas, ... what when?
... WebGL is awesome if you have it. CSS3 is fantastic. canvas, SVG, javascript.

[shows explanation of how animation works in SVG / canvas]

[CSS3 animation - nice and clean]

Rajesh: I think WebGL is the most awesome
... 5. Audio/Video. Challenge is the audio.
... HTML5 tag is limited, can't be used for sound effects
... flash audio, audio data, some webkit specific thing
... 6: Ajax for cross domain calls.
... You need to get things from the cloud.
... CORS, or write a proxy, or JSONP or a hybrid app
... (decresing order of preference)
... hybrid app lets you access cross domain by removing the HTML cross site restriction.
... 7. Advanced APIs for all screens, and what are polyfills and shapes?
... polyfills and shims are for falling back from the real API.
... or all the way down to your javascript code.

[-> http://widgets-gadgets.com/html5/ demo of using jquery to find out what is available in different browsers]

scribe: Point is don't worr about what is the browser or device, detect the features and implement functionality and then fall back for unavailable features.

[demo of layout adapting via media queries instead of changing the page itself]

Rajesh: Go look at W3C working groups and other resources
... William Gibson: The future is here already, it is just not very evenly distributed

Ian Jacobs: Reception st 5.30 tonight - stick around (plus some intersting stuff between now and then :) )

<koalie> chaals, done the "don't start new log at midnight utc" trick

<koalie> you've well deserved your "W3C scribe" pin button, I see from the log!

<koalie> chaals++

Ian Jacobs: Using HTML5 on older browsers...

Ray Bango, polyfills and shims to light up sites in non-modern browsers.

Ray: There are some things to talk about in supporting non-modern browsers.
... I work for MS, am a member of JQuery project team.
... I love the HTML5 t-shirt

[slide - a bridge. that has broken...]

Ray: Gap is the non-modern browsers
... going to talk about the issues, and the solutions that get us across the gap.
... Biggest problem today is browser support.
... most people have to support non-modern browsers.
... From http://caniuse.com I can see stuff, and decide what *is* modern
... modern browsers have issues for some browser, too.
... fast update browsers have varying levels of support in deployed versions.

[market share slide by versions. looks like ants on a white table though]

Ray: 0.24% market share is millions of users... not supporting them has a real cost
... it is important to give users a *decent* experience (doesn't have to be *the same*)
... this is a real drag for devlopers.
... Browser detection is a flawed concept today.
... Feature detection is a solution. Cool thing about what browsers are doing is that there is a strong roadmap from W3C with a key set of features.
... checking for thse lets us make our site future-proof.
... addEventListener is a standards so if I check for it and it is there I'm good.
... You might not *use* it. Or you can load script in dynamically.
... You need to manage expectations. There is a responsibility when including someone else's code to mimic API functionality
... Bad way to figure it out: use different event listening based on whether something is an MS browser or not.
... assumes MS will keep supporting non-standard stuff for ever, and not support standard stuff.

[live coding demo]

[big click me link]

Ray: Right way s to check for the standard feature. If it is there, use it. And *then* if it isn't there, fall back to some proprietary patch
... what about when feature detection is pages and pages of code?
... Modernizr is the best option right now

<Ian> [Shout-out to Paul Irish for modernizr]

[shows modernizr]

Ray: "if (modernizr.canvas && modernizr.audio)" is not really complicated...

[demo of a seriously degrading experience if you don't have canvas and audio support]

Ray: Polyfills and shims are cool, but entail responsibility.

<tantek> shims/shivs/polyfills

<tantek> polyfix

Ray: Polyfill replicates the standard itself. Shim replicates the functionality, but changes the API. Which means you have to go back and change stuff as the world moves on.
... Nice list of polyfills around. Lots of great code.
... HTML5Shim is a great polyfill
... When you use a 3rd party libray, you have to think about supporting it, even if the developer abandons it.
... you have to make sure it really works as advertised.
... You want polyfills that support the same API.
... eg socket.io revamped to match the W3C API, so you on't have to change your code for them.

[demo of a blocky layout using div class="..." where ... are HTML5 semantic tags]

Ray: Old browsers don't recognise the new tags.
... old IE can't handle new semantic tags. John Resig came up with a workaround. Remy Sharp made it do this for you
... and they put it into Modernizr. Yay.

[in demo, adding the shim. But still no internal style sheet for new elements in old browsers]

[so adding CSS to extend that too]

Ray: You can offer a degraded experience, IE 6 doesn't have to have the same experience as IE9
... but I'm going to use jquery to load something to give rounded corners even in browsers that don't have them.
... this is a shim.

[demo now has rounded corners]

Ray: Video... and codec support
... you can use <source> in HTML5
... and you can embed an object element for a plugin too.

[editor: slightly disturbing expression of possibly inappropriate love of an animated rabbit]

[demo of video showing what Ray talked about]

Ray: Conclusion. HTML5 is good, we depend on it. users depend on us. We depend on their money.
... There are ways to support the world. Use them thoughtfully.
... Polyfills are more future-proof than shims.

Q: How do you transform videos into different formats?

Rey: There are services that do that.

[apparently http://archive.org ]

Christopher Slye, Web Typography

[Ironically, the typography of the opening slide looks really bad on the projector. So we have a delay of 2 minutes in a 15 minute talk]

Cristopher: Rich typography is coming to the web, some of it is there, more on the way
... there are two basic formats: truetype and postscript
... these are at the root of a lot of compatibility problems.
... good news is that they will hopefully work the same in future web browsers.
... truetype was "the web format" for compatibility with IE 8 and less.
... EOT and WOFF are font containers. EOT for IE only, now we have WOFF.
... a standard compressed font container with metadata capability.
... CSS Fonts 3 gives properties (size, weight, ...), font faces, and features (the exciting bit)
... @font-face really associates a name to a font.
... Web Font Services handle a lot of scary stuff for you. format, subset, license, update, ...
... There are users who set their own browser font properties differently, and are then upset about how your website renders.
... Now we have it, we have to make typography really good
... on the Web.
... For the web, opentype layout is about substitution and positioning.
... glyphs and instructions are not new, but are now exposing themselves to the web.
... beware - subsetting can break things in opentype layout.
... There are default behaviours, for ligatures etc.
... and discretionary features (small caps, arbitrary fractions, ...)
... Example of tying these together and making them look better.

Christopher: It's about tying a bunch of stuff together. Specifying and implementing things.
... It's about enabling designers to do real typography and then it is up to them to do it.

[no questions]

Paul Irish, HTML5 - the foundation of the Web Platform

<Ian> scribe Ian

<Ian> scribe: Ian

paul: what html5 means from a browser perspective, and what's going on under the html5 covers

[About Paul....google chrom, modernizr, jquery, html5 boilerplate]

scribe: starts with the doctype

[Photo of a cafe centro in San Francisco]

[Location of a conversation on doctype between Todd Fahrner and Tantek Celik]

scribe: tantek proposed to use doctype as switch
... for clue to standards support.

[Paul reads excerpt from email from todd fahrner]

scribe: todd proposal modal rendering
... tantek prototyped it in IE5 Mac
... at the same time mozilla was discussing with it on bugzilla
... in html5 they looked at how browsers handle the doctype
... idea was that if all browsers treat the same way, the shorter it can be: <!doctype html>
... next step is meta charset
... handled by browsers differently due to how authors were including quotes
... similarly shortened in html5 to <meta charset=utf-8>
... take that as the content type for html5

IMPORTANT: Need to define the character encoding for all documents. AND do so before <title>

why? because UTF-7 can be used for a scripting attack.

scribe: next topic: parsing -> markup to dom

[how parsing happens: tokenization, tree construction, check for document.write......document.write is a jerk!

scribe: in 2002, Ian Hickson started to document how browsers handle invalid markup

[Paul shows how browsers historically handled invalid markup to create different, non interoperable dom trees]

scribe: in 2006, hixie wrote live dom viewer to show parsing results.
... real-time view of how a browser parses.
... note that view source is not viewing the constructed dom tree.
... firebug appeared shortly thereafter
... the dom viewer in firebug uses angle brackets in the views (though the brackets are not in the tree itself)
... html5 standardizes parsing of arbitrary markup
... now we have the exact same parser in a variety of browsers
... [quoting Bruce from Opera]: consumers can expect fewer interop problems .... 20% of problems in their study disappeared using standardized parsing
... html5lib
... validator.nu has a live dom viewer
... Google Web Toolkit (GWT) implementation of the parsing algorithm.
... I've been documenting ports in various languages
... java, php, ruby, js,
... if you are doing screen scraping, I recommend using one of these libraries.

[back to the paul sample file]

optional start tags: <html><head><body><colgroup><tbody>....

scribe: some end tags optional as well (as they were in html4)

Paul: I would close your <p> tags...even if optional.

[Paul gets all philosophical about end tags....]

Paul: what's important is what your team considers maintainable.
... my main point is that this parsing algo is interoperable...you can feel comfortable writing as shown.
... paul shows a minimal HTML5 document.

<!doctype html>

<title> Svelte</title>

<p> Cool!

====

scribe: can set language on an <html> element if you want.
... example of google.com/404
... next topic: <script>

"innerHTML"

[Wayback machine 15 years ago!]

scribe: back to DOM Level 0 API

createElement, createTextNode, appendChild,insertBefore

scribe: I was frustrated by having to create a text node to put some text in a div.

[Example shown of complex dom level 0 api]

scribe: but innerHTML is much more terse!
... paul shows timeline history of innerHTML

1996...innerHTML on the horizon

scribe: then mozilla does createContextualFragment....

[Paul shows the API...create a range, pass a string, return a doc fragment, then ....dissolves into the page like a magical gel!]

[more history of dhtml]

scribe: Erik Arvidsson shim : writes an innerHTML polyfill

2000: Mozilla implements innerHTML

2007: Finally specified.

====

tags v elements

Paul: Don't correct people. You deserve it if you get punched in the face.
... people have tried to define element (set of tags + attributes) v. tag.
... here's what the REAL difference is

[paul types some DOM stuff in real time to illustrate]

Paul: TAGs exist in string space.
... ELEMENTS are objects in memory that are part of the tree
... they have lots of other things like dataset, firstChild, etc.
... so the dom viewers that use angle brackets are PULLING THE WOOL OVER YOUR EYEs
... we've survived being imprecise in these terms

[back to demo file]

scribe: html the markup and html the serialization

next - Stupid HTML tricks!

world's shortest text editor:

data: text/html/,<pre contenteditable>

turn your browser into an editor in one line!

next: what can you used as @id?
... HTML spec says you can use anything
... getElementById() works fine.
... BUT....CSS namespace for IDs is more specific.
... it contains the thing with the ISO character and the something something
...summary: you can use the unicode snowman for an id!
... Matthias's "mothereffing CSS escapes"
... to let you do really twisted ids in css

Paul: Quote-free attributes make you feel ALIVE
... like walking around naked in your apartment.
... those quotes were weighing me down!

the rule is: no quotes needed unless you have whitespace or some unescaped special chars

scribe: see mothereffing unquoted attribute value validator
... there are rules behind all this and the browsers abide by them

next topic: personalized doctypes

[some crazy examples including "recursive doctype"]

Paul: The HTML5 spec is a repository of valuable brwoser knowledge much acquired through reverse engineering
... check out the authoring view o fHTML5

<chaals> scribe: chaals

Ian: How do you go from HTML4 to HTML5?

Paul: Pretty much just do the doctype switch. Stuff won't break. And then you can upgrade pieces inside it as you reach them.

Ian: reception now, breakfast at 7.30am...
... Thanks much

- DRAFT -

SV_MEETING_TITLE

15 Nov 2011

Attendees

Contents