Don't mess with zooming on a website.
Don't mess with scrolling.
Don't mess with default cursors.
Don't mess with the default Tab order.
Don't mess with copy and paste.
Don't mess with right click.
Don't mess with the back button in the browser.
Thank you.

The next element in my series of unofficial guides to HTML elements is `<aside>`. Enjoy?

https://heydonworks.com/article/the-aside-element/

Appreciate the inside look into recent CSS Working Group and browser team work from @mia. https://www.oddbird.net/2024/08/13/csswg-08/

This is "the news" for me. The ultimate morning coffee readin' stuff.

rad Firefox Devtools feature
#CSS clip-path GUI

👀 edit any clip-path shape visually
🖱️ double click to add a point to a polygon

Microsoft: we shall buy npm and host these massive assets with trillions of requests in perpetuity for free.

Google: we must shut our link shortener, for it is too much for us to bear. bring onto us our fainting couch.

Shits weird that’s all I’m saying it’s weird now.

💡 CSS Tip!

Stop defining your variables inside :root!

Use the @​property instead and create "Typed CSS Variables"
✅ Easy to debug using Dev tools
✅ Implicit data validation
✅ Can be animated if the type allows it
✅ Available globally with a default value

Online Version: https://css-tip.com/typed-variables/

#CSS #HTML

If you use figma you are going to want to know this: next month it will start to use your designs to train AI. This feature will be *on by default* even for professional users. 🤯

If you have sensitive client data in your Figma mockups, you might want to stop Figma from training AI models using your content. Here's how:
- Go into your organisation Admin
- Go into the Settings tab
- Scroll to the bottom and uncheck the Content training feature

To be fair, I would uncheck this even without sensitive data. I'm not a big fan of my work getting used to train things, without my explicit consent. Because, yes, this is checked by default.

This is great advice: Write Alt Text Like You’re Talking To A Friend.

https://cloudfour.com/thinks/write-alt-text-like-youre-talking-to-a-friend/ #a11y #accessibility #altText

Another bizarre pattern I keep seeing a lot of is having multiple skip links to different parts of the page. Total overkill. If you actually use headings, there's no real need.

Me: "And to center the content vertically, you can just apply `align-items: center`"
Them: "..."
Me: "Of course, if you want to override this behaviour for any one element, you can apply an alternate `align-self` value directly."
Them: "What the hell kind of sex therapist are you??"
Me: "..."
Them: "..."
Me: "Ah, I think I see what has happened."

Reading the accessibility posts on CSS-tricks feels like torture. It almost physically hurts. 😣

The amount of misinformation being spread is insane. And the worst part is that the blog's previous popularity is helping spread this misinformation. We seriously need an intervention at this point.

When the tech FOMO hits you this stat never gets old.

https://blog.jquery.com/2024/04/17/upgrading-jquery-working-towards-a-healthy-web/

📝 Testing HTML With Modern CSS https://heydonworks.com/article/testing-html-with-modern-css/

(The last time I addressed this topic was circa 2016. It's amazing what you can write selectors for these days. Plus we have custom properties!)

#CSS #a11y

Front-end development’s identity crisis
🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/

#CSS by @chriscoyier
- Container Queries (Size & Styles)
- Container Units
- :has()
- View Transitions
- Nesting
- Scroll-Driven Animations
- Anchor Positioning
- Scoping
- Cascade Layers
- P3 Colors
- Color Mixing
- Margin Trim
- Text Wrapping
- Subgrid

https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/

📝 What Is Utility-First CSS?

https://heydonworks.com/article/what-is-utility-first-css/

(this was going to be a video, but it got pretty long, plus I think there's a small chance this could appear high in organic search if shared enough)

Developers before and after... Barbie edition...

Figma
is
Awes

#css

God grant me the serenity to render HTML on the client because it’s better in that situation, render HTML on the server because it’s better in that situation, and the wisdom to know the difference.