Render React Components directly to Sketch with React

AirBnB Design:

Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents.

With it, it’s also possible to bring real data into the designs. Querying the Foursquare API for locations for example? Possible.

Painting with Code: Introducing React

Elsewhere , , Leave a comment

“Beau teaches JavaScript” — Learn JavaScript with this huge collection of free videos

Beau Carnes has released a massive collection of videos on JavaScript.

My JavaScript Basics course is now live on freeCodeCamp’s YouTube channel. These videos are designed to quickly give you key information on each topic. Also, I designed them to be as modular as possible. They work fine as stand-alone videos, if you just want to learn about a single topic.

Covered subjects, to name a few, are: variables, strings, functions, hoisting, comparators, arrays, loops, objects, … — yes, the whole lot.

And there’s even more:

Besides the JavaScript Basics course, I’ve also developed playlists for ES6, Clean Code, Data Structures, and Design Patterns.

My giant JavaScript Basics course is now live on YouTube. And it’s 100% free. →

Elsewhere , , Leave a comment

The Lotus Tree – White Bear

“The Lotus Tree” is a “Rock, Sludge, Metal, Post-Metal, Post-Rock” band from my hometown Deinze. Although I’m no big fan of metal nor screamo-stuff, I am a rather big post-rock fan (Slint!), thus making me like their sound.

Whilst listening to this one I found myself nodding along with the track, and getting drawn into it more and more over time. The screamo-level – something that can turn me off when too much – is quite OK as it’s rather distant and doesn’t dominate the track at all.

There’s an album-release planned next friday, with some tracks – such as this one – already available on SoundCloud.

The Lotus Tree on SoundCloud →
The Lotus Tree →

Elsewhere , Leave a comment

How Reddit built r/Place

Each year for April Fools’, rather than a prank, we like to create a project that explores the way that humans interact at large scales. This year we came up with Place, a collaborative canvas on which a single user could only place a single tile every five minutes. This limitation de-emphasized the importance of the individual and necessitated the collaboration of many users in order to achieve complex creations. Each tile placed was relayed to observers in real-time.

This post details how we approached building Place from a technical perspective.

Next to detailing how the data is stored, synced, and drawn on the canvas; the article also covers some realtime problem solving after the RabbitMQ CPU load avg shot up from 6 to 60 (!) …

The 72h timelapse – condensed to 4’30 – is embedded above. The source code of r/Place is also available.

Reddit Blog: How We Built r/Place →
r/Place Source (GitHub) →

Elsewhere , , , , Leave a comment

Typical display: flow-root; use case

Good display: flow-root; use case by Paul Bakaus:

flow-root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image.

In the image above you can see that the <ul>‘s bounding box appears behind the floated element, thus rendering the list bullets above/behind said image.

The fix is to create a new block formatting context, which is exactly what display: flow-root; affords.

💁‍♂️ What is this “new block formatting context” exactly? As per spec:

The bounding box of an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

In the past, one would’ve used overflow: hidden; to achieve the same result.

Check out this Pen!

However, as browser support for display: flow-root; is still lacking (Firefox 53, Opera 45, and Chrome 58 are the only browsers that support it) we’ll have to stick to the overflow: hidden; method for a little while longer …

Block formatting contexts and lists →

Elsewhere , , 2 Comments

Combatting frost on the Chablis vineyards

To combat periods of frost during the nighttime on vineyards, cultivators make use of smudge pots to prevent the plants from being damaged by the frost. Alternatively they also sprinkle water on all plants so that they only have to endure a “light frost”.

On Facebook I found this great set by photographer Titouan Rimbault depicting the whole thing. Here’s a small selection:

More photos on Facebook: Titouan Rimbault Photographe: Les grands crus de Chablis se battent contre le gel →

Elsewhere , , Leave a comment

Faking node_modules in CodePen Projects

With CodePen Projects you have a web IDE right in your browser, with preprocessing built-in. But what about installing dependencies via the npm ecosystem? With some minimal effort it’s possible:

All you need to do is make a folder called node_modules, and then inside of that make a file named after the module (e.g. react.js) with the module’s code.

Like so:

├── my-project.js
└── node_modules
    └── react.js
    └── react-dom.js

From then on you can just import the libraries as you would normally do:

// my-project.js
import React from 'react';


Faking node_modules in CodePen Projects →
Example →

Elsewhere , , Leave a comment

Apple Live Photos for JavaScript Developers

In a rather surprising move Apple has released a JavaScript library to play Live Photos on the web on NPM:

Use the LivePhotosKit JS library to play Live Photos on your web pages.

The JavaScript API presents the player in the form of a DOM element, much like an image or video tag, which can be configured with photo and video resources and other options, and have its playback controlled either programmatically by the consuming developer, or via pre-provided controls by the browsing end-user.

Installation is possible per npm i:

npm install --save livephotoskit
import * as LivePhotosKit from 'livephotoskit';

Alternatively you can also use an Apple CDN hosted version, which exposes window.LivePhotosKit:

<script src=""></script>

The script automatically seeks out elements with the data-live-photo attribute and tries to augment them, based on the data-photo-src and data-video-src attributes:

<div data-live-photo data-photo-src="", data-video-src=""></div>

One can also manually create instances of LivePhotosKit.Player:

// Create the player using a pre-existing DOM element.
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
player.photoSrc = 'https://...';
player.videoSrc = 'https://...';

// Listen to events the player emits.
player.addEventListener('canplay', evt => console.log('player ready', evt));
player.addEventListener('error', evt => console.log('player load error', evt));
player.addEventListener('ended', evt => console.log('player finished playing through', evt));

// Use the playback controls.
player.playbackStyle = LivePhotosKit.PlaybackStyle.HINT;
player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL;;

// Seek the animation to one quarter through.
player.currentTime = 0.25 * player.duration;

// Seek the animation to 0.1 seconds into the Live Photo.
player.currentTime = 0.1;

LivePhotosKit JS Documentation →
LivePhotosKit JS on npm →

Elsewhere , , , Leave a comment

Cassius ft. Cat Power Pharell Williams – Go Up

Really cool video where one half of the video is juxtaposed with the other half:

Elsewhere , Leave a comment

Why Rappers love Grey Poupon

When listening closely to HUMBLE. by Kendrick Lamar you can overhear him rap about “Grey Poupon”, a brand of whole-grain mustard.

This reminded me of this gem by Vox unearthing the history of Grey Poupon in rap:

HUMBLE. appears on the magnificent album DAMN.. If you haven’t listend to it yet, you should.

Elsewhere , , , Leave a comment