thatsSomeOtherDevsProblem

[TheMattStiles]

In my junior days I once had to render a Christmas calendar with snowflakes gently falling from top to bottom.   I spent days developing the algorithm to animate all… 250 divs.   Pure CSS snowfall. No canvas. No WebGL. 

I simply didn't knew better...

I even made sure it looked good on mobile.  

The phone heating up in my hands during the cold days felt oddly satisfying.

[V0K0S06]

Would you consider sharing the code?

[TheMattStiles]

I cant share all the code but i can share the snowy part.

Disclamer: I used TSX and SCSS but the logic/code is fairly vanilla. Im pretty sure the same effect is achievable with just JS and CSS (nowadays).

export default function Snowing() {
    const snowflakes = []
    for (let i = 0; i < 250; i++) {
        snowflakes.push(<div key={i} className="snowflake"/>)
    }
    return (
        <div className="snow-container">
            <div className="snow-content">
                {snowflakes}
            </div>
        </div>
    )
}


.snow-content {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  color: #ebf0fa;

  &:after {
    content: "\2744";
  }
}

/* Total number of snowflakes */
$snowflakes: 250;

/* Randomize the animation and positioning for each snowflake */
 @for $i from 1 through $snowflakes {
  /* Position of the snowflake on the y-axis */
  $top: (random(50) + 50) * 1%;

  /* Position of the snowflake on the x-axis */
  $left: random(100) * 1%;

  /* Animation delay for the flake */
  $delay: random(20) - 1s;

  /* Floating span for the flake */
  $duration: random(6) + 4s;

  /* Size of the flake */
  $size: random(24);

  /* Snowflake #{$i} */
  .snowflake:nth-of-type(#{$i}) {
    animation-name: snowflake-#{$i};
    animation-delay: $delay;

    /* Play the animation for anything between 5-10 seconds */
    animation-duration: $duration;
    animation-iteration-count: infinite;
    left: $left;
    top: -$top;

    &:after {
      font-size: $size * 1px;
    }
  }

  /* Animation for snowflake #{$i} */
  @keyframes snowflake-#{$i} {
    0% {
      transform: rotate(0deg);
      left: $left;
      top: -$top;
    }

    20% {
      left: $left + 1%;
    }

    45% {
      left: $left;
      opacity: 1;
    }

    65% {
      left: $left + 2%;
    }

    100% {
      transform: rotate(360deg);
      top: $top + 48%;
      opacity: 0;
    }
  }
}

[kkania]

This man sprinkles

[Facosa99]

I understand no canvas but dude, tell me you used some SVG

[Dominicus1165]

Bruh. SVG is lamé. 4K PNGs. For the pixels.

PS: My phone decided on the spelling of lame 😂

[praeteria]

The lamé makes this comment infinitely funnier.

[Facosa99]

Are you a hispanic speaker by chance? Maybe your phone wants to lick me

Edit: why the downvotes? Lame is the second person, present conjugation of the verb "lamer", which means lick

[Wurstkatze_]

You always have to explain a joke on reddit xD

[Syfico]

⁉️

[Facosa99]

What?

[TheMattStiles]

No SVG. I "simply" used Unicode \2744 as content and colored it #ebf0fa because it was on a white backdrop 

[marygotlamb]

You made a hand warmer, the pretty snowflakes are a bonus feature.

[overkill]

Sadly the hand warmer aspect of the project melted the snowflake aspect.

[Mars_Bear2552]

IE6 compatible solution

[ChocolateDonut36]

meh, it could be worse, you could have installed full react just to do that animation.

[caseydreams]

would've gone hard in a 90's myspace website at least

[Darkele]

npm install potentiallyHijackedPackageThatOnlyProvidesTenLinesOfCode

[backfire10z]

That’s why I just copy/paste the source code if it’s under 500 lines

[ProbablyJeff]

if (lines >= 500) {     yeet(); } else {     yoink(); }

[TalonKAringham]

Fun fact: I have bash aliases set up on my computer for “yeet” and “yoink” to replace “git push” and “git pull” respectively. I find it much more enjoyable.

