Talk about CSS @scroll-timeline
Author Archives: Bramus!
Dark mode in 5 minutes, with inverted lightness variables
Lea Verou shows a method to implement dark mode, not by swapping entire colors, but by simply changing their lightness The basic idea is to use custom properties for the lightness of colors instead of the entire color. Then, in dark mode, you override these variables with 100% – lightness. This generally produces light colors …
Continue reading “Dark mode in 5 minutes, with inverted lightness variables”
Accessible front-end components: claims vs reality
Great post by Hidde, warning about blindly trusting accessibility claims. Not all ‘accessible components’ are created equal, some will work a lot better for our end users than other. In this post I have listed a number of things you can look at if you are considering third-party components. I especially like this part: Sometimes, …
Continue reading “Accessible front-end components: claims vs reality”
Synchronizing Fireflies Visualizer
If you watch Fireflies closely, some species will sync up their flashing to eventually blink as a group. Pretty mesmerizing stuff. But how to they do it? So, how do thousands of fireflies pick a leader to follow, a maestro to keep their flashing in time? The answer, the scientists found, is simple: They don’t. …
Good Programmers
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. — Martin Fowler
Style Pseudo-elements with Javascript Using Custom Properties
Over at CSS { In Real Life }, author Michelle Barker has detailed a clever way to style pseudo-elements (such as ::before and ::after) through JavaScript. In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. […] Luckily, CSS custom properties can help. 👉 If you set a custom …
Continue reading “Style Pseudo-elements with Javascript Using Custom Properties”
Debug/Inspect z-index stacking with the “CSS Stacking Context Inspector” DevTools extension
The Stacking Contexts Inspector is a DevTools extension for Google Chrome that allows you to analyse the stacking contexts available on a webpage. This extension will add a new panel to the DevTools and a new sidebar on the elements panel. Handy for when you’re having stacking issues. CSS Stacking Context Inspector →Stacking Contexts Inspector …
W3C WAI Curricula on Web Accessibility
Over at the W3C Web Accessibility Initiative (WAI) website you can find an extensive curricula on Web Accessibility This resource provides teaching modules to help you create courses on digital accessibility, or to include accessibility in other courses. The modules cover accessibility foundations that apply broadly, and specific skills for developers, designers, content authors, and …
This Web Site is a Tech Talk
Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020: The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development. /me nods along for the entirety of this talk. Powering his faux-live-coding slidedeck is Queue Code, a package …
CSS Container Queries: A First Look + Demo
