A rather geeky/technical weblog, est. 2001, by Bramus
Talk by Jake Archibald, as brought at JSConf.Asia 2018, taking a close look into the browser’s Event Loop: This talk looks at the browser’s event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We’ll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events …
Continue reading “Jake Archibald: “In The Loop” — Taking a close look into the browser’s Event Loop”
Frank Chimero was out of the loop for 3 years when it comes to developing websites. Coming back he was put off by the complexity of how things have gotten. Take layouting for example, where we went from tables to floats to flexbox to grid layout. [With Grid Layout] I’m reminded of the table layouts …
tlapseThis 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 …
Continue reading “Create a timelapse of your web development with tlapse“
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“
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 …
👋 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 …
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 …
Great usage of 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 it basically …
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, …
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 …
Continue reading “Nobody knows what the fuck they’re doing.”