Let me unlock your CSS brain with a few of my lightbulb moments around custom properties and numeric values.

Consider this angled section which has become a common element of today's web designs.

Before continuing - think about how you might create it in a scalable way. There are several ways to create the angled shape, but we're going to use `clip-path` along with the well-supported `polygon()` basic shape function.

`clip-path` behaves like `overflow: hidden` for parts of the element beyond the path.

✅ Support: caniuse.com/mdn-css_types_…

🟢 An Aside about HTML <aside>

When HTML5 was the new kid in town, multi-sidebar blogs were also very popular. And the <aside> element seemed like the right choice for sidebars - but is it?

Let's learn a bit more about <aside>! In terms of assistive technology, an <aside> is announced with the implicit role of "complementary".

In terms of semantics, an <aside> cannot live within <main>.

For example - it's not going to be the right choice for ad content that lives within a <main>'s <article>.

👩‍🏫 Quick thread on keyboard #a11y

If an interaction relies on a mouse-initiated action, it needs to be keyboard accessible too.

This means it may need to respond to Space and/or Enter as a trigger (hint: you get that for free with <button>). If it opens something, it may need to close with Escape.

If it's scrollable, it needs to respond to Up/Down arrow keys.

If it's a group of related options (like autocomplete or tabs), it may need to respond to Up/Down or Left/Right arrow keys (search phrase: roving tabindex).

🧵My favorite tools to aid in checking color contrast

Desktop tool:
- Mac-only color picker: Contraste App: contrasteapp.com

Directly in DevTools during development
- available in Chrome, Firefox, Edge, and Safari
- Firefox is best for text over gradients Browser extensions
- WAVE and aXe check the whole page for a11y items including contrast
- For a color picker extension in Chrome/Edge, try: Colour Contrast Checker