Nintendo Switch

This gets me excited:

In addition to providing single and multiplayer thrills at home, the Nintendo Switch system also enables gamers to play the same title wherever, whenever and with whomever they choose. The mobility of a handheld is now added to the power of a home gaming system to enable unprecedented new video game play styles.

Reminds me of Microsoft Continuum and that iPad-iMac concept by Tim Van Damme where one could slide the iPad into the iMac to upgrade it to a full blown Mac. Of course it will only be a matter of time before Apple actually copies and implements this (and then touts this, as being its New Big Unprecedented Invention (TM) ;))

Elsewhere , Leave a comment

The Dutch Reach

We asked our editors if they’d ever heard of the Dutch Reach (trust us, it’s not what you’re thinking). Watch to see how this simple technique may just save a cyclist’s life.

Elsewhere , , 1 Comment

Transit Maps – A Technical Follow-Up


Follow-up to the aforementioned Transit Maps:

Six weeks ago, we launched Transit Maps, and wrote this blog post about why we took on the mammoth task of creating automatically-generated yet aesthetically-pleasing maps. […] Today, we’re fulfilling our promise to publish a technical follow-up from Anton, our resident mapping wizard, who explains in much greater detail what went into building these maps.

Great to see the steps involved being explained in detail, with visuals per step.

A Technical Follow-Up: How We Built the World’s Prettiest Auto-Generated Transit Maps →

Elsewhere , , , Leave a comment

favicon.ico and redirect links as a privacy leak


Without your consent most major web platforms leak whether you are logged in. This allows any website to detect on which platforms you’re signed up. Since there are lots of platforms with specific demographics an attacker could reason about your personality, too.

The attack works by loading in a website’s redirect script, with its favicon (hosted on the same domain) set as the page to redirect to. When logged in, the redirect script will return the favicon. When not logged in, the redirect script will return the login page.

Knowing this you can set that URL as the source of an Image. That image’s onload/onerror will then give away if one is logged in or not:

<img src=""
     onload="alert('logged in to fb')"
     onerror="alert('not logged in to fb')" />

Your Social Media Fingerprint →

Elsewhere , , Leave a comment

CSS attribute value less than / greater than / equals selectors

Yesterday Ana Tudor wondered if should could write CSS selectors using less-than and greater-than logic:

Unfortunately this kind of selectors don’t work (yet). Until then one could use JavaScript to tackling this problem, or use a pure HTML/CSS-based solution.


The HTML/CSS solution is a 2-step process/hack:

  1. Inject all the values that the item is not equal to using data-* attributes.
  2. Use the CSS Attribute “Value Contains” Selector (e.g. [attribute~=value]) on those data-* attributes.

1. Injecting extra data-* attributes

Say you have a list of 10 items (from 1 to 10):


About the 7th item you can state that it:

  • it equals (eq) 7
  • it is greater than or equals (gte) 1, 2, 3, 4, 5, 6, and 7
  • it is greater than (gt) 1, 2, 3, 4, 5, and 6
  • it is less than or equals (lte) 7, 8, 9, and 10
  • it is less than (lt) 8, 9, and 10

Translated to new data-* attributes, the HTML for this 7th item becomes this:

<li data-val-eq="7"
    data-val-gte="1 2 3 4 5 6 7"
    data-val-gt="1 2 3 4 5 6"
    data-val-lte="10 9 8 7"
    data-val-lt="10 9 8">

About all other items you can state the same things. Using a template engine, such as Jade, you can easily script this kind of stuff automatically and eventually end up with this markup:

	<li data-val-eq="1" data-val-gte="1" data-val-gt="" data-val-lte="10 9 8 7 6 5 4 3 2 1" data-val-lt="10 9 8 7 6 5 4 3 2">1</li>
	<li data-val-eq="2" data-val-gte="1 2" data-val-gt="1" data-val-lte="10 9 8 7 6 5 4 3 2" data-val-lt="10 9 8 7 6 5 4 3">2</li>
	<li data-val-eq="3" data-val-gte="1 2 3" data-val-gt="1 2" data-val-lte="10 9 8 7 6 5 4 3" data-val-lt="10 9 8 7 6 5 4">3</li>
	<li data-val-eq="4" data-val-gte="1 2 3 4" data-val-gt="1 2 3" data-val-lte="10 9 8 7 6 5 4" data-val-lt="10 9 8 7 6 5">4</li>
	<li data-val-eq="5" data-val-gte="1 2 3 4 5" data-val-gt="1 2 3 4" data-val-lte="10 9 8 7 6 5" data-val-lt="10 9 8 7 6">5</li>
	<li data-val-eq="6" data-val-gte="1 2 3 4 5 6" data-val-gt="1 2 3 4 5" data-val-lte="10 9 8 7 6" data-val-lt="10 9 8 7">6</li>
	<li data-val-eq="7" data-val-gte="1 2 3 4 5 6 7" data-val-gt="1 2 3 4 5 6" data-val-lte="10 9 8 7" data-val-lt="10 9 8">7</li>
	<li data-val-eq="8" data-val-gte="1 2 3 4 5 6 7 8" data-val-gt="1 2 3 4 5 6 7" data-val-lte="10 9 8" data-val-lt="10 9">8</li>
	<li data-val-eq="9" data-val-gte="1 2 3 4 5 6 7 8 9" data-val-gt="1 2 3 4 5 6 7 8" data-val-lte="10 9" data-val-lt="10">9</li>
	<li data-val-eq="10" data-val-gte="1 2 3 4 5 6 7 8 9 10" data-val-gt="1 2 3 4 5 6 7 8 9" data-val-lte="10" data-val-lt="">10</li>

2. Using [attribute~=value] selectors

With those extra data-* attributes in place, we can now make good use of [attribute~=value] selectors:

  • Say we want to select all items that are greater than 8. To do so we select all items where [data-val-gt] contains the value 8.
    → In CSS: [data-val-gt~=8].
  • Say we want to select all items that are less than or equal 4. To do so we select all items where [data-val-lte] contains the value 4.
    → In CSS: [data-val-lte~=4].
  • Say we want to select all items that are between 5 and 9. To do so we select all items where [data-val-gt] contains the value 5 and [data-val-lt] contains the value 9.
    → In CSS: [data-val-gt~=5][data-val-lt~=9].



Here’s a demo pen which puts it all together:

See the Pen CSS attribute value less than / greater than / equals by Bramus! (@bramus) on CodePen.

Elsewhere , , Leave a comment

New “Rogue One: A Star Wars Story” Trailer

Very, very, excited about this one:

If you want a frame-by-frame analysis, The Verge has got you covered: The latest Rogue One trailer: a breakdown of all its hidden clues →

Elsewhere , , , Leave a comment

You Might Not Need JavaScript


In the spirit of You Might Not Need jQuery, and just like You Don’t Need JavaScript, the website “You Might Not Need JavaScript” contains a truckload of examples with CSS alternatives for interface components that are typically built with/powered by JavaScript.

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.

Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you’re only targeting more modern browsers, you might not need anything more than what the browser ships with.

Modals, Tab Interfaces, Image Sliders, Lightbox, Scroll Indicators, … it’s all there. Without any line of JS.

You might not need JavaScript →

Elsewhere , Leave a comment

Stranger Things Fanart Poster

Magnificent work by Amien Juugo:


Fanart poster for Stranger Things →

Elsewhere , , Leave a comment

Why I’m excited about Yarn


Today, Facebook – in collaboration with Google and others – released Yarn, a new package manager for JavaScript.

In comparison to npm, the Yarn website pushes these three main benefits forwards:

  1. Speed
  2. Reliability
  3. Security

Not in that list, and something that I’m really super excited about, is the fact that Yarn is architected in such a way that it basically is a drop-in replacement for npm (the binary) itself. Yarn does not bring extra fatigue to the JavaScript game:

  • You don’t need to learn an entirely new (*) syntax (unlike the switch from grunt to gulp to webpack).
  • You don’t need to find your packages on a different repository/website (unlike the switch from bower to npm).
  • You don’t need to change your directory structure (Yarn still uses package.json and puts everything in the node_modules subfolder).

For us, the end user, not much changes. Everything that was, still is. From a UX perspective that can count.

Working with Yarn: “It’s a Unix System, I know this!”

(*) I know. The syntax is a tad different, but not that much: Once yarn is installed, just run yarn (or yarn install) instead of npm install. To add a package to your package.json run yarn add packagename (instead of npm i packagename --save). Slightly different indeed, but nothing big.

Of course I’m also excited about the initial benefits listed. Take reliability for example. Coming from a PHP background – where we have Composer for dependency management – I applaud the fact that Yarn – like Composer – automatically generates lock files.

Thanks to the yarn.lock file you can no longer end up with different versions of dependencies on different machines should a new version of a dependency be released in between two runs of yarn install. The lock file, as its name indicates, locks the dependencies down to exact versions (cfr. npm shrinkwrap, but then by default and on steroids). That way you have reproducible installs, on all machines.

The magic clue behind it? Whenever you run yarn install, the yarn.lock file has precedence over the package.json.

  • If the yarn.lock file exists, the (exact) versions defined in it will be used.
  • If no yarn.lock exists, the (loosely defined) versions defined in package.json will be used, and a yarn.lock is generated.

That way you, as a developer, have true control over which exact versions will be installed on every machine. As long as you commit your yarn.lock file into Git (or whatever VCS floats your boat) of course.

Let me rephrase and repeat that for you, as it’s really important: you must commit the yarn.lock file into Git.

To update the versions locked in the yarn.lock file run yarn upgrade. After having verified that your project Works On My Machine™, it’s safe to commit the updated lock file into Git.

Oh, and about the aforementioned speed benefit (thanks to parallelization and the use of a global cache on disk), let this tweet convince you:

So, what are you waiting for?

Facebook Engineering Blog: Yarn: A new package manager for JavaScript →
Yarn – Fast, reliable, and secure dependency management →
The npm blog: Hello, Yarn! →

This post has also been cross-posted to Medium. If you like it, feel free to give it a <3 on there.

Elsewhere , , , , Leave a comment

Louise Delage on Instagram

Starting August 1st, Louise Delage has been posting photos to her Instagram account. The 25 year old Parisian collected over 50,000 likes in just eight weeks. But did her followers even know what they were liking?

Like my addiction

A video posted by Louise Delage (@louise.delage) on

The end caption reads:

It is easy to not notice the addiction of a person you’re close with.

The Shocking Truth About Louise Delage’s Instagram Account →

Elsewhere , Leave a comment