Ein Jahr ist vergangen, und es ist mir eine Ehre, die Web-Tools Weekly Newsletter-Archive in den letzten 12 Monaten erneut zu überprüfen und nach einigen der interessantesten Leser von Front-End-Tools im Jahr 2021 zu suchen. Um 2022 zu beginnen, habe ich eine Liste der 60 beliebtesten Tools zusammengestellt. Ich glaube, es gibt hier mindestens ein oder zwei Tools, die Sie ab heute in Ihrem Front-End-Projekt verwenden k?nnen.
Einige Front-End-Tools sind sehr praktisch, w?hrend andere m?glicherweise nur wegen der Neugier auf der Liste stehen (ich beurteile nach der Anzahl der Klicks). Da viele der Tools, die meine j?hrliche Liste relativ neu erstellen, relativ neu sind, denke ich, dass dies ein guter Hinweis darauf ist, welche Front-End-Tools im kommenden Jahr beliebt sein werden.
Z?hlen Sie von oben nach unten!
### Inhaltsverzeichnis
- 60. Offene Requisiten offen
- Nextui
- Dopefolio
- Vizzu
- 10015 Werkzeuge
- Snoweb
- Schw?nze
- Maplibre
- SVG Repo
- Animierte Hintergründe
- Pico.css
- Schriftarten codieren
- Ui-Neumorphismus
- Sch?ne CSS -Kn?pfe
- Shaper
- Prestige
- Html.cafe
- Diagramme.css
- Kn?pfegenerator
- Doodad -Mustergenerator
- Kaboom
- Skuawk
- Glassmorphism CSS -Generator
- Kalia
- Adminjs
- Pfannkuchen
- Mosaic Lite
- Iconduck
- Luxa CSS
- Funkeln
- Komponenten AI
- Unicode -Pfeile
- Typ -Skala -Klemmengenerator
- Animxyz
- Frontend Toolkit
- COLODSPALETTES.EERTH
- Ungeschnitten
- Lowdefy
- JavaScript Booster
- Layoutmuster
- Basis -Hintergrundentferner
- Theatre.js
- übergang.css
- Die Komponentengalerie
- Party.js
- Kopfloses UI
- Turbo
- tidy.js
- Tail-Kit
- Rückenwindkomponenten
- Pikaday
- HTML -Kesselplatten
- Wirbeln
- Riju
- Devui
- Pollen
- Alternanz
- Uisual
- Supabase UI
- CSS -Layoutgenerator
- Was ist Ihr Lieblings-Front-End-Tool für 2021?
### 60. ?ffnen Sie Requisiten
Open Props bietet eine Reihe von handgefertigten Design -Token, die aus CSS -benutzerdefinierten Eigenschaften bestehen. Aufgrund dieser speziellen CSS -Funktion kann ich sehen, dass solche Tools immer h?ufiger werden. Sie erm?glichen es Ihnen, kleine und nützliche Sammlungen benutzerdefinierter Attribute wie Animations.CSS, Borders.css, Fonts.css, Zindex.css und mehr in Kürze zur Verfügung zu stellen. Oder Sie k?nnen einfach die Hauptdatei "Open Props" verwenden, um alles auf einmal zu erhalten.
Dies ist definitiv ein Front-End-Tool, auf das Sie achten müssen, und es ist auch ein gutes Beitragsziel, wenn Sie die verfügbare Token-Bibliothek aufbauen m?chten.
59. Nextui
Eine moderne React-Bibliothek, die die beliebten CSS-in-JS-L?sungsstiche verwendet und au?erhalb des Box-hellen und dunklen UI-Komponenten sowie eine Standardfarbpalette enth?lt, die nützlich sein kann, um schnell Anmeldeseiten oder andere Inhalte zu erstellen, die ursprünglich mit einer Marke zugeordnet sind.
Es ist derzeit als Alpha -Entwicklungsphase aufgeführt, daher ist es ein weiteres Tool, auf das im kommenden Jahr geachtet wird.
58. Dopefolio
Wenn Sie nach einer M?glichkeit suchen, einfach Ihr eigenes Portfolio von Entwicklern zu erstellen, ist Dopefolio eine schnelle L?sung, die für SEO optimiert ist und über eine hohe Leuchtturmbewertung aus dem Box verfügt.
Live -Demos teilen Sie Ihnen mit, wie es aussieht (reaktionsschnell usw.), und es enth?lt eine Farbauswahlkomponente, damit Sie Ihre eigene Hauptfarbe für bevorzugte Vorlage in Echtzeit testen k?nnen.
57. Vizzu
Dies ist ein einzigartiges Tool auf der diesj?hrigen Front-End-Toolliste. Vizzu ist eine Open -Source -JavaScript -Bibliothek zum Erstellen animierter Datengeschichten und Visualisierungen. Vielleicht ist seine Popularit?t auf die Notwendigkeit zurückzuführen, heute medizinische Daten zu erstellen und zu betten.
Mit dieser Bibliothek k?nnen Sie problemlos statische Datendiagramme, animierte Diagramme und Datengeschichten erstellen. Sie k?nnen einige Live -Beispiele für animierte Diagramme oder Datengeschichten anzeigen, einschlie?lich einer Datengeschichte, die zeigt, welcher Cameo -Charakter die meisten Linien w?hrend des gesamten Laufs der Freunde der TV -Serie enth?lt.
56. 10015 Werkzeuge
Ich scheine jedes Jahr einige Front-End-Tools wie diese zu finden. 10015 Tools sind ein Satz von Front-End-Tools, kein einzelnes Werkzeug. Es enth?lt Textwerkzeuge, Bildwerkzeuge, CSS -Tools, Codierungswerkzeuge (wie Minifikatoren), Farbwerkzeuge, Social -Media -Tools und Tools unter einigen anderen verschiedenen Kategorien.
Dies ist definitiv eine der umfassenderen All-in-One-L?sungen, die ich gesehen habe. Ich bin mir sicher, dass Sie hier einige nützliche Front-End-Tools finden, die Sie jederzeit wieder verwenden k?nnen.
55. Snoweb
Icon -Sets sind immer beliebt und ich sto?e jedes Jahr auf mindestens ein Dutzend neuer Icon -Sets. Dieses Symbolsatz enth?lt optimierte SVG-Symbole, von denen viele integrierte Animationen haben, wenn Sie über sie schweben (wie das ?ffnen/Schlie?en von Umschlagsymbolen).
Wie bei vielen Symbolseiten k?nnen Sie nach Keyword oder Filter nach Kategorie suchen. Eine davon ist die Markenkategorie, die Symbole für Twitter, Facebook, Vimeo, YouTube, Snapchat und mehr enth?lt.
54. Schw?nze
Dies ist das erste Tailwind-basierte Tool, das die Liste erstellt. Dieses Front-End-Tool ist ein Drag-and-Drop-Seitenbauer für Projekte mit Tailwind-CSS.
Es enth?lt zwei kostenlose "Bl?cke" für jede der 15 Kategorien, sodass Sie hier viele kostenlose Dinge zahlen k?nnen, um den Rest jeden Monat freizuschalten.
53. Maplibre
Diese Open Source Map Gallery wurde im M?rz ins Leben gerufen und ist das ganze Jahr über beliebt geworden. Es enth?lt eine JavaScript -Bibliothek und eine SDK zum Anzeigen von Karten in iOS- und Android -Anwendungen.
Wenn Sie die M?glichkeiten eines webbasierten Front-End-Tools verstehen m?chten, enth?lt die Dokumentation viele Beispiele für die Verwendung von JavaScript.
52. SVG Repo
SVG Repo steht auf der Liste ausschlie?lich auf der Nummer. Es handelt sich um eine Bibliothek mit über 300.000 kostenlosen, optimierten SVG-basierten Grafiken und Ikonen, von denen die meisten kommerzielle Verwendung zul?ssig sind.
Jedes Symbol, das Sie ausw?hlen, zeigt Ihnen, zu welcher Lizenz es geh?rt. Sie k?nnen nach Keyword suchen und Ihr Lieblingsymbol für eine sp?tere Verwendung "Speichern" (kein Anmeldung erforderlich).
51. Animierte Hintergründe
Dieses Tool ist dieses Jahr in den Top 60, ist jedoch m?glicherweise nicht das praktischste Front-End-Tool unter ihnen. Wie ich am Anfang sagte, gibt es Dinge, die aus reiner Neugier geklickt werden. Es handelt sich um eine Animations -Hintergrundbibliothek aus verschiedenen Codepen -Demonstrationen.
Die Bibliothek ist nützlich, da der Hintergrund als vorgezeichnetes Video angezeigt wird, sodass Sie sich nicht um alle Demos laden und die Registerkarte Browser zum Absturz bringen müssen. Verwenden Sie diese Tools sorgf?ltig (falls vorhanden), da sie normalerweise viel JavaScript und CSS verwenden.
50. Pico.css
Dies unterscheidet sich vom heutigen beliebten CSS -Framework. Es ist ein bisschen wie ein Anti-Sailwind-Tool, eher wie eine Start-CSS-Datei (z. B. Reset) als ein vollwertiges Framework.
PICO.CSS bietet elegante Standardstile für alle nativen HTML -Elemente (Sie k?nnen hier vorschau), ohne Ihren Tags viele Klassen hinzuzufügen - und die gesamte Datei ist nach GZIP kleiner als 10 KB.
49. Codierungsschriften
Die Codierung von Schriftarten scheint in letzter Zeit ein aufregender neuer Trend zu sein, und CSS-Tricks nutzt dies, um diese kleine interaktive Informationsanwendung zu erstellen.
W?hlen Sie links eine Schriftart, um Beispielcode, Schriftartinformationen (Bindestrich, Italische usw.), Kosten (meistens kostenlos) und Optionen zum Anzeigen von HTML-, CSS- oder JavaScript -Beispielcode anzuzeigen.
48. Ui-Neumorphismus
Diese React -Bibliothek basiert auf einem alten simulierenden Trend, der vor einigen Jahren veraltet zu sein schien. Wird dieser Trend zurückkommen? Wahrscheinlich nicht. Obwohl ich diese React -Bibliothek letztes Jahr zum ersten Mal geteilt habe, gibt es es schon seit ungef?hr zwei Jahren.
Die Bibliothek enth?lt eine gro?e Anzahl verschiedener Komponenten, die alle ein "neues simulierendes" Erscheinungsbild erzielen. Interessanterweise, aber wahrscheinlich nicht für viele Projekte geeignet.
47. sch?ne CSS -Kn?pfe
Fast jede App oder Website ben?tigt Schaltfl?chen, daher ist eine solche Sammlung immer beliebt. Viele dieser Tasten unterscheiden sich von dem, was Sie an anderer Stelle sehen k?nnten.
Viele Schaltfl?chen enthalten interessante Schwebeffekte, und Sie k?nnen HTML und CSS jeder einzelnen Taste direkt auf der Seite problemlos kopieren und einfügen.
46. ??Shaper
Mit diesem interaktiven Tool k?nnen Sie verschiedene UI -Einstellungen auf der Seite in Echtzeit einstellen, um verschiedene Seitenelemente zu erstellen. Sobald Sie den Inhalt an Ihre Pr?ferenz angepasst haben, k?nnen Sie den Code abrufen, der CSS -benutzerdefinierte Eigenschaften verwendet.
Sie k?nnen zwischen der Demo -Ansicht und der "Spezifikation" -Ane (d. H. Code und anderen nützlichen Informationen) wechseln. Dieses Tool konzentriert sich auf die Typografie und den Rest der UI -Stile, was ein wesentlicher Bestandteil des Layouts ist.
45. Prestige
Dies ist ein textbasierter HTTP-Client im Browser-wie Postman, jedoch ohne Schnittstelle. Sie k?nnen Anforderungen im Klartext definieren, die Sie als Kern speichern k?nnen. Es umfasst eine isolierte Keksmanagement und verfügt über helle und dunkle Modi.
Wie der Autor erkl?rt: "Ich habe Prestige erstellt, weil ich eine solche Anwendung brauche, wenn ich arbeite ... und mit einer externen API interagiere."
44. Html.cafe
Dies ist wahrscheinlich das einfachste Werkzeug auf der gesamten Liste. Html.cafe ist mehr oder weniger ein bescheidener Codepen, der bessere Begriffe fehlt. Ich glaube nicht, dass die Leute an solchen Dingen interessiert sein werden, weil es bereits leistungsstarke Tools gibt, die das tun k?nnen, was es kann. Trotzdem ist es ein sehr einfacher HTML-Editor mit Echtzeit-Vorschau-Funktionen.
Es gibt kein separates CSS- oder JavaScript -Fenster wie Codepen, aber Sie k?nnen es einfach in tun