๐Ÿ’ก New Idea โ€“ Beautiful Code #38

A few weeks ago, I came across a problem in a project. I had encountered it before, but I had always solved it in a rather clumsy and inefficient way. This time, I decided to dig a bit deeper and see if there was a tool that could help me solve it better.

Hey! Itโ€™s Marc ๐Ÿ‘‹

How are you?

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

A few weeks ago, I came across a problem in a project. I had encountered it before, but I had always solved it in a rather clumsy and inefficient way. This time, I decided to dig a bit deeper and see if there was a tool that could help me solve it better.

I found several, but they were all too complexโ€”packed with features that, from my point of view, were excessive for what I actually needed. That made me think: what if I could create the ideal tool for this specific case myself?

I only needed 3 or 4 basic features, but implemented well, in a simple and fast tool. So, I started designing and coding it. I'm still working on it, but I hope to have it ready soon so I can show it to you.

If you're curious and want to know more, feel free to reach outโ€”Iโ€™d be happy to chat!

Thatโ€™s all for now. Have a great week! ๐Ÿ˜Š

Before we continue I want to remind you that you can support Beautiful Code buying me a coffee โ˜•๏ธ I love good coffee! ๐Ÿ˜

๐Ÿ˜ Websites

1. Anime.js

2. M.Fisher

3. Jitter

๐Ÿ”จ Tools & Resources

1. BrowserStack

โ€‹Warp is a modern terminal built in Rust that enhances developer productivity with features like an IDE-style input editor, AI-powered command suggestions, and team collaboration tools. It supports natural language inputs, command blocks, and workflows, making terminal usage faster and more intuitive. Available for macOS, Linux, and Windows.

2. Void Editor

โ€‹9ui is a free, open-source UI component library built with Base UI and Tailwind CSS. It offers a collection of customizable components that can be easily copied and pasted into your projects. Designed for simplicity and flexibility, 9ui is ideal for developers looking to build consistent design systems or prototypes efficiently. The library includes examples like AI chat interfaces, mail clients, and calendars, making it suitable for modern web applications.

3. Prompt Kit

โ€‹โ€‹WebTUI is a modular CSS library that brings the aesthetics of terminal user interfaces to the web. It offers a collection of components like buttons, checkboxes, inputs, and popovers, all styled to emulate the look and feel of terminal applications. WebTUI supports theming with options such as Catppuccin, Gruvbox, and Nord, and is compatible with frameworks like Next.js, Vite, and Astro. Designed for developers seeking a terminal-inspired design system for the browser, WebTUI provides comprehensive documentation and examples to facilitate integration into web projects

๐Ÿค– Code and snippets

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

1. Toast Notification Playground

Author: Matt Cannon

2. Retro 3D block shadow type

Author: Tom Hermans

3. Trendy UI with Clip-path and Grid

Author: Dan Denney

๐Ÿ˜‚ Humor

Vibe Coding and Vibe Debugging ๐Ÿ’€ 

.

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