Nice work by the Firefox DevTools Team: Available in Firefox Nightly (for now). Powerful New Additions to the CSS Grid Inspector in Firefox Nightly →
Author Archives: Bramus!
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 …
Continue reading “Connect multiple mobile screens together with Swip.js“
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 …
Continue reading “Opera 46 and Chrome 59 now support APNG (Animated PNG)”
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 …
Continue reading “Breaking Elements out of Their Containers in CSS”
The Matrix: How to Begin a Movie
Learning Vue
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 …
Continue reading “react-datasheet, an Excel-like Datagrid Component for React”