Over at CSS-Tricks Hugh Haworth has done a nice write-up on the next generation of build tools that have been popping up.
A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the last few years, including webpack, Babel, Rollup, Parcel, create-react-app.
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 for dark colors, medium colors for medium colors, and dark colors for light colors, and still allows you to define colors inline, instead of forcing you to use a variable for every single color.
For best results she also taps into LCH colors.
LCH is a much better color space for this technique, because its lightness actually means something, not just across different lightnesses of the same color, but across different hues and chromas.
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, HTML-only patterns are easier to understand for end users. More ARIA does not mean more accessibility.
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.
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 others.
Wow, these surely would’ve come in handy back when I was a lecturer Web & Mobile 😅
Over at CSS-Tricks, Caleb Williams digs into ElementInternals
The ElementInternals standard is a very exciting set of features with a very unassuming name. Among the features internals adds are the ability to participate in forms and an API around accessibility controls.
As you can see in the demo below his <rad-input> does exactly that.
When generating a browser identifier, we can read browser attributes directly or use attribute processing techniques first. One of the creative techniques that we’ll discuss today is audio fingerprinting.
Using an Oscillator and a Compressor they can basically calculate a specific number that identifies you.
Every browser we have on our testing laptops generate a different value. This value is very stable and remains the same in incognito mode.