All examples can be found on GitHub, or one could attend one of Seb’s workshops. (To those who attended Fronteers ’11: yeah, that’s what Seb also demoed on screen)
Pinterest’s div stacking layout algorithm
The number of columns adjusts to fit more/less on browser resize and the vertical stacking is not dependent on adjacent column heights. The source code shows that each div is positioned absolute. I would love to know how to accomplish this. What technology is used to generate pinterest.com’s absolute div stacking layout? →
Please Steal These webOS Features
When Apple introduced the first iPad in 2010, I bought one immediately. I didn’t know what I’d use it for, but I was sure that I would find some use for it. I never did. I played around with it, wrote some code for it, but eventually stopped using it. So when I bought a …
responsivepx – find that tricky breakpoint
What We Don’t Know
On any given request for our website there are loads of unknown factors. One of the more obvious unknowns is the browser. There are lots of techniques and tools we can use to ensure good experiences across any browser. But we also don’t know about the person. Who are they? Where to they live? What …
Rhythm
This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. …
Photo Booth in your browser
CSS calc() in Webkit
As mentioned before, CSS calc() was about to come to Chromium/Chrome (Webkit). Since about a week ago, the first part of the implementation has landed into the Canary builds: Adds calc expressions to CSSPrimitiveValue. This enables simple (ie no mixing of percents with numbers/lengths) expressions to be evaluated on most properties. No mixing yet, but …
Loop Waveform Visualizer
The Loop Waveform Visualizer uses a combination of level and waveform data to produce a circular audio visualization of any MP3. Use the mouse to tilt and the mousewheel to zoom. Now this thing is really amazing. Couldn’t even imagine this being so responsive. Very, very neat. Canary Chrome required. Loop Waveform Visualizer → The …
W3C Responsive Images Community Group
A working group, pondering a proper solution to one the responsive web design challenges: responsive images: Our goal is a markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display for both screen and print. W3C Responsive Images Community Group →