Icons changing colors on scroll


Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto.

Icons Filling Effect →
Icons Filling Effect Demo →

If you like this, you’ll definitely like these too:

Elsewhere , , , , Leave a comment


Neat installation which projects a map onto tiles, and then morphs those tiles to make them resemble the actual changes in altitude of the map projected.

Elsewhere , , Leave a comment

The mess we made


Windows Phone 8.1 Update includes hundreds of Internet Explorer 11 enhancements that greatly increase compatibility with the mobile web.

We updated the User Agent string in IE on Windows Phone to increase the number of sites that would correctly deliver the best mobile content.

In Windows Phone 8.1 Update, we added a mapping of popular webkit-prefixed APIs to the standards based support already part of IE11. This means that sites that only send WebKit code are translated into standards based code as the page loads.

Unfortunately it’s us, web developers, that have forced the Internet Explorer team into doing this. Let’s just we hope we don’t make the same mistakes again.

The Mobile Web should just work for everyone →

Elsewhere , , Leave a comment

The Visual Microphone: Passive Recovery of Sound from Video

Elsewhere , Leave a comment

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