[Blog] Best of cookie hackathon

web/blog/2024-11-22-most-annoying-cookie-consent-banners.md

@@ -0,0 +1,140 @@
+---
+title: 'We Made the Most Annoying Cookie Banners Ever'
+authors: [vinny]
+image: /img/cookie-banner-hackathon/banner.webp
+tags: [webdev, wasp, react, forms]
+---
+
+import ReactPlayer from 'react-player'
+import ImgWithCaption from './components/ImgWithCaption'
+
+## 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.
+
+<video 
+  src="/img/cookie-banner-hackathon/295-camblackwood.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+
+## 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.
+
+<video 
+  src="/img/cookie-banner-hackathon/300-lezzz-sound.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+## 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.
+
+<video 
+  src="/img/cookie-banner-hackathon/302-fecony-whereda.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+## 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.
+
+<video 
+  src="/img/cookie-banner-hackathon/296-henryboyd.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+## 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.
+
+<video 
+  src="/img/cookie-banner-hackathon/286-wardbox.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+## 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!_ 🎵
+
+<video 
+  src="/img/cookie-banner-hackathon/285-3umaGH-gangnam.mp4" 
+  preload='true'
+  autoPlay
+  muted
+  controls
+  loop
+  className='video-player'
+></video>
+
+## 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!

web/src/css/custom.css

@@ -152,3 +152,16 @@
   height: 100%;
   border: 0;
 }
+
+/* Video player responsive styles */
+.video-player {
+  width: 100%;
+}
+
+/* Desktop styles */
+@media screen and (min-width: 768px) {
+  .video-player {
+    height: 80vh;
+    width: auto;
+  }
+}