Jules Forrest has recreated several magazine layouts using CSS Grid. Worth a peek inside the source code. CSS Grid Experiments →
Tag Archives: link
Easily Start and Stop Docker Compose Projects with Captain
Jens Segers has created a handy shell script to easily start/stop Docker Compose based projects: Captain searches for docker-compose projects in your $HOME folder and allows you to start and stop those projects by passing a part of the parent directory name. Let this small recording of Captain in action convince you: Captain → Related: …
Continue reading “Easily Start and Stop Docker Compose Projects with Captain”
Kap – An open-source screen recorder built with web technology
Just a few days ago version 2 of Kap got released. It’s an open-source screen recorder built using electron. Installation possible with Homebrew-Cask, after which the app sits neatly in the Menu Bar: brew update && brew cask install kap It’s possible to record sections of your screen, specific windows, or the entire screen. After …
Continue reading “Kap – An open-source screen recorder built with web technology”
Fly and Control a Drone Using JavaScript
Whilst the video is only a sneak peek of a Code School tutorial, you can puzzle the pieces together yourself. The key part is the rolling-spider Node package which uses Bluetooth to communicate with the drone. var RollingSpider = require(‘rolling-spider’); var temporal = require(‘temporal’); var rollingSpider = new RollingSpider({ uuid: ‘Mambo_434915’ }); rollingSpider.connect(function() { rollingSpider.setup(function() …
Lazy Loading images with IntersectionObserver
Smashing 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 Library
Ken 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 …
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”
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”