Pixels are expensive

Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline:

  1. Recalc styles
  2. Layout
  3. Paint
  4. Composite Layers

If you like reading more than watching a video, a write-up is also available: Pixels are expensive →

Note: If you’ve been reading the posts here on bram.us tagged performance, you’ll most likely already know this stuff. It’s a good refresher nonetheless.

Elsewhere , , , Leave a comment

Human Cities

Human helps people move almost twice as much in six weeks. Every day, people track millions of activities with our app. We visualized 7.5 Million miles of activity in major cities all across the globe to get an insight into Human activity. Walking, running, cycling, and motorized transportation data tell us different stories.

The site sports some very neat maps, generated per type of activity (walking, running, cycling, …). Take this cycling map of Amsterdam for example:


Human Cities →
Human Cities: Amsterdam →

Elsewhere , , Leave a comment

Faking iBeacon signals

sudo hcitool -i hci0 cmd 0x08 0x0008 1E 02 01 1A 1A FF 4C 00 02 15 B9 40 7F 30 F5 F8 46 6E AF F9 25 55 6B 57 FE 6D 00 0C 00 17 C5 00


iBeacons are really really simple devices. [...] Cloning prevention is hard to implement, as there is no connection happening between client and device that would allow the device to uniquely identify each mobile phone, or the other way round.

Clone-a-beacon: iBeacon and the proof of location issue →

Elsewhere , , Leave a comment

Keynote does Material Design

Google’s “Material Design” recreated using Keynote. Wasn’t even aware of the “magic move” effect Keynote sports. The .key file itself can be downloaded right here.

Note: Ever since last year we’ve been seeing quite a lot of these type of animations being sported on websites. Be it animations linked on the current scroll position, animations triggered at a specific scroll position, or interfaces that transition from one state to the other. Recent developments such as velocity.js are accelerating the spread of motion design on the web, yet – still – I’m eagerly awaiting the (very powerful) Web Animations API. Luckily a Web Animations Polyfill already exists.

Elsewhere , Leave a comment

NYC Taxis: A Day in the Life


This visualization displays the data for one random NYC yellow taxi on a single day in 2013. See where it operated, how much money it made, and how busy it was over 24 hours.


NYC Taxis: A Day in the Life →

Elsewhere , , Leave a comment


There are filmmakers we love and then there’s Michael Bay. Even if you dislike him (as I do), Bay has something valuable to teach us about visual perception. This is an exploration of “Bayhem” — his style of camera movement, composition and editing that creates something overblown, dynamic and distinct.

Watch this if you – like me – are a movie fanatic.

Elsewhere Leave a comment

The Presets — No Fun

Neat 3D – WebGL powered – music video: one side contains the actual song/videoclip, other sides of the cube contain separate channels: vocals, bass, etc. Depending on how you rotate it, you can create your own mixdown of the song.

The Presets — No Fun →

Elsewhere , , , Leave a comment

Faster UI Animations With Velocity.js

Quickstart to working with the aforemetioned Velocity.js.

Faster UI Animations With Velocity.js →

Elsewhere , , , Leave a comment



PunchClock is an in/out tracking app for iOS 7+. It uses a combination of a geo-fence and iBeacon tracking, plus a simple Sinatra backend hosted at Heroku.

See who’s in the office and who’s not … automagically. By the folks over at Panic.

PunchClock Source (GitHub) →
PunchClockServer Source (GitHub) →
PunchClock: Fun With iBeacons →

Elsewhere , , Leave a comment

How Brazil vs Germany played out on Twitter

Just ike the score: Hallucinatory. Just watch that spike in tweets after the fifth goal (17:30 on the timeline).

Elsewhere , , , , Leave a comment