Create account

DEV Community

Meme Monday

Ben Halpern on April 01, 2024

Meme Monday!

Today's cover image comes from last week's thread.

DEV is an inclusive space! Humor in poor taste will be downvoted by mods.

Matt Ryan • Apr 1 '24

Russell Bateman • Apr 3 '24

And... if that weren't bad enough, to use it, you have to learn a whole framework that's little documented.

NChandan • Apr 4 '24

This is me

Ben Halpern • Apr 1 '24

April Fool's edition, let's get it rolling.

Imam Ali Mustofa • Apr 1 '24

How add this backgound? Seriously I am asking...

Ben Halpern • Apr 1 '24 • Edited

We add classes based on tags to every page, and this is some custom css to latch on to the tag.

<style>
  @keyframes barrelRoll {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .articletag-doabarrelroll {
    background: #010100;
    background: url(https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj27fydricaw99jhkzwic.png) no-repeat center center fixed;
    background-size: cover
  }

  .articletag-doabarrelroll .crayons-layout {
    animation: barrelRoll 2s ease-in-out 1; /* Animation name, duration, timing function, iteration count */
  }


  .articletag-mememonday {
    background: #c21da4;
    background: url(https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffc70vzle6p0y0zb7p5om.png) repeat;
  }

  .articletag-perfectlycromulent {
    background: #f4f4f4;
    background: url(https://media2.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frzs6a59uuxjx328uu9p7.png) repeat;
  }

  @keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.articletag-shakethingsup {
  animation: vibrate 0.1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .articletag-shakethingsup {
    animation: none;
  }
  .articletag-doabarrelroll .crayons-layout {
    animation: none;
  }
}
</style>

Ben Halpern • Apr 1 '24

Maybe we should let people add their own backgrounds on all posts? 🤔

Most likely a terrible idea.

Imam Ali Mustofa • Apr 1 '24

Aaah... so this is built-in feature so people can't set their own background... 🤣 I want like specify the frontmatter like:

background_image: <display.image.url>
background_repeat: true

Imam Ali Mustofa • Apr 1 '24

This is will be fun and terrible idea!

Ben Halpern • Apr 1 '24

Yeah, this is sort of an admin hack for April Fool's — maybe a bit too hideous for normal use, idk.

Imam Ali Mustofa • Apr 1 '24

Yes! So don't...

But how about random image background in CSS 🤣 I am joking

Corentin Bettiol • Apr 8 '24

@ben It could be fun to unlock custom backgrounds for posts based on some metrics (activity, years of service, ...), as a reward. Not too extravagant ones, of course :)

Renan Ferro • Apr 1 '24

Anita Olsen • Apr 1 '24

If programming languages were exam papers 😁

CitronBrick • Apr 1 '24

It's been years since I saw this meme, & despite being acquainted with all these languages, I never got the Python joke. How is Python import, that different from C include or JavaScript import ?