Was waren die heißesten Front-End-Tools im Jahr 2021?

Ein weiteres Jahr ist vergangen, und wieder einmal hatte ich das Privileg, die Web Tools Weekly Newsletter-Archive der letzten 12 Monate durchzugehen, um die Front-End-Tools ausfindig zu machen, die die Leser im Jahr 2021 am interessantesten fanden. Zum Auftakt des Jahres 2022 habe ich daher eine Liste der 60 beliebtesten Tools zusammengestellt. Ich bin sicher, dass mindestens ein oder zwei Tools dabei sind, die Sie noch heute in Ihren Front-End-Projekten verwenden können.

Einige dieser Front-End-Tools sind super praktisch, während andere es wahrscheinlich nur aus Neugier auf diese Liste geschafft haben (was ich an der Anzahl der einzelnen Klicks festmache). Und da viele der Tools, die es in meine Jahresendlisten schaffen, ziemlich neu sind, denke ich, dass dies ein guter Indikator dafür ist, welche Arten von Front-End-Tools im kommenden Jahr beliebt sein werden.

Der Countdown von oben!

Inhaltsverzeichnis

• 60. Open Props
• 59. NextUI
• 58. Dopefolio
• 57. Vizzu
• 56. 10015 Tools
• 55. Snoweb
• 54. Tails
• 53. MapLibre
• 52. SVG Repo
• 51. Animated Backgrounds
• 50. Pico.css
• 49. Coding Fonts
• 48. UI-Neumorphism
• 47. Beautiful CSS Buttons
• 46. Shaper
• 45. Prestige
• 44. HTML.cafe
• 43. Charts.css
• 42. Buttons Generator
• 41. Doodad Pattern Generator
• 40. Kaboom
• 39. Skuawk
• 38. Glassmorphism CSS Generator
• 37. Kalia
• 36. AdminJS
• 35. Pancake
• 34. Mosaic Lite
• 33. Iconduck
• 32. Luxa CSS
• 31. Glitter
• 30. Components AI
• 29. Unicode Arrows
• 28. Type Scale Clamp Generator
• 27. AnimXYZ
• 26. Frontend Toolkit
• 25. colorpalettes.earth
• 24. Uncut
• 23. Lowdefy
• 22. JavaScript Booster
• 21. Layout Patterns
• 20. Baseline Background Remover
• 19. Theatre.js
• 18. Transition.css
• 17. The Component Gallery
• 16. party.js
• 15. Headless UI
• 14. Turbo
• 13. tidy.js
• 12. Tail-Kit
• 11. Tailwind Components
• 10. Pikaday
• 9. HTML Boilerplates
• 8. Whirl
• 7. Riju
• 6. DevUI
• 5. Pollen
• 4. AlterNight
• 3. UIsual
• 2. Supabase UI
• 1. CSS Layout Generator
• Was waren Ihre liebsten Front-End-Tools des Jahres 2021?

---

60. Open Props

Open Props bietet eine Reihe von handgefertigten Design-Token, die aus CSS Custom Properties bestehen. Ich kann mir vorstellen, dass diese Art von Dingen aufgrund der Verwendung dieser speziellen CSS-Funktion viel häufiger vorkommt. Sie ermöglichen es Ihnen, kleine Sammlungen nützlicher Gruppen von benutzerdefinierten Eigenschaften einzufügen, wie animations.css, borders.css, fonts.css, zindex.css usw., wobei weitere bald folgen werden. Oder Sie können einfach die Hauptdatei von Open Props verwenden, um alles auf einmal zu erhalten.

Dies ist definitiv ein Front-End-Tool, das man im Auge behalten sollte, und vielleicht sogar ein gutes Tool, zu dem man beitragen kann, wenn man helfen möchte, die Bibliothek der verfügbaren Token aufzubauen.

59. NextUI

Eine moderne React-Bibliothek, die Stitches, eine beliebte CSS-in-JS-Lösung, verwendet und Out-of-the-Box helle und dunkle UI-Komponenten sowie eine Standardfarbpalette enthält, die sich gut für das schnelle Erstellen von Landing Pages oder anderen Inhalten eignet, die nicht von Anfang an an ein Branding gebunden sind.

Die Entwicklung wird derzeit als Alpha-Phase aufgeführt. Es lohnt sich also, diese im kommenden Jahr im Auge zu behalten.

58. Dopefolio

Wenn Sie nach einer einfachen Möglichkeit suchen, Ihr eigenes Entwicklerportfolio zusammenzustellen, ist Dopefolio eine schnelle Lösung, die für SEO optimiert ist und Out-of-the-Box starke Lighthouse-Scores aufweist.

