50 unglaubliche Webentwicklungstools, die Sie kennen müssen
- JavaScript-Dienstprogramme
- CSS- und HTML-Tools
- Test- und Datenwerkzeuge
- Bibliotheken und Frameworks
- Workflow und mehr
Willkommen zu unserem Leitfaden zu den unverzichtbaren Webentwicklungstools von 2020. Wenn Sie regelmäßig Front-End-Code für Webanwendungen schreiben, verfügen Sie wahrscheinlich über die richtigen Tools. Ein Boilerplate, das als Grundgerüst dient, eine UI-Bibliothek, mit der Sie die Dinge dynamisch und interaktiv gestalten können. Ein Erstellungsprozess, der ein oder mehrere Tools zum Erstellen der benötigten Dateien und Verzeichnisse enthalten kann.
Möglicherweise verfügen Sie sogar über eine Reihe von CSS- und JavaScript-Dienstprogrammen, auf die Sie immer wieder zurückgreifen. Oder vielleicht besteht Ihr Werkzeug aus ein paar leeren Dateien, Ihrem Code-Editor und nichts weiter (was absolut in Ordnung ist, insbesondere wenn Sie neu in der Szene sind).
Wie auch immer Ihr Toolset aussieht, es ist immer von Vorteil, einen Blick darauf zu werfen, was es gibt und was es Neues im Front-End-Tooling gibt. Lassen Sie uns zu diesem Zweck 50 der interessantesten und praktischsten Webentwicklungstools einführen, die Sie kennen sollten. Die meisten davon sind ziemlich neu und wurden im letzten Jahr bei einigen veröffentlicht, während es einige schon länger gibt und sie erst in den letzten 12 Monaten an Fahrt gewonnen haben.
In jedem Fall finden Sie in dieser Liste auf jeden Fall etwas, das Sie bald in einem Projekt verwenden können. Wir haben die Liste in Abschnitte unterteilt, um die Navigation zu vereinfachen. Sie können die Links verwenden, um direkt zu dem Abschnitt zu springen, an dem Sie interessiert sind, oder einfach die gesamte Liste durchsuchen. Wenn Sie von vorne anfangen, möchten Sie zunächst diese Zusammenfassung von Website-Ersteller .
Willst du noch mehr? Hier ist eine weitere Liste von erstaunlichen Webdesign-Tools , alles was Sie wissen müssen Webkomponenten und sehen Sie sich unbedingt unsere Liste an Benutzertests auch Software-Tools.
JavaScript-Dienstprogramme
01. autoComplete.js
Eine kleine Bibliothek zum Hinzufügen von Funktionen zur automatischen Vervollständigung zu einem Formularfeld. Bietet lose und strenge Suchmodi, eine anpassbare Mindestanzahl von Zeichen vor dem Anbieten von Vorschlägen, optionale Rückruffunktionen und vieles mehr.
02. Indigospieler
Ein modularer, einfach anpassbarer JavaScript-Videoplayer mit sofort einsatzbereiter Werbeunterstützung, mit dem Sie Pre-Roll-, Mid-Roll- oder Post-Roll-Sponsoren für eingebettete Videos aktivieren können.
03. Einfache Tastatur
Eine elegante, reaktionsschnelle virtuelle Tastaturkomponente, die gebrauchsfertige Demos von Tastaturen im mobilen und Desktop-Stil bietet. Die Demo-Tastaturen sind wunderschön, aber Sie können sie auch ganz einfach an Ihre Marke anpassen.
04. fslightbox.js
Ein Vanille-JavaScript-Lightbox-Plugin, mit dem Bilder, HTML5-Videos und YouTube in ein attraktives und benutzerfreundliches Overlay eingebettet werden können. Bietet React- und Vue-Versionen sowie die Möglichkeit, ein Upgrade von der kostenlosen Version durchzuführen, wenn Sie weitere Funktionen nutzen möchten.
05. Rallax.js
Parallax sollte nicht häufig verwendet werden, aber eine einfache abhängigkeitsfreie Lösung wie diese ist eine gute Option. Dies hat eine gute Leistung und eine benutzerfreundliche API zum Starten von Effekten, Stoppen, Beschleunigen und Verketten .wann() Methoden zum Einreihen von Aktionen.
06. FrenchKiss.js
Eine superschnelle Internationalisierungsbibliothek mit einer umfangreichen API. Ein Beispiel für eine Anpassung ist die Möglichkeit, mit einer Sprache umzugehen, für die mehrere Pluralisierungsregeln gelten.
07. Beweglich
Machen Sie jedes Element auf der Seite ziehbar, veränderbar, skalierbar, drehbar oder sogar verziehbar (wie das Perspektivwerkzeug in einem Grafikeditor). Sie können auch die Gruppierungs- und Snap-to-Guides-Funktion aktivieren.
08. Hotkey
Lösen Sie eine Aktion für ein bestimmtes Element mithilfe einer Tastenkombination, einer Tastenkombination oder einer vom Benutzer gedrückten Tastenfolge aus. Die Dokumentation enthält Vorschläge zur Gewährleistung einer guten Zugänglichkeit.
09. Freezeframe.js
Fügen Sie animierten GIFs auf einer Seite Wiedergabe- / Pausenfunktionen hinzu. Lösen Sie die Wiedergabe / Pause per Hover, Klick, Touch-Ereignis oder durch ein externes Element aus, das als Wiedergabe- / Pause-Taste dient.
10. Pagemap
Fügen Sie langen Webseiten eine scrollbare 'Mini-Karte' hinzu, ähnlich wie im Sublime Text-Code-Editor. Es ist fraglich, ob dies nützlicher ist als eine Bildlaufleiste, aber Sie können dies implementieren, wenn die Bildlaufleiste für ein natives Gefühl deaktiviert ist.
11. lax.js
Vanilla JavaScript-Plugin für reaktionsschnelle und mobile Funktionen. Fügen Sie animierten GIFs auf einer Seite Wiedergabe- / Pausenfunktionen hinzu. Lösen Sie Animationen, Übergänge und Parallaxeeffekte auf Seiten aus, während der Benutzer einen Bildlauf durchführt. Beginnen Sie mit den Voreinstellungen oder erstellen Sie benutzerdefinierte Effekte.
CSS- und HTML-Tools
12. Projekt Wallace
Dies ist ein CSS-Analysetool mit einem Dashboard, mit dem Sie die Komplexität Ihres Codes verfolgen können, einschließlich der Anzahl der Codezeilen, der Anzahl der Selektoren, der Anzahl der Deklarationen, der Spezifität, der Verwendung von! Wichtigen, Leistungsengpässen und mehr. Eine komplexe Website erstellen? Sie benötigen eine robuste Web-Hosting Bedienung.
13. DebuCSSer
Ein unauffälliges CSS-Debugging-Tool, mit dem Sie einem oder mehreren Elementen manuell eine Gliederung hinzufügen können. Fügen Sie das Skript ein und halten Sie die STRG-Taste gedrückt, um ein Element zu skizzieren, oder die STRG-UMSCHALTTASTE, um alle Elemente zu skizzieren.
14. Animierte CSS-Burger
Eine kleine Bibliothek mit animierten mobilen Hamburger-Menüs, die Ihren Anforderungen entsprechen sollten, falls Sie in jedem Projekt einen etwas anderen Menüstil benötigen.
15. DropCSS
Ein schnelles JavaScript-Modul, das den HTML-Code einer Seite mit dem CSS vergleicht und diesen dann mit nicht verwendetem Code zurückgibt, wodurch wertvolle Bytes beim Laden der Seite gespart werden. Weitere Informationen zu nicht verwendetem CSS finden Sie im beiliegenden Feld.
16. CSSFX
Ein weiterer nützlicher und einzigartiger Satz von Plug-and-Play-CSS-Animationen und -Effekten. Dieser enthält eine Vielzahl von Effekten - einige erfordern mehr als ein einzelnes HTML-Element, können jedoch problemlos zu einem Projekt hinzugefügt werden.
17. CSS-Grid-Generator
Für jeden, der zum ersten Mal in den CSS Grid-Standard einsteigt, ist ein visueller Helfer ein enormer Schub. Dieser Generator ist eine großartige Möglichkeit, die Funktionen zu erlernen und praktischen Rastercode für alle Ihre Layouts zu erstellen.
18. Darkmode.js
In letzter Zeit scheint es einen Dark-Mode-Wahnsinn zu geben. In diesem Projekt können Sie Seiten einen Umschalter für den Dunkelmodus hinzufügen, indem Sie die CSS-Eigenschaft für den Mischmodus verwenden, um die Dunkel- / Hellmodi zu handhaben.
Test- und Datenwerkzeuge
19. ARC Toolkit
Chrome-Erweiterung der Paciello Group, die in DevTools integriert ist, um im Rahmen Ihres Entwicklungs- und Testworkflows umfassende Barrierefreiheitstests bereitzustellen.
20. Klarheits-Dashboard
Eine Benutzertestplattform von Microsoft. Fügen Sie Ihrer Seite ein Skript hinzu und spielen Sie dann Benutzersitzungen ab, um zu sehen, wie Benutzer mit Ihrer Site oder App interagieren.
21. GraphQL Editor
Dies ist ein nützlicher Online-Editor, mit dem Sie die Erstellung von GraphQL-Schemas beschleunigen können. GraphQL ist eine beliebte neue Technologie, die als effizientere Alternative zur Verwendung von REST dient.
22. jsonbox.io
Freier JSON-Speicher, der Benutzern die Möglichkeit bietet, JSON-Daten über HTTP-APIs mit verschiedenen Befehlen wie GET, POST, PUT und DELETE zu speichern, zu lesen und zu ändern.
23. Einblicke in die Barrierefreiheit
Eine Chrome-Erweiterung, ein 23 Edge-Add-On oder eine native Windows-App zum Ausführen von Eingabehilfen. Sie können einen Schnelltest für die häufigsten Probleme durchführen oder visuelle Überlagerungen auf einer Seite anzeigen, um den Farbkontrast, ARIA-Orientierungspunkte und mehr zu untersuchen.
24. Messen
Dieser ist Teil des neuen Entwickler-Hubs von Google und bietet ein Online-Tool aus einer Hand, mit dem Sie Ihre Inhalte auf wichtige Aspekte wie Leistung, Zugänglichkeit, Best Practices und SEO testen können.
25. Chart.xkcd
Eine skurrile JavaScript-Diagrammbibliothek, die Diagramme auf skizzenhafte oder handgezeichnete Weise im Stil von xkcd, dem beliebten Webcomic, generiert. Könnte eine großartige Option als Teil eines informellen App-Designs sein.
26. useAnimations
Eine Sammlung einfacher, anpassbarer animierter Symbole, die Sie in Projekte auf Mobilgeräten oder im Internet einbinden können. Sie bieten eine React-Version und die Möglichkeit, die vorgefertigten Animationen entweder in Lottie oder in Adobe After Effects zu bearbeiten.
27. Strikefree Musik
Eine wachsende Bibliothek von Audioclips, die Sie in Videos und Podcasts verwenden können, ohne befürchten zu müssen, für Urheberrechtsverletzungen bestraft zu werden. Sie können optional Ihre eigenen Beats erstellen oder zufällig einen auswählen, der bereits erstellt wurde.
28. ZapChart
Ein übersichtliches Online-Tool zum Erstellen gemeinsam nutzbarer Daten im Diagrammformat. Geben Sie einfach die Zahlen für die x- und y-Achse ein und diese App generiert ein Balkendiagramm, das als PNG heruntergeladen oder über eine URL geteilt werden kann.
29. Optimole
Ein Bildoptimierungsdienst und CDN für WordPress. Enthält Funktionen zum Bereitstellen gerätegerechter Bilder mit verlustbehafteter oder verlustfreier Komprimierung, optionalem verzögertem Laden und vielem mehr.
30. Mixkit
Eine Sammlung von HD-Videos und Illustrationen, die nach Kategorien gefiltert werden können und überall ohne Verwendung in kommerziellen und nichtkommerziellen Projekten verwendet werden können.
Bibliotheken und Frameworks
31. Static Site Boilerplate
Ein Toolkit ohne Meinungen und mit zahlreichen Funktionen zum Erstellen statischer Websites. Bietet automatisierte Builds, einen lokalen Entwicklungsserver, Optimierungen auf Produktionsebene (wie Code-Minimierung und Bildverarbeitung) und unterstützt eine Reihe moderner Front-End-Technologien (Sass, ES6 usw.).
32. Web Base
Ein reaktionsbasiertes UI-Framework mit einer Vielzahl von Komponenten, die von komplexen Funktionen wie einer Zahlungskartenkomponente (dh Eingabemaske für verschiedene Kreditkartentypen) bis hin zu Funktionen auf niedriger Ebene wie FlexGrid und Layer zum Erstellen Ihrer Layouts reichen.
33. Materialisieren
Ein responsives Front-End-Framework mit einer Vielzahl von CSS- und JavaScript-Komponenten. Enthält Komponenten für Formularfunktionen, Layouts, mobile-spezifische und mehr - alles basierend auf Googles Material Design.
34. Scene.js
Eine umfangreiche API zur Steuerung von Animations-Timing, Übergängen und Effekten. Möchten Sie irgendwo Vermögenswerte speichern? Probiere diese Cloud-Speicher Optionen.
35. Quasar
Eine Vue-basierte UI-Bibliothek mit Komponenten zum Erstellen von Anwendungen mit nur einer Seite, progressiven Webanwendungen, hybriden mobilen Apps und Desktop-Apps ohne unnötiges Aufblähen.
36. Reagiere einfach Img
Eine faul ladende Bildlösung für React-Projekte, die die IntersectionObserver-API und den neuen Priority Hints-Standard für eine elegante Bildladelösung verwendet.
37. Animation reagieren
Eine benutzerfreundliche Animationsbibliothek für React, mit der Sie Seitenelementen auf der Grundlage von Inhaltsänderungen und Laden auf einfache Weise eindeutige vorgefertigte animierte Effekte hinzufügen oder eigene erstellen können.
38. Reduzieren Sie die Redux-Ladestange
Eine progressive animierte Ladeanzeige für React-Projekte mit der Möglichkeit, mehrere Ladeleisten auf einer Seite hinzuzufügen, die anzeigen, dass verschiedene Elemente unabhängig voneinander geladen werden.
39. Reaktionsbildlupen
Eine Reihe von reaktionsschnellen React-Komponenten zum Vergrößern und Vergrößern von hochauflösenden Bildern auf Mobilgeräten oder Desktops, ähnlich der Zoomfunktion auf Einkaufsseiten wie Amazon, mit der Sie beim Zoomen ziehen können, um bestimmte Teile eines Bildes zu untersuchen.
40. RIFM
Reagieren Sie auf eine Komponente, um eine HTML-Formulareingabe in eine formatierte Eingabe umzuwandeln. Wenn ein Benutzer beispielsweise etwas in Kleinbuchstaben eingibt, können Sie bei der Eingabe Großbuchstaben (oder nahezu jedes bevorzugte Format) erzwingen.
Workflow und mehr
41. Fernentwicklung
Ein Erweiterungspaket für Visual Studio Code, mit dem Sie die vollständigen Funktionen von VSCode remote per SSH in einen beliebigen Ordner in einem Container, einem Remotecomputer oder einem Windows-Subsystem für Linux (kurz WSL) verwenden können.
42. Fabelhaft
Auf diese Weise können Sie CSS-Eigenschaften in einer Seitenleiste in VSCode bearbeiten. Zeigt CSS aus verschiedenen Quellen an, einschließlich CSS-in-JS-Bibliotheken, .scss-Dateien, HTML-Blöcken und Stilen, die an Bibliothekskomponenten (Angular, Svelte, Vue) gebunden sind.
43. packtracker.io
Ein Tool, das Ihr Webpack-Bundle bei jedem Commit verfolgt und analysiert. Vermeidet übergroße Assets, Überbeanspruchung von npm-Paketen und redundante Inhalte, um eine bessere Gesamtleistung der App zu gewährleisten.
44. Flattern
Googles UI-Entwicklungs-Toolkit zum Erstellen nativ kompilierter Apps für Web, Desktop und Mobile. Produziert eine App für alle Plattformen aus einer einzigen Codebasis und bietet eine flexible Benutzeroberfläche zum Booten.
45. Packem
Ein JavaScript-Modulbündler, der angeblich doppelt so schnell ist wie sein Hauptkonkurrent Parcel. Zum Zeitpunkt des Schreibens noch in Alpha, aber ein vielversprechendes Tool, das in den kommenden Monaten Ihr Anlaufpunkt sein könnte.
46. Pika
Ein Toolset mit mehreren Funktionen, das npm-Statistiken, Paketsuche, ein CDN und Pika Web enthält. Mit letzterem können Sie Abhängigkeiten zu einem Projekt direkt im Browser ohne Webpack, Browserify usw. hinzufügen.
47. Kommentar
Ein leichtes, werbefreies, datenschutzorientiertes Kommentarsystem, das Sie in Ihre Webseiten einbetten können, das über den Cloud-Service verwendet oder selbst gehostet werden kann. Beinhaltet Akismet-Spam-Erkennung, klebrige Kommentare, Abstimmungen, Markdown-Unterstützung und mehr.
48. Nur
Eine Build-Task-Bibliothek mit einer benutzerfreundlichen API zum Erstellen verketteter, paralleler oder verschachtelter Tasks während Ihres Build-Prozesses.
49. Git-Geschichte
Durchsuchen Sie ganz einfach den Verlauf einer Datei auf GitHub, GitLab oder Bitbucket. Wählen Sie einfach eine Datei-URL aus und ersetzen Sie github.com durch github.githistory.xyz. Ein animierter visueller Verlauf der Datei wird angezeigt.
50. Erhabene Verschmelzung
Ein schneller, suchfreundlicher Git-Client (Mac, Windows, Linux) der Hersteller von Sublime Text. Bietet Syntaxhervorhebung, integriertes Zusammenführungswerkzeug, Side-by-Side-Unterschiede und mehr.
Dieser Inhalt erschien ursprünglich im Netzmagazin.
Weiterlesen:
