Connect multiple mobile screens together with Swip.js

What if all your mobile devices were a single screen? This probably isn’t the most common question to ask yourself. But, just for a second, actually think about it. Think about all the possibilities of being able to combine any kind of mobile device, independent of its operating system. That’s what Swip.js does. Place two …

Opera 46 and Chrome 59 now support APNG (Animated PNG)

This part of the Opera 46 release notes got me very excited: Opera now supports animated PNG, or APNG for short. APNG is a file format that works similarly to GIF. The difference is that APNG is smaller and supports both 24-bit images and 8-bit transparency. Ever since APNG landed in Firefox (10 years ago …

Changing SVG path data with CSS

Another thing I learned at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS. As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. …

Smooth SVG Path Morphing with flubber

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation, without overthinking it. Installation per npm: npm install flubber Note that flubber only calculates the interpolated data: import { interpolate } from “flubber”; const triangle = “M1,1 L2,1 …

Woodswimmer

WoodSwimmer is a new short film by engineer and stop-motion animator Brett Foxwell. Created in collaboration with musician and animator bedtimes, the work follows a piece of raw wood through a milling machine, capturing its unique growth rings, knots, and weathered spots through a series of cross-sectional photographic scans. Due the speed at which the …

Breaking Elements out of Their Containers in CSS

A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width (or “full bleed”), whilst the content remains centered. Your typical Medium …

react-datasheet, an Excel-like Datagrid Component for React

A simple react component to create a spreadsheet: Select cells, copy-paste cells Navigation using keyboard keys Deletion using keyboard keys Callbacks for onChange, valueRenderer(visible data) dataRenderer(underlying data in the input, takes the value by default) Installation per npm, of course: npm install react-datasheet –save Cells can have both a value and an expression (the underlying …

Exploring interdependencies in global resource trade

The volume of natural resources traded globally has increased over 60% since the turn of the century, reflecting and reinforcing new economic and geopolitical realities and bringing new environmental and social challenges – as well as opportunities. Now everyone can explore these fast-evolving dynamics through Chatham House’s comprehensive and accessible data and insights into resource …