An Occasion Aside 2022 Denver wrapped up yesterday. And whereas I used to be unable to make it to all three days this time, I did catch yesterday’s motion — and it was superior. I’m not very social or outgoing, however this was the primary convention I’ve been to in a minimum of a few years, and seeing of us in individual was extremely refreshing.
I took notes, after all! I believed I’d publish ’em right here as a result of sharing is caring. No less than, that’s what my six-year-old informed me the opposite day when asking for a chew of my dessert final night time.
I’ll break this down by speaker. Honest warning: I’m all about handwritten notes and a reasonably visible fella, so my notes are usually much less… structured than most. And these notes are simply issues that stood out to me. They could not even be the presenter’s essential concept, however they caught my consideration!
Chris Coyier: Web sites Are Good Now
Chris has given this discuss earlier than (we linked it up simply final week), however this time expanded it considerably, notably with particulars on container relative models which, when mixed with clamp(), make for extra correct responsiveness as a result of the values are relative to the container quite than the viewport. So, you understand how we regularly use viewport width (vh) models for fluid sort?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Properly, we will use a container relative unit like container question inline-size (cqi) as a substitute, the place 1cqi is the same as 1% of the container’s inline measurement (right here’s the draft spec on that):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris additionally talked fairly a bit in regards to the efficiency advantages of internet hosting on the edge. In all probability no shock as a result of he’s written about it right here various instances. Whilst somebody who had already learn these articles, I truthfully didn’t notice the entire idea of computing on the edge.
The concept is deceptively easy: international CDNs can serve belongings shortly as a result of they host them geographically near the person. That’s fairly customary observe for serving raster photographs. However it has prolonged to static information, resembling the identical HTML, CSS, and JavaScript information that energy a web site — construct them upfront and serve the already compiled and optimized information from the speedy international CDN. That’s the entire Jamstack idea!
However what should you nonetheless require a server response from it? That ain’t very edge-y, is it? Properly, now we’ve handlers able to working on a single URL fetching information upfront, and injecting it forward of render — immediately from the CDN. Positive, there’s additional work occurring within the background. Nonetheless, the truth that we will dynamically fetch information, inject it, pre-build it, serve it statically on demand, and have it run geographically nearer to the person makes this blazingly quick.
Tolu Adegbite: The way to Win at ARIA and Affect Internet Accessibility
Good gosh was this a wonderful presentation! Tolu Adegbite schooled me so exhausting on WAI-ARIA that I had a tough time jotting down all of the gems she shared — Roles! States! Labeling! Descriptions! Every part was terribly well-covered, and stuff that I do know I’ll be coming again to repeatedly.
However one particular factor that caught my consideration is the accessibility of inline SVG. Despite the fact that SVG is said to different varieties of design belongings, the truth that it’s markup on the finish of the day units it aside as a result of it isn’t at all times recognized as a picture.
<!-- Picture tag is definitely acknowledged as a picture -->
<img src="https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/cat.svg" alt="An illustrated brown and white tabby kitten trying lovingly into the digicam.">
<!-- Could possibly be a picture, perhaps not? -->
<svg viewBox="0 0 100 100">
<!-- and so on. -->
</svg>Assistive tech is extra prone to learn inline SVG as a picture by giving it a correct accessible position and label:
<svg
position="picture"
aria-label="An illustrated brown and white tabby kitten trying lovingly into the digicam."
viewBox="0 0 100 100"
>
<!-- and so on. -->
</svg>Miriam Suzanne: Cascading Layers of !mportance
Hey, one other CSS-Tips alum! Miriam has been spending a bunch of effort and time on the Cascade Layers specification. She additionally wrote a massive ol’ information about them right here at CSS-Tips and talked about them at An Occasion Aside.
What has caught with me most is how massive of a psychological shift that is. The idea isn’t sophisticated, per se. Declare @layer on the prime of the CSS doc, record the layers so as of specificity, then write types in these layers. However for an previous dinosaur like me who has been writing CSS for some time, I’m going to should get used to the truth that Cascade Layers make it attainable for a easy class selector to beat out one thing that often wields a better specificity, like an ID.
🤯
Miriam additionally reminded the room that Cascade Layers are only one software we’ve in our specificity-managing toolbelt, along with selectors that have an effect on specificity (e.g., :is(), :the place(), and :has()).
Oh, and that is an attention-grabbing tidbit. As Miriam walked by way of the historical past of specificity in CSS, she recalled that !necessary was initially designed as a software for customers to override person agent and writer types. However someplace down the road, we’ve adopted it to pressure writer types to the highest. Cascade Layers assist take away the excuse want to make use of !necessary as a result of they supply us the ability to “prioritize layers and shield inheritance.”
That’s fantastically stated, Miriam!
Dave Rupert: Unblocking Your Accessibility Backlog
Think about waking up at some point to lots of of GitHub notifications about reported points in your web site. The place do you even start? Perhaps shut your laptop computer and get a root canal as a substitute? That occurred to Dave! An automatic accessibility audit returned a large pile of errors and assigned them as tickets for Dave to repair.
However he seen a sample after taking an Excel spreadsheet of these points, shifting them to Notion for a greater view, hiding pointless columns, categorizing all the pieces, and displaying the ends in logical teams. Most of the reported points have been the identical situation repeated on a number of pages. Simply because an automatic take a look at returns a handful of errors doesn’t imply they’re all distinctive. That lowered a pleasant chunk of the tickets.
He went on to indicate how — with comparatively little effort — the backlog of points dwindled by almost 50%.
There’s lots to glean there, particularly relating to how we course of and set up our work. The largest takeaway for me is when Dave stated we’ve to emphasise people and interactions over processes and instruments. Instruments just like the one scanning for accessibility errors are useful, however they may not inform all the story. Fairly than take them at their phrases, it’s value asking questions and gaining extra context earlier than diving into the mess.
As a bonus, reorganizing the problems in Notion allowed Dave to group points in a manner that clearly exhibits which impairments his product was actively discriminating in opposition to, giving him higher empathy for these misses and the way to prioritize them.
Another digital session by Hui Jing Chen capped the day, however admittedly, I missed about half of it as a result of I used to be having a hallway dialog. The dialog was value it, although I’m bummed I missed the presentation. I’ll be watching the video of it when it’s revealed!
