A rather geeky/technical weblog, est. 2001, by Bramus
IntersectionObserverSmashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded …
Continue reading “Lazy Loading images with IntersectionObserver“
urql – A Universal React Query LibraryKen Wheeler: There are some amazing solutions in the space already, notably Relay and Apollo, both of which are incredibly full-featured, brilliantly engineered, and wonderfully flexible. That said, these libraries might feel like a bit much to get started with at times, especially for beginners. Our goal with urql is to simplify the process of …
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 …
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”
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”
FastImage, performant React Native image componentReact 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”
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”
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 ChromeChrome 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 …