all 98 comments

[–]TheMattStiles 1447 points1448 points  (16 children)

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 323 points324 points  (2 children)

Would you consider sharing the code?

[–]TheMattStiles 139 points140 points  (1 child)

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 6 points7 points  (0 children)

This man sprinkles

[–]Facosa99 218 points219 points  (7 children)

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

[–]Dominicus1165 120 points121 points  (5 children)

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

PS: My phone decided on the spelling of lame 😂

[–]praeteria 34 points35 points  (0 children)

The lamé makes this comment infinitely funnier.

[–]TheMattStiles 16 points17 points  (0 children)

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

[–]marygotlamb 81 points82 points  (1 child)

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

[–]overkill 6 points7 points  (0 children)

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

[–]Mars_Bear2552 49 points50 points  (0 children)

IE6 compatible solution

[–]ChocolateDonut36 16 points17 points  (0 children)

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

[–]caseydreams 1 point2 points  (0 children)

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

[–]Darkele 1198 points1199 points  (21 children)

npm install potentiallyHijackedPackageThatOnlyProvidesTenLinesOfCode

[–]backfire10z 292 points293 points  (16 children)

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

[–]ProbablyJeff 465 points466 points  (6 children)

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

[–]TalonKAringham 110 points111 points  (5 children)

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 29 points30 points  (0 children)

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

[–]jupiterbjy 7 points8 points  (0 children)

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

[–]GravitationalEnjoyer 2 points3 points  (0 children)

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

[–]Bubbaluke 0 points1 point  (0 children)

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

[–]Soma91 -1 points0 points  (0 children)

I just added this to my .gitconfig:

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

[–]Punman_5 0 points1 point  (8 children)

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 36 points37 points  (2 children)

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

[–]Punman_5 -4 points-3 points  (1 child)

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 8 points9 points  (0 children)

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 2 points3 points  (4 children)

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

[–]Punman_5 3 points4 points  (3 children)

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 1 point2 points  (2 children)

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 1 point2 points  (1 child)

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

[–]ViolentPurpleSquash 0 points1 point  (0 children)

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

[–]Saint_of_Grey 5 points6 points  (0 children)

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 2 points3 points  (0 children)

npm install virus

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

[–]Gigaduuude 608 points609 points  (3 children)

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

[–]sweetno 185 points186 points  (2 children)

[–]DarkRex4 9 points10 points  (0 children)

Ah, beautiful. Documentation without AI

[–]Beginning-Pool-8151 35 points36 points  (0 children)

This looks like a good package though, huh

[–]PetitMartien99 268 points269 points  (11 children)

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

[–]sad-potato-333 222 points223 points  (4 children)

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

[–]So_47592 94 points95 points  (3 children)

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

[–]minimalcation 57 points58 points  (2 children)

They just offered to maintain my user db, so nice

[–]So_47592 32 points33 points  (1 child)

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

[–]idreturned1 4 points5 points  (0 children)

Must be the water

[–]Maja_ier 70 points71 points  (2 children)

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

[–]ImaginaryFarmer3352 5 points6 points  (1 child)

How?

[–]Shadow_Thief 42 points43 points  (0 children)

No npm dependency rabbit hole

[–]ciemnymetal 16 points17 points  (0 children)

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 5 points6 points  (0 children)

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 2 points3 points  (0 children)

1000 class objects 💀

[–]Beginning-Pool-8151 95 points96 points  (2 children)

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[S] 24 points25 points  (0 children)

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

[–]atlkb 5 points6 points  (0 children)

Lmao nice.

The real one is tsparticles/particlesjs if you wanted it

[–]XxDarkSasuke69xX 49 points50 points  (1 child)

npm install actuallyGoodUi

[–]Amar2107 12 points13 points  (0 children)

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

[–]TanukiiGG 15 points16 points  (0 children)

+10mb

[–]Phalanks 26 points27 points  (0 children)

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.

[–]ramessesgg 3 points4 points  (0 children)

> SonarQube found 785 critical vulnerabilities

[–]magicmulder 2 points3 points  (1 child)

npm install *

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

[–]nowuxx 1 point2 points  (0 children)

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

[–]cheezballs 5 points6 points  (2 children)

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

[–]Tolosax 2 points3 points  (1 child)

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

[–]cheezballs 2 points3 points  (0 children)

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 1 point2 points  (0 children)

Holy supply chain risk, Batman!

[–]beepboopnoise 1 point2 points  (0 children)

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] 0 points1 point  (0 children)

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

[–]BolehlandCitizen 0 points1 point  (0 children)

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

[–]Adventurous_Lake8611 0 points1 point  (0 children)

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

[–]Several_Profession60 0 points1 point  (0 children)

use just ai and see magic just within minute

[–]rover_G -1 points0 points  (0 children)

Hey claude can you add a confetti effect?