🖤 Black Friday – Beautiful Code #59

JSON Fields is an MVP designed for people who feel intimidated by JSON, YAML, PHP, etc., but still need to edit those files quickly and easily, without touching code.

Hey! It’s Marc 👋

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

How are you? I hope your week is going great!
In today’s edition of BeautifulCode, I’ve got a couple of exciting updates for you.

First, I’m sharing a discount for Supasnap.
If you’re not familiar with it, Supasnap is a tool that beautifies your screenshots, making them much more attractive for social media, presentations, or documentation.

For example: every website, resource, and code snippet screenshot you see each week in BeautifulCode is created with Supasnap. In just 2 seconds, you can capture and customize your screenshot 😃
It’s one of my side projects that’s still alive and running — and this week, it’s actually celebrating its 2nd anniversary 🥳

To celebrate, you can get 30% off Supasnap Pro forever.
It’s a one-time payment and you can use it whenever you want. The Pro version lets you use the tool without a watermark, customize it, save unlimited images, and create different Presets.
You can see the main differences here:
https://supasnap.com/#pricing

And if you’re not convinced yet, you can always try the Free Plan, completely free (with a watermark 😊).

If you want to take advantage of the discount, you have until 01/12/2025. Just enter the discount code at checkout.

Remember: it’s valid until 01/12/2025 at 23:59.

The second update is my new side project — and I can finally share all the details with you: JSON Fields!

JSON Fields is an MVP designed for people who feel intimidated by JSON, YAML, PHP, etc., but still need to edit those files quickly and easily, without touching code.

With JSON Fields, you can create or import files (JSON, YAML, PHP…) and edit their content through a visual editor.
It’s perfect for web projects where a non-technical client needs to update text or content on their website. They simply import the file you created for their site, edit the content through forms, export it in the format they need, and send it back to you.
All you have to do is overwrite the original file with the updated one.

For now, JSON Fields is free and doesn’t require registration.
Everything is stored locally in the user’s browser. If you want to use it in another browser, you can export a metadata file and import it elsewhere.

In the future, the plan is to allow optional accounts, cloud storage, using the generated JSON via API or CI, and many other ideas I have in mind.

If you have any questions, feedback, or suggestions, I’d love to hear from you.
I hope these tools help you in your upcoming projects! 😊

That’s all for now! 👋

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

😍 Websites

1. Lando Norris

2. Digilab

3. Ledger Brandbook

🔨 Tools & Resources

1. UVCanvas

UVCanvas is an open-source React component library that lets developers add beautiful shaded and animated canvases to their web projects. It’s designed for high performance and minimal configuration, ideal for backgrounds, wallpapers, or design elements in apps and websites.

2. Cally

Cally is a small, feature-rich calendar component library for developers, offering ready-made calendar UI components that can be easily integrated into web apps.
It’s open-source, simple and handy when you need calendar functionality without building it from scratch.

3. ImageConverter

ImageConverter is a simple, web-based image conversion tool that enables users to quickly convert image files between formats (e.g. PNG, JPG, WebP) directly in the browser — no signup, no uploads, just fast, privacy-respecting conversions.

👉 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. CSS Flags

2. Frosted + Saturared borders

Author: Jhey

3. Lined Shadow

Author: Josh Werner

😂 Humor

OpaCity 🤭 

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