Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Flickr Uploadr: The Grid
(Or, 10,000 Photos In Your Browser)

Presented 10/25 in San Francisco, CA. See video, ~58:00.
Also see Meetup page.

Scott Schiller / @schill
Design Goals

See the UI in action: Uploadr Beta (2012) demo screencast

Powerful Batch Editing (And a shiny UI)
Tech / Features

Divide and conquer.


Preventing :event overload

Fire once, with lots of data. EditrData:filesAdded([file1, file2, file3]);

(Then do all the heavy lifting at once).

The Grid

CRUD Analogy

Being a Good Listener

Broadcast events are good.

... And a Broadcaster

"Good news, everyone!"

Hey, Wait A Minute...

Only events + data thus far.

This stuff is pretty fast.
No DOM + UI yet.


The DOM is Slow.

UI Performance vs. DOM Events

Throttle + queue / batch operations.

Scrolling & The Grid

"Virtual" page full of photos

  • A small trick.
  • Empty <div> has height assigned based on number of rows needed.
  • Not magic, but sleight-of-hand: Only render content that's in view.
Scrolling & The Grid

Staying fast

Events & The Grid

Updates: Online/Offline Nodes

Events & The Grid

Updates: Online/Offline Nodes

"Select All -> edit titles" case:
Data model is immediately updated.

On-screen nodes also immediate. Off-screen nodes refreshed when scrolled into view.

UI Notes

inline-block CSS for grid items

One top-level className change to toggle "info" overlay mode across grid

"Stateful" CSS

Mixable className values dictate UI of each grid item

photo-item content-type-photo safety-level-safe license-nc has_thumbnail has_uploaded has_fullsize_thumbnail has_error is_oversize selected

CSS Performance?

:hover can be expensive.

Consider disabling hover, transitions and related effects during scrolling or expensive cases (eg., mouse selection events).

UI Details

There Shall Be Donuts.

Progress ring generated via <canvas>, applied to photo items and dynamic favicon (where supported)

Demo: Screencast

Uploadr UI In Action

More Reading

Use a spacebar or arrow keys to navigate