React v16.3.0: New Lifecycle Events and Context API

React 16.3.0 just got released. Next to being able to forward refs and some changes to the lifecycle events it also sports a new Context API which I’ve written about before.

Even though the introductory blogpost over at the React blog is very detailed, the video below – covering the new Context API – forms a nice addition:

UPDATE 2018.03.30 Elijah Manner has created a video covering this release. Definitely also worth checking out:

React v16.3.0: New Lifecycles Events and Context API →

Elsewhere , , Leave a comment

Instagram Terminal Feed

Forget about that Instagram for Windows 95, and go for the real deal: Instagram on the CLI:

Sometimes checking your instagram during work is kind of strange, so why not check your instagram inside your terminal? OK… I know checking this during work is still strange… 😑 To be honest, I did this just for pure fun.

A color mode is also available.

Instagram Terminal Feed →

Elsewhere , , Leave a comment

Variable Fonts, an interactive presentation

Interactive slidedeck of a talk on Variable Fonts by Scott Kellum:

Advance with the arrow keys. Watch it fullscreen here.

Elsewhere , , Leave a comment

Video Music – Make music by flashing colored items in front of your webcam

This makes music and needs access to your camera. The average hue from your camera controls which chord will play.

Video Music →

Elsewhere , , , , Leave a comment

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 →

Elsewhere , , , Leave a comment

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 basic one. Typed OM however contains way more stuff. Here’s a few examples:

// CSSUnitValue objects
const {value, unit} = CSS.number('10');
// ~> value === 10, unit === 'number'

// CSSMathValue objects
new CSSMathSum(CSS.vw(100), CSS.px(-10)).toString();
// ~> "calc(100vw + -10px)"

// Basic Arithmetic operations
CSS.percent(50).max(CSS.vw(50)).toString()
// ~> "max(50%, 50vw)"

// Conversions
el.attributeStyleMap.get('width').to('mm');
// ~> CSSUnitValue {value: 132.29166666666669, unit: "mm"}

// …

With the Paint API already being shipped (and more stuff on its way), Chrome is leading the pack when it comes to Houdini support:

Really looking forward to more Houdini features/support, as it will change everything (see these cool experiments for example).

Working with the new CSS Typed Object Model →

Elsewhere , , , Leave a comment

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 profile picture using Color Thief; this gives me a nice background colour that matches their profile picture, which I then layer with a lightly transparent copy of their Twitter header to produce a good-looking backdrop to their tweet.

To capture the final image, I use the excellent html2canvas to render all the HTML to a canvas element and then save out the pixel data. Bingo! You get an image of your tweet.

Supports link and hashtagh highlighting, but would also love to see image support. That’d really complete it.

Screenshot a Tweet →
Screenshot a Tweet introductory post →

Elsewhere , , Leave a comment

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 →

Elsewhere , , , Leave a comment

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 social networks – the information you share consciously and unconsciously.

Data Selfie →
Prepare to be Creeped Out →

Elsewhere , , Leave a comment

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 => {
    // This can happen if the user denies clipboard permissions:
    console.error('Could not copy text: ', err);
  });

// Read Text from Clipboard (e.g. Paste)
navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Unblocking Clipboard Access →

Elsewhere , , , Leave a comment