⚡️ Web Performance Snippets


Open-source upvotes lib • Tears of the Kingdom UI issues and more...

view in browser

Hope you're having a great day 🥳 Here's a little of what we have this week:

🎨 CSS only floating labels
🔓 Open-source upvotes lib
🎮 Tears of the Kingdom UI issues

A huge welcome to all our new subscribers this week, happy to have you onboard.

This week is absolutely jam-packed with goodies. Enjoy ✌️ - Adam at Unicorn Club.

Brought to you by Brilliant Sponsor

AI is getting smarter. Are you?

Brilliant is the app that boosts your analytical skills in minutes a day with bite-size lessons in math, logic, data science, CS, and beyond. Thousands of visual, interactive lessons sharpen your mind while helping you master the concepts behind AI, neural networks, computer logic, and more.

Join 10M+ people around the world and try Brilliant with a 30-day free trial. Plus, Unicorn Club readers get 20% off an annual premium subscription when you decide to level up.

Try 30-day free trial

🧑‍💻 CSS

Modern CSS Layout is Awesome

If you want to get up to speed on what’s new in CSS layout, this is a good place to start.

New Viewport Units

We have been using CSS viewport units since 2012. They are useful to help us in sizing elements based on the viewport width or height.

Solved: Tricky Floating Image Alignment

If you want to pair an image alongside some text content in CSS, you have a few options.

CSS only floating labels

I recently learned about the pseudo CSS class :placeholder-shown. Obviously, it is a class that is added only when input placeholder is shown.

🧩 JS

Clickvote: Open-source upvotes, likes, and reviews to any context

I built an open-source app to add upvote, like, and reviews anywhere. And while it sounds easy, I kind of broke my head on the architecture. Let's talk about it.

How to create a digital Clock using HTML, CSS and Javascript?

In this article, we will learn about building a Clock using HTML, CSS, and Javascript. By building the clock we learn about javascript Date object.

How to Use the JavaScript Fullscreen API

The Fullscreen API has functionalities that let you display your elements in fullscreen mode. Without it, you'd need to get your hands dirty with some long lines of CSS and JavaScript code.

🎨 Design

Tears of the Kingdom: how Nintendo improved (and ignored) UI issues

The latest Legend of Zelda title has both pleased and pissed off gamers when addressing certain user interface issues.

How to Write Good Labels

The latest Legend of Zelda title has both pleased and pissed off gamers when addressing certain user interface issues.

🔥 Promoted Links

Share with 2,000+ readers, book a classified ad.

The Website Care Plan Welcome Packet

Offering WordPress Care Plans? Help clients understand your services & get maximum value with our plan. Customizable 16-pg Google Slides/Canva template. Save 25% with UC25.