A rather geeky/technical weblog, est. 2001, by Bramus
Jake Archibald has published a nice series in which he has been been performance-testing all F1 sites. Not only does he dig into waterfall charts, he also points out a few simple things that could be applied in order to improve overall loading performance. As a bonus he also tested the Google I/O site, which …
Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that — instead of using IntersectionObserver — uses some background magic to highlight the active navigation items. The result is a “Pure CSS” implementation: If you turn on an outline on one of the content sections it becomes clear how it exactly works: …
Continue reading “Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds”
Sara Soueidan, thinking about the different ways we consume web content: The more I consume content in reading apps, the more I am reminded of the importance and the power of progressive enhancement as a strategy to create resilient and malleable experiences that work for everyone, regardless of how they choose to consume our content. …
Continue reading “Optimizing web content for Reader Modes and Reading Apps”
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect. GSAP not required to achieve the core effect, but it does polish the whole thing … #sweatingthedetails Dynamic CSS Masks with Custom Properties and GSAP →
IntersectionObserver
Jonathan Neal dissects the Islands Architecture approach behind Astro. During the presentation, Fred demonstrates dynamically loading JS using “Islands Architecture”,a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed. The demonstration involves waiting on the viewport visibility of a div placeholder before loading some JS. Using an IIFE an IntersectionObserver …
Continue reading “Lazy loading JavaScript using IntersectionObserver“
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
