We asked web builders that we admire the same question: What is one thing you learned about building websites this year? Here's what they told us.

We would like to thank our ❥ sponsor Automattic for making this site possible. They make many great software products that we use, like Jetpack, WooCommerce, and WordPress.com.

Avatar of Fred Schott
Fred Schott says:

Write Code, Get Confetti

This year I learned about the canvas-confetti npm package. It is a simple JavaScript package that injects a (virtual, <canvas>) confetti explosion into whatever web page you are working on. 

Finished a tutorial? Confetti!

Used that new feature for the first time? Confetti!!

Just remembered your bank login? CONFETTI TIME!!!

The more I use the package, the more I appreciate these small wins (or as I like to call them, “confetti moments”). Web development gets complicated, and it’s easy to forget how interactive and creative and fun the web browser can be.

The web developer’s toolkit has gotten more complex over the last decade. The lines between the browser and server have blurred, full-stack JavaScript applications like Next.js and Redwood are here, and “zero-config setups” like create-react-app install over 1,400 dependencies just to get you to “Hello, World!”.

But if you prefer to keep things simple, this last year gave you plenty of reason to be hopeful. 2020 was the first year that this trend towards complexity begin to slow, if not reverse completely. Advances in the web platform now let you do more with less. Projects like esbuild & Snowpack (disclaimer: I work on Snowpack) enable a new generation of simpler, faster build tooling. Projects like Eleventy now offer an alternative, HTML-first style of web development that feels really fresh. Dare I say… fun!

I’m hopeful that this new trend will continue, with even more fun and confetti for everyone. 🎉

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Siang Lim
    Permalink to comment#

    I love that Snowpack’s Getting Started guide prompts you to add this package.

    I’ve also noticed that emails on outlook.com sprays confetti if the word ‘congratulations’ appears in an email’s body text.

  2. Diana
    Permalink to comment#

    Hi Fred,

    thanks a lot for sharing this. I really love the effect and literally clicked 30+ times on the button. I would love to use this on my website as well but do not know java script at all. Would you be willing to tell me how you did that or even make a small video tutorial? Unfortunately the link to npmjs.com does not make me smarter as I only understand CSS :(

    Would be great if you could share your knowledge.

    Thanks
    Diana

    • Fred
      Permalink to comment#

      https://skypack.dev/ has a demo right on the home page, which you can add to your website inside of a script tag:

      <script type="module">
  import confetti from 'https://cdn.skypack.dev/canvas-confetti';
  confetti();
</script>
  3. Thomas Güttler
    Permalink to comment#

    Yes, things get simpler again. For example html-over-the-wire (htmx) gets accepted since it results in good web vitals scores.

This comment thread is closed. If you have important information to share, please contact us.