Some Things I Took Away From An Event Apart 2022 in Denver

An Event Apart 2022 in Denver concluded yesterday, and despite missing a couple of days, I attended the final day's sessions – a truly rewarding experience! It was my first conference in years, and the in-person interaction was incredibly refreshing.

My notes from the event follow, organized by speaker. Please note: my handwritten notes are less structured than most, focusing on highlights rather than comprehensive summaries.

Chris Coyier: The Modern Web is Actually Pretty Good

Chris's talk, an expanded version of a previous presentation, delved into container relative units. Combining these with clamp() provides more precise responsiveness, as values are relative to the container, not the viewport. This offers an improvement over using viewport width (vh) units for fluid typography.

For example, instead of:

<code>font-size: clamp(1rem, 1rem + 2vw, 2rem);</code>

Consider using the container query inline-size (cqi) unit:

<code>font-size: clamp(1rem, 1rem + 1cqi, 2rem);</code>

where 1cqi equals 1% of the container's inline size. (See the draft specification for details).

Chris also highlighted the performance advantages of edge computing. Even having read his previous articles on the subject, I gained a deeper understanding of the concept. Globally distributed CDNs efficiently serve assets due to their geographic proximity to users. This extends beyond images to static HTML, CSS, and JavaScript files—the core of the Jamstack approach. However, even dynamic data fetching can be integrated, pre-built, served statically on demand, and delivered with incredible speed from the edge.

Tolu Adegbite: Mastering ARIA for Web Accessibility

Tolu Adegbite's presentation was exceptional! Her comprehensive coverage of WAI-ARIA—roles, states, labeling, descriptions—was invaluable. One key takeaway was improving the accessibility of inline SVG. Because SVG is markup, it's not always recognized as an image. To ensure assistive technology correctly interprets it, use appropriate roles and labels:

Incorrect:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Some Things I Took Away From An Event Apart 2022 in Denver "><svg viewbox="0 0 100 100"></svg>

Correct:

<svg aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera." role="image" viewbox="0 0 100 100"></svg>

Miriam Suzanne: Taming CSS Specificity with Cascade Layers

Miriam Suzanne's talk focused on the Cascade Layers specification (and her accompanying CSS-Tricks guide). The key shift is managing specificity. While the concept—declaring @layer, ordering layers, and writing styles within them—is straightforward, it requires adapting to how layers can alter selector precedence. A simple class selector might now override an ID selector, depending on layer order.

Cascade Layers, alongside selectors like :is(), :where(), and :has(), offer powerful specificity control. Miriam also highlighted how Cascade Layers address the overuse of !important, allowing for prioritization of layers and protection of inheritance.

Dave Rupert: Conquering Your Accessibility Backlog

Dave Rupert shared his experience tackling a massive accessibility audit backlog. By organizing the issues in Notion, he identified recurring problems across multiple pages, significantly reducing the workload. His approach emphasized prioritizing individual issues and understanding the context, rather than solely relying on automated tools. This reorganization also improved his understanding of the impact on users with different impairments, fostering empathy and better prioritization.

I unfortunately missed part of Hui Jing Chen's final session due to a hallway conversation, but I plan to watch the recording when available.

The above is the detailed content of Some Things I Took Away From An Event Apart 2022 in Denver. For more information, please follow other related articles on the PHP Chinese website!