Create a timelapse of your web development with tlapse

This one’s quite fun: tlapse is a tiny utility that takes periodic screenshots of your site while you develop. Combine all generated screenshots and you can get a sequence like this: The interval to take screenshots is configurable, and duplicates are omitted. tlapse –every 60s –directory ./screens — localhost:3000 tlapse – Create a timelapse of […]

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 […]

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 […]

On “Secure Contexts” in Firefox, HTTPS for local development, and a potential nice gesture by Chrome

👋 This post also got published on Medium. If you like it, please give it some love a clap over there. Earlier today, in a post entitled Secure Contexts Everywhere, it was announced on the Mozilla Security Blog that Firefox from now on will only expose new features such as new CSS properties to secure […]

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts. Load in the bigger one. Once the big version is loaded, replace the small […]

CSS Variables and Reduced Motion

Great usage of CSS Variables CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting –duration to 0 […]

Inclusive Design Principles

These Inclusive Design Principles are about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really. They are intended to give anyone involved in the design and development of websites and applications – designers, user experience professionals, developers, product owners, idea makers, […]

Nobody knows what the fuck they’re doing.

Max Stoiber, on determining if you’re qualified or not for a specific (frontend) job listing: If you’ve built a side project with React.js and know your way around JavaScript in general, you’re at least as qualified as 90% of all other devs out there. I’ll tell you a secret: Nobody knows what the fuck they’re […]

Mixed Content and Responsive Images

Interesting issue Jonathan Snook ran into when switching a site over to HTTPS. Even though images from HTTP resources should still get loaded by the browser (as they are Passive Mixed Content, and thus tolerated), they weren’t: After some digging, I noticed that the images that weren’t loading were those defined using the <picture> element. […]

A checklist for all projects that are going live

The folks over at Spatie have open sourced the checklist they run each site/project through before hitting the “Go Live” switch. This kind of stuff should be open sourced more often. The list is a good starting point to creating your own list, but of course your mileage may vary depending on the type of […]