🎁 Black Friday – Beautiful Code #12

Hey everyone! It’s Marc 👋

This past week, Supasnap turned 1 year old. Time flies so fast! 😱

If you’d like to know a bit about how the idea came about, how the early days went, and how I got my first clients, here’s an article from the newsletter The Open Projects where I shared my experience with the project: https://www.theopenprojects.io/marc-taule-supasnap/

To celebrate the anniversary—and since we’re in the middle of Black Friday—I’m sharing a discount code for anyone interested. When you make a purchase, you can enter the code “BLACKFRIDAY2024” to get 30% off the Supasnap Pro license. This code will be valid until 7th of December.

For those who don’t know, Supasnap is my side project and it is an online tool (now also available as an app for Windows and MacOS) that lets you take screenshots and customize them by adding background images, colors, shadows, rounded borders, and more—all in less than 10 seconds. As an example, all the images in this newsletter were made with Supasnap 😏

That’s all for now. Have a nice Black Friday!

😍 Websites

1. Brainsave

👉 Check it out

2. Kota

👉 Check it out

3. Chronicles

👉 Check it out

🔨 Tools

1. Omatsuri

Omatsuri is a free, open-source progressive web app with tools for frontend developers, such as a CSS Triangle Generator, Gradient Generator, SVG Compressor, and Base64 Encoder. It runs entirely in the browser, ensuring privacy and supporting offline use.

👉 Check it out

2. Security Headers

Security Headers is a free online tool that analyzes the HTTP response headers of your website to assess its security posture. By scanning your site's headers, it identifies missing or misconfigured security headers that could expose vulnerabilities. The tool provides a grade from A+ to F, offering insights into areas needing improvement. It's part of Probely, a cybersecurity company specializing in web application testing.

👉 Check it out

3. Slimify

Slimify is a free online tool designed to compress and optimize images without compromising quality. By reducing image file sizes, it enhances website loading times, user experience, and SEO performance. Users can upload images in formats like JPEG, PNG, and WEBP, with a maximum of 10 files per session. The platform processes the images swiftly, allowing for immediate download of the optimized versions.

👉 Check it out

🧰 Resources

1. Humaaans

Humaaans is a free, open-source illustration library created by designer Pablo Stanley. It allows users to mix and match various elements—such as hairstyles, clothing, and poses—to create diverse human characters. The library is available in formats compatible with design tools like Sketch, Figma, InVision Studio, and Adobe XD. Users can customize and position elements to fit their design needs, making it a versatile resource for enhancing projects with personalized illustrations.

👉 Check it out

2. Svg Loaders

MageCDN offers a collection of over 100 open-source SVG loading icons, also known as spinners or throbbers, to visually indicate content loading or data fetching. These animations are curated from various sources and are all licensed under the MIT License, allowing for unrestricted commercial use without attribution.

👉 Check it out

3. Icon Buddy

Iconbuddy is a search engine that allows you to search, download, customize, and edit over 200,000 open-source SVG icons for free. It offers a vast collection of icons from various categories and styles, making it a valuable resource for designers and developers.

👉 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. Colour Drop

A cool type animation made with GSAP, playing with colors and sizes.
Author: Chris Gannon

👉 Check it out

2. Scrolltrigger with zoom

Another example of using GSAP for a project, where scrolling creates zoom effects at different speeds to achieve a sense of depth.
Author: GSAP

👉 Check it out

3. CSS scroll-triggered animations

Did you know that you can also create scroll-based animations with CSS, similar to what you would do with GSAP's ScrollTrigger? Here's an example of animating text when the scroll reaches a specific point.
Author: Ryan Mulligan

👉 Check it out

😂 Humor

Friday is just around the corner…

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