🛠️ HTML First - Simpler, Faster, Better Web Development
Tags: html, webdev, css, ui
Published: 2023-11-23 13:00:00

**Hey everyone** ✌️ Here's a quick look at this week's newsletter:

🌈 Switch Themes Like Magic - CSS Variables  
📏 Why px Reigns Supreme for Margins & Padding  
🌟 Creating Accessible UI Animations

Enjoy this week's edition 👋 - Adam at Unicorn Club.  

___

**Join 2,000+ People. Every Wednesday.**

**Carefully curated newsletter for developers, designers, and makers. 100% Free.**
 
[**Subscribe Today**](https://unicornclub.dev/)

___ 


Sponsored by  [*Vue School*](https://go.unicornclub.dev/vueschool)

## [The Killer Black Friday Deal for Vue Developers](https://go.unicornclub.dev/vueschool)

[![](http://unicornclub.dev/wp-content/uploads/2023/11/BF-UnicornDev-Image.jpg)](https://go.unicornclub.dev/vueschool)

Get the Ultimate Vue Bundle! All the courses you need to master the Vue.js ecosystem PLUS the certificate to prove it! Build scalable Vue.js apps knowing all the best practices from Vue.js experts and the Core Team.

Get access to:

-   1,050 lessons
-   Nuxt, Pinia, & Vue masterclasses
-   Official Vue.js Certification bundle

Save 64% with this Killer Deal!

[**Save 64%, Buy now!**](https://go.unicornclub.dev/vueschool)

### 🖌️ CSS

[**When to use CSS text-wrap: balance; vs text-wrap: pretty;**](https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

There is a limit on the number of lines that text-wrap: balance; will apply to but it is dependent on how many lines there are based on the width of your text.

[**How to use CSS variables to create amazing theme transitions**](https://dev.to/cataon/how-to-use-css-variables-to-create-amazing-theme-transitions-1po9?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

They are a great out-of-the-box tool that enables you to write cleaner and more reusable styles.

[**Why You Should Use px Units for margin, padding, & Other Spacing Techniques**](https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

When users increase their text size, they're not trying to make the space around text bigger.

### 🎨 Design

[**Creating Accessible UI Animations**](https://www.smashingmagazine.com/2023/11/creating-accessible-ui-animations/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Animation and accessibility are often seen as two separate powers at odds with one another.

### 🧑‍💻 HTML

[**HTML First**](https://html-first.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable

[**HTML Web Components**](https://blog.jim-nielsen.com/2023/html-web-components/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I think the word “component” in “web components” confused a lot of people — at least it did me.

### 🕸️ Web

[**Tilt-Shift Blur Effect**](https://codepen.io/wakana-k/pen/KKJgQjX?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

A fun CodePen to create a tilt-shift effect.

[**0 KB Social Media Embeds**](https://chriscoyier.net/2023/11/01/0-kb-social-media-embeds/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The iframe for a Mastodon embed is very big, the resources aren’t cached across instances.

### 🔥 Promoted Links

_Share with 2,000+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._

[**React Day Berlin - 10% off**](https://go.unicornclub.dev/react-day-berlin)

Join us to enjoy in-depth talks, career-boosting workshops & an exciting party. Use code unicornclub10 for 10% off hybrid tickets!

#### Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

🚀 [Forward to a friend](https://preview.mailerlite.io/preview/146509/emails/105358119900546371)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_