Links and write-ups about beautiful things from around the web!
-
Sara Soueidan on creating WCAG 2.2-compliant :focus indicators
Good :focus indicators for keyboard and other assistive technology users is a must, and so often overlooked (including by me). The new WCAG 2.1 and 2.2 standards are more strict about how your UI needs to reveal the current tab focus, with the newer spec going beyond what browsers implement in their default user agent stylesheets — thankfully Sara Soueidan has written this excellent guide that breaks down the details!
-
OKLCH in CSS: why we moved from RGB and HSL
Color nerdery ahead: I’ve been a fan of the CIELAB color space ever since I discovered Lab mode in Photoshop 20-ish years ago — it’s so awesome and useful to be able to manipulate color channels separate from luminosity! — and so I’m thrilled that web design is heading that direction as well with the new OKLCH color space in CSS Color 4.
This article from Evil Martians about why they’ve made the switch to OKLCH is a great read on the ins and outs of the new color space and why you should consider using it over the more familiar ancient standards. The TL;DR: unlike hexadecimal or RGBa values, Lab/LCH is much easier to read and adjust directly in CSS as well: want to make a color more saturated? Just adjust the middle value, chroma! Oh, and contrast is preserved between different colors so long as the Luminosity remains the same, which makes conforming to the WCAG-compliant color contrast accessibility guidelines that much easier.
I also learned from this in-depth article that Adobe Photoshop has adopted the OKLab space as a “perceptual” option when generating color gradients. Look at how ugly that “classic” gradient is in their screenshot! Gradients in Photoshop have always been messed up, so this is a pretty huge change that they’ve made.
-
The Realities And Myths Of Contrast And Color
From Andrew Somers, a great primer on how color vision works and how illuminated display technology maps perception to luminance contrast, color gamut, etc. Especially useful is his writeup of not only WCAG 2’s limitations for determining proper contrast for meeting accessibility needs but also the upcoming standards like APAC (Accessible Perceptual Contrast Algorithm) that will pave the way for more useful and relevant a11y standards.
-
Area 5150 — mindbending IBM 8088 demo
Another from the recent boggling demoscene demos, here’s a bonkers one pulling off tricks on vintage IBM 8088 PC hardware that the 16-color CGA graphics adapter shouldn’t be capable of doing. Remember this is a computer setup from circa 1981!
My favorite part of these kind of demos is when the audience goes wild (well, relatively) for the breakdancing elephant animation, even more than for the psuedo-3D graphics and psychedelic color scanline gimmicks.
-
Freespin — a demoscene demo sans computer. Incredible!
-
A Brief History of the Numeric Keypad
If you’ve ever wondered why the numeric keys on a calculator resemble those on a phone (in the U.S. anyhow), but inexplicably backwards with the 7-8-9 at the top, or if you just like looking at old mechanical cash registers and other button-based devices, here’s an excellent read for you! Time to go dust off my own Burroughs Class 3…
-
Monastic vs Scholastic Reading Habits
PETRUS LOMBARDUS, Sententiarum libri IV (no copyright) It’s interesting to know that the introduction of scholarly reading — needing to reference many different texts quickly for relevant snippets to quote from — led to changes in how text was laid out, with new features like section headings and passage markers (and those nifty typographic manicules) being added initially by readers as quick reference aides:
Amongst the medieval literate elite, there were two major methods of reading: monastic and scholastic, each divided into three ‘levels’. Monastic reading consisted of lectio / meditatio / contemplatio – that is: reading / meditation / contemplation. This method was primarily concerned with memorisation and enlightenment through repetition and deep reading (contemplation). To read this way was to know by memory and intimately understand a very few books in their entirety. […] Scholastic reading appears in the 13th century and proliferates in universities, growing in popularity throughout the late Middle Ages. It comprised of legere / disputare / praedicare, or: reading / discussing / presenting. The emphasis here was on a person’s capacity to read widely and to be able to pull choice quotes from important works to use in intellectual debates (disputatio) or lectures.
-
ClipDrop: AI for Image Relighting
This is a compelling use of AI for photographic manipulation (in my mind more practical than many of the other AI image generation examples that are flooding the art websites these days): basically the software can analyze a photograph, use AI to generate a pretty accurate depth map of the subject of the photo, and then use that for dynamic relighting (allowing you to add different artificial lights, color gels, etc.). You can try the web-based demo on your own photos! Neat.
-
All Communication is Lossy
A nice piece on how the significant problem with communication between individuals isn’t so much that the conversation is lossy, it’s the lack of acknowledging and correcting for that “signal loss”.
Adopting the mindset that lossiness is a fact of life has another benefit: that of beginning to see communication not as simply a transference but as a generative space. That is, we often think of communication as simply moving understanding from one place to another, the way we might move electrons from a substation to a home. This assumption is behind a lot of otherwise well-intentioned efforts to reduce or even eliminate synchronous communication, as it can seem wholly inefficient compared with other methods. But the best communication makes way for something new to emerge in the exchange. It’s not passive but generative, not mere delivery but a creative transformation.
-
Paul Ford gifts us a new modern lexicon for time
“Eileen, pace yourself. It’s only Scrumspan. We’ve got three lightmodes to go before good-binge.”