HTML5DevConf 2013

From Grassroots to Green Pastures
★☆☆☆☆

Christos Georgiopoulos, Intel

Keynote about Intel and HTML5. This seemed like a careful mix of corporate BS, advertising Intel’s new “XDK NEW” project and getting developers psyched about the “Era of integrated computing”. I don’t think it was particularly useful.

Things he kept hammering at the audience:

Finally! Layout in CSS
★★★★★

Alan Stearns, Adobe

Talk was about some exciting CSS specs that are coming up and/or implemented already.

Flexbox

Status: READY TO USE!

Fun fact: I was the only one raising my hand when he asked “who’s using flexbox in a production website?” (we use flexbox on Yelp’s mobile site) \o/

Flexbox is a lot better than what we have in CSS. CSS wasn’t made to be a layout language and flexbox is an attempt at solving that.

flexbox is a one dimensional layout system. In a flex container you can:

Flexbox gives you:

Sample code for a flex container:

    display: flex;
    /* or display: inline-flex; */
    flex-direction: row;
    /* Other options:
    flex-direction: column;
    flex-direction: row-reverse;
    flex-direction: column-reverse;
    */
    justify-content:
    align-items: stretch;

Any direct child of a flex container becomes a flex item. Flex items can:

Solutions for vertical centering:

There’s a lot more to flexbox, this introduces only the basics.

Grid Layout

Status: not ready. Expect early implementations of that next year.

That’s a full 2D layout system. It brings:

You can align things based on lines, space between lines, horizontally, vertically, etc. It’s currently being spec’d.

CSS Exclusions

Status: not ready. Experimental implementations in IE10, IE11

CSS Exclusions are solving the overlap problem. An exclusion is a region causing the content to float around it.

.exclusion {
  wrap-flow: both/start/end/clear/maximum/minimum
}

CSS Shapes

Status: Implementation in latest webkit and blink

CSS Shapes enable you to wrap text around all sorts of shape (circles, square, polygon)

Possible shapes:

.circle-float:
   float:left;
   shape-outside: circle(50%, 50%, 50%);
}

.ellipse-exclusion {
  wrap-flow: both;
  shape-outside: ellipse(50%, 50%, 90%, 30%);
  shape-margin: 10px;
}

CSS regions

Status: not ready. But implementation in webkit, blink, iOS7, IE10, IE11.

Allows you to specify how the content flows from one region to another. Another name for CSS regions: CSS named flows. Basically it lets you create a named flow and use it.

article > p {
  flow-into: philip;
}

article::before {
  display: block;
  height: 50vh;
  width: 50vw;
}

article::after {
  flow-from:philip;
  display:block
}

Demos

Memory management for smooth infinite-scrolling
★★☆☆☆

Sumit Amar, Director of Engineering, EA

The talk was about memory management in the context of (infinite) scrolling. He makes the distinction between unnecessary memory allocation vs leaks. Leaks in modern browsers still exists but they’re rare.

This talk is about scrolling strategies: snap-in scrolling, inertia scrolling.

Solutions:

First strategy: push the items onto a stack, remove DOM elements, push to localStorage. Restore when the user scrolls back.

Second strategy: use a range hash table:
{ '0-1000': ['http://url1', 'http://url2'] }

Demo: http://armar.co.in/view.html

“future ideas”: pooling and recycling DOM elements, using a set of elements and translate 3d. No idea how that would work. Like at all. He was vague during the whole talk.

JavaScript Insights
★★★★☆

Ariya Hidayat, Sencha
Ann Robson, Yammer

Both speakers are interested in perf and tools despite very different backgrounds and career paths. Talk is about some opensource, powerful JS tools.

3 very important tools that everyone should use:

Use these tools with pre-commit hooks
git commit -n to avoid git commit hooks

esprima to analyse JS syntax tree (using esprima.parse)

Use strict mode to have better validation out of the box (dupe properties in obejcts for instance)

Definition of the Boolean trap:

ESLint => enforces style standards at the syntax tree level.

Multi-layered defense:

Visualization of large codebases: code flowers

from in-person discussion with Ariya:

Programming in CSS
★★★☆☆

Terry Ryan, Adobe

A few years back: very smart people told us not to use table, but to use css. Problem: we took that too seriously and ended up with <div class="table-cell"> instead. Should doesn’t mean “never do it” and “prefer” doesn’t mean “always do that”. Let’s revisit some best practices.

CSS is not a programming language (no var, loops, functions) => CSS is generally an unproductive use of our time. Two paths for css:

Discussion about resets for a while:

(note: normalize.css wasn’t mention. A shame because it’s the best of both worlds. Oh well whatever!)

Discussion about class vs id, brings discussions about css specificity, reminder that element < class < id < inline < !important. Nothing brand new.

CSS smell:

Object Oriented css

Should you do OOCSS? Yes if you’re in a large codebase

Preprocessors. Why bother?

The main difference between sass, stylus and less: underlying technology and syntax. The speaker prefers sass. He went through variables, nesting, mixins, @import. Nothing new if you’ve written scss at Yelp.
Then inheritance through @extend, color functions, math were covered. They’re a bit less common but you can easily read the docs. A neat reminder.

Conclusion:

Technical challenges from frontend interviews
★★★☆☆

Shawn Drost, Hack Reactor

This one was kind of a shot in a dark. I didn’t know what to expect. This talk was actually about what frontend interviews are about. Can be interesting to refine a set of questions.

The class taxonomy for frontend interviews

Browser concepts

Top 5 questions:

More like this: https://github.com/darcyclarke/Front-end-Developer-Interview-Questions

Algorithm and data structures:

Soft skills

http://www.interviewcake.com/tips-and-tricks

Slides for this talk

Immersive Interaction Experiences: Pointer Events, Panning & Zooming, and Gestures
★★★★★

Jacob Rossi, Microsoft

Today we have devices with very very different form factors (TV, tablets, stylus, etc.)
Users want to make the user forget they’re touching glass. Make them feel like they’re touching the page. It also means 60fps so that the page stays responsive and feels “stuck” to your finger

KEEP IT SIMPLE (don’t use a complex interaction models. 2 fingers swipe to open the menu, 3 fingers swipe to search…that doesn’t work)

For panning and zooming, MS has come up with a really cool, industry leading solution and that’s what’s going to be explained in this talk.

Snap Points

MS submitted a spec for snap point and snap type. Example:

.snap {
  overflow-x: scoll;
  -ms-scroll-snap-points-x: snapInterval(0px, 100%);
  -ms-scroll-snap-type: mandatory;
}

WOW holly shit that’s a native slider! Let’s use this on m.yelp.com as soon as it’s implemented in IE mobile!
Other sample use for snap points: pull-down menus.

Pointer Events

Pointer events now have pressure, touch size, etc…and those are properties of the event. Sample events: pointerdown, pointerup,pointercancel, pointermove, pointerover, pointerout, pointerenter, pointerleave.

You can be device-specific when you need it through event.pointerType.

touch-action: none is a CSS property to deactivate touch handling on an element. touch-action: none is acting as preventDefault would. There are other values for touch-action (pan-y, pan-x, etc).

It’s important because of the performance implication. If you call preventDefault() the browser has no choice but to run JS to find out if it must pan or zoom.
With a CSS rule, things can be determined much faster.
300ms delay in IE to disable double tap? Just one line of CSS!

Pointer events let you handle multi touch really easily through pointer IDs (each pointer event gets an ID corresponding to the finger it matches)
Event properties for pointer events: width, height, pressure, tiltX, tiltY. AWESOME! Pointer events reached the candidate recommendation status. It’s now unprefixed in IE11.

Frameworks to enjoy pointer events now:

Gesture API

Pointer events give you RAW stuff. If you want more abstract info: use gesture events. To use them here are the steps:

  1. Grab an element elem.addEventListener("MSGestureChange", fn);
  2. instantiate a gesture recognition thing var g = new MSGesture();
  3. Assign target g.target = elem;
  4. Profit. The gesture analyzer gives you rotation, scale, translationXY, velocity, angle, and all of those are deltas since last gesture event.

