New to DevTools in Chrome 64: the real-time Performance Monitor, easier filtering with the Console Sidebar, and automatic message groupings in the Console.
Automatic visual diffing with Puppeteer
A few years ago we got Wraith and Huxley to perform visual regression testing. Monica Dinculescu has created a likewise thingy, powered by Puppeteer: I did a little song-and-dance that sets up Puppeteer, takes screenshots of your app (like, all the routes you care about), and then compares them to the “golden” ones. If they …
How to use variable fonts in the real world
Richard Rutter (@clagnut): Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way. Always great to see how others went head first into a problem. Be sure to checkout the Ampersand website itself too, …
Continue reading “How to use variable fonts in the real world”
Spy Viewer – View Historic Mapping within a Spyglass Circle
Ooh I like this: The National Library of Scotland has released Spy Viewer, a tool showcasing a set of historic which maps have been georeferenced so that they line up perfectly on top of the current maps. Using a circular spyglass interface you can watch the old maps peek through. Pictured below is a historic …
Continue reading “Spy Viewer – View Historic Mapping within a Spyglass Circle”
JavaScript: What’s new in ECMAScript 2018 (ES2018)?
👋 This post also got published on Medium. If you like it, please give it some love a clap over there. At the latest TC39 meeting the new features that will make it into the “ECMAScript® 2018 Language Specification” (ES2018) have been selected. All proposals that have reached stage-4 since the consolidation of ES2017 got …
Continue reading “JavaScript: What’s new in ECMAScript 2018 (ES2018)?”
FastImage, performant React Native image component
React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed: Flickering. Cache misses. Low performance loading from cache. Low performance …
Continue reading “FastImage, performant React Native image component”
Using DevTools Features Without Opening DevTools using Puppeteer
Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though: You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that …
Continue reading “Using DevTools Features Without Opening DevTools using Puppeteer”
Recreating the GitHub Contribution Graph with CSS Grid Layout
Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of …
Continue reading “Recreating the GitHub Contribution Graph with CSS Grid Layout”
ResizeObserver now available in Chrome
Chrome 64 includes ResizeObserver: ResizeObserver notifies you whenever an element’s size changes, and provides the new height and width of the element, reducing the risk of layout thrashing. To use it create a new instance of it, and then make it observe one or more elements: var ro = new ResizeObserver(entries => { for (let …
Whopper Neutrality
The repeal of Net Neutrality is a hot topic in America, but it can be very difficult to understand. That’s why the BURGER KING® brand created WHOPPER® Neutrality, a social experiment that explains the effects of the repeal of Net Neutrality by putting it in terms anyone can understand: A WHOPPER® sandwich.