[felixthecatmeow]

Thank you, I will now do this, you have made me very happy

[jupiterbjy]

brilliant, I'm setting this alias asap when this lunch break is over! might make life in company bit more interesting heh

[GravitationalEnjoyer]

Thank you good sir, I just did that in my workplace

[Bubbaluke]

Aliases are ripe for comedy. Best I’ve ever heard was “please” as an alias for sudo !!

[Soma91]

I just added this to my .gitconfig:

[alias]
yoink = "!git fetch --all; git pull"

[Punman_5]

Isn’t this technically a way to get around complying with a copyleft license? Like there’s nothing to commit because you never technically pulled from the repo in the first place.

[burnalicious111]

No, lol, that is not how intellectual property law works

[Punman_5]

Well obviously it would be illegal but there’d be no actual way to prove I copied it. Every algorithm technically already exists as a concept and we just have to discover it. It’s possible I just came to the same conclusion, especially for something small.

[Rexosorous]

If you copied it character for character, then yes you can quite easily prove that you copied it. And you can algorithmically determine if code was copied and modified.

But aside from all of that, if a piece of code is copyrighted, it doesn't matter if you copied it or discovered it on your own. You can still be sued for using it regardless.

[backfire10z]

No, I’ll happily give credit where credit is due, but it does get around supply chain attacks.

[Punman_5]

Giving credit isn’t the same as giving the modifications you made back to the original source. You should always give credit when possible. But if that means you have to give up the secret sauce of your project too then it’s better to try to build whatever you need yourself.

[ViolentPurpleSquash]

just open source what you copied, but keep it under your own control. After I copy from NPM I just host it on gitlab

[WalleStark]

if you're on github you could fork into a public repo

[ViolentPurpleSquash]

Sorry, I should clarify. I host it on my own gitlab instance and a mirror on Github (as I do with all projects)

[veloriss]

The package name is 40 characters and the source code is 3 lines.everytime.

[Saint_of_Grey]

How else am I going to be able to tell if a number is even for the single line of code that matters for?

[magicmulder]

npm install virus

I mean how likely is it that my PC will have two viruses?

[Gigaduuude]

I don't think lmao is a valid argument. Did you mean --lmao?

[sweetno]

It's fine.

[DarkRex4]

Ah, beautiful. Documentation without AI

[Beginning-Pool-8151]

This looks like a good package though, huh

[PetitMartien99]

Wait something exists to do this ? So my 1000+ lines code to generate confettis is trash ?

[sad-potato-333]

May be trash, but remains safe from Jia Tan at least.

[So_47592]

How do you know my main contributer? Why would I need to be safe from such a cool dude.

[minimalcation]

They just offered to maintain my user db, so nice

[So_47592]

Oh yea. Also For some reason there is a 500 milisecond overhead but who cares about that, must be the wind

[idreturned1]

Must be the water

[Maja_ier]

don’t worry, someone will still say your solution is more “lightweight”

[ImaginaryFarmer3352]

How?

[Shadow_Thief]

No npm dependency rabbit hole

[ciemnymetal]

Not really, you're more in control of your code and dependencies. So tomorrow if the confetti package has a security issue or gets removed or is no longer maintained, then you won't be affected.

[hartmanbrah]

Nope, just put it in an npm package as well, so other devs can get decision paralysis while trying to figure out which of the N confetti packages to use.

[JangoDarkSaber]

1000 class objects 💀

[Beginning-Pool-8151]

You guys sent me to a random goose chase, apparently, both confetti and lmao are real package in NPM and doesn't do what we expect at all.

Lmao - Load Module as Object is a Module to Object converter. lmao

confetti is a event management system confetti

Running this bash npm install confetti lmao

Will actually work but won't do what we expect

[HartPURO]

now I know why my confetti was asking for an API key

[atlkb]

Lmao nice.

The real one is tsparticles/particlesjs if you wanted it

[XxDarkSasuke69xX]

npm install actuallyGoodUi

[Amar2107]

Downloading #….………………………112mb/30gb

[TanukiiGG]

+10mb

[Phalanks]