Final advice for mobile

How cupcakes, Alice in Wonderland and baby elephants are moving the web forward
★★★☆☆

Arno Gourdol, Adobe

Arno manages the web team at Adobe. Talks about different medium and how they came to be what they are. What makes the web different as a media?

Then haha! this presentation is actually HTML AND CSS! Woo! (heh)
=> http://arno.org/20131023/

http://topcoat.io is a skin for webapps components (brief demo)

SVG:

Announcement: snap.svg released. Looks like sort of what jQuery is to JavaScript

From there, several demos follow, demonstrating animations in SVG. Pretty cool demos for the most part. http://snapsvg.io

Demo:

All demos are available at http://adobe.github.io

Other features coming up:

trick: use canvas as a mask for page transtions

WE DO OPENSOURCE (weeeeee): http://html.adobe.com/opensource

Rethinking CSS Best Practices
★★★★★

Renato Iwashima, Yahoo

Talk is introducing Atomic CSS.

Grouping properties by selectors doesn’t scale. When you have lots of places using the same style you end up with something like:

.class1,
.class2,
.class3 { /*some style */ }

Other ideas: have a reusable class. But once again, when you want to reuse that class and override, you have specificity problems.

Standard architecture for a site’s CSS (page1);

Standard architecture for a site’s CSS (page2);

Problems:

