👟 Step by step – Beautiful Code #55

Even if it might not seem like it, I’m still making progress with my new side project. It’s moving slowly because there are a few things I’m not fully convinced about, so I’m figuring things out as I go. When I finish a feature, I let it sit for a few days and then come back to test it with fresh eyes.

Hey! It’s Marc 👋

If you're new here, let me quickly explain what Beautiful Code is all about. 👇

What can I expect from Beautiful Code?
Every week, you'll receive:
😍 3 awesome websites for inspiration
🔨 3 tools and resources that can help grow your products
🤖 3 code snippets ready to be used in your projects
😂 1 meme to add a bit of humor to our world

Even if it might not seem like it, I’m still making progress with my new side project. It’s moving slowly because there are a few things I’m not fully convinced about, so I’m figuring things out as I go. When I finish a feature, I let it sit for a few days and then come back to test it with fresh eyes.

Last week, I decided to rethink the whole project and make it much simpler, so that it can also be used for more things than I initially intended. I’m now building it in a more generic way, and I believe it’ll work for other use cases and audiences too.

At first, I wanted it to be a paid product, but to keep things simple, I’ve decided to make it completely free (for now). Later on, I might add more advanced or premium options. The biggest shift is that, with this new approach, I won’t need a database or server-side resources and everything will happen in the user’s browser and device. That means, at least for now, I won’t be storing any of the content users upload to the platform.

Progress is a bit slow since I’m also working on client projects, but I’m excited to release it soon 🤞 Hopefully by next week, I’ll have made a bit more progress and can show you something!

That’s all for now! Hope you have a great rest of the week!

Before you continue I want to remind you that you can support Beautiful Code buying me a coffee ☕️ I love good coffee! 😍

😍 Websites

1. Messenger

2. Orage Studio

3. 4 ombres Boutons

🔨 Tools & Resources

1. JustGage

JustGage is a JavaScript plugin that lets developers create animated, customizable gauge charts for dashboards and real-time data visualizations. Built on top of the Raphaël vector graphics library, it offers clean, flexible meters that can display dynamic values with smooth transitions. You can control the min/max range, label, colors, and animation speed, making it ideal for web apps that need simple yet effective visual indicators—like performance metrics, health monitors, or progress tracking.

2. Obra Icons

Obra Icons is a thoughtfully designed open-source icon library featuring over 1,000 consistent and minimalist icons optimized for user interfaces. Available in multiple formats—including React and Svelte components, as well as raw SVGs—it’s easy to integrate into any modern front-end stack. The collection covers UI essentials like actions, files, devices, and more, all searchable by keyword. Licensed under MIT, it’s free to use in both personal and commercial projects.

3. ColorMate

ColorMate is a web-based tool designed to help you create beautiful, accessible color palettes and gradients for your digital products. It provides a clean interface for experimenting with hues, contrasts, and combinations, ensuring your design choices are both visually appealing and WCAG-compliant. Whether you're building a design system or just need a quick gradient background, ColorMate helps streamline your color decision process with previews and easy export options.

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs.

1. Heartless

2. Details & Summary

Author: Jhey

3. Card Preloader

Author: Jon Kantner

😂 Humor

And then the client said: I want this done by tomorrow! 🤭 

I hope you enjoy it, and if you like it and want to support me, you can:

  • You can support me by buying me a coffee ☕️

  • Forward it to a friend and invite them to subscribe

  • Share it on your social networks

Or if you just want to say hello, reply to this email or write me on Twitter/X and let's talk!

That's all for today. I hope you enjoyed the content, and see you next week! 👋

Cheers!
Marc