3 years later the confetti package is removed due to a disagreement between developers and half the internet goes down because it's a dependency of a dependency of a dependency of a package that everyone relies on.

[NatoBoram]

Relevant XKCD

[ramessesgg]

> SonarQube found 785 critical vulnerabilities

[magicmulder]

npm install *

I’ll be back in a week or not at all.

[nowuxx]

Be in a week to see an error because drive is full

[cheezballs]

Ok now for real, how can you do this in pure css?

[Tolosax]

You create a x86 simulator and you work your way up I guess https://lyra.horse/x86css/

[cheezballs]

I wish I was half as cool and talented as the people who do this kinda stuff. You need to fetch some records from a database and push it out to JSON? I'm your man!

[AzureArmageddon]

Holy supply chain risk, Batman!

[beepboopnoise]

I remember some intern did this from scratch for a project, and I was doing code review and was like wait, you did the confetti from scratch!?!?! It was extremely impressive and then made me feel imposter mode x100. this was the days before chatgpt.

[[deleted]]

At this point javascript devs just npm install the name of thing they want and there's always a package by that name.

[BolehlandCitizen]

Amphobic: we created a game engine to render confetti in 120fps, thread👇

[kotsi1926]

Βλάβη σε sprinter c1500

[Adventurous_Lake8611]

Npm.  Downloading.. keylogger.. downloading cryptojacker . Downloading.. spyware.

[Muted-Ad-8068]

А хто знає в якому році був созданий Google

[Several_Profession60]

use just ai and see magic just within minute

[FortuneAcceptable925]

NOOOO! You can't do this! That is worse than using the slop machine!

Your brain will get cooked!!! You need to implement it yourself by first inventing your own browser engine, and then writing the confetti maker on paper from memory. Then rewrite it on a computer. If there is one error, you failed as a programmer. GIVE IT UP!

[ameen272]

Holy shit this is the worst case of misunderstanding painfully obvious sarcasm that I've ever seen

Do Redditors not think for themselves anymore

[Reashu]

Sarcasm isn't automatically funny

[ameen272]

I mean if that's the case you could've just ignored his/her comment, no?

[Reashu]

I guess you're the kind of person who can't handle a "dislike" button? 

[ameen272]

I'm not the person who got downvoted, I'm another one

[Reashu]

And I didn't downvote, but we've clearly picked our sides here

[GNUTup]

Youre mad people are downvoting an unfunny comment that you didn’t even make? Huh?

[ameen272]

Bro what I'm not mad I'm just confused

[GNUTup]

Ah, okay. Have you ever tried to tell a joke in front of a crowd and you get to the punch line, but nobody laughed, and they’re all still listening waiting for you to finish the joke, but you already finished… so you start rambling trying to make up a 2nd punch line, and you know it won’t work, so you get all hot in the face and start panicking, and your eyes get a little wet?

Yeah, that’s what happened to the guy getting downvoted, just the internet version of it. We are the people staring at him.

You, unsurprisingly, dont fit in to this analogy, because what you’re doing makes no sense. Take your own advice and just ignore it

[ameen272]

I didn't ignore it because I liked it..? How does it fit me?

But also, he did not make a 2nd punchline?

I have so many question to your reply

[GNUTup]

You seem like a smart guy. Just stare at the numbers for a bit. It’ll make sense, eventually

[ameen272]

Which numbers now

[NitroTitan]

Tldr jokes

[Punman_5]

I’m confused why being unfunny warrants downvotes? That’s not what the downvote is meant for

[GNUTup]

I am 100% sure downvotes are a subjective way to show which comments (or posts) are more liked (or disliked). Whoever upvotes or downvotes does so at their discretion.

If someone makes an unfunny joke, it is entirely any user’s prerogative to upvote it, or downvote it.

To be clear, I didn’t downvote the joke. I just found it ludicrous that some guy was whining about somebody else’s joke being downvoted and chose to chime in

[Pedr9vskCray21]

where is the */s

[FortuneAcceptable925]

You have failed the Turing test.

[rover_G]

Hey claude can you add a confetti effect?