What we want instead (as an architecture for a page:

About semantic class names: other than microformats, class names are used for presentational purpose or JS hooks.

Semantic example:

But we stop because best practices recommend to style based on content. BUT WHY?

BUT a number of people are suggesting that this might not be a good idea for large scale websites. Nicolas Gallagher: “the most reusable classnames are the ones independent of the content”. Nicole Sullivan has the same idea: “keep specificity low, abstract repeating visual patterns”.

…Here comes Atomic CSS. Naming is inspired by Zen Coding (Emmet):

    .Fl-start { float: left; }
    .Fl-end { float: right; }
    .Fl-n { float: none; }
    .Mstart-10 { margin-left: 10px }

MANAGE TEMPLATES INSTEAD OF STYLESHEETS
There are lots of template engines and they’re smarter than CSS

What should be in a CSS file? fundamental classes, helpers. That’s it!

Adantages:

Use case: Media object

But what about column layout? Is “media object” still a relevant name for that?

The Atomic CSS version:

    
 (Bfc: block formatting context)

Use case: hero unit

    
Heading

    
Tagline

Is that hard? No because it has real meaning.

CSS bloat vs. HTML bloat, aren’t you just shifting complexity?
Well, data needs to live somewhere
Besides, look at .wrapper vs .bfc (semantic names are longer than ACSS ones) and those compress better (good GZIP compression because of repetition)

Aren’t you just inventing inline styles again?
inline styles have a HUGE specificity and are verbose. Not ACSS. They have abstractions, they take care of cross-browser problems.

Performance?
Numbers are really nice. They got down to a 18kb super reusable package containing all the presentational classnames. http://my.yahoo.com has only 3kb of page specific CSS.

http://bit.ly/atomiccss

Always bet on JS, convergence of operating system and browser
★★★★★

Nick Desaulniers, Mozilla

Nick is an “OpenSource zealot”. He led protests in SF. OPEN SOURCE PROTESTS. Talk is about convergence of OS and browser and how HTML5/JS/CSS should win.

Users shouldn’t care about “native vs web” because the limit is not clear anymore: webOS, firefoxOS, Tizen, and many others are blurring the line.

Web’s number one advantage is portability
“but native apps have better access to hardware!"
=> this should be fixed. Let’s file bugs against browsers. Mozilla has been adding a lot of APIs to access native hardware. You shouldn’t have to rely on apache cordova to do that.

open webapps (demo installing that on windows, osx, android. wow.) more on JITs (Nick’s blog)

A plan for html5 to become the king of the jungle:

slid.es/nickdesaulniers/jsos

React: Rethinking best practices
★★★★★

Pete Hunt, Facebook

Pretty cool talk on how reactJS is built. It explained the philosophy behind it:

ReactJS is at the core of what FB uses. Seems pretty slick.

The main interesting thing to me is their use of a virtual DOM. That lets them virtually update and read from the DOM without actually ever touching it. That means you can batch updates to the DOM but also batch reads and do all sorts of crazy optimizations. For instance they diff the virtual DOM against the real one. Reusing elements becomes super easy.

Interesting part: everything done with virtual DOM does not need to touch the DOM, which means it can be moved to a separate process by using webworkers.

http://reactjs.org

Browser Dance Party
★★★★☆

Jordan Santell, Mozilla

Analyzer node to get data about frequency and time domain.

    var a = ctx.createAnalyser();
    a.fftSize = 512;
    var freq = new Uint8Array(256);
    setInterval(function() {
      a.getBytFrequencyData(freq);
    }, 20);

Downside: setInterval has no knowledge of audio. Instead:

    var BUFFER_SIZE = 2048;
    var p = ctx.createScriptProcessor(BUFFER_SIZE);
    a.fftSize = 1024;
    var fft = new Uint8Array(256);
    p.onaudioprocess = function() { a.getByteFrequency...}

Beat detection
beat = drastic changes in sound energy

1st algorithm:
average magnitude. When it goes over a certain threshold, that’s a beat. Very simple. Depending on the type of music you’re trying

Image Layout Algorithms
★★★★☆

Christopher Chedeau, Facebook

No doc on images layout algorithms, did some research on the topic.

Fixed Grid Layouts

background-size: contain/cover already exists in CSS and can do that for you!

Less Boring Grids

500px demo. Where images sometimes take 1 grid items, sometimes 2, etc. Leads to more iteresting photo page.

Technique: get a canvas (4x2) and some shapes. You then fill canvas with shapes.

Demo with click to enlarge/minimize

How it works: maintain 2 pointers with the first position available for a 2x2 square and 1x1 square. Not clear what the win is?

Cropping Algorithm?

Problem with cropping is that you have to find the best crop. Cropping algorithms are a waste of time. Crop less. Crop square. That’s the less risky thing to do.

Adaptive Grids

organize by colums

Means landscape will be smaller than portrait. Example: 9gag.

Algorithm for this: fill smallest column expand to two column if two columns are the same height. In reality, 2 columns being exactly the same height is really low. Instead, use a coarse grid (if columns are more or less the same height, up to 10px different). Coarse grid means that you have to crop up to 10px

organize by rows

Means portrait images will be smaller than landscape. Example: Flickr.

Laying out by rows can be considered the same as laying out for text. Turns out LaTeX has a super cool algorithm for that.

Irregular Layouts

Aspect ratio of √2. If you devide a √2 ratio image in 2, you get 2 √2 ratio pics. You can exploit that to get cool effects.

Holy Grail

Kristy Mannix Photography (manual layout) Google search results (not clear what they do but it’s good)

Images layout Analysis

http://blog.vjeux.com/category/image

PDF JS
★★★★☆

Brendan Dahl, Mozilla

PDF format history

What’s in a PDF?

    %PDF-1.7 << Header
    2 0 obj
    <<
       /Type /Pages
    >>
    xref tables
    ...trailer

Why pdf.js?

Rendering a PDF

Problems:

About pdf.js

Text is really hard (glyphs,copy paste, unicode, left-to-right vs right-to-left)

Text selection is achieved through a transparent overlay on top of canvas

Solution do janky scrolling: webworkers and setTimeout to let the browser do its thing, priorize rendering, etc.

Timeline:

Improvements since first launch:

Still no support for forms and JS, working on that.

Lessons learned:

http://github.com/mozilla/pdf.js

Talks I Could Not Attend

The format of the conference (13 parallel tracks!) made some sessions very busy, to a point where not everyone could fit in the room (nope, not even space to sit in the alley or stand in the back). I’ll have to watch later: