🕯️ Blackout – Beautiful Code #34

Hey! It’s Marc 👋

How are you?

This week has been short… and quite strange.
In case you hadn’t heard, last Monday at 12:33 pm, there was a total power and internet outage across the entire Iberian Peninsula. I was in the middle of a video call with a client when suddenly, everything went dark. At first, I thought it was just my place, but the circuit breakers were fine. I checked the hallway… nothing. Total darkness.

Not wanting to keep the client waiting, I grabbed my laptop and phone and headed out to find a café with a connection. On the way, I ran into several neighbors—everyone was without power, without internet… and, most critically, without mobile service. We couldn’t even make calls or look anything up.

And that’s how it stayed the whole day. Power came back around 8 pm, but internet didn’t return until 10:30 pm, and mobile coverage not until Tuesday morning.

It was a weird, almost dystopian kind of day. People were out in the streets and in the squares, like during the pandemic… but in reverse.
We still don’t really know what happened. There’s talk of cyberattacks, weather anomalies… Hopefully we’ll get answers soon.

One thing’s for sure: April 28 is now marked on the calendar.
Where were you that day? 🤔

If you're new here, let me quickly explain what Beautiful Code is all about. 👇

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

😍 Websites

1. Quechua Lookbook 2025

👉 Check it out

2. Ferrari F1 Driver Charles Leclerc

👉 Check it out

3. ICG Gallery

👉 Check it out

🔨 Tools & Resources

1. Drag and Drop

​FormKit Drag and Drop is a lightweight, framework-agnostic JavaScript library that adds drag-and-drop functionality using a data-first approach. It works seamlessly with frameworks like Vue, React, and Svelte, and supports sortable lists, item transfers, and custom plugins—all in just ~4KB.

👉 Check it out

2. RunSQL

​RunSQL is a free, cloud-based SQL playground designed for developers and data professionals to create, test, and share SQL queries without the need for local database setup. It supports PostgreSQL, MySQL, and SQL Server, allowing users to define schemas using DBML, import data via CSV or a spreadsheet-like interface, and execute queries instantly. RunSQL also facilitates collaboration by enabling users to share entire SQL environments—including schema, data, and queries—through a single link, making it ideal for team debugging, interviews, and learning.​

👉 Check it out

3. Stepperize

​​Stepperize is a lightweight and type-safe JavaScript library that helps you build multi-step workflows or wizards in web applications. It’s UI-agnostic and framework-compatible—working with React, Vue, Svelte, Solid, and Shadcn UI—making it easy to integrate into any project. Built with TypeScript, it provides simple functions like defineStepper and useStepper to manage steps, navigation, and state. Stepperize supports conditional rendering, state persistence, and works well with form libraries like React Hook Form.

👉 Check it out

🤖 Code and snippets

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

1. Animated border gradient

Author: Ana Tudor

👉 Check it out

2. Multilayer masking

Author: Jhey

👉 Check it out

3. Avatar indicator

Author: Simon Goellner

👉 Check it out

😂 Humor

.hangar{ 
   overflow: hidden; 
   margin-left: -9999px; 
}

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