🎩 Console Magic - Render CSS, SVGs & HTML in Your Console
Tags: webdev, ui, css, beginners
Published: 2024-02-08 13:43:00


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

✨ CSS Blurry Shimmer Effect & Beyond  
🚀 7 CSS Blunders to Avoid in 2024  
🎨 Daily UI Challenges

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

---

Sponsored by  [Techpresso](https://go.unicornclub.dev/techpresso)

## [Keep up with AI and Tech in 5 mins](https://go.unicornclub.dev/techpresso)

[![](http://unicornclub.dev/wp-content/uploads/2024/02/64da7e3be81c3342557ee161_3.jpg)](https://go.unicornclub.dev/techpresso)

Get the most important AI and tech news in a free daily email. Join  **50,000+**  professionals from  **OpenAI, Meta, Google...**

[Join for Free](https://go.unicornclub.dev/techpresso)

---

### 🧑‍💻 Dev

[**console.delight**](https://frontendmasters.com/blog/console-delight/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Did you know you could render (limited) CSS, SVGs, and even HTML in it?!? I didn’t!

[**CSS Blurry Shimmer Effect**](https://www.smashingmagazine.com/2024/01/css-blurry-shimmer-effect/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Box shadows are fairly straightforward in CSS: declare the box-shadow property, set the shadow offsets, define the spread, and give it a color.

[**7 Common CSS Mistakes Junior Frontend Developers Make**](https://dev.to/_ndeyefatoudiop/7-common-css-mistakes-junior-frontend-developers-make-and-how-to-fix-them-5f6p?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

And how to fix them...

[**5 CSS snippets every front-end developer should know in 2024**](https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I believe every front-end developer should know :has() is more than a "parent selector", the how and why of a subgrid, how to nest with built-in CSS syntax and more.

[**Big, beautiful, beefy focus states with :focus-visible**](https://daverupert.com/2024/01/focus-visible-love/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

One thing I love about the new’ish :focus-visible pseudo-state is that it allows me to create bigger, bolder, and more obvious focus states.

### 🎨 Design

[**How should designers code?**](https://dylanatsmith.com/wrote/how-should-designers-code?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

You can be a successful designer either way, but I personally believe that software is never built with more attention to detail than when it’s coded by the person who designed it.

[**Master UI/UX Design with Daily UI Challenges**](https://www.uichallenges.design/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Advance your UI/UX skills with daily challenges, achievement streaks, and personalized feedback coming soon.

[**Improve Your Logo Design Skills**](https://melindalivsey.com/journal/logo-design-golden-ratio?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

So what makes the Master's logos so timeless? So solid? So beautiful? And how can I learn from their work?

### 🔥 Promoted Links

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

[**TLDR - Keep up with Tech in 5 minutes**](https://go.unicornclub.dev/tldr-newsletter)

Get the most important tech news in a free daily email. Read by +1,250,000 software engineers and tech workers.