✨ Improving – Beautiful Code #13

This week, you’ll notice some new things in the newsletter.One of them was already implemented in the previous newsletter by adding a “Check it out” button. I believe this makes it clearer that the websites, resources, tools, and code snippets have links to access them.

Author

Marc Taulé
December 5th, 2024

Hey everyone! It’s Marc 👋

This week, you’ll notice some new things in the newsletter.

One of them was already implemented in the previous newsletter by adding a “Check it out” button. I believe this makes it clearer that the websites, resources, tools, and code snippets have links to access them.

The next change, after thinking about it for days, is that I’ve decided to modify the newsletter structure by combining the Tools and Resources sections into one.
Many times, I come across interesting tools or resources and struggle to decide which section to place them in. Some of them are tools that create resources or resources that function as tools, so it’s not always clear whether they belong in one category or the other. In the end, the concept of resources can be very broad and include tools as well.

Any suggestions for improvements you think I could make are more than welcome :)

That’s all for now. Have a great end of the week!

Do you know any websites, tools, resources, or code snippets that could be featured on Beautiful Code? Send them to me! 👇
https://tally.so/r/mRJRGP

😍 Websites

1. The Line

2. Animal Futures

3. Vazzi

🔨 Tools & Resources

1. SVGL

Svgl is an open-source library offering a curated collection of SVG logos for various technologies and brands. Built with SvelteKit and Tailwind CSS, it provides an intuitive interface for browsing and downloading SVG assets. Developers can integrate these logos into their projects seamlessly, and the platform supports extensions for tools like Figma and Visual Studio Code, enhancing workflow efficiency.

2. Flexolab

Flexbox Labs is a visual tool for creating and experimenting with CSS Flexbox layouts. It provides live previews, customizable settings, and the ability to export HTML and CSS, making it easy to design responsive layouts interactively.

3. Formity

Formity is a React library that simplifies the creation of dynamic, multi-step forms using JSON. It enables developers to build interactive forms where each step adapts based on user responses, incorporating conditions, loops, variables, and operators for advanced functionality. Forms are defined in JSON, allowing for easy storage and retrieval from files or databases. Formity integrates with React Hook Form and Expry, providing a flexible and efficient form-building experience.

🤖 Code and snippets

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

1. Counter

An animation for counters, based on boxes animated with CSS.
Author: Vineeth.TR

2. Engine Button

A button that simulates a power switch. Fully made with CSS, with JavaScript used for activation.
Author: Robert Traichle

3. Using ImageMagick

This isn’t exactly a code snippet, but rather an explanation of how to install and use ImageMagick locally.
ImageMagick is a powerful open-source software suite used for creating, editing, converting, and processing bitmap images. It supports a wide range of image formats, including JPEG, PNG, GIF, TIFF, and many others.
Author: Peter Benoit

😂 Humor

Sorry, my backend developer friends 🤭

.

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