🍪 Privacy Friendly and Architecture – Beautiful Code #6

Hey everyone! It’s Marc 👋

Welcome to my weekly newsletter.

How are you?

This week, I’m bringing you a collection of 3 websites focused on architecture, to inspire you if you’re about to start or have already begun a project for an architecture studio or an architect.

As for tools, today I’m sharing a collection of alternatives to Google Analytics, where privacy comes first.

And continuing with cookies, in the resources section, you’ll find a library to create cookie notices for your projects. It’s very easy to set up, and it manages your website's cookies by simply telling it which cookies you want it to review.

That’s all for now. I hope you enjoy this week’s content 👇

😍 Websites

1. DEF Projetos

2. P10

3. Héloïse Thibodeau Architecte

🔨 Tools

1. Overtracking

Overtracking is a privacy-focused alternative to Google Analytics. It offers features like session recordings, heatmaps, and real-time analytics, all while ensuring users own their data and complying with privacy regulations (e.g., GDPR). A key feature is its zero-cookies mode, meaning no cookie consent is required from visitors.

It is a great tool with one of the most attractive free plans I’ve come across, offering up to 50,000 page views per month. The other alternatives have much more limited free plans.

2. Fathom

Fathom Analytics is a privacy-focused web analytics tool designed to be simple, lightweight, and compliant with privacy laws like GDPR, CCPA, and PECR. It doesn't use cookies, so it doesn't require cookie banners or consent from visitors. Fathom offers key insights like visitor counts, referrer tracking, and page performance while prioritizing data privacy and user control. It's an alternative to tools like Google Analytics, with a focus on protecting user data and delivering essential analytics in a straightforward, easy-to-use interface.

Fathom doesn’t have a free plan, and prices start at $15/month (up to 100,000 page views per month)

3. Plausible

Plausible is an open-source, privacy-focused web analytics tool that can be self-hosted, giving users full control over their data. It doesn't use cookies, making it GDPR-compliant without requiring cookie consent. Plausible provides essential metrics like page views, referrers, and traffic sources through a simple interface. Since it's open-source, users can host it on their own servers, further enhancing privacy and control​.

At Plausible, prices start at €9/month (up to 10,000 page views per month).

🧰 Resources

1. CookieConsent

CookieConsent by Orest Bida is a lightweight, open-source tool for managing cookie consent on websites, ensuring compliance with GDPR and CCPA. Written in vanilla JavaScript, it prevents cookies from being loaded until users give explicit consent. The tool is highly customizable, allowing developers to define categories like "necessary" or "analytics" and modify the consent modal's appearance. It can be easily integrated into various web platforms like React, Vue, and Angular, offering flexibility and control over user data.

2. ShipFast

ShipFast is a NextJS boilerplate that helps developers quickly launch web applications like SaaS or AI tools. It includes pre-built features like user authentication, payment integration, and database connections, allowing developers to save time and focus on building their product. It's designed to reduce development time from weeks to just days.

3. Toools

Toools.design is a free, growing archive of over 1,500 design resources, frequently updated for the design community. It provides a wide range of assets including icons, illustrations, mockups, typography, and tools for AI, UX design, and more. It's a one-stop hub to help designers quickly find high-quality resources, saving time on searches.

🤖 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. Pure SVG Loader Animations 

Some spinners and loaders created and animated in SVG.
Author: Nikhil Krishnan

2. Confetti Button 

A button that generates confetti when pressed, using the canvas-confetti library.
Author: Marco Biedermann

3. GSAP Drag Grid

A grid created with GSAP that allows users to move and drag elements, arranging them as they like. Several GSAP plugins are used, such as MorphSVGPlugin, DrawSVGPlugin, SplitText, Draggable, and InertiaPlugin
Author: Shunya Koide

😂 Humor

Web design and web development rates.

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