🎯 Unlock the Magic of Popover Toggletips & Anchor Positioning!
Tags: css, ux, portfolio, webdev
Published: 2024-06-12 23:00:00


**Hey** 👋 I hope you're having a great week so far! Here's a quick look at this weeks digest:

🛠️ CSS Gap – A game-changer!  
🤔 Why is front-end so complicated?  
🚀 UX portfolio tips – Make the first cut!  

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)

---

## 🧑‍💻 Dev


[**Progressively Enhanced Popover Toggletips**](https://css-irl.info/progressively-enhanced-popover-toggletips/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page.


[**The Gap**](https://ishadeed.com/article/the-gap/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

An exploration of the pain points that CSS gap solves.



[**Why is front-end development so complicated?**](https://dev.to/shehzadhussain/why-is-front-end-development-so-complicated-3g8o?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Many developers find modern front-end frameworks hard to use. This is because technologies change quickly, and web apps need to be: fast, interactive, easy to maintain


[**Masonry and reading order**](https://rachelandrew.co.uk/archives/2024/05/26/masonry-and-reading-order/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

CSS masonry is an example of an automatic layout method, where the developer of the site doesn’t have control over where the items end up



[**A rare use case for em units**](https://bradfrost.com/blog/post/a-rare-use-case-for-em-units/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

text-decoration-offset is a good use case for em units. Most of the time we favor rems over ems.

### **💭 Fun Fact**

******The "em" Unit's Typographic Roots****** - The  `em`  unit in CSS has its origins in typography, where it was traditionally used to measure the width of the letter "M" in typesetting. This unit has evolved in web design to represent the size of the font in a given context, making it a relative unit that adjusts based on the font size of its parent element.

## 🎨 Design



[**Only 30 seconds to reject your portfolio?**](https://uxdesign.cc/only-30-seconds-to-reject-your-portfolio-8cb14ac70674?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Common mistakes designers should avoid to make the first cut in UX hiring.



[**Is Canva Getting Good?**](https://johannesippen.com/2024/canva-goes-professional/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Canva. if you talk to a professional designer about Canva, the first reaction is usually an eye roll, followed by a joke about Word Art (Anyone remember Office 2000?).



[**Presenting UX Research And Design To Stakeholders: The Power Of Persuasion**](https://www.smashingmagazine.com/2024/06/presenting-ux-research-design-stakeholders/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

There’s more to achieving good UX than research and design. We need to effectively communicate our ideas to gain buy-in from key stakeholders.

## 🗓️ Upcoming Events

Events coming up this this month

### [🤓 thegeekconf 2024](https://www.thegeekconf.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

_Remote • Berlin_

Experience the best of modern front end and React Native at thegeekconf. Join 500+ attendees with two tracks of insightful talks by seasoned experts and current trendsetters. Happening .

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

### [🧠 UXPA International Conference](https://uxpa2024.org/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Fort Lauderdale, FL

Meet with fellow UX professionals from around the world for 4 days of amazing content, camaraderie, and collaboration this June 2024 in Ft. Lauderdale, Florida!

[See event →](https://uxpa2024.org/?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.


[**Get smarter about Tech in 5 min**](https://go.unicornclub.dev/techpresso)

Get the most important tech news, tools and insights. Join 90,000+ early adopters staying ahead of the curve, for free.



[**Nomad for Less**](https://go.unicornclub.dev/nomad-for-less)

Become a budget-savvy globetrotter with our insider insights. Join 40,000+ digital nomads and start exploring for less!



  

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

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