Die Live-Demo vermittelt Ihnen einen Eindruck davon, wie es aussieht (reaktionsschnell und alles) und enthält eine Farbauswahlkomponente, mit der Sie Ihre bevorzugte Primärfarbe für die Vorlage live testen können.

57. Vizzu

Dies ist ein einzigartiges Tool, das es auf die diesjährige Liste der Front-End-Tools geschafft hat. Vizzu ist eine Open-Source-JavaScript-Bibliothek zum Erstellen von animierten Datengeschichten und Visualisierungen. Vielleicht ist es aufgrund des offensichtlichen Bedarfs an der Erstellung und Einbettung von medizinischen Daten heutzutage so beliebt.

Diese Bibliothek ermöglicht Ihnen das einfache Erstellen von statischen Datendiagrammen, animierten Diagrammen und Datengeschichten. Sie können sich einige Live-Beispiele der animierten Diagramme oder Datengeschichten ansehen, darunter eine Datengeschichte, die zeigt, welcher Gastcharakter während der gesamten Laufzeit der Fernsehserie Friends die meisten Zeilen hatte.

56. 10015 Tools

Ich scheine jedes Jahr eine Handvoll dieser Arten von Front-End-Tools zu finden. 10015 Tools ist eine Sammlung von Front-End-Tools und nicht ein einzelnes Tool. Es enthält Textwerkzeuge, Bildwerkzeuge, CSS-Werkzeuge, Codierungswerkzeuge (z. B. Minifier), Farbwerkzeuge, Social-Media-Werkzeuge und einige andere unter einer sonstigen Kategorie.

Dies ist definitiv eine der umfassendsten All-in-One-Lösungen, die ich gesehen habe, daher bin ich mir sicher, dass Sie hier ein paar nützliche Front-End-Tools finden werden, zu denen Sie zurückkehren können.

55. Snoweb

Icon-Sets sind immer beliebt, und ich stoße jedes Jahr auf mindestens ein Dutzend neuer Sets. Dieses enthält optimierte SVG-Symbole, von denen viele einen integrierten Animationseffekt haben, wenn Sie mit der Maus über das Symbol fahren (wie das Open/Close-Umschlag-Symbol).

Wie bei vielen Icon-Websites können Sie nach Stichwörtern suchen oder nach Kategorien filtern, von denen eine eine „Marken“-Kategorie mit Symbolen für Twitter, Facebook, Vimeo, YouTube, Snapchat usw. ist.

54. Tails

Hier ist das erste Tailwind-basierte Tool auf der Liste; etwas, das in den letzten Jahren ein Trend war, da Tailwind weiter an Popularität gewinnt. Dieses Front-End-Tool ist ein Drag-and-Drop-Seitenersteller für Projekte, die Tailwind CSS verwenden.

Es enthält zwei kostenlose „Blöcke“ für jede der 15 Kategorien, sodass hier eine anständige Menge an kostenlosem Material vorhanden ist, und Sie können den Rest gegen eine monatliche Gebühr freischalten.

53. MapLibre

Diese Open-Source-Kartenbibliothek wurde im März eingeführt und hat im Laufe des Jahres an Popularität gewonnen. Sie umfasst eine JavaScript-Bibliothek sowie ein SDK zur Anzeige von Karten in iOS- und Android-Apps.

Die Dokumentation enthält eine Reihe von Beispielen, die JavaScript verwenden, wenn Sie sehen möchten, was mit den webbasierten Front-End-Tools möglich ist.

52. SVG Repo

SVG Repo schafft es allein aufgrund der schieren Anzahl auf die Liste. Es ist ein Repository von über 300.000 kostenlosen, optimierten, SVG-basierten Grafiken und Symbolen, von denen die meisten für die kommerzielle Nutzung lizenziert sind.

Jedes Symbol, das Sie auswählen, zeigt Ihnen an, unter welche Art von Lizenz es fällt. Sie können nach Stichwörtern suchen und Symbole zu Ihren Favoriten speichern (keine Anmeldung erforderlich).

51. Animated Backgrounds

Dieses hat es dieses Jahr in die Top 60 geschafft, ist aber wahrscheinlich nicht das praktischste Front-End-Tool der Gruppe. Wie ich eingangs sagte, wird manches nur aus reiner Neugier angeklickt. Es ist eine Galerie von animierten Hintergründen, die aus verschiedenen CodePen-Demos stammen.

Die Galerie ist nützlich, da sie die Hintergründe als aufgezeichnete Videos anzeigt, sodass Sie sich keine Sorgen machen müssen, dass alle Demos geladen werden und Ihr Browser-Tab abstürzt. Verwenden Sie diese sparsam, wenn überhaupt, da sie oft große Mengen an JavaScript und CSS verwenden.

50. Pico.css

Dies ist ein anderer Typ von CSS-Framework im Vergleich zu dem, was heutzutage beliebt ist. Es ist eher eine Art Anti-Tailwind-Tool und mehr eine Starter-CSS-Datei (wie ein Reset) als ein vollwertiges Framework.

Pico.css bietet elegante Standardstile für alle nativen HTML-Elemente (die Sie hier in der Vorschau anzeigen können), ohne dass Sie Unmengen von Klassen zu Ihrem Markup hinzufügen müssen – und das Ganze ist weniger als 10 KB minifiziert und gzip-komprimiert.

49. Coding Fonts

Coding Fonts scheinen in letzter Zeit ein aufregender neuer Trend zu sein, und CSS-Tricks hat dies mit dieser kleinen interaktiven Info-App ausgenutzt.

Wählen Sie links eine Schriftart aus, um Beispielcode, Schriftartinformationen (Ligaturen, Kursivschrift usw.) und Kosten (die meisten sind kostenlos) anzuzeigen, zusammen mit Optionen zur Anzeige von Beispielcode für HTML, CSS oder JavaScript.

48. UI-Neumorphism

Diese React-Bibliothek basiert auf dem alten Skeuomorphismus-Trend, der vor einigen Jahren anscheinend aus der Mode gekommen ist. Kommt dieser Trend wieder zurück? Wahrscheinlich nicht. Tatsächlich ist diese React-Bibliothek etwa zwei Jahre alt, obwohl ich sie erst im letzten Jahr zum ersten Mal geteilt habe.

Die Bibliothek enthält eine Reihe verschiedener Komponenten, die alle den „Neumorphismus“-Look implementieren. Interessant anzusehen, passt aber möglicherweise nicht zu vielen Projekten.

47. Beautiful CSS Buttons

Fast jede App oder Website braucht Schaltflächen, daher scheint eine Sammlung wie diese immer gut anzukommen. Viele davon unterscheiden sich von dem, was Sie wahrscheinlich anderswo gesehen haben.

Viele der Schaltflächen enthalten interessante Hover-Effekte, und Sie können den HTML- und CSS-Code für jede einzelne Schaltfläche direkt auf der Seite einfach kopieren und einfügen.

46. Shaper

Mit diesem interaktiven Tool können Sie verschiedene UI-Einstellungen live auf der Seite optimieren, um verschiedene Seitenelemente zu erstellen. Sobald Sie die Einstellungen nach Ihren Wünschen angepasst haben, können Sie den Code abrufen, der CSS Custom Properties verwendet.

Sie können zwischen der Demoansicht und der „Specs“-Ansicht (d. h. dem Code zusammen mit anderen nützlichen Informationen) wechseln. Dieses Tool legt einen besonderen Fokus auf die Typografie zusammen mit den restlichen UI-Stilen, was ein wichtiger Bestandteil ist, um ein Layout richtig aussehen zu lassen.

45. Prestige

Dies ist ein textbasierter HTTP-Client im Browser – wie Postman, aber ohne Benutzeroberfläche. Es ermöglicht Ihnen, Anfragen in einfachem Text zu definieren, die Sie optional als Gist speichern können. Es umfasst ein isoliertes Cookie-Management und verfügt sowohl über einen dunklen als auch einen hellen Modus.

Wie der Autor erklärt: „Ich habe Prestige entwickelt, weil ich eine App wie diese brauchte, als ich […] arbeitete und mit externen APIs spielte.“

44. HTML.cafe

Dies ist wahrscheinlich das einfachste Tool auf der gesamten Liste. HTML.cafe ist mehr oder weniger ein CodePen für Arme, um es mal so auszudrücken. Ich hätte nicht gedacht, dass die Leute an so etwas interessiert wären, da es bereits leistungsstarke Tools gibt, die das Gleiche tun. Dennoch ist es ein wirklich einfacher HTML-Editor mit Live-Vorschau.

Es gibt keine separaten CSS- oder JavaScript-Fenster wie bei CodePen, aber Sie können diese bei Bedarf einfach in <style>- oder <script>-Elementen einfügen. Ich denke, der beste Anwendungsfall für dieses Tool ist für Lehrer, die Schülern helfen, die mit HTML völlig unbekannt sind, da es alle Komplexitäten beseitigt.

43. Charts.css

Dieses Front-End-Tool ist eine Art Mischung aus Tailwind CSS und Chart.js. Kurz gesagt, Charts.css ist ein CSS-Framework, mit dem Sie Dienstprogrammklassen verwenden können, um Diagramme mit HTML und CSS zu erstellen.

Sie können Balkendiagramme, Liniendiagramme, Multi-Dataset-Diagramme, prozentuale Spalten und 3D-Balkendiagramme erstellen. Und das Beste daran: Die Diagramme sind barrierefrei, reaktionsschnell und einfach an Ihre Branding-Anforderungen anpassbar.

42. Buttons Generator

„Buttons Generator“ ist wahrscheinlich eine leichte Fehlbezeichnung, da Sie auf der Seite nicht direkt Schaltflächen „generieren“ können. Wie die vorherige Schaltflächen-Ressource ist dies eine Galerie von Schaltflächen, die mit HTML und CSS erstellt wurden.

Sie sind nach Kategorien unterteilt, enthalten einige nette Hover- oder Klick-Effekte, und Sie können auf eine beliebige Schaltfläche klicken, um den Code in Ihre Zwischenablage zu kopieren.

41. Doodad Pattern Generator

Mit diesem interaktiven Tool können Sie Ihre eigenen gemusterten Hintergründe erstellen, die Sie in verschiedenen Formaten exportieren können. Sie können die Schaltfläche „Zufall“ verwenden, um ein zufälliges Muster zu generieren, oder aus verschiedenen Kategorien auswählen. Sie können auch Farben, Filter und verschiedene Transformationen bearbeiten.

Über den Export-Dialog können Sie Muster speichern und zuvor gespeicherte über Local Storage laden. Exportieren Sie Ihre Muster als JPEG, PNG, Inline-SVG, SVG-Datei oder CSS-Hintergrund.

40. Kaboom

Jedes Jahr stoße ich auf mindestens eine oder zwei neue JavaScript-Spielebibliotheken, und diese hat es auf die diesjährige Liste geschafft. Sie scheint eine ziemlich elegante und einfach zu bedienende API zu haben und enthält eine gesunde Reihe von Komponenten, Ereignissen und anderen integrierten Funktionen.

Es gibt einen praktischen Spielplatz, um sich mit der Verwendung vertraut zu machen, und ein Einführungstutorial, um loszulegen.

39. Skuawk

Wenn Sie eine Alternative zu Unsplash suchen, die wahrscheinlich eine Ihrer Anlaufstellen für kostenlose Stockfotos ist, könnte diese Sammlung wunderschöner gemeinfreier Bilder eine gute Option mit einigen wunderschönen Fotos sein.

Es gibt 16 Kategorien von Bildern von verschiedenen Fotografen, die alle ihre Bilder unter einer CC0-Lizenz zur Verfügung gestellt haben (d. h. machen Sie damit, was Sie wollen).

38. Glassmorphism CSS Generator

Dies ist ein Online-Generator, mit dem Sie einen „Glassmorphismus“-Effekt auf einem Seitenelement erstellen können – eine Art Milchglas. Dieses Tool soll anscheinend Teil einer größeren UI-Bibliothek sein, die diese Art von Effekt auf eine Reihe verschiedener UI-Komponenten anwenden wird.

Wie dem auch sei, mir gefällt dieser Effekt besser als der „Neumorphismus“-Effekt, und anscheinend stimmt mein Publikum zu.

37. Kalia

Dies ist eines von drei VS Code-Tools auf der Liste. Es ist ein ansprechendes Farbschema, das Sie für Ihr VS Code-Setup verwenden können.

Die Erweiterung listet bisher nur etwa 800 Installationen auf, was überraschend ist, aber sie hat einen schönen Pastellfarben-Look, den, wie ich denke, viele genießen werden.

36. AdminJS

Wenn Sie ein Node-Entwickler sind, ist dies ein Open-Source-Admin-Panel, das zu einer Node.js-App hinzugefügt werden kann. Es generiert eine Benutzeroberfläche für Sie, basierend auf Daten, die Sie aus fast jeder Datenbank hinzugefügt haben, sodass Sie und Ihr Team den Inhalt Ihrer App verwalten können.

Sie können es mit dieser Beispiel-App ausprobieren, die auf MongoDB und Postgres basiert.

35. Pancake

Hier ist eine weitere Spiel-Engine zum Erstellen plattformübergreifender HTML5-basierter 2D-Spiele. Dieses Tool fand großen Anklang, als ich es zum ersten Mal teilte. Obwohl es auf die Liste kam, scheint es Python während des Build-Schritts zu erfordern, nachdem Sie das Spiel geschrieben haben.

Die grundlegende API verwendet reines JavaScript, und Sie können viele nette kleine Beispiele hier ansehen.

34. Mosaic Lite

Ich finde viele Dashboard-Vorlagen, die mit verschiedenen Front-End-Technologien erstellt wurden. Diese hier wurde mit Tailwind und React erstellt und enthält optionale Diagrammkomponenten, die mit Chart.js erstellt wurden.

Wie andere ähnliche Vorlagen kann diese für SaaS-Produkte, Admin-Dashboards und mehr verwendet werden. Sie können eine Live-Demo ansehen.

33. Iconduck

Hier ist eine weitere großartige Quelle für Open-Source-Symbole, die über 100.000 Symbole bietet, die nach Stichwörtern durchsucht werden können und alle für die Verwendung in kommerziellen Projekten verfügbar sind.

Die Website bietet die Möglichkeit, Symbole und Symbolsammlungen für die spätere Verwendung zu liken und zu speichern (erfordert Cookies, aber keine Anmeldung).

32. Luxa CSS

Dies ist eine CSS-Bibliothek, die eigentlich Mitte bis Ende 2020 veröffentlicht wurde, aber ich habe sie zum ersten Mal im Jahr 2021 geteilt. Sie wird als „minimalistisches“ CSS-Framework beschrieben.

Luxa CSS enthält einige Basisstile sowie verschiedene Komponenten, Helfer und Layoutstile, die Sie in der Dokumentation oder in dieser CodePen-Sammlung ansehen können.

31. Glitter

Glitter war definitiv eines der seltsamsten – aber coolsten – Front-End-Tools, denen ich im letzten Jahr begegnet bin, und es scheint viel Interesse geweckt zu haben, obwohl es so einfach ist, wie ein Tool nur sein kann.

Es ist ein Generator, der Text in einem glitzerartigen Stil erzeugt, den Sie als SVG speichern können. Definitiv nichts für 99 % Ihrer Projekte, aber ein ziemlich cooler Texteffekt.

30. Components AI

Als ich dies ursprünglich teilte, teilte ich den Theme Builder allein, weshalb er auf dieser Liste landete. Aber es lohnt sich, das gesamte Set von über 15 Tools zu teilen.

Zusätzlich zum Theme Builder gibt es einen Syntax-Highlighter-Builder, Farbverlauf- und Schatten-Tools, SVG-Mustergeneratoren, animierte Hintergründe und vieles mehr.

29. Unicode Arrows

Das ist ziemlich einfach. Unicode Arrows ist ein zentraler Ort zum Kopieren und Einfügen von – Sie haben es erraten – Unicode-Pfeilen zusammen mit dem zugehörigen Hex-Code jedes Pfeils.

Nicht viel mehr gibt es über dieses Tool zu sagen, außer dass Sie auf der Website Unicode-Pfeilschmuck kaufen können. Nicht, dass sich eine Gruppe von Coding-Nerds dafür interessieren würde, nein.

28. Type Scale Clamp Generator

Dies ist nicht das erste Tool, das versucht, eine Typskala für Sie zu generieren, aber es ist ein relativ neues, das die CSS-clamp()-Funktion verwendet.

Mit diesem Front-End-Tool können Sie einen Bereich, eine Schriftart und einen Vorschautext auswählen, und Sie können sogar die Reaktionsfähigkeit testen (obwohl ich nicht sehe, wie nützlich diese Funktion ist, da es sich nur um Text handelt).

27. AnimXYZ

Dies wird als „das erste zusammensetzbare CSS-Animations-Toolkit“ mit Unterstützung für Vue und React beschrieben. Das bedeutet genau, dass Sie keine Keyframes schreiben müssen. Es scheint eine Art Tailwind für Animationen zu sein, da Sie nur HTML-Klassen verwenden.

Zusätzlich zum Hinzufügen von Klassen werden die Werte vollständig mithilfe von CSS-Variablen erstellt. Das bedeutet, dass Sie die Werte nach Belieben anpassen können, indem Sie die Variablen selbst ändern.

26. Frontend Toolkit

Hier ist eine weitere All-in-One-Toollösung, die mehr als 20 Tools für verschiedene Aufgaben im Zusammenhang mit Codierung und Bildern enthält.

Es enthält Tools für CSS, JSON, Favicons, SVG, Bildkomprimierung, npm, Regex und mehr.

25. colorpalettes.earth

Hier ist ein einzigartiges Tool auf der Liste, das einige coole Designs inspirieren könnte. Dieses Tool zeigt Farbpaletten an, die aus Bildern aus der Natur (von Unsplash) stammen, die auf der Website enthalten sind, wobei regelmäßig neue Paletten hinzugefügt werden.

Klicken Sie auf ein beliebiges Bild, und Sie erhalten ein Modal mit Zugriff auf den Hex-Wert für jede der Farben, aus denen die vom Bild abgeleitete Palette besteht.

24. Uncut

Um die Vielfalt dieser Liste zu erweitern, gibt es hier einen Schriftartenkatalog, der derzeit 90 Schriftarten enthält, wobei der Schwerpunkt auf zeitgenössischen oder modernen Schriften liegt.

