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:
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.
Interactive slidedeck of a talk on Variable Fonts by Scott Kellum:
Advance with the arrow keys. Watch it fullscreen here.
This makes music and needs access to your camera. The average hue from your camera controls which chord will play.
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.
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).
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.
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.
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.
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);
});Bram.us is the technical/geeky weblog of Bram Van Damme (nicknamed Bramus!), a 34 year old geezer from Vinkt (Belgium).
Main topics are web related technologies, along with other geeky things (Star Wars, robots, …) and personal interests (music, movies, …).
You can follow bram.us via RSS, Twitter (@bramusblog), or Facebook (@bramusblog).