Beautiful Code
Posts
🌹 Books and Roses – Beautiful Code #33

🌹 Books and Roses – Beautiful Code #33

No personal updates this week – just a bunch of interesting websites, tools, resources and code snippets for you! I hope you enjoy with it this week.

Marc Taulé
April 24th, 2025

Hey! It’s Marc 👋

How are you?

No personal updates this week, just work, work and more work – just a bunch of interesting websites, tools, resources and code snippets for you! I hope you enjoy with it this week 😊

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

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

😍 Websites

🔨 Tools & Resources

1. Umami

Umami is an open-source, privacy-focused web analytics tool that serves as a lightweight alternative to Google Analytics. It tracks page views, referrers, events, and more—without using cookies or collecting personal data—making it fully GDPR-compliant. With a clean, intuitive interface, all key metrics are displayed on a single dashboard. Umami supports multiple websites, public dashboards, and can be self-hosted using PostgreSQL, MySQL, or MariaDB, with easy deployment via Docker, Vercel, or Supabase. It’s ideal for developers, startups, and creators who want a simple, transparent analytics solution.

👉 Check it out

2. Flexbox Labs

Flexbox Labs is a free, open-source visual playground for building and experimenting with CSS Flexbox layouts. It offers an intuitive interface where you can adjust flex container and item properties—such as direction, wrapping, alignment, and gaps—and see the results in real time. You can add, duplicate, or remove flex items, undo or redo changes, and export the generated HTML and CSS code for use in your projects. The tool also includes pre-built layout templates and supports saving and loading custom layouts. Built with React, TypeScript, Sass, and Framer Motion, Flexbox Labs is ideal for both learning and rapid prototyping.

👉 Check it out

3. What unit

WhatUnit is a free, interactive tool designed to help developers choose the appropriate CSS length unit for their projects. It features a visual flowchart that guides users through decision-making based on specific layout needs, such as responsiveness, scalability, or fixed sizing. Users can navigate the flowchart by clicking and dragging, with zoom functionality available via Ctrl/Cmd + mouse wheel. This resource is particularly useful for those looking to deepen their understanding of CSS units like px, em, rem, %, vh, and vw.

👉 Check it out