Alle enthaltenen Schriftarten sind Open-Source, sodass Sie sie kostenlos in persönlichen und kommerziellen Projekten verwenden können.

23. Lowdefy

Das Erstellen interner Tools scheint heutzutage ein heißes Thema zu sein, und dies ist eine Lösung, die Sie sich ansehen sollten, mit der Sie Ihre Tools durch Schreiben von YAML erstellen können.

Es wird als „Open-Source Low-Code-Framework zum einfachen Erstellen von Web-Apps, Admin-Panels, BI-Dashboards, Workflows und CRUD-Apps“ beschrieben.

22. JavaScript Booster

Dies ist eine VS Code-Erweiterung, die Ihnen helfen soll, wie es auf der Verpackung steht, Ihre JavaScript-, TypeScript- und React-Codierungsproduktivität zu steigern. Die Erweiterung fügt an bestimmten Stellen in Ihrem Code ein Glühbirnensymbol hinzu, das anzeigt, dass Sie vordefinierte Code-Refaktorierungen sofort auslösen können.

Einige Beispiele sind das Konvertieren einer regulären Funktion in eine Pfeilfunktion, das Umdrehen eines if-else-Konstrukts sowie einige React-spezifische Refaktorierungen.

21. Layout Patterns

Dies ist eine der jüngsten Ergänzungen der web.dev-Ressource von Google Developers, von der ich annehme, dass sie im kommenden Jahr weiter wachsen wird.

Es enthält eine Reihe von UI-Mustern, die „mit modernen CSS-APIs erstellt“ wurden. Mit anderen Worten, es ist eine sehr zukunftsorientierte Sammlung von CSS-Beispielen, sollte aber mit Vorsicht verwendet werden, da einige der integrierten Technologien möglicherweise noch nicht vollständig vom Browser unterstützt werden.

20. Baseline Background Remover

Zugegebenermaßen waren KI-basierte Tools zum Entfernen von Hintergründen in letzter Zeit Legion. Dieses hier ist kostenlos und funktioniert laut meinen kurzen Tests sehr gut.

Sie können ein Bild mit bis zu 5 MB hochladen, und es akzeptiert JPEG- und PNG-Dateien. Das resultierende Bild wird als transparentes PNG heruntergeladen, das Sie verwenden können, um Ihren eigenen Hintergrund hinzuzufügen oder es transparent zu lassen.

19. Theatre.js

Hier ist eine weitere Animationsbibliothek, diesmal eine JavaScript-Lösung, mit der Sie DOM-Elemente oder WebGL mithilfe eines praktischen visuellen Editors animieren können, der mit dem von Ihnen geschriebenen Code zusammenarbeitet.

Dies ist ein wirklich leistungsstarkes Tool, das in nur wenigen Absätzen schwer zu beschreiben ist. Es gibt ein ausführliches, kapitelbasiertes Video, das in der gesamten Dokumentation verwendet wird und wirklich hilft, wenn Sie sich damit vertraut machen möchten.

18. Transition.css

Drop-in-CSS-Bibliotheken sind immer beliebt, und ich finde normalerweise jedes Jahr mindestens ein oder zwei gute. Diese enthält einige nette CSS-Übergänge, die Sie wahrscheinlich noch nicht anderswo gesehen haben.

Sie können sie direkt auf der Seite ausprobieren. Meine Favoriten sind diejenigen, die eine gewisse Zögerlichkeit in die Animation einbauen, um eine zusätzliche Einzigartigkeit zu erzielen.

17. The Component Gallery

Dies ist eine Art Sammelstelle für Designsysteme, da es Komponentenbeispiele enthält, die aus echten Designsystemen stammen, die in verschiedenen Technologien – React, CSS, Angular, Vue usw. – von verschiedenen Marken, darunter eBay, Goldman Sachs, GOV.UK und viele mehr, erstellt wurden.

Es dient als praktische Referenz für jeden, der sein eigenes Designsystem erstellt, da Sie dieselben Komponenten in den hier enthaltenen bestehenden Systemen vergleichen können.

16. party.js

Dies ist eine lustige und einzigartige JavaScript-Bibliothek, mit der Sie Partikeleffekte zu einer Webseite hinzufügen können, insbesondere Konfetti und Funkeln.

Sie werden dies nur unter sehr spezifischen Umständen verwenden, aber es ist schön, dass Sie die Partikelformen, die Anzahl der Partikel, die Ausbreitung usw. anpassen können.

15. Headless UI

In den Worten von Nacho Libre, jetzt kommen wir wirklich zum Kern der Sache. Diese UI-Komponentenbibliothek wurde Ende 2020 veröffentlicht und hat bereits über 12.000 Sterne auf GitHub gesammelt.

