Skip to content

Commit

Permalink
Best of cookie banners blogpost (#330)
Browse files Browse the repository at this point in the history
* add blogpost with canonical to wasp-lang.dev

* Delete 2023-11-23-post.md
  • Loading branch information
vincanger authored Nov 25, 2024
1 parent 9bb2d48 commit ab7834b
Show file tree
Hide file tree
Showing 11 changed files with 118 additions and 17 deletions.
2 changes: 1 addition & 1 deletion opensaas-sh/app_diff/package.json.diff
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@
- "@lemonsqueezy/lemonsqueezy.js": "^3.2.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.7",
"apexcharts": "^3.41.0",
"apexcharts": "3.41.0",
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
!isLandingPage,
})}
>
+ {isLandingPage && <Announcement />}
+ {/* {isLandingPage && <Announcement />} */}
<nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
<div className='flex items-center lg:flex-1'>
<WaspRouterLink
Expand Down
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
27 changes: 27 additions & 0 deletions opensaas-sh/blog/src/components/VideoPlayer.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
interface Props {
src: string;
}
const { src } = Astro.props;
---

<video
src={src}
preload="true"
autoplay
muted
controls
loop
>
<track kind="captions">
</video>

<style>
.video-player {
width: 100%;
max-width: 800px;
margin: 2rem auto;
border-radius: 8px;
}
</style>
15 changes: 0 additions & 15 deletions opensaas-sh/blog/src/content/docs/blog/2023-11-23-post.md

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
title: We Made the Most Annoying Cookie Banners Ever
date: 2024-11-22
tags: ["cookie consent", "saas", "sideproject", "hackathon"]
image: "/cookie-consent/wheel.gif"
canonical: "https://wasp-lang.dev/blog/2024/11/22/most-annoying-cookie-consent-banners"
---
import VideoPlayer from '../../../components/VideoPlayer.astro';

## The Most Annoying Cookie Consent Banner Ever Hackathon

We at Wasp just finished off a fun little [hackathon](https://docs.opensaas.sh/blog/2024-10-10-most-annoying-cookie-banner-contest/) where we asked our users to create the most annoying cookie consent banners they could think of (because cookie banners aren’t annoying enough already, right?). Then we let our community pick the winner in an elimination style tournament on [X/Twitter](https://x.com/wasp_lang).

It was a lot of fun, and the submissions were really creative, so we thought we’d highlight some of our favorites for you, including the community chosen winner. Check ‘em out below. We hope they inspire you... to... not use them on your own sites. :)

## The GDPR Quiz

The General Data Protection Regulation (GDPR) is the EU's data privacy law that requires websites to get explicit consent from users before collecting their data through cookies.

GDPR is _the reason_ we have cookie consent banners today.

This submission by [Cam Blackwood](https://www.tiktok.com/@cameronblackwoodcode/) gets to the core of why cookie consent banners are annoying: they force users to make a decision about something they barely understand (or care about), based on a regulation they probably don't even know exists.

Thanks for the reality check, Cam.

<VideoPlayer src="/cookie-banner-hackathon/295-camblackwood.mp4" />

## Windows of Time

Do you ever feel like cookie consent banners are UX design pattern from the past? Well, this submission by [Lazi](https://github.com/Lezzz) confirms that, by sending you through an operating system time machine to a past we'd all like to forget.

Disturbing, yet oddly comforting.

<VideoPlayer src="/cookie-banner-hackathon/300-lezzz-sound.mp4" />

## Find all the Cookies

There are some sites that make rejecting cookies a real pain, as if you were trying to find a needle in a haystack, or as if you were looking at a Where's Waldo puzzle.

This submission by [Fecony](https://github.com/fecony), Wasp community meme lord, is just that. We find it annoying and fun at the same time, but what we're not sure about is if it's even possible to find them all.

Well played, Fecony.

<VideoPlayer src="/cookie-banner-hackathon/302-fecony-whereda.mp4" />

## Fresh Batch of Cookies

Most of us probably just smash the "accept" or "reject" button without even reading the fine print. But [Henry Boyd](https://github.com/henry-boyd) is a maniac and with his submission, you have to accept ALLLLL the cookies.

And that's a whole lot of cookies.

<VideoPlayer src="/cookie-banner-hackathon/296-henryboyd.mp4" />

## Cookie Management Application Process

What's more annoying than cookie consent banners? Probably job applications. Well [Wardbox], community builder extraordinaire, combines the best (or worst) of both worlds to make the cookie mangament process even more tedious than you could imagine.

Now all we have to do is wait for the rejection email.

<VideoPlayer src="/cookie-banner-hackathon/286-wardbox.mp4" />

## Grand Prize Winner: Gangnam Style Beat

Our community-chosen winner's submission pretty much speaks for itself.

Make sure you turn on the sound for this one!

🎤 _Eeeeh, sexy cookie. Op! op-op-op!_ 🎵

<VideoPlayer src="/cookie-banner-hackathon/285-3umaGH-gangnam.mp4" />
## And there you have it!

Thanks to everyone who participated! We had a lot of fun looking at all the submissions and we're glad to see that the community is as creative (and annoying) as ever.

And now for a quick PR announcement:

At [Wasp](https://wasp.sh/) we're working hard to build a modern, open-source full-stack React/NodeJS framework.

The easiest way to show your support is just to star the Wasp repo! 🐝 It helps us spread the word and motivates us to keep building.

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqiv01tl1pha9ougp21.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqiv01tl1pha9ougp21.gif)

<div className="cta">
<a href="https://github.com/wasp-lang/wasp" target="_blank" rel="noopener noreferrer">
⭐️ Star Wasp on GitHub 💪
</a>
</div>

Thanks for reading, and showing your support!

0 comments on commit ab7834b

Please sign in to comment.