🍔 Are you hungry? – Beautiful Code #9

Hey everyone! It’s Marc 👋

How are you?

I hope your week is going great!

This week, I’ve been trying out Cursor, which, for those who don’t know, is an AI-based IDE that simplifies code creation by using AI models like GPT-4.
I gave it a quick try when it first launched, but didn’t pay it much attention. This week, I gave it another chance, and it’s really impressed me.
It has an autocomplete feature that helps you generate code—it’s like magic, as if it’s reading your mind. You start typing something in a specific file in your project, and the system suggests the code you need, taking your project context into account. Sometimes it misses, but most of the time it’s spot-on, and it really saves you a lot of work.

If you’re a developer and haven’t tried it yet, give it a go and let me know what you think!

Well, after this week’s big discovery, I hope to share new websites, tools, resources, and code that make your life and work easier and more productive 😊

😍 Websites

1. Gelato la Boca

2. Tiger Milk Restaurants

3. Muchacha

🔨 Tools

1. Notocat

Notocat is a platform that transforms your Notion pages into beautiful newsletters. It allows you to write content directly in Notion and send it as responsive emails to your subscribers. Notocat offers features like customizable email designs, detailed analytics, custom domains, and advanced contact segmentation, all aimed at simplifying the newsletter creation and distribution process.

2. Beehiiv

Beehiiv is a comprehensive newsletter platform that enables users to create, grow, and monetize their newsletters. It offers features such as a powerful editor, analytics, referral programs, and monetization options like an ad network and paid subscriptions. In 2023, beehiiv raised $12.5 million in a Series A funding round led by Lightspeed Venture Partners to expand its product offerings and support more writers.

3. Ghost

Ghost is an open-source content management system (CMS) designed for professional publishing. Built on Node.js, it offers a modern, user-friendly interface for creating and managing content, including blogs, newsletters, and membership sites. Ghost provides features like a rich editor, SEO tools, and the ability to send newsletters directly from the platform. Its headless architecture allows developers to use Ghost as a backend, integrating with various front-end frameworks. Users can self-host Ghost or opt for Ghost(Pro), a managed hosting service.

🧰 Resources

1. Turso

Turso is a fully managed database platform built on libSQL, an open-source fork of SQLite. It allows developers to create and manage numerous databases per organization, supporting replication across over 30 global locations or within their own infrastructure. Turso offers features like multi-tenant architecture, native vector search, and edge replication, making it suitable for modern applications requiring low-latency data access and scalability.

2. Inspira UI

Inspira UI is an open-source library designed for Vue and Nuxt developers, offering a collection of beautifully designed, reusable components. Built with shadcn-vue, @vueuse/motion, and TailwindCSS, it simplifies the creation of stunning, animated interfaces. Developers can easily integrate these components into their projects, customizing them to fit specific design needs.

3. LDRS

LDRS is a collection of free, open-source loading animations designed for web projects. Built with HTML, CSS, and SVG, these loaders are implemented as web components, ensuring compatibility across various frameworks and platforms. Developers can easily integrate them into their projects by installing the package via npm and importing the desired loader. Customization options include adjusting size, color, and animation speed to align with specific design requirements.

🤖 Code and snippets

Here you will find code snippets from CodePen that you can use in your projects and adapt to your needs. As I mentioned in the introduction, this week is all about examples with different GSAP plugins.

1. Cooking Letters

An effect made with HTML and CSS, utilizing the Splitting library to separate letters within words, creating a visually engaging animated text effect.
Author: Jhey

2. Rainbow Creator Button 

This codepen demonstrates a rainbow effect created purely with CSS, using gradients, filters, and transitions to achieve a smooth, colorful animation.
Author: Simon Goellner

3. Star Hover

a fun hover effect that displays stars when hovering over a button, adding a playful, animated touch with CSS, HTML and SVGs.
Author: Jenny

😂 Humor

I have no idea… 🙄

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