Die Komponenten (Dropdown-Menü, Tabs, Popover usw.) sind „headless“. Das bedeutet nicht, dass ihr Umhang abgenommen wurde; es bedeutet, dass sie ungestylt sind, sodass Sie sie nach Belieben branden können. Sie sind auch vollständig barrierefrei, für die Integration mit Tailwind CSS konzipiert und mit React und Vue kompatibel. Das ist richtig – dieses Tool erfüllt fast jedes Front-End-Buzzword für 2022.

14. Turbo

Dies ist ein weiteres Tool, das sich im Jahr 2021 nach einer Veröffentlichung Ende 2020 gut entwickelt hat. Es wird als „die Geschwindigkeit einer Single-Page-Webanwendung, ohne dass Sie JavaScript schreiben müssen“ beworben.

Kurz gesagt, Turbo ist eine Bibliothek, mit der Sie vier Hauptfunktionen nutzen können: Turbo Drive, Turbo Frames, Turbo Streams und Turbo Native. Diese verwenden Webkomponenten, um Ihren Seiten Single-Page-App-ähnliche Leistung und Interaktivität hinzuzufügen, ohne dass Sie das Rad mit schweren benutzerdefinierten Skripten neu erfinden müssen.

13. tidy.js

Dies ist eine Bibliothek von datenbezogenen JavaScript-Funktionen, die speziell zum „Aufräumen“ Ihrer Daten dienen.

Sie enthält über 70 Funktionen unter verschiedenen Kategorien (Aufräumen, Gruppieren, Mathematik, Sequenzierung usw.), und Sie können mit den verschiedenen Funktionen mithilfe dieses Spielplatzes herumspielen.

12. Tail-Kit

Dies ist das erste Tailwind UI Kit auf der Liste der Top-Front-End-Tools, und es hat es in sich. Es verfügt über mehr als 250 Open-Source-Komponenten, die mit React, Vue und Angular kompatibel sind.

Es gibt Komponenten, die unter Elemente, Formulare, Handel, Navigation, Abschnitte und Listen kategorisiert sind, oder Sie können aus einer Reihe von Vorlagen wählen, die unter Dashboards, Landing Pages und Fehlerseiten kategorisiert sind.

11. Tailwind Components

Und hier ist ein weiteres Tailwind UI Kit, das ebenfalls Open-Source-Komponenten und -Vorlagen in 13 verfeinerten Kategorien enthält, zusammen mit einer „fantastischen“ Kategorie, die kostenlose, aber Premium-Komponenten enthält.

Diese Website ist mehr oder weniger ein Verzeichnis verschiedener von der Community beigesteuerter Tailwind-Komponenten, anstatt ein zusammenhängendes Set von UI-Elementen wie andere Kits zu sein.

10. Pikaday

Ein JavaScript-Datumswähler schafft es im Jahr 2021 unter die Top 10 Tools des Jahres – wer hätte das gedacht? Er scheint alle Kriterien zu erfüllen, die für eine Datumswähler-Komponente erforderlich sind: Keine Abhängigkeiten, leichtgewichtig und verwendet modulares CSS für das Styling.

Wie einige andere Front-End-Tools auf dieser Liste ist dies kein neues Tool. Es gibt es schon seit geraumer Zeit, aber ich habe es 2021 zum ersten Mal geteilt, und es landete erstaunlicherweise in den Top 10 dieses Jahres.

9. HTML Boilerplates

Dies ist ein praktischer kleiner Online-HTML-Generator, mit dem Sie die Art der HTML-Startervorlage anpassen können, die Sie generieren möchten, indem Sie Optionen zum Ein- und Ausschalten dessen bereitstellen, was enthalten sein soll. Dies ist wahrscheinlich am nützlichsten, um eine schnelle Vorlage für eine Landing Page oder Demo zu generieren.

Ehrlich gesagt denke ich, dass es gut wäre, wenn das Tool aktualisiert würde, um ein paar modernere Optionen zu verwenden, aber für einen einfachen HTML-Startpunkt erfüllt es seinen Zweck.

8. Whirl

Hier ist eine weitere CSS-Animationsbibliothek, diesmal speziell eine Sammlung von Animationen zur Verwendung als Ladespinner. Sie enthält über 100 animierte Loader, von denen einige wirklich ordentlich und einzigartig sind.

Mir gefällt, wie die Animationen in der Liste (die Sie direkt auf der Seite ausprobieren können) als Pseudo-Element, Einzel-Element und Multi-Element kategorisiert sind. Die beste ist bei weitem die „Pong“-Animation, obwohl ich bezweifle, ob jemand sie korrekt als Indikator für „Laden von Inhalten“ klassifizieren würde!

7. Riju

