⏳ Countdown – Beautiful Code #15

Only two weeks left until the end of the year, and just two newsletters remaining (this one and next week’s). So far, creating this newsletter has been an enriching experience, as every week I discover new tools and resources that could help me in future projects. Additionally, reviewing and searching for cool websites opens my mind and sparks ideas when designing and developing websites.

Hey! It’s Marc 👋

Only two weeks left until the end of the year, and just two newsletters remaining (this one and next week’s). So far, creating this newsletter has been an enriching experience, as every week I discover new tools and resources that could help me in future projects. Additionally, reviewing and searching for cool websites opens my mind and sparks ideas when designing and developing websites.

I hope it’s also helping you—that’s the goal of Beautiful Code 😊 

With that said, let’s dive into this week’s content!

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. Retronova

2. Crftd

3. Other Life

🔨 Tools & Resources

1. Number Flow

NumberFlow is a lightweight, cross-framework component that enables you to transition, format, and localize numbers in your web applications. Compatible with Svelte, React, and Vue, this component handles the intricate details of number formatting and localization.

2. Share URL

Share URL is a JavaScript utility that facilitates sharing web content through the native Web Share API, clipboard copying, or direct links to social media platforms. It enhances user engagement by providing multiple sharing options, including support for Facebook, Twitter, Mastodon, LinkedIn, Reddit, and WhatsApp. The tool is adaptable to various user interfaces and can be integrated into projects via npm.

3. Database.build

Database.build is an in-browser PostgreSQL sandbox enhanced with AI assistance, allowing users to create and manage Postgres databases directly in their browsers. It offers features like natural language interaction for database creation, drag-and-drop CSV imports, and the ability to generate reports and charts. The platform utilizes PGlite, a WebAssembly build of Postgres, enabling full database functionality without the need for server-side components.

Additionally, Database.build supports integration with user-provided Large Language Models (LLMs) via OpenAI-compatible APIs, offering flexibility in AI model selection.

🤖 Code and snippets

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

1. Text Illumination

A text lighting effect created with CSS.
Author: Rafa

2. Mouse hold

An effect that works on hover and when clicking without releasing the mouse button. It's made with Three.js, Tween, and a Hex Grid.
Author: Alinaki

3. Custom menu with GSAP

A super cool menu ready to use in your projects, made with GSAP.
Author: Osmo

😂 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