Dieses Jahr habe ich das npm-Paket canvas-confetti kennengelernt. Es ist ein einfaches JavaScript-Paket, das eine (virtuelle, <canvas>) Konfetti-Explosion in jede von Ihnen bearbeitete Webseite einfügt.
Ein Tutorial beendet? Konfetti!
Diese neue Funktion zum ersten Mal benutzt? Konfetti!!
Haben Sie sich gerade an Ihr Bankpasswort erinnert? KONFETTI-ZEIT!!!
Je mehr ich das Paket benutze, desto mehr schätze ich diese kleinen Erfolge (oder wie ich sie gerne nenne, „Konfetti-Momente“). Webentwicklung wird kompliziert und es ist leicht zu vergessen, wie interaktiv, kreativ und *lustig* der Webbrowser sein kann.
Das Toolkit des Webentwicklers ist im letzten Jahrzehnt komplexer geworden. Die Grenzen zwischen Browser und Server sind verschwommen, Full-Stack-JavaScript-Anwendungen wie Next.js und Redwood sind da, und „Zero-Config-Setups“ wie create-react-app installieren über 1.400 Abhängigkeiten, nur um Sie zu „Hello, World!“ zu bringen.
Aber wenn Sie es einfach halten möchten, gab Ihnen das letzte Jahr genügend Grund zur Hoffnung. 2020 war das erste Jahr, in dem dieser Trend zur Komplexität begann sich zu verlangsamen, wenn nicht gar komplett umzukehren. Fortschritte auf der Web-Plattform ermöglichen es Ihnen nun, mehr mit weniger zu tun. Projekte wie esbuild & Snowpack (Haftungsausschluss: Ich arbeite an Snowpack) ermöglichen eine neue Generation einfacherer, schnellerer Build-Tools. Projekte wie Eleventy bieten nun einen alternativen, HTML-zentrierten Stil der Webentwicklung, der sich wirklich frisch anfühlt. Wage ich zu sagen… lustig!
Ich hoffe, dass dieser neue Trend fortgesetzt wird, mit noch mehr Spaß und Konfetti für alle. 🎉
Ich liebe es, dass die „Getting Started“-Anleitung von Snowpack Sie auffordert, dieses Paket hinzuzufügen.
Ich habe auch bemerkt, dass E-Mails auf outlook.com Konfetti versprühen, wenn das Wort „Glückwunsch“ im E-Mail-Text vorkommt.
Hallo Fred,
vielen Dank für das Teilen. Ich liebe den Effekt wirklich und habe buchstäblich über 30 Mal auf den Button geklickt. Ich würde das gerne auch auf meiner Website verwenden, kenne aber überhaupt kein JavaScript. Wären Sie bereit, mir zu sagen, wie Sie das gemacht haben oder sogar ein kleines Video-Tutorial zu erstellen? Leider macht mich der Link zu npmjs.com nicht schlauer, da ich nur CSS verstehe :(
Es wäre großartig, wenn Sie Ihr Wissen teilen könnten.
Danke
Diana
https://skypack.dev/ hat eine Demo direkt auf der Startseite, die Sie innerhalb eines Skript-Tags zu Ihrer Website hinzufügen können
Ja, die Dinge werden wieder einfacher. Zum Beispiel wird html-over-the-wire (htmx) akzeptiert, da es zu guten Web-Vitals-Scores führt.