Stellen Sie sich vor, CodePen und JSFiddle hätten ein Baby, und Sie würden dieses Baby in 224 Teile zerlegen. Das ist Riju – ein schneller Online-Spielplatz für so ziemlich jede Programmiersprache.

Ich kann mir nicht vorstellen, dass hier eine Programmiersprache fehlt, mit der Sie herumspielen möchten, und das meiste davon ist etwas, das Sie normalerweise nicht mit der Ausführung im Browser in Verbindung bringen würden.

6. DevUI

Dies ist ein Angular-Toolkit, das sich für Apps auf Unternehmensebene eignet und Komponenten, Symbole, eine Admin-Dashboard-Vorlage und ein Designsystem für Styling und Branding enthält.

Ich vermute, dass dieses Tool es in die Top 10 der Front-End-Tools geschafft hat, weil ich zunächst nicht explizit erwähnt habe, dass es für Angular-Apps gedacht ist (was auf der Homepage auch nicht ersichtlich ist). Dennoch habe ich angegeben, dass es für Projekte auf Unternehmensebene gedacht ist, und das schien die Aufmerksamkeit vieler auf sich zu ziehen.

5. Pollen

Diese Bibliothek dient als Grundlage für Ihr eigenes Designsystem, und ihre Praktikabilität zeigt sich in der Verwendung von CSS Custom Properties.

Es stellt Ihnen Design-Token auf niedriger Ebene zur Verfügung, die Sie einfach anpassen und erweitern können. Die Module umfassen Typografie, Layout, UI, Grid und Farben. Ich vermute, dass hier noch mehr hinzugefügt wird, daher sollte man es im kommenden Jahr im Auge behalten.

4. AlterNight

Entwickler lieben VS Code, den Dunkelmodus und Plugins. Kombinieren Sie diese drei Dinge, und Sie haben ein großartiges kleines Front-End-Tool.

AlterNight ist ein wunderschönes VS Code-Theme und hat bisher bescheidene ~3.000 Installationen, aber es hat es in diesem Jahr in die Top 5 der Liste geschafft.

3. UIsual

Hier ist eine Sammlung von Front-End-Vorlagen, aber mit einem kleinen Twist, den viele anscheinend zu schätzen wussten: Sie sind in Graustufen gehalten.

Das Set enthält derzeit acht Vorlagen mit unterschiedlichen Layouts. Ohne farbbasiertes Branding sind dies eine gute Option, um sie an Ihre eigenen Bedürfnisse anzupassen, ohne wie jede andere Landing Page auszusehen.

2. Supabase UI

Hier ist eine weitere Open-Source-Komponentenbibliothek, diesmal für React und speziell für das Supabase-Produkt (eine Open-Source-Alternative zu Firebase) entwickelt.

Es ist Tailwind-ready, und ich sollte auch darauf hinweisen, dass es sich noch in einer frühen Entwicklungsphase befindet. Dennoch war es beliebt genug, um es auf Platz 2 dieser Liste zu schaffen.

1. CSS Layout Generator

Dies war das am häufigsten angeklickte Tool in meinem Newsletter im vergangenen Jahr. Es ist ein voll ausgestatteter CSS- und JSX-Generator zum Erstellen verschiedener Arten von Layouts mithilfe der CSS Grid Layout-Syntax.

Klicken Sie auf einen der fünf Layoutstile, und Sie gelangen zu einem interaktiven Online-Editor, mit dem Sie mit verschiedenen CSS Grid-Funktionen wie Zeilen, Spalten, Zeilenabstand, Spaltenabstand, Richtung, Rastausrichtung und vielem mehr herumspielen können. Es gibt hier eine ganze Menge zum Herumspielen, und anscheinend wird das Tool später die Flexbox-Syntax für einige der Beispiele enthalten.

Was waren Ihre liebsten Front-End-Tools des Jahres 2021?

Damit ist die diesjährige Liste der interessantesten Front-End-Tools abgeschlossen. Ich hoffe, Sie haben hier etwas gefunden, das Sie als Lesezeichen speichern oder in einem neuen Projekt verwenden können. Es ist ziemlich cool, dass diese Liste eine so große Vielfalt an Tools enthielt – es gab UI-Kits, Animationsbibliotheken, eine Stockfoto-Website, Bildtools und mehr.

Gibt es Front-End-Tools, die in dieser Liste nicht erwähnt wurden, die Sie im letzten Jahr gerne entdeckt haben? Fühlen Sie sich frei, sie in den Kommentaren zu hinterlassen. Sie können auch meinen Newsletter abonnieren, um weitere Front-End-Tools im Jahr 2022 zu erhalten, und Sie können mich gerne kontaktieren, wenn Sie selbst etwas gebaut haben, das Sie in einer zukünftigen Ausgabe teilen möchten.