How CSS’s display: contents; works

You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag. But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper. How display: contents; works →

Working with Houdini’s new CSS Typed Object Model (Typed OM)

Chrome 66 will add support for Houdini’s Typed OM. Eric Bidelman from Google has documented how we can use this. CSS now has a proper object-based API for working with values in JavaScript. The days of concatenating strings and subtle bugs are over! The example shown above merely defines a value and is quite a …

Easily create high resolution Twitter screenshots with “Screenshot a Tweet”

Nice new tool by Cameron Adams (The Man in Blue): just enter the URL of a tweet, et voila: you get a screenshot – without any cruft and in a decent resolution – in return. To do this on the technical side, I fetch the tweet text using Twitter’s API and then analyse the author’s …

AR Experiments: Flight Paths – A visualization of flight data that floats around you.

Flight Paths is an experiment that transforms your room into a flight path visualization. Touch any horizontal surface and explore as flights take off from JFK or SFO and fly around your space. AR Experiments: Flight Paths →

Data Selfie – A browser extension analysing your Facebook consumption

Data Selfie is a browser extension that tracks you while you are on Facebook to show you your own data traces and reveal what machine learning algorithms could predict about your personality based on that data. The tool explores our relationship to the online data we leave behind as a result of media consumption and …

Using the new Async Clipboard API

Shipping with Chrome 66 is an implementation of the new Async Clipboard API. Its asynchronous nature makes it the preferred way – over document.execCommand – to perform copy-paste operations in the browser. // Write Text to the Clipboard (e.g. copy) navigator.clipboard.writeText(‘Text to be copied’) .then(() => { console.log(‘Text copied to clipboard’); }) .catch(err => { …

V8 internals for JavaScript developers: Arrays

This presentation demonstrates how learning just a little bit about JavaScript engine internals can help you improve the run-time performance of your JavaScript code — not just in V8 specifically, but across all JavaScript engines! A written version is also available.