✨ CSS Evolves - Discover Inline if() & CSS Flow Charts
Tags: css, ux, webdev, javascript
Published: 2024-07-03 17:00:00


**Hey** 👋 This weeks newsletter is packed full of great reads and resources here's a quick look:

🔤 Beyond Monospace  
👁️ Recognizing Dark Patterns  
⚙️ JavaScript on Steroids  

Enjoy & stay inspired 👋  - Adam at Unicorn Club.

---
## 📬 Want More? Subscribe to Our Newsletter!

Get the latest edition delivered straight to your inbox every week. By subscribing, you'll:

-   **Receive the newsletter earlier**  than everyone else.
-   **Access exclusive content**  not available to non-subscribers.
-   Stay updated with the latest trends in design, coding, and innovation.

**Don't miss out!**  Click the link below to subscribe and be part of our growing community of front-end developers and UX/UI designers.

🔗  [Subscribe Now - It's Free!](https://unicornclub.dev/ref=devto)

---

Sponsored by  [Webflow](https://go.unicornclub.dev/webflow-no-code)

## [Take control of HTML5, CSS3, and JavaScript in a completely visual canvas](https://go.unicornclub.dev/webflow-no-code)

[![](https://unicornclub.dev/wp-content/uploads/2024/06/designer.png)](https://go.unicornclub.dev/webflow-no-code)

Let Webflow translate your design into clean, semantic code that’s ready to publish to the web, or hand off to developers.

[Get started — it's free](https://go.unicornclub.dev/webflow-no-code)

## 🌅 CSS


[**Opinions for Writing Good CSS**](https://andrewwalpole.com/blog/opinions-for-writing-good-css/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

While it’s easy to learn the parts: selectors, properties, etc. It’s much tougher to practically compose multiple ideas together to make something new or more complex happen.



[**Inline conditionals in CSS?**](https://lea.verou.me/blog/2024/css-conditionals/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS.



[**Flow Charts with CSS Anchor Positioning**](https://coryrylan.com/blog/flow-charts-with-css-anchor-positioning?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

With the introduction of the CSS Anchor Position API in Chrome 125, it's never been easier to position an element relative to another element.



[**Learn Grid Now, Container Queries Can Wait**](https://www.oddbird.net/2024/06/13/css-layout/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

---

### **💭 Fun Fact**

******The Birth of Courier****** - One of the most iconic monospaced fonts, Courier, was designed by Howard "Bud" Kettler in the early 1950s. Originally created for IBM's typewriters, Courier has become a staple in the digital age for its clean, typewriter-like appearance.

---

## 🔘 Design + UX



[**Dark Patterns Hall of Shame**](https://hallofshame.design/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Protect your online privacy and rights by learning about dark patterns and unethical designs. Stay informed and avoid manipulation in the digital world.



[**Beyond monospace: the search for the perfect coding font**](https://evilmartians.com/chronicles/beyond-monospace-the-search-for-the-perfect-coding-font?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

What makes a font suitable for writing code? Back in 2021, when I started working on Martian Mono—the Evil Martians font for programming — I naively believed it was just a matter of making all characters the same width, and maybe including some code ligatures.

## 🟨 JS



[**Advanced JavaScript Performance Optimization: Techniques and Patterns**](https://dev.to/parthchovatiya/advanced-javascript-performance-optimization-techniques-and-patterns-26g0?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

This post dives into advanced techniques and patterns to elevate your JavaScript performance and ensure your applications run smoothly even under heavy loads.

## 🗓️ Upcoming Events

Check out these events

### [🧠 Turing Fest | Tech Community, Events, & News](https://turingfest.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Edinburgh, UK_

Where product, growth, & leadership connect: Connecting founders and leaders in engineering, product, & growth to build better tech. 9-10 July.

[See event →](https://turingfest.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

### [🔘 Hatch Conference](https://www.hatchconference.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Remote • Berlin_

The event where experienced UX & Design Professionals in Europe meet to learn, get inspired and connect. 4-6 September

[See event →](https://www.hatchconference.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

### [💻 Middlesbrough Front End Conference 2024](https://www.middlesbroughfe.co.uk/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Middlesbrough, UK_

Join us for an action packed day of Front End discussion, demonstrations and networking. 17 July.

[See event →](https://www.middlesbroughfe.co.uk/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

## 🔥 Promoted Links

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



[**What Current & Future Engineering Leaders Read.**](https://go.unicornclub.dev/pointer)

Handpicked articles summarized into a 5‑minute read. Join 35,000 subscribers for one issue every Tuesday & Friday.


[**Be a leader. Outperform the competition 🚀**](https://go.unicornclub.dev/open-source-ceo)

Join 30,000+ weekly readers at Google, Canva, Stripe, TikTok, Sequoia and more. Come learn with us!


#### 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/125031340327307057)

📨 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_