62 geniale Tools für die Webentwicklung im Jahr 2024

Es hat etwas romantisches und aufregendes, TextEdit oder Notepad zu öffnen und „<HTML>“ einzugeben, um ein neues Projekt zu starten. So begannen für viele von uns die Besessenheit mit der Programmierung für das Web. Im Jahr 2021 tun Web-Entwicklungs-Tools mehr, als nur unseren Text aufzuzeichnen – sie helfen uns, Projekte zu erstellen und den gesamten Prozess zu beschleunigen. Darüber hinaus gibt es viele weitere Elemente als nur HTML und CSS zu berücksichtigen.

Die Planungsphase ist zum Beispiel sehr wichtig. Du musst das Wireframing, das Design und die kollaborativen Arbeitsabläufe berücksichtigen. Außerdem musst du das ideale JavaScript-Framework auswählen, ob du eine integrierte Entwicklungsumgebung (IDE) verwenden willst und vieles mehr.

In diesem Beitrag werfen wir einen Blick auf 62 Tools für die Webentwicklung, die du im Jahr 2021 nutzen solltest. Aber bevor wir dazu kommen, lass uns darüber sprechen, was wir unter einem Web Development Tool verstehen.

Was wir unter einem Web Development Tool verstehen

Oberflächlich betrachtet scheint die Kategorisierung eines Web Development Tools einfach zu sein. Aber selbst wenn man in das seichte Ende eintaucht, gibt es ein paar Überlegungen, die die Grenzen verschwimmen lassen.

Überlege zum Beispiel, ob ein Videostreaming-Dienst als ein Tool für die Entwicklung zählt. In einer Bubble, wahrscheinlich nicht. Wenn du es jedoch benutzt, um deinen Bildschirm für eine bestimmte Design-Anwendung aufzuzeichnen, verwandelt es sich plötzlich in ein einzigartiges kollaboratives Tool.

Unserer Meinung nach ist ein Webentwicklungs-Tool etwas, das dir hilft, die Ziele deines Projekts auf eine fokussierte Weise zu erreichen. Das schließt zwar nicht einzelne Programmiersprachen ein, aber es gibt Subsets, Supersets und Frameworks wie TypeScript, die die Grenze überspannen. Wenn du das große Geld verdienen willst, ist es wichtig, diese Aspekte im Auge zu behalten.

Für ein anderes Beispiel, betrachte Git. Man könnte argumentieren, dass dieses Versionskontrollsystem (VCS) sehr viel abdeckt. Es gibt eine spezifische Sprache, um Befehle auszuführen, und die Kernfunktionalität bietet eine Menge in Bezug auf die Webentwicklung. Du kannst es aber auch als Tool zum Lernen nutzen, indem du die Logs des Issue Trackings und der Commits durchgehst.

Insgesamt kann ein Web Development Tool praktisch alles sein, was dein Projekt effizient und produktiv macht. Du wirst diese Vielfalt in der Liste der Tools bemerken.

Wie Web Development Tools deinen Workflow optimieren können

Wir geben dir eine Trigger-Warnung vor den nächsten paar Worten: „Crunch Time„.

Ja, dieser gefürchtete Ausdruck schreit förmlich danach, dass zeitsparende Webentwicklungs-Tools den Tag retten. Die Statistiken zeigen, dass mehr Projekte Crunch als Standard nutzen und viele Entwicklungsindustrien nutzen es auch heute noch.

Unabhängig davon, ob dein Unternehmen Crunch und Überstunden nutzt oder braucht, können Webentwicklungs-Tools trotzdem helfen. Diese Tools nehmen dir die schwere Arbeit ab und automatisieren die alltägliche Arbeit, die deinen Tag auffrisst. Als solche bieten sie einen organischen Schub für deine Produktivität.

Sie können aber auch einen Bonus bieten, wenn du unter einem agilen Projektrahmen wie Scrum arbeitest. Ein Tool wie JSFiddle kann dir zum Beispiel dabei helfen, Snippets mit anderen Teams zu teilen, wenn ein Sprint zu Ende geht und du dich auf den nächsten vorbereitest.

Auch wenn die täglichen Standups nicht verschwinden werden, könnte ein Discord-Server oder ein Slack-Kanal eine bessere Möglichkeit bieten, sich zu fokussieren und die anstehenden Aufgaben abzustimmen, ohne den Druck der aktuellen Sprint-Ziele.

Im Großen und Ganzen geht es bei Tools für die Webentwicklung genauso um die Planung wie um die Ausführung.

Wie du den richtigen Entwicklungsstack für dein Projekt auswählst

Wahrscheinlich predigen wir zu den Bekehrten, aber ein hervorragendes Tool für die Webentwicklung ist es wert, mit einem roségoldenen M1-MacBook ausgestattet zu werden. Die richtige Mischung von Tools für dein spezifisches Projekt ist entscheidend, um eine solide Arbeitsgrundlage zu schaffen.

Wenn es etwas ist, das du vorher noch nicht in Betracht gezogen hast, wird sich eine erste Planungsphase als unbezahlbar erweisen. Wenn du dir etwas Zeit nimmst, um dich für die Tools zu entscheiden, die du verwenden willst, verzögert sich die Codierungsphase des Projekts. Allerdings wirst du diese Zeit später wieder zurückbekommen, da es weniger potenzielle Probleme mit der Software geben wird. Du wirst auch ein konsistenteres Ergebnis sehen (da alle auf der gleichen Wellenlänge sind).

Überlegungen zur Wahl deines Entwicklungsstacks

Bei der Wahl des richtigen Stacks für das Projekt kommt es auf Folgendes an:

Komplexität: Überlege dir, wie komplex dein Deliverable sein muss, da dies die Komplexität des Stacks bestimmt.
Skalierbarkeit: Wenn dein Projekt für ein lokales Unternehmen ist, wird es andere Lösungen brauchen als ein globales Unternehmen. Als solches brauchst du einen skalierbaren Stack, um deine Ziele zu erreichen.
Sicherheit: Es versteht sich fast von selbst, dass die Sicherheit der Nutzer und deiner Webseite nicht gefährdet werden darf.
Kosten: Natürlich gibt niemand gerne zu viel Geld aus, und wenn es sich um ein knappes Budget handelt, spielt das eine größere Rolle als ein leeres Scheckbuch

Es gibt zwei Bereiche, in die du Technologien aufteilen kannst:

Serverseite: Hier solltest du dir die Backend-Technologien ansehen, die du verwendest. Zum Beispiel solltest du die Wahl deines Hosts und Webservers, die Speicherung von Schlüsselwerten und SQL, alle App- und Automatisierungs-Frameworks, die du verwendest, und natürlich auch die Programmiersprache berücksichtigen.
Client-seitig: Die Auswahl deiner Frontend Tools wird wohl einfacher sein, besonders wenn es um die verwendeten Sprachen geht. Während HTML, CSS und JavaScript zum Einsatz kommen, musst du bei der Wahl des JavaScript-Frameworks (und des Automatisierungs-Frameworks) einiges beachten.

Wenn es um Entwicklungsstacks geht, wirst du feststellen, dass viele große Webseiten eine Kombination aus JavaScript und React.js zusammen mit Nginx verwenden. Du wirst auch Memcached, Redis und Ruby on Rails in Entwicklungsstacks sehen.

62 fantastische Tools für die Webentwicklung im Jahr 2024

Schauen wir uns nun die Liste der Web Development Tools an, die wir im Jahr 2021 zu verwenden empfehlen. Wir haben sie in Kategorien eingeteilt, aber ansonsten sind die Tools in keiner bestimmten Reihenfolge. Wenn du es eilig hast, kannst du einfach zu einem bestimmten Abschnitt springen, der unten aufgeführt ist.

Lokale Entwicklungsumgebungen

Eine lokale Entwicklungsumgebung ist ein essentieller Teil eines jeden Entwicklungsstacks. Besonders wichtig ist es jedoch für die Webentwicklung. Hier sind einige der bekanntesten lokalen Entwicklungs-Tools.

1. DevKinsta

Wir mögen voreingenommen sein, aber DevKinsta könnte die Nummer eins der Webentwicklungs-Tools für 2021 und darüber hinaus werden.

Streiche das – wir sind voreingenommen und wir sind stolz auf das, was wir herausgebracht haben!

Für die Uneingeweihten: DevKinsta ist eine Möglichkeit, lokale WordPress-Installationen im Handumdrehen zu erstellen. Es ist eine komplette Suite, mit der du eine WordPress Seite für macOS und Windows Maschinen entwerfen, entwickeln und bereitstellen kannst (eine Linux Version ist in Vorbereitung).

Du kannst deine Installation an dein aktuelles Projekt anpassen. Zum Beispiel kann dein „Server“ Nginx oder Apache verwenden, die PHP Version deiner Wahl, MariaDB oder MySQL, und vieles mehr:

DevKinsta's Einstellungsmöglichkeiten — DevKinsta’s Einstellungsmöglichkeiten

Es gibt noch mehr unter der Haube. Mit dem eingebauten SMTP Server kannst du auch E-Mails testen und debuggen und für die Datenbankverwaltung kannst du das leistungsstarke Adminer Tool nutzen:

DevKinsta's Adminer-betriebener Datenbankmanager — DevKinsta’s Adminer-betriebener Datenbankmanager

Insgesamt denken wir, dass DevKinsta ideal für die moderne WordPress-Entwicklung ist. Es kann direkt in deinen Workflow integriert werden.

Wir haben dieses Tool mit Entwicklern, Designern, Freelancern und Agenturen im Hinterkopf entwickelt. Aber praktisch jeder, der täglich mit der Entwicklung zu tun hat, wird DevKinsta zu schätzen wissen – vor allem (aber nicht nur) Kinsta-Nutzer.

Und das Beste: DevKinsta ist völlig kostenlos!

2. MAMP

Das MAMP-Logo.

Man könnte meinen, dass die klassischen Tools zum Erstellen und Bereitstellen von Webseiten tot und begraben sind, wenn man bedenkt, dass es immer schnellere Sandbox-Tools gibt. Aber die traditionellen Webservice-Stacks, wie LAMP, MAMP und XAMPP, sind immer noch sehr beliebt.

Typischerweise kombinieren sie ein Betriebssystem (OS) – Linux, macOS oder Windows – zusammen mit einem Apache Webserver, einer MySQL Datenbank und den Programmiersprachen Python, PHP und Perl in einem Stack. Ein solcher Webservice-Stack wird also auch im Jahr 2021 noch zum Einsatz kommen.

MAMP ist die macOS-spezifische Version des Tools. Dieser Ansatz sieht vor, dass du einen Stack installierst und an Design und Deployment arbeitest. Während der Prozess langwieriger sein kann als bei moderneren Setups, gibt es unter der Haube immer noch ein ähnliches Maß an Flexibilität – oder zumindest ist das Potenzial da.

Während du bei einem Tool wie DevKinsta aus einer eleganten grafischen Benutzeroberfläche (GUI) auswählst, musst du bei einem Webservice-Stack die benötigten Ergänzungen manuell installieren. Es gibt zum Beispiel keine eingebaute Möglichkeit, eine WordPress Seite aufzusetzen, ohne „deine eigene zu erstellen“ Ähnlich verhält es sich mit dem Testen von E-Mails.

Wie auch bei anderen Tools für lokale Entwicklungsumgebungen ist MAMP komplett kostenlos. Allerdings gibt es auch eine Premium-Version von MAMP für Windows und Mac, die den Funktionsumfang erweitert und ein umfassendes, robustes Tool für die Webentwicklung bietet.

Aufgrund der Flexibilität und des Preises sind klassische Web Service Stacks immer noch auf vielen Entwicklerrechnern zu finden. Kommandozeilen-Aficionados werden sich natürlich zu dieser Lösung hingezogen fühlen, besonders wenn du gerne Paketmanager wie Homebrew, Flatpak oder Ninite verwendest.

Natürlich werden auch Apache-Entwickler diese Stacks nutzen, ebenso wie MySQL- und Python- oder PHP-Entwickler. Auch WordPress-Entwickler werden sich hier zu Hause fühlen.

3. XAMPP

XAMPP ist ein weiterer Webservice-Stack, der von PHP-Entwicklern sehr geliebt wird, auch von denen, die WordPress-Produkte erstellen. Das „X“ im Namen steht für die plattformübergreifende Natur des Tools. Es bietet Installer für Windows-, macOS- und Linux-Maschinen:

Während es früher einen Unterschied zwischen den verschiedenen Web Service Stacks gab, haben ständige Updates und Verbesserungen das Feld ausgeglichen. Dennoch hat XAMPP ein paar einzigartige Tricks auf Lager.

Zum Beispiel ist MySQL nicht mehr das Standard Relational Database Management System (RDMS). Stattdessen verwendet XAMPP MariaDB. Es ist wahrscheinlich eine genauere Repräsentation eines Produktionsservers, angesichts des Wechsels zu anderen Lösungen nach der Übernahme durch Oracle.

Außerdem gibt es einen Web-App-Installer innerhalb des XAMPP-Pakets. Bitnami ist ähnlich zu Lösungen wie Softaculous, aber Bitnami ist XAMPP-spezifisch:

Obwohl es viele Apps gibt, wirst du wahrscheinlich am meisten an dem WordPress Installer interessiert sein. Dennoch gibt es viele Add-ons zur Auswahl, was XAMPP zu einer flexiblen Lösung für die lokale Entwicklung macht.

Text- und Code-Editoren

Die meisten Entwickler lieben es, sich darüber zu streiten, welchen Code-Editor man verwenden sollte. Okay, wir sind übertrieben, aber es gibt viele Meinungen zu diesem Thema, mit einer glühenden Fanbase für jeden Editor.

Wie auch immer, wenn die Umfragen korrekt sind, benutzt du wahrscheinlich Sublime Text, Visual Studio Code (VSCode) oder IntelliJ IDEA. Es macht Sinn, denn diese drei Tools skalieren von der einfachen Textbearbeitung bis hin zur vollwertigen integrierten Entwicklungsumgebung (IDE). Aber es gibt auch andere, die eine Erwähnung wert sind. Lass uns einen Blick auf ein paar von ihnen werfen.

4. Visual Studio Code

Seit seiner Einführung im Jahr 2015 ist die Nutzung von Visual Studio Code in allen Entwicklungsabteilungen explodiert.

Es ist ein von Microsoft entwickelter Open Source Code-Editor, der genug bietet, um als IDE bezeichnet zu werden. Es bietet zweifelsohne genug Funktionalität, um mehr als die Hälfte des Marktes zu erobern – 55% der Webentwickler nutzen Visual Studio Code täglich.

In seiner Standardkonfiguration ist Visual Studio Code in erster Linie ein Texteditor. In Verbindung mit der Erweiterungsbibliothek wird es jedoch modular und flexibel genug, um alle deine Entwicklungsanforderungen zu erfüllen:

Die Visual Studio Code Erweiterungsbibliothek.

Es bedeutet, dass du Linters und Fixer für deine gewählte Sprache installieren kannst (ja, ESLint und PHP CS Fixer sind dabei), zusammen mit Docker- und Vagrant-Erweiterungen, und vieles mehr.

Apropos Sprachen: Visual Studio Code unterstützt JavaScript, Node.js und TypeScript out of the box. Das Ökosystem der Erweiterungen ist jedoch so reichhaltig, dass du in der Lage sein wirst, etwas zu finden, das die Sprache unterstützt, die du verwendest.

Darüber hinaus findest du eine erstklassige Integration mit anderen Microsoft-Produkten, vor allem mit GitHub:

Visual Studio Code hat eine eigene VCS-Integration mit GitHub

Visual Studio ist komplett kostenlos, und angesichts des Funktionsumfangs ist es für viele ideal. Wir halten VSCode für einen guten Mittelweg zwischen IDEA und Sublime Text. Wo wir gerade dabei sind, schauen wir uns Letzteres als nächstes an.

5. Sublime Text

Sublime Text ist eine Hauptstütze in der Welt der Texteditoren. Es ist reduzierter als die meisten anderen Lösungen, aber sein Aussehen täuscht über die Leistung unter der Haube hinweg.

Zum Beispiel wirst du vieles von dem, was Sublime Text bietet, auch bei anderen Konkurrenten finden. Die Befehlspalette ist etwas, das du in vielen Lösungen siehst, weil es einfach zu benutzen ist.

Darüber hinaus gibt es mächtige Tastaturkürzel für die Bearbeitung, wie z.B. die Mehrfachauswahl, um mehrere Spalten auf einmal zu bearbeiten. Außerdem bietet die Goto Anything Funktion Vim-ähnliche Kombinationen von Tastenkombinationen, um deine Dateien zu durchlaufen:

Sublime Text kann Tastenanschläge kombinieren, um dir beim Navigieren zu helfen.

Sublime Text ist ein Premium Tool mit einer sehr liberalen Testphase. Es kann als kostenlos angesehen werden, aber um dem Entwickler etwas zurückzugeben, solltest du eine Lizenz für die erweiterte Nutzung erwerben.

Unserer Meinung nach bietet Sublime Text für viele kleinere oder hobbymäßige Coder eine großartige User Experience (UX), die das Nötigste bietet. Es ist bei vielen Entwicklern wegen seiner ansprechenden Optik, dem unkomplizierten Layout und der Erweiterbarkeit sehr beliebt.

6. Atom

Zu einem bestimmten Zeitpunkt wurde Atom von vielen Entwicklern genutzt. Seit Visual Studio Code auf dem Markt ist, wird es jedoch immer weniger genutzt. Das ist schade, denn es ist ein großartiger Code-Editor, der für viele verschiedene Anwendungen geeignet ist.

Es ist eine von GitHub entwickelte App, was vielleicht erklärt, warum es bei Microsoft in der Hackordnung nach unten geschoben wurde. Es wird jedoch regelmäßig aktualisiert und kann als alternative Version von Visual Studio Code betrachtet werden.

Die Textbearbeitung ist funktional und wie sein größerer Bruder hat es eine integrierte GitHub-Integration. Es gibt auch viele Add-ons, die „Pakete“ genannt werden:

Es gibt viele Möglichkeiten, um Atom an deinen Workflow und deine Projekte anzupassen. Atom enthält mehrere Themes, aus denen du wählen kannst, und einige, wie One Dark, sind so beliebt, dass sie auch ihren Weg in andere Editoren gefunden haben:

Atom's One Dark Theme. — Atom’s One Dark Theme.

Atom ist ein funktionaler Code-Editor, der einen Versuch verdient hat. Da Atom jedoch auf Electron aufbaut, haben sich einige Nutzer über große Dateien und langsam laufende Projekte beschwert. Daher empfehlen wir es für kleinere Projekte und schnelle Skripte (vor allem mit dem eingebauten Terminal-Paket), aber es ist vielleicht nicht das Beste für komplexe Arbeiten.

7. Notepad++

Um es gleich vorweg zu nehmen: Notepad++ wird keinen der „großen“ Code-Editoren ersetzen, die du bereits benutzt, wie IntelliJ IDEA oder Visual Studio Code. Aber es wird dir mehr Leistung unter der Haube für einfache Skripte und allgemeine Textbearbeitungsanwendungen bieten.

Abhängig von deinen Projekten könnte es dich dazu verleiten, zu wechseln. Trotz seiner Einfachheit wird Notepad++ in einer Vielzahl von Projekten eingesetzt.

Es ist ein reiner Windows-Code-Editor, was das „Plus-Plus“ in seinem Namen erklärt. Natürlich ist Notepad ein einfacher Texteditor, der standardmäßig auf Windows-Installationen zu finden ist. Notepad++ sieht aus wie sein Geschwisterchen, aber es beinhaltet auch entwicklungsspezifische Funktionen wie:

Registerkarten und geteilte Fenster
Support für fast 80 Programmiersprachen
Auto-Vervollständigungsfunktion
Eine Funktionsliste, die eine großartige Möglichkeit bietet, alle in einer Datei verwendeten Funktionen auf einen Blick zu sehen

Darüber hinaus ist Notepad++ flexibel, wenn es um das Projektmanagement geht. Es unterstützt drei verschiedene Ansätze: Sitzungen, Arbeitsbereiche und Projekte. Sobald du dich mit Notepad++ beschäftigst, wirst du sehen, dass du es für umfangreichere Projekte als einseitige Skripte verwenden kannst.

Wir denken, dass Notepad++ für Entwickler geeignet ist, die eine große Funktionalität wünschen, die auch anpassbar ist. Bei der Benutzung hat es den Open Source Vim Vibe, der für bestimmte Projekttypen besser geeignet ist als andere.

8. Die JetBrains Suite

Wenn es um Entwicklungs-IDEs geht, wird die JetBrains Suite ganz oben auf deiner Liste stehen (oder ganz nah dran). Das Geschäftsmodell von JetBrains ist clever, denn obwohl es eine Vielzahl von Editoren gibt, sind sie alle „Untergruppen“ des wichtigsten Editors, IntelliJ IDEA.

IntelliJ IDEA ist eine führende Java IDE.

IDEA bezeichnet sich selbst als eine Java IDE. Es unterstützt praktisch alle Funktionen der anderen IDE Tools in seinem Sortiment. Und als solche unterstützt sie auch viele Programmiersprachen.

PyCharm z.B. übernimmt die meisten Python-Funktionen von IDEA und verpackt sie als eigenes Tool. Du wirst auch feststellen, dass phpStorm und WebStorm das Gleiche tun.

PyCharm ist eine Python-spezifische IDE, die im Sprachraum sehr beliebt ist.

Die Benutzung von IDEA ist ein Kinderspiel – JetBrains hat einen großartigen Job gemacht, um dich zum Programmieren zu bringen, anstatt dich in Konfigurationen und Einstellungen zu wühlen. Es mag überraschen, aber die Grenze zwischen einem Kommandozeilen-Editor wie Vim und IDEA ist oft sehr schmal.

Beide Tools haben einen ähnlichen Fokus auf Workflow und Effizienz, obwohl IDEA auch die Möglichkeit bietet, Vim-Tastaturbelegungen zu importieren, wenn du dich mit dieser Arbeitsweise wohl fühlst.

Mit den IDEA-Erweiterungen kannst du Vim-Tastaturbindungen verwenden, damit du dich wie ein Zauberer fühlst.

Wir gehen davon aus, dass du IntelliJ IDEA benutzt, wenn du in einem großen Projekt oder Unternehmen mit einem Software-Deal arbeitest. Sei es, um Projekte zu teilen oder um in einer einheitlichen Umgebung zu arbeiten. Viele WordPress-Entwickler verwenden JetBrains Produkte, weil sie so robust sind, um Projekte zu verwalten.

Der Preis ist auch ein Faktor, und IntelliJ basiert auf einem Abo-Modell, das oft in den drei- oder vierstelligen Bereich pro Jahr geht.

Trotzdem gibt es einige „Community“-Editionen von JetBrains-Produkten. Dabei handelt es sich jedoch um abgespeckte Versionen der übergeordneten Software, also um Open Source Lösungen, bei denen die proprietären Elemente entfernt wurden.

Darüber hinaus bietet JetBrains wettbewerbsfähige Preise für Open Source Projekte, Startups, Bildungseinrichtungen, Docker Captains und viele weitere Nischengruppen.

Web Design und Prototyping Tools

Natürlich ist eine Web-App nichts ohne eine gute User Experience (UX). Für das Prototyping deines Layouts und der visuellen Gestaltung brauchst du daher oft ein spezielles Tool. Design Tools sind sowohl auf der Server- als auch auf der Client-Seite der Entwicklung unerlässlich. Hier sind ein paar beliebte Auswahlmöglichkeiten.

9. Figma

Figma ist ein oft erwähntes Tool für die Webentwicklung, mit dem du gemeinsam an deinem Design arbeiten kannst.

Du kannst den Drag-and-Drop-Editor nutzen, um Oberflächen und andere benutzerorientierte Elemente zu erstellen. Für Entwickler gibt es auch die Möglichkeit, Codeschnipsel zu holen, um sie in deine Projekte zu implantieren. Figma macht den Prozess – von der Idee bis zur Implementierung – reibungslos und hält die Revisionen entlang der gesamten Projektkette niedrig.

Außerdem profitierst du von einem homogenisierten Set an Tools, die dir bei der Auswahl von Schriftarten und Farben helfen. Dieser Prozess steht im Gegensatz zur Verwendung separater Tools wie Type Scale:

…und eine Teilmenge von Webentwicklungs-Tools wie Adobe Color, Coolors, verschiedene Colorpicker und vieles mehr.

Während Figma für Einzelentwickler-Projekte von Nutzen ist, hat es für ein Team mehr Vorteile, da es in der Größe skaliert. Teams werden die kollaborativen Aspekte von Figma mögen, wie das zentrale Asset Repository und die wiederverwendbaren Komponenten. Teamleiter werden auch die umfassenden Berichtsoptionen schätzen, um zu sehen, wie die Teammitglieder die verschiedenen Designsysteme nutzen.

Was die Preisgestaltung angeht, so kostet Figma 12 $ pro „Editor“ auf der Standardstufe, die auf 45 $ pro „Editor“ für unternehmensbasierte Teams ansteigt (für „Editor“ lies „Sitz“ – es ist das gleiche Konzept). Der Preis kann also steigen, je nachdem wie viele Redakteure du an Bord haben möchtest.

10. Sketch

Sketch ist eine App nur für macOS, die auch unter Entwicklern sehr beliebt ist:

Das Sketch Logo.

Es ist beliebt, weil Sketch viele Funktionen unter der Haube hat und es ist auch ein Kinderspiel zu benutzen, was Sinn macht, da es eine native macOS-App ist. Es sieht ein wenig aus wie Apples Xcode IDE, was nicht schlecht ist, und es fühlt sich großartig an zu navigieren.

Natürlich kannst du die wichtigsten Funktionen wie Vektorbearbeitung und Größenanpassung von Constraints durchführen. Es gibt aber noch viel mehr in der App, das dir hilft, Designs zu generieren und sie auf schnelle Weise zu exportieren.

Nimm zum Beispiel die Smart-Layout-Funktion von Sketch, die eine adaptive Größenanpassung nutzt, um deine Abmessungen und dein aktuelles Layout zu berücksichtigen. Es gibt auch viele kollaborative Tools, die jedem die Möglichkeit geben, in ein Design einzutauchen und es zu perfektionieren.

Sketch unterscheidet sich von einem Tool wie Figma dadurch, dass ein Freiberufler oder Einzelentwickler kostenlos einsteigen kann und dann ein Abonnement abschließt, sobald er Bedarf hat. In dieser Hinsicht ist die Preisgestaltung von Sketch entweder eine einmalige Zahlung von $99 oder $9 pro Monat pro Benutzer.

11. InVision Studio

InVision Studio verkauft sich eindeutig als eine „Screendesign“-App. Das macht Sinn und es ist auch klarer zu verstehen. InVision Studio bietet alle Standard-Features und Funktionen, die du erwarten würdest, wie z.B. einen intuitiven Ebenen-basierten Editor und Vektor-Support.

Es gibt aber noch viel mehr in der Box, was das Prototyping und die Erstellung von Animationen betrifft. Zum Beispiel kannst du mit Zeigen, Klicken und Ziehen Artboards und Screens miteinander verbinden. Mit dieser Funktion kannst du Animationen als Teil des Designprozesses erstellen und nicht als etwas, das du später weitergibst.

Animationen innerhalb der InVision Studio App.

Apropos Übergabe: Das gesamte Team kann innerhalb von InVision Studio arbeiten, da es gemeinsame Komponentenbibliotheken, globale Synchronisationsoptionen, einen robusten Inspektionsmodus und mehr gibt.

Auch die Preisstruktur ist wettbewerbsfähig. Die kostenlose Version von InVision Studio bietet dir fast alle Funktionen der kostenpflichtigen Version, nur die Anzahl der Dokumente, die du speichern kannst, ist eingeschränkt. Der Pro-Tier ist für die Leistung der App wertvoll (ca. $95/Nutzer/Jahr).

12. Affinity Designer

Wenn du ein Adobe Illustrator Nutzer bist, wirst du Affinity Designer in der Vergangenheit kennengelernt haben. Serifs Ansatz für Grafikdesign scheint Adobes Lösung den Rang abzulaufen:

Seit der Markteinführung hat es aufgrund seines guten Verhältnisses zur Community, seiner hervorragenden Designprinzipien und seines attraktiven Preismodells eine stetig wachsende Nutzerbasis gewonnen. Es gibt Versionen für Mac, Windows und iPad, und jede Version kann mit Vektoren, Rastern oder beidem gleichzeitig arbeiten:

Die Tools, die du von Illustrator gewohnt bist, sind alle vorhanden, zusammen mit einer ganzen Reihe von Farbprofilen und Exportoptionen:

Die Exportoptionen im Affinity Designer.

Kurzum, die Features und Funktionen sind vorhanden, um professionelle Grafiken für deine Projekte zu erstellen. Außerdem ist der Preis sehr wettbewerbsfähig. Es kostet um die 50$ zum Vollpreis, was eine einmalige Zahlung ist. Es verfügt nicht über eine entsprechende Cloud-basierte Option wie Illustrator. Trotzdem bekommst du für eine einmalige Gebühr den Umfang von Adobe in einer subjektiv besseren Form präsentiert.

13. CodePen oder JSFiddle

Als wir vorhin über IntelliJ IDEA sprachen, haben wir eines seiner kleinen, aber praktischen Features nicht erwähnt – Scratch-Dateien. Es ermöglicht es dir, schnell einen Codeschnipsel zu schreiben und zu testen, ohne dein aktuelles Arbeitsprojekt zu beeinflussen.

Für Nutzer anderer Code-Editoren ist eine Lösung wie CodePen oder JSFiddle ein hervorragender Ersatz. Sie funktionieren beide ähnlich: es gibt drei Texteditoren für HTML, CSS und JavaScript und einen Ausgabebildschirm, um das Ergebnis zu sehen:

Du kannst deinem „Pen“ oder „Fiddle“ je nach Plattform einen Namen geben, es speichern und mit anderen teilen. Es ist eine so einfache Idee – eine, die dir dabei helfen kann, deine halbgaren Gedanken zu einem Aspekt eines Projekts innerhalb von Sekunden zu realisieren.

Für Entwickler, die ein bestimmtes Element innerhalb einer Datei beleuchten und zeigen wollen, wo Änderungen möglich sind, ist eine „Online-IDE“ von unschätzbarem Wert. Darüber hinaus ist die Zusammenarbeit auch über einen Chat oder ein „Live-Mic“ möglich:

Insgesamt könnte man eine Online-IDE als „Schläfer“ unter den Webentwicklungs-Tools bezeichnen, da sie nicht allzu oft erwähnt wird, aber von vielen Entwicklern genutzt wird, um besseren Code zu erstellen.

14. Buttons Generator

Buttons Generator ist ein kostenloser Online-Generator für CSS-Schaltflächen, mit dem du eine Reihe verschiedener CSS-Schaltflächenstile mit nur einem Klick erstellen kannst. Scrolle einfach durch alle Schaltflächenstile und finde den, der dir gefällt. Klicke auf diesen Stil und das CSS wird automatisch in deine Zwischenablage eingefügt.

Du kannst die Farben und Stile der Schaltflächen so verwenden, wie sie sind, oder einfach die CSS bearbeiten, um den Schaltflächen die gewünschten Farben und Stile zu geben. Es gibt eine ganze Reihe verschiedener Stile zur Auswahl, darunter 3D, Gradient, With Shadow Border, Neumorphic, Retro, Sliding Effect und viele mehr.

Probier es aus, es macht Spaß, ist einzigartig und einfach, CSS-Buttons zu erstellen.

Git Clients

Eine zentrale Möglichkeit zu haben, Code zu speichern, die Änderungen zu dokumentieren und mit einem Team daran zu arbeiten, ohne dass es zu Doppelarbeit kommt, ist eine Aufgabe für ein Version Control System (VCS). Hier sind ein paar Clients, die ein VCS bedienen: git.

Lass uns zuerst das VCS selbst besprechen.

15. Git

Git ist essentiell für einen modernen Entwickler und als solches ist es eines der wichtigsten Tools für die Webentwicklung. In aller Kürze ist es eine Möglichkeit, die Änderungen, die du am Code deines Projekts vornimmst, zu dokumentieren und sie in „Repositories“ zu speichern:

Eine Liste der WordPress GitHub Commits.

Git wurde vom Linux-Schöpfer Linus Torvalds erfunden und verwendet eine Reihe von Befehlen, um Datei-Änderungen in einer „Staging Area“ hinzuzufügen, wo du sie dann in ein Repository „committen“ kannst. Von dort aus „pushst“ du sie in ein entferntes Repository, das online gehostet wird.

Obwohl es nicht das einzige verfügbare VCS ist – das WordPress Entwicklungsteam nutzt immer noch Trac für viele Projekte – ist es das bekannteste. Ein VCS wie Git oder Trac hilft Teams zusammenzuarbeiten, indem es den Code an einem zentralen Ort hostet.

Die grundlegenden Befehle sind Ein-Wort-Funktionen, die mit git eingeleitet werden und oft von der Kommandozeile aus verwendet werden. Zum Beispiel:

git add file.php

Diese Expression fügt die Datei file.php zu deinem Staging-Bereich hinzu. Mit anderen Worten, es zeichnet die Änderungen als etwas auf, das du speichern möchtest, ohne ihr den letzten Schliff zu geben. Du kannst dies mit einer Datei oder einem ganzen Projekt tun, wenn du möchtest.

Um die Datei zu committen, führst du git commit aus. Von hier aus kannst du einen Kommentar hinzufügen, um andere über deine Commits zu informieren. Danach werden deine Änderungen gespeichert und in den primären „Branch“ gepusht. Das hängt natürlich davon ab, ob du an einem entfernten „Repo“ arbeitest.

Wenn du Git und VCS im Allgemeinen noch nicht kennst, findest du bei GitLab eine großartige Anleitung für Anfänger, um Git auf der Kommandozeile zu benutzen. Wir werden später auch ein wenig über GitLab selbst sprechen.

16. GitHub

Kinsta's GitHub Seite. — Kinstas GitHub Seite.

Für die große Mehrheit der Entwickler ist GitHub der Ort, an dem die Git-Repositories der Projekte gespeichert werden:

Es ist eine Microsoft-eigene Lösung, die viel mehr als nur Git-Hosting abdeckt. Es gibt auch eine Reihe von Tools für automatisierte Tests und den Versuch, zusätzliche Funktionen für die Zusammenarbeit anzubieten.

GitHub's Kollaborationsfunktionen. — GitHub’s Kollaborationsfunktionen.

Für Open Source Projekte sind Plattformen wie GitHub fast schon die de-facto Option. Daher ist GitHub als Web Development Tool für viele Open Source Nutzer, Lernende und Entwickler im Allgemeinen von unschätzbarem Wert. Das gilt vor allem dann, wenn du in GitHubs Issue Tracker stöberst, um ein Problem mit installierten Paketen zu lösen.

GitHub's Issue Tracker — GitHub’s Issue Tracker

GitHub ist nicht nur zum Speichern von Programm-Repos da. Es ist auch für andere Coding-Projekte, wie z.B. Webentwicklung, und sogar für Bücher.

Insgesamt ist GitHub ein fantastisches Tool, das dabei hilft, eine gesunde Community aus vielen verschiedenen Zweigen aufzubauen. Allerdings ist es nicht die einzige Plattform, die es gibt.

17. GitLab

Das GitLab Logo.

Wir haben es bereits erwähnt, aber GitLab ist ein Konkurrent zu GitHub, mit einem ähnlichen Ziel. Es ist im Wesentlichen ein Host für Git Repos, bietet aber auch ein paar andere Extras.

Während GitHub sich selbst als „Entwicklungsplattform“ bezeichnet, konzentriert sich GitLab auf „DevOps“. Auf seinem kostenlosen Tier bietet GitLab jede Phase des DevOps-Lebenszyklus, statische Applikationssicherheitstests und rund 400 Minuten pro Monat für Continuous Development (CD) und Continuous Integration (CI).

GitLab fällt in seinem Sinn für Gemeinschaft, was der große Unterschied zu GitHub ist. Es geht mehr um das Deployment und den gesamten Zyklus eines Projekts. Das ist kein Nachteil, aber es bedeutet, dass GitLab eine eher „insulare“ Plattform ist, die sich wohl nicht so gut für Open Source Projekte eignet wie GitHub.

Für die meisten Teams wird die kostenlose Version von GitLab ausreichend sein. Für etwa 230 $ pro Jahr und Nutzer erhältst du Zugang zu Analysen für deinen Code und deine Produktivität, etwa 10.000 CD/CI-Minuten und mehr.

18. Sourcetree

Sourcetree ist kein Host für Git-Repositories, sondern ein Graphical User Interface (GUI), um sie zu verwalten. Es ist eine von vielen Lösungen, wie z.B. GitKraken, Sublime Merge, GitHub Desktop, und viele mehr.

Es ist ein Produkt von Atlassian (und wir lieben Atlassian!), das sich mit anderen Produkten wie Bitbucket verbindet, um eine visuelle Darstellung deines Git-Repositorys zu bieten.

Sourcetree wird als einfacher Git-Client vermarktet – und das ist es auch – aber es ist auch für erfahrene Nutzer geeignet. Es hat viel unter der Haube, um ein Team zu unterstützen, das mit Git (und auch Mercurial) arbeitet.

Zum Beispiel macht Sourcetree einfache Dinge, wie das Hervorheben von Änderungen des letzten Commits, aber es macht auch mehr, wenn du es brauchst. Teamleiter können Changesets überprüfen, bei Bedarf zwischen Zweigen arbeiten und den Code mit Hilfe von Graphen und Informations-Tabs visualisieren:

Ob ein Git Client das Richtige für dich ist, hängt von deinen Umständen ab. Wenn du noch am Anfang stehst, empfehlen wir dir, dich an ein Terminal zu halten, bis du den Ablauf und den Prozess verstanden hast. Für Profis oder Teams, die viel mit Git arbeiten, wird ein Client wie Sourcetree die tägliche Arbeit um Minuten verkürzen.

Browser Entwickler Tools

Ohne einen Webbrowser gibt es keine Webentwicklung. Während dein gewählter Browser jedoch entscheidend für die Navigation im Web ist, kannst du ihn auch nutzen, um herauszufinden, wie es läuft.

Die meisten modernen Browser beinhalten spezifische Entwicklungstools, die dir bei der Analyse des Backend-Codes helfen und die du dann wieder in dein Projekt übernehmen kannst. Hier sind einige der beliebtesten.

19. Chrome Developer Tools

Chrome’s „DevTools“ werden in der gesamten Community für ihr stellares Feature-Set und ihre Diagnosen verehrt.

Mit dem Aufstieg von Chromium-basierten Browsern haben viele das gleiche Set an DevTools mit ähnlichen Shortcuts. Du kannst dir Microsoft Edge, Brave, Chromium selbst und viele weitere Klone anschauen und mit deinen Projekten innerhalb des Browsers arbeiten.

Der Elements-Tab wird ein regelmäßiger Anlaufpunkt sein, denn hier siehst du den Quellcode der Seite. Unserer Meinung nach bietet der Performance-Tab Einblicke in den Seitenaufbau, die andere Browser DevTools nicht bieten können:

Brave's Performance Tab. — Brave’s Performance Tab.

Die Registerkarte „Sicherheit“ liefert ebenfalls einige gute Informationen, die für die Überwachung (oder Recherche) der Webseiten eines Kunden notwendig sind:

Brave's Security tab. — Brave’s Security tab.

Noch besser: Du kannst Google Lighthouse Berichte direkt aus deinem Chromium-basierten Browser generieren:

Ein Google Lighthouse Bericht aus den DevTools von Brave.

Die DevTools hier sind subjektiv die besten, die es gibt, daher werden Chrome- und Chromium-basierte Nutzer auf sie zurückgreifen. Aber auch andere Browser haben DevTools, die ebenfalls eine Überlegung wert sind.

20. Firefox Entwickler Tools

Mit einer monatlich aktiven Nutzerbasis von rund 220 Millionen ist Firefox trotz der Dominanz von Google immer noch ein beliebter Browser. In der Vergangenheit lobten Entwickler Firebug, und es war oft führend beim Debuggen innerhalb des Browsers.

Heute haben wir die Developer Tools von Firefox:

Firefox's Entwickler Tools. — Firefox’s Entwickler Tools.

Es gibt einen Kernsatz an Funktionen zum Anzeigen des Quellcodes deiner Webseite (Inspector), einen Debugger, Speicher, Storage und mehr.

Für Anfänger ist die Konsole ein Einstieg in die Programmierung, da du JavaScript direkt im Browser ausführen kannst und es eine einfache Möglichkeit ist, Snippets auszuprobieren und deine ersten Schritte zu machen:

Trotzdem denken wir, dass Firefox (und andere Browser) weniger in seine Developer Tools gepackt hat als Chromium-basierte Browser. Dennoch wirst du Firefox für die browserübergreifende Fehlersuche und -behebung oft in Anspruch nehmen. Insofern ist es gut, dass sie für fast alle Aufgaben ideal sind.

Frontend Frameworks

Apropos Frontend, du brauchst etwas, das für die Erstellung von atemberaubenden Webseiten geeignet ist. Deine Wahl des Frameworks ist hier entscheidend. Du solltest immer das beste Tool für die jeweilige Aufgabe wählen.

Mit diesem Gedanken im Hinterkopf, lass uns einen Blick auf ein paar beliebte Auswahlmöglichkeiten werfen.

21. Bootstrap

Mobile responsive ist ein Standardmerkmal im modernen Webdesign. Es ist ein willkommener Schritt, wenn man bedenkt, dass mobiles Surfen mittlerweile die Desktops überholt hat. Aus diesem Grund solltest du eine Möglichkeit haben, deine Webseite schnell mobilfähig zu machen.

Bootstrap ist ein großartiges Tool für die Webentwicklung, das immer häufiger zum Einsatz kommt:

Das Bootstrap Logo

Es ist ein Toolkit, das JavaScript Plugins, Sass Variablen, einige vorgefertigte Komponenten, ein hochwertiges responsive Grid-System und vieles mehr kombiniert. Es gibt sogar einen Marktplatz mit offiziellen Themes, die mit Bootstrap funktionieren, und viele Webseiten von WordPress verwenden ebenfalls Themes, die auf dem Design-Framework basieren.

Ob du Bootstrap verwendest oder nicht, hängt natürlich von den Anforderungen deines Projekts ab. Es ist jedoch logisch anzunehmen, dass Webentwicklungsprojekte mit knappen Budgets und schnellen Umsetzungszeiten sich einer „Bootstrap“-Lösung zuwenden und diese an WordPress anpassen. Da das Framework und WordPress kostenlos sind, wird deine Zeit der einzige Kostenfaktor.

22. Tailwind CSS

Auf dem Papier macht Tailwind CSS keinen Sinn. Es ist ein Frontend-Framework für eine Sprache, die Teil der Kerntrinität der Webentwicklung ist. Als solches ist es logisch zu denken, dass der Zielnutzer bereits über die entsprechenden Kenntnisse verfügt, ohne ein Framework zu benötigen.

In Wirklichkeit macht Tailwind CSS absolut Sinn. Es ist eine Möglichkeit, das Frontend deiner Webseite zu gestalten, ohne HTML zu verlassen.

Du verwendest Utility-Klassen innerhalb verschiedener Tags, um CSS aus einem Core StyleSheet einzufügen. Natürlich ist CSS immer noch die primäre Quelle für das Styling. Es ist nur außerhalb deines Blickfeldes, wenn du ein Layout mit HTML aufbaust. Es erlaubt dir also, gleichzeitig Struktur und Stil zu entwickeln.

Der Ansatz erinnert uns an das 960 Grid System und würde gut mit diesem Framework zusammenarbeiten. Allerdings besteht die Gefahr, dass du die Elemente mit so vielen Klassen packst, dass du am Ende ein Chaos von Spaghetti-Code hast. Du wirst Geduld und Disziplin brauchen, um mit Tailwind CSS zu arbeiten, aber wenn es zu deinem Projekt passt, ist es ein schnelles und robustes Framework.

23. Bulma

Bei all den Fortschritten, die wir bei der Gestaltung von Webseiten-Strukturen und Layouts gemacht haben, ist die Erstellung von flexiblen, responsive und dynamischen Spalten für viele eine Hürde. Das ist zwar nicht das Einzige, was Bulma kann, aber diese Art der Anwendung ist das A und O des Frameworks:

Ähnlich wie Tailwind CSS, versteckt Bulma das CSS und gibt dir Hilfsklassen für dein HTML. Es ist mit Flexbox gebaut, mobile-first, und modular. Es ist großartig, wenn du nur ein paar Komponenten brauchst. Du kannst auch Frameworks mischen und anpassen, wenn du willst.

Außerdem brauchst du kein JavaScript, um Bulma zum Laufen zu bringen, da es nur CSS ist. Du kannst Oberflächenelemente wie Buttons mit einem Minimum an Code hinzufügen. Es ist ein unkompliziertes Open Source Framework, das sich an die Bedürfnisse deines Projekts anpassen lässt. Unserer Meinung nach ist das eine wertvolle Eigenschaft, die du dir zu Nutze machen solltest.

24. Foundation

Das ZURB-Team hat mit Foundation eine einzigartige Version eines CSS-Frameworks entwickelt. Es ist ein semantisches Tool für mobile Endgeräte, das in zwei Varianten für deine Webseiten und E-Mails erhältlich ist:

Foundation ist mit Barrierefreiheit als Priorität gebaut. Jedes Snippet in Foundation kommt mit dedizierten ARIA-Attributen. Bevor du jedoch zu diesem Stadium kommst, ist Foundation beeindruckend für Rapid Prototyping, weil du es zu deinem HTML hinzufügen kannst. Du bist in der Lage, fast jedes Strukturelement auf deiner Seite zu erstellen – sogar verschiedene Arten von Menüs und Navigation:

Erstellen eines Navigationsmenüs in Foundation

ZURB bietet auch eine Fülle an exzellenter Dokumentation und Tutorials an, mit denen du das Framework in- und auswendig lernen kannst. Foundation ist einfach zu benutzen, aber wir vermuten, dass du tief in die Erstellung deiner Webseiten einsteigen und komplexe Layouts und Funktionen erstellen kannst.

Auf der Webseite von Foundation findest du auch eine Reihe von Templates. Das sind einfache Wireframes, die dir den Einstieg erleichtern – eine willkommene Ergänzung:

Foundation's Template Bibliothek. — Foundation’s Template Bibliothek.

Im Großen und Ganzen tut das Foundation-Framework das, was auf der Verpackung steht. Es wird ein zentraler Bestandteil deiner Webseite sein, anstatt dich mehr Funktionalität anbauen zu lassen. Daher wirst du es vielleicht nicht für jedes Projekt verwenden. Trotzdem wird es, wenn es eingesetzt wird, auf allen Arten von Webseiten seinen Dienst tun.

25. Material-UI

Wir werden später noch genauer auf React eingehen, aber für den Moment solltest du wissen, dass Material-UI auf der Komponentenbibliothek dieses JavaScript-Frameworks basiert. Für die Unwissenden: Material Design ist Googles „Philosophie“, wie man das Frontend einer Webseite gestaltet. Es bedeutet viele Roboto-Schriften und Farbblöcke:

Die Material-UI sieht aus, als würde sie Googles Designstandards entsprechen.

Du wirst die Bibliothek in React importieren und dann spezielle HTML-Tags verwenden, um deine Webseite zu erstellen:

Erstellen einer Schaltfläche in der Material-UI.

Um das Element weiter zu individualisieren, fügst du Klassen zu deinen HTML-Tags hinzu. Der ganze Code-Block wird in eine Funktion verpackt und du renderst die Details (und damit die Seite) in React.

Es gibt eine Vielzahl von kostenlosen und Premium-Themes, die viele Anwendungsfälle und Preise abdecken:

Da Material-UI einen speziellen Anwendungsfall hat – die Erstellung von Webseiten im Material Design – ist es ein ideales Framework, wenn dies dein Ziel ist. Vor allem die Theme-Bibliothek ist eine wertvolle Ressource für den Einstieg, unabhängig von deinem Budget.

26. HTML5 Boilerplate

Wenn du ein WordPress-Entwickler bist, bist du vielleicht schon auf Underscores gestoßen. Es ist ein einfaches WordPress-Starter-Theme, das dir unzählige Stunden erspart, wenn du die funktionalen und zentralen Elemente deiner Webseite zusammenstellst. HTML5 Boilerplate macht das Gleiche auf einer allgemeinen Design-Ebene.

Als solches enthält es sieben Dateien, die HTML, CSS und JavaScript umfassen. Sie alle enthalten nur die nötigsten Dateien und den Code, um eine Seite zu erstellen. Wie deine Seite darüber hinaus aussieht, bleibt dir überlassen.

HTML5 Boilerplate hat viele Fans, weil es eher ein Zeitsparprogramm ist als ein vollwertiges Framework. Aber wenn du HTML5 Boilerplate in Betrieb nimmst, wirst du feststellen, dass es deine Entwicklung beschleunigt, so wie es Underscores für WordPress-Entwickler tut.

27. Materialize

Obwohl wir Materialize nicht als Konkurrenten von Material-UI bezeichnen würden, ist es ein weiteres Framework, das versucht, die Prinzipien von Material Design zu nutzen, um ein Layout zu erstellen:

Anstatt React zu verwenden, ist Materialize jedoch ein CSS-Framework. Das macht es einfacher, Materialize auf dem Frontend zu implementieren. Ähnlich wie bei anderen CSS-basierten Frameworks verwendest du Klassen innerhalb des HTML, um Elemente auf dem Frontend einzubinden.

Allerdings gibt es auch eine Reihe von JavaScript-Komponenten für Elemente wie Modals und Dropdowns:

Ein mit Materialize erstelltes Dropdown-Menü.

Wie bei vielen dieser Frameworks gibt es auch hier Premium Themes, die dir helfen, Layouts in einem bestimmten Stil zu erstellen. Allerdings sind das alles statische HTML-Themes, was sich als Problem erweisen kann, wenn du JavaScript implementieren möchtest. In diesen Fällen solltest du Material-UI in Betracht ziehen.

Webanwendungs-Frameworks

Einfach ausgedrückt: Mit einem JavaScript-Framework oder einer JavaScript-Bibliothek kannst du mit dem sogenannten „Vanilla“-Code anders arbeiten. In diesem Fall geht es darum, spezielle Webanwendungen und Seiten zu erstellen. Es gibt auch viele andere „Geschmacksrichtungen“ – wir stellen dir ein paar vor.

28. React.js

React.js ist eine populäre, von Facebook entworfene JavaScript-Bibliothek, die viele der moderneren WordPress-Elemente antreibt. Sowohl das WordPress.com-Backend als auch der Block-Editor nutzen React, und wir würden es als einen Interface-first Weg betrachten, JavaScript zu nutzen.

Das Calypso Backend für WordPress.com ist auf React aufgebaut.

Daher sollten WordPress-Entwickler – um es mit den Worten von Matt Mullenweg zu sagen – React.js gründlich lernen. Allerdings ist es nicht nur ein Framework für WordPress-Entwickler.

Überall dort, wo du ein modernes und dynamisches User Interface (UI) benötigst, ist React die erste Wahl. Es nutzt eine Syntaxerweiterung zu JavaScript namens JSX, um Elemente zu erstellen, die dann in das Document Object Module (DOM) gerendert werden:

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

Die JavaScript-Variable innerhalb der JSX kann ein beliebiger gültiger Ausdruck sein, wodurch du komplexe Argumente aufbauen kannst. Das macht React zu einer starken Wahl, wenn es um Frameworks geht. Aufgrund seiner Popularität sollte React auf deiner „Must-Learn“-Liste stehen, unabhängig davon, wo du deine Entwicklungszeit verbringst.

29. Vue.js

Vue.js ist ein weiteres JavaScript-Framework für die Erstellung von Benutzeroberflächen. Es basiert auf dem „View Layer“ und ist großartig für die Integration mit anderen Bibliotheken und Frameworks.

Auf der HTML-Seite könnte Vue nicht zugänglicher sein. Du gibst deinem Tag eine ID und rufst einen Schlüssel aus einem Dictionary Set auf der JavaScript Seite auf. Die Daten sind nun reaktiv und die Daten und das DOM sind miteinander verbunden.

In dieser Hinsicht ist Vue.js einigen CSS-Frameworks sehr ähnlich, die wir uns weiter oben in diesem Artikel angesehen haben. Dieses Framework ist überzeugend und wir ermutigen dich, die Dokumentation durchzusehen, um zu sehen, was alles möglich ist.

Obwohl Vue.js JSX-Deklarationen unterstützt, ist es besser geeignet, um Templates zu verwenden, die auf den „klassischen“ Webtechnologien basieren. Daher ist es ideal für Entwickler, die nicht nur in JavaScript arbeiten wollen.

30. Express.js

Hier kommen wir in den Bereich der Meta-Frameworks, denn Express.js verbindet sich mit Node.js und bietet eine Basis für andere Frameworks.

Es ist ein minimalistisches Framework (daher der Name) und ein Hauptvorteil ist, dass es dir hilft, serverseitige Komponenten in einem vertrauten Model-View-Controller (MVC) Format zu organisieren. Als solches sieht der Code komplizierter aus als bei anderen Frameworks – selbst bei Vanilla JavaScript:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

Wir denken, dass Express.js zu Anwendungen passen wird, die viel aus Datenbanken ziehen und pushen. Das macht es geeignet für viele moderne Webanwendungen und Backend-Entwickler, die mit einem Minimum an Stress an Frontend-Aufgaben arbeiten wollen.

31. Svelte.js

Eine solide Faustregel bei der Entwicklung für das Web ist es, sicherzustellen, dass deine Webseiten auf so vielen Browsern wie möglich funktionieren. Dennoch kann es vorkommen, dass du Apps oder Webseiten ohne Support für ältere Browser entwickeln möchtest. In diesen Fällen sollte Svelte.js ganz oben auf deiner Liste stehen.

Das Framework hat seinen Namen aufgrund seiner Dateigröße – nur 5kb, wenn es minimiert ist. Es hat ein jQuery-ähnliches Format, das für vertraute Benutzer einfach sein wird:

$('.hello').text("Hello svelte");

Es gibt weniger als 40 Funktionen in der Svelte API, so dass der Einstieg leicht fällt. Darüber hinaus kannst du mit $.fn ganz einfach neue Funktionen hinzufügen.

Für den Support des Internet Explorers 9 gibt es „polyfills“, aber das ist fast das einzige Zugeständnis. Für hyper-modernen Browser Support mit einem super-schlanken Framework könnte Svelte.js das Richtige für dich sein.

32. Laravel

Bis jetzt haben wir uns JavaScript- oder CSS-Frameworks angesehen. Angesichts der weiten Verbreitung von PHP macht es Sinn, auch ein Framework für diese Sprache abzudecken. Laravel ist hier die ideale Wahl, da es bei vielen Entwicklern aufgrund seiner Syntax und seines Ökosystems beliebt ist:

Man könnte eher sagen, dass Laravel ein Ökosystem ist, da es viele Tools enthält, die dir beim Aufbau von Projekten helfen. Auch wenn du nicht viel vom Framework selbst verwendest, kannst du Laravel’s Homestead nutzen, eine Vagrant-basierte lokale Entwicklungsumgebung.

Laravel selbst ist ein Docker-basiertes PHP-Framework und verwendet ein CLI (namens Sail), um mit ihm zu interagieren. Ähnlich wie Vagrant wirst du Sail verwenden, um Container zu bauen und zu starten.

Laravel hat aber noch viele weitere Saiten in seinem Bogen. Zum Beispiel kannst du es als Full-Stack-Framework, als API-Backend für Next.js-Apps und fast alles dazwischen verwenden.

Wenn du ein PHP-Entwickler bist, wird Laravel ein zentrales (wenn auch nicht vertrautes) Tool in deinem Workflow sein.

33. Gatsby

Gatsby ist ein Open Source Frontend-Framework, das in letzter Zeit viel Aufmerksamkeit erregt hat. Das liegt daran, dass Gatsby schnell, skalierbar, performant und sicher ist.

Es gibt einen superschnellen Installationsprozess mit dem Node Package Manager (npm). Wir werden später mehr darüber berichten. Obwohl es ein JavaScript-Framework ist, generiert Gatsby statische HTML-Dateien zur Laufzeit, sodass es keine Möglichkeit gibt, eine Webseite anzugreifen. Darüber hinaus automatisiert Gatsby die Performance, um deine Webseite in einer optimalen Konfiguration zu halten.

Zwischen der automatisierten Performance, der dynamischen Skalierung und dem statischen HTML-Aufbau fühlt sich Gatsby wie ein lebender Organismus an. Es gibt ein komplexes Coding „Makeup“, das JSX, Markdown, CSS und vieles mehr einbezieht, basierend auf deinen Bedürfnissen. Jeder Schritt deines Workflows und jedes Stück deines Stacks kann auf deine Anforderungen zugeschnitten werden.

WordPress-Entwickler werden auch mögen, wie sich Gatsby in die Plattform integriert. Allerdings wird es nicht in allen Fällen geeignet sein. Wenn du zum Beispiel ein Cloud-basiertes CMS vollständig verwalten musst, ist das nichts für dich. Trotzdem kann sich Gatsby in den meisten Fällen an dein Projekt anpassen und es funktioniert hervorragend mit WordPress.

34. Django

Bei allem Gerede darüber, dass Python eine „Anfänger“- oder „Lern“-Programmiersprache ist, dient es als Rückgrat für viele hochkarätige Webseiten. Einige der größten Webseiten – Instagram, Uber, Reddit, Pinterest und mehr – nutzen Django. Oft wird Python selbst nicht erwähnt, sondern nur Django.

Django ist ein Framework, das Python nutzt, um serverseitige Webanwendungen zu erstellen. Es ist so einfach zu bedienen wie Python selbst, mit einem super-lesbaren Format.

Python ist eine großartige Skriptsprache für logikbasierte Projekte, daher ist es eine gute Idee, diese Sprache für eine Webanwendung zu nutzen. Außerdem ist die Verarbeitungsgeschwindigkeit von Python sehr hoch und die grundlegende Dateistruktur ist leicht. Da es schnell ist, ist Django ein hervorragendes serverseitiges Framework im Vergleich zu PHP und hat genauso viel Grunt wie die populärere Sprache.

Allerdings ist die Akzeptanz geringer, was an dem Ruf von Python als Lernsprache liegen könnte. Trotzdem lässt sich Django gut mit anderen Sprachen, wie z.B. JavaScript, kombinieren und bildet so die Basis für eine moderne Web-App.

Natürlich hast du weniger Möglichkeiten, wenn du planst, ein CMS wie WordPress zu verwenden oder Lösungen für React-basierte Projekte zu erstellen. Trotzdem denken wir, dass 2021 die Anzahl der Webseiten, die auf Django basieren, steigen wird.

35. Ruby on Rails

Die Programmiersprache Ruby war vor ein paar Jahren der „Liebling“ der Einsteigersprachen und Scripting-Alternativen zu PHP. Sie wird oft mit Python verglichen.

Und ähnlich wie Django, war auch Ruby on Rails ein Favorit vieler Entwickler.

Die Platzhalterseite für ein neues Ruby on Rails Projekt.

Du wirst Ruby in vielen serverseitigen und Under-the-Hood-Webanwendungen finden. Darüber hinaus wird Ruby on Rails als serverseitiges Framework auf unzähligen Webseiten eingesetzt. Es nutzt einen MVC-Ansatz und bietet Strukturen für den Webservice, die Seiten und eine Datenbank. Du hast also eine fertige Webseite, die auf dich wartet, und zwar out of the box.

Ruby on Rails wird zu deinem Projekt passen, wenn es viele Jobs planen und mit Lösungen von Drittanbietern arbeiten muss. Zum Beispiel gibt es eine native Integration mit Dateispeichern wie der Google Cloud und einen Wrapper für den Versand von E-Mails.

Im Großen und Ganzen ist es eine gute Wahl, wenn du ein robustes Set von Standardeinstellungen (wie z.B. die Ordnerstruktur) haben möchtest, die bei Bedarf angepasst werden können. Auf der anderen Seite ist es keine gute Wahl, wenn du gerne APIs während der Entwicklung verwendest.

Die Codestruktur von Ruby on Rails kann bei großen Projekten komplex und schwierig zu verstehen werden. Auch die Laufzeit kann beeinträchtigt werden, so dass es vielleicht nicht das beste Framework für geschwindigkeitskritische Projekte ist.

Dennoch ist Ruby on Rails eines der führenden serverseitigen Web-Frameworks, und seine Nutzung wird bei geeigneten Projekten nicht langsamer.

36. TypeScript

In aller Kürze bietet TypeScript eine optionale statische „Typüberprüfung“ für JavaScript. Es ist ein „Superset“ der Sprache, und es unterstützt auch viele andere JavaScript-Bibliotheken. Im Großen und Ganzen ist TypeScript JavaScript mit ein paar zusätzlichen Features, und du kannst beide Sprachen nebeneinander kompilieren.

Viele Entwickler haben sich TypeScript zugewandt, um die Anzahl der Laufzeitfehler zu reduzieren. Type-Fehler gehören zu den häufigsten, und sie zu reduzieren, könnte dir eine Menge Zeit zurückgeben.

Für ein sehr einfaches Beispiel von TypeScript, betrachte einen String:

let helloWorld = „Hello World“;

// ^ = let helloWorld: string

Hier verwendet TypeScript let anstelle des üblichen var für die Variable helloWorld. Von dort aus weiß TypeScript, dass helloWorld ein String ist und prüft es auf dieser Basis.

Letztendlich ist TypeScript kein essentielles Tool für die Webentwicklung, auch wenn es aufgrund seines Kernmerkmals immer beliebter wird. Wenn du am Ende etwas Zeit sparst, könnte es für deinen Arbeitsablauf wichtig werden.

37. GraphQL

Hier ist ein einzigartiges Tool, das bei Entwicklern, die mit den Daten innerhalb einer API arbeiten, Anklang finden könnte. GraphQL ist eine Abfragesprache, die in einer API verwendet wird und gleichzeitig als Laufzeit für die Ergebnisse der Abfrage fungiert, die du stellst.

Mit einer Standard REST API musst du oft von mehreren URLs laden. Mit GraphQL kannst du Daten mit einer einzigen Anfrage abrufen. Außerdem sind die GraphQL-APIs nach Typ und nicht nach Endpunkten geordnet. Diese Klassifizierung hilft bei der Effizienz deiner Abfrage und liefert explizitere Fehler, wenn etwas schief läuft.

Typen können auch verwendet werden, um das Überschreiben von manuellem Parsing-Code zu überspringen, da GraphQL sie implementiert. Du kannst auch neue Felder und Typen zu deiner API hinzufügen, ohne deine bisherige Arbeit zu beeinflussen.

Das Tool ist in vielen Bereichen flexibel und skalierbar. Da GraphQL eine einheitliche API für dein Projekt erstellt, kannst du eine Engine heranziehen, die zu deiner gewählten Projektsprache passt. Das macht es großartig für eine breite Palette von Anwendungen und nicht zu einer Nischenlösung für ein weit verbreitetes Problem.

Du wirst GraphQL auf Webseiten wie GitHub, Spotify, Facebook und vielen anderen finden. Es sollte dir eine Vorstellung davon geben, wie GraphQL auf abfrageintensiven Webseiten aller Art eingesetzt wird. Es kann sein, dass du in den nächsten 12 Monaten und darüber hinaus mehr als einmal auf diese Lösung zurückgreifen musst.

Package-Manager

Programmiersprachen, Frameworks und mehr haben viele bewegliche Teile. Diese Abhängigkeiten müssen heruntergeladen und auf die richtige Art und Weise installiert werden, damit sie funktionieren. Hier kommen Paketmanager ins Spiel. Diese helfen dir, bestimmte Abhängigkeiten von der Kommandozeile herunterzuladen und zu installieren. Lass uns ein paar Tools durchgehen, denen du begegnen wirst.

38. Node Package Manager (npm)

Ja, das Herunterladen von Installationsprogrammen hat seine Berechtigung. Allerdings ist die Verwendung eines Paketmanagers von der Kommandozeile aus in den meisten Fällen super einfach. Es bietet auch eine schnelle Möglichkeit, Dateien aus dem Internet zu holen und zu installieren.

Der Node Package Manager (npm) ist ein JavaScript-spezifisches Tool, das Microsoft gehört und mit dem du sprachspezifische Pakete auf Abruf installieren kannst:

Eine Suche nach React-Paketen bringt zum Beispiel über 155.000 Ergebnisse:

Wie bei einer Online-IDE ist npm ein Tool für die Webentwicklung, das nicht so viel „Airtime“ bekommt, hauptsächlich weil es allgegenwärtig ist. Als solches wird praktisch jeder Webentwickler dieses Tool nutzen.

Aber es ist unglaublich, und jetzt, wo es unter den Fittichen von GitHub ist, werden 2024 mehr Entwickler npm nutzen als je zuvor.

39. Yarn

Ähnlich wie npm und pip für Python, hilft dir Yarn dabei, Pakete zu installieren, die mit deinem Projekt und seinen Tools zu tun haben. Der Unterschied hier ist, dass Yarn auch ein Tool für das Projektmanagement ist.

Die Installation ist einfach, und auch die Initialisierung von Yarn für ein neues Projekt erfordert nur ein Minimum an Aufwand. Es hat sich zu einer robusten Open Source Lösung entwickelt, um Pakete zu installieren und dein Projekt zu verwalten.

Du verwendest Workspaces, um „Monorepos“ zu erstellen, und mehrere Versionen deines Projekts leben im selben Repo und können mit Querverweisen versehen werden. Du kannst Plugins für alles installieren, was Yarn nicht kann (und wofür du neue Fetchers und Resolvers hinzufügen möchtest). Um genau zu sein, könntest du Plugins installieren, aber es gibt nicht allzu viele, zumindest nicht in den offiziellen Listen. Stattdessen wirst du deine eigenen programmieren, wenn du verzweifelt an der Funktionalität bist. Dennoch gibt es die Möglichkeit, Yarn an die Bedürfnisse deines Projekts anzupassen.

Yarn ist ein einzigartiger Fall, um dein primärer Paketmanager zu werden. Für ein reales Projekt wirst du vielleicht eher auf npm zurückgreifen, aber Yarn wird sich in deinen Workflow auf eine Art und Weise einschleichen, von der du nur profitieren kannst.

API und Testing Tools

Sicherzustellen, dass die Dinge funktionieren, ist ein Prozess, der oft übersprungen wird, aber er bringt auch Bedauern mit sich, wenn etwas schief geht. Aus diesem Grund sollte die Testphase deines Projekts solide, robust und gründlich sein.

Hier sind einige API- und Test-Tools, die du für deine Projekte zur Hand haben solltest.

40. HoppScotch

HoppScotch ist ein Open Source Tool für die API-Entwicklung, das von Netlify betrieben wird. Die Entwickler nennen es ein „Ökosystem“, was die Funktionalität unter der Haube verrät.

Es ist eine einfache und robuste Lösung und nichts für schwache Nerven. Die Lernkurve ist steil, wenn du noch nie ein Tool wie dieses benutzt hast. Es gibt so gut wie keine Anleitung zur Verwendung von HoppScotch auf den Seiten der App, obwohl das normalerweise kein Problem ist, da das Tool sowieso für erfahrene Entwickler gedacht ist.

Es gibt viele Echtzeitverbindungen (WebSocket, SSE und mehr), sowie eine GraphQL-Implementierung. Wir mögen auch den Dokumentationsersteller:

Der Bildschirm des HoppScotch Dokumentationserstellers.

Es arbeitet mit deinen HoppScotch „Sammlungen“, um Dokumentationen on the fly zu erstellen, was eine willkommene Zeitersparnis ist.

Im Großen und Ganzen ist HoppScotch ein funktionales Tool, das du oft in deinem Browser öffnen wirst. Es ist eine dieser Lösungen, die du immer benutzen wirst, ohne es zu merken – ein höheres Lob können wir nicht aussprechen!

41. Postman

Das Postman Logo

Warnung – wir sind dabei, das gefürchtete „C“-Wort zu erwähnen: Kollaboration. Postman ist ein Tool für die Webentwicklung, das dir hilft, eine Programmierschnittstelle (API) im Team über die Postman-Plattform zu erstellen:

Es gibt viele Anwendungsfälle für die Integration von Postman in deinen Workflow. Zum Beispiel kannst du es standardmäßig für die Anwendungsentwicklung nutzen, was sich direkt in webbasierte Projekte übertragen lässt. Du kannst Endpunkte mit Hilfe von Mock-Servern simulieren, was besonders für WordPress-Entwickler interessant sein wird.

Du kannst sogar Onboarding erstellen, um den Nutzern deiner APIs zu helfen, sich einzuarbeiten. Projekte, bei denen es eine hohe Nutzerfluktuation oder viel Traffic gibt, werden hier den Vorteil sehen.

Was die Preise angeht, bietet Postman ein kostenloses Tier an, aber du wirst den größten Nutzen aus einem der Premium-Tiers ziehen. Je nach Abrechnungszeitraum und Anzahl der Nutzer zahlst du zwischen 12 und 30 Dollar.

42. Test-Bibliothek

Code, der läuft, ist ideal, aber Apps, die funktionieren, sind das Endziel. Testing Library macht das, was der Name schon sagt: Es bietet eine Reihe von Hilfsmitteln, die dir beim Testen deiner Projekte helfen und dich ermutigen, gute Programmierpraktiken anzuwenden.

Die Idee ist, dass du Tests erstellst, die deine App-Nutzung repräsentieren. Wenn diese ohne Probleme laufen, stehen die Chancen gut, dass auch deine App funktioniert. Es ist ein agnostisches Tool bezüglich des Frameworks und es ist kein Test Runner. Der Hauptzweck von Testing Library ist es, dir zu helfen, wartbare Tests zu schreiben, die von den Implementierungsdetails entkoppelt sind.

Alles im Testing Library Tool dreht sich um die Grundprinzipien des Tools. Als solches erstellst du nicht nur Tests – du lernst, wie du sie besser und wertvoller machen kannst.

Aus diesem Grund könnte Testing Library ein wichtiger Teil deines Workflows werden. Wir sind der Meinung, dass fast alle Projektketten von Testing Library profitieren können, und React-Anwender werden dieses Tool mit Sicherheit als Standard einführen wollen.

Collaboration Tools

Trotz des Klischees, dass Entwickler unsozial sind, ist die Wahrheit, dass Technik und Zusammenarbeit Hand in Hand gehen.

Deshalb haben wir ein paar hervorragende Tools für die Zusammenarbeit zusammengestellt, die du in deinem nächsten Projekt einsetzen kannst.

43. Jira

Atlassian ist ein sehr beliebtes Unternehmen, wenn es um Software geht. Wir sind große Fans von einigen der Angebote des Unternehmens: Confluence, Trello, Sourcetree, Bitbucket und unser Fokus hier, Jira.

Es ist ein Entwicklungstool für Teams, die Agile Frameworks verwenden – insbesondere Scrum, da es so beliebt ist. Aus diesem Grund bekommst du eine Fülle von Funktionen in dem Paket. Zum Beispiel kannst du Kanban-Boards verwenden, um Aufgaben und Sprints zu organisieren. Du kannst auch deine eigene Schätzungstechnik implementieren, angepasst an deine Methodik und dein Projekt.

Jira konzentriert sich auf einen wiederholbaren Workflow: Planen, Tracking, Release und Report. Es ist ein zentraler Bestandteil verschiedener agiler Frameworks, aber du kannst auch deine eigenen erstellen, abhängig von deiner Vorprojektplanung. Wenn du zwischen den Sprints schwenken musst, kannst du dein Projekt weiterentwickeln und nach oben oder unten skalieren.

Das Gute an Jira ist, dass es eine kostenlose Version für den Einstieg gibt und die anderen Versionen zu einem vernünftigen Preis. Dennoch wirst du feststellen, dass ein Team von zehn Personen die Mindestanforderung ist, um Jira effektiv zu nutzen. Für eine kleinere Gruppe könnte es zu viel sein.

44. Taskade

Wenn es um kollaborative Tools geht, ist es selten, Taskade zu finden.

Damit wird die App benachteiligt, denn sie ist ein fantastisches Werkzeug, um ein Team fokussiert und bei der Sache zu halten.

Wenn du ein Nutzer von anderen Collaboration Tools wie Asana oder Basecamp bist (mehr zu beiden später), wirst du dich hier zu Hause fühlen. Die Informationen, die du am meisten brauchst, wie To-Dos und Erinnerungen, sind unter der Haube zentralisiert. So kannst du es auf viele Arten präsentieren, je nach Projekt.

Die Ansichtstypen „Mindmap“ und „Organigramm“ sind hervorragend und geben dir jeweils eine andere Perspektive auf die Informationen, die du hinzugefügt hast.

Die App ist trügerisch in ihrer Einfachheit. Abgesehen von einer flexiblen Art, Aufgaben zu präsentieren und zu verwalten, gibt es nicht viel mehr zu bieten.

Die Arbeit mit deinem Team erfordert nur eine Handvoll Knopfdrücke. Zum Beispiel hat jeder Bildschirm ein erweiterbares Chat-Fenster:

Für einige, besonders im Vergleich zu anderen Lösungen, könnte Taskade als „barebones“ und sogar unterausgestattet angesehen werden. Doch das ist nicht der Fall. Taskade ist ein fantastischer Weg, um mit einem Team zusammenzuarbeiten, und aufgrund seiner Einfachheit wird es sich direkt in dein Projekt einfügen, an dem du gerade arbeitest.

45. Asana

Asana ist einer der prominentesten Namen im Bereich der Collaboration Tools. Es ist ein Monster, wenn es darum geht, ein Projekt zu packen und es mit Hilfe eines Teams in Form zu bringen. Asana ist auch großartig darin, sich an verschiedene Arbeitsabläufe anzupassen. Du kannst zum Beispiel zwischen Listen und Kalendern wechseln, aber auch auf Timelines zugreifen.

Es gibt auch einige fantastische teambasierte Features und Funktionen. Das Berichtswesen ist umfassend und in höheren Tarifen erhältst du Zugriff auf ein Dashboard, das verschiedene Analysen zur Leistung deines Teams anzeigt. Es gibt sogar eine Möglichkeit, die Arbeitsbelastung für jedes Teammitglied zu überwachen. So hilft dir Asana, die Arbeitsbelastung auf ein Minimum zu reduzieren und verhindert, dass Teammitglieder ausbrennen.

Außerdem ist die kostenlose Version keine verkrüppelte Demo der voll funktionsfähigen App. Du kannst Asana skalieren, wenn du ein Team skalierst, und es gibt gute Funktionen, die dir dabei helfen. Zum Beispiel kannst du den Teammitgliedern Arbeit zuweisen und die einzelnen Workflows verwalten. Du kannst auch allgemeine Nachrichten pro Arbeitsbereich an das gesamte Team senden.

Es ist ein alter Hase im kollaborativen Projektmanagement, aber Asana liefert fast jedes Mal. Du wirst feststellen, dass ein großer Teil deiner Kunden und Teamkollegen ebenfalls einen Asana-Account hat, was bedeutet, dass du dich öfter in der App versammeln wirst, als du vielleicht annimmst.

46. Basecamp

Basecamp ist ein weiterer großer Player im Bereich des teambasierten Projektmanagements. Es gehört zur alten Garde, denn es gibt es schon fast so lange wie WordPress selbst. Die Kernsoftware gibt es schon viel länger, also hat es einen Stammbaum und eine Erfolgsbilanz, die es wert ist, erwähnt zu werden.

Auf dem Papier ist nichts Aufregendes an Basecamp im Vergleich zur Konkurrenz. Ehrlich gesagt haben viele der anderen Kollaborations-Apps zu dem, was Basecamp bietet, aufgeholt. Allerdings ist es nicht die ganze Geschichte.

Ja, du kannst Aufgaben und To-Do-Listen erstellen, sie Teammitgliedern zuweisen und mit allem projektübergreifend arbeiten. Die Killer-Features von Basecamp sind jedoch die Infrastruktur und das Design.

Es gibt einen einfachen Ansatz, Basecamp zu nutzen: Erstelle ein Projekt, entwickle deine Aufgabenliste oder deinen Zeitplan und weise die Aufgaben den Teammitgliedern zu. Jedes Projekt hat einen Haufen in sich geschlossener Aspekte, die dir helfen, ein Projekt über die Linie zu bringen:

Die Elemente, aus denen ein Basecamp-Projekt besteht.

Wie gesagt, es gibt hier nichts Bahnbrechendes, aber genau das ist der Punkt. Basecamp ist ein zuverlässiges Projektmanagementsystem ohne viel Schnickschnack. Als solches wirst du immer wieder darauf zurückkommen, weil es zuverlässig und erweiterbar ist, je nach deinen Bedürfnissen.

47. Livecycle

Livecycle ist ein leistungsstarkes Tool, das speziell für die Zusammenarbeit von Entwicklerteams entwickelt wurde. Livecycle macht sich die Leistungsfähigkeit von „Vorschauumgebungen“ zunutze, die von Entwicklungsteams immer häufiger eingesetzt werden, um temporäre, gemeinsam nutzbare Vorschauen auf neue Änderungen oder Funktionen in den Pull Requests der Entwickler zu erstellen.

Mit den Vorschauumgebungen können die Entwickler einen Schnappschuss der neuesten Version gemeinsam nutzen, ohne dass sie die Änderungen in Staging oder Produktion zusammenführen müssen.

Livecycle fügt diesen Vorschauumgebungen eine Figma-ähnliche Kollaborationsebene hinzu, so dass alle Teammitglieder visuelles Feedback im Kontext abgeben können.

Auf diese Weise verkürzt Livecycle den Review-Prozess, gibt den Entwicklern qualitativ hochwertiges Feedback und ermöglicht es den Teams, den Code schneller in Produktion zu geben. Sehr empfehlenswert für jedes Entwicklungsteam, das seine Review-Workflows und die allgemeine Erfahrung der Entwickler verbessern möchte.

Task Runners

Die Arbeit an den kleinen Aufgaben innerhalb eines Webentwicklungsprojekts stellt ein Problem dar. Sie sind notwendig, um dich effizienter und produktiver zu machen. Auf der anderen Seite musst du Zeit und Energie aufwenden, um diese Mikro-Aufgaben über die Bühne zu bringen.

Um dir zu helfen, brauchst du einen Task-Runner. Hier sind ein paar unserer Favoriten.

48. Grunt

Grunt ist ein JavaScript-spezifischer Task-Runner, der darauf abzielt, einige der alltäglichen und sich wiederholenden Aufgaben zu automatisieren, denen Sie täglich begegnen. Betrachten Sie Aufgaben, die Sie typischerweise als gewöhnlich betrachten: Linting, Verkleinerung, Kompilierung und viele mehr.

Grunt erledigt diese Aufgaben für Sie über eine JSON-basierte Konfigurationsdatei (genannt „Gruntfile“). Hier ist ein Beispiel:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

Wenn du oft feststellst, dass deine Projekte durch Routineaufgaben Zeit verlieren, wird Grunt wahrscheinlich Teil deiner Kiste mit Webentwicklungs-Tools werden, wie es bereits für WordPress, Bootstrap und viele andere ist.

49. Gulp

Das Gulp Logo.

Wenn du Task-Runner vergleichst, ist es oft ein Shootout zwischen Gulp und Grunt. Gulp ist ein JavaScript-basiertes Toolkit, um deinen Workflow zu automatisieren und deine Effizienz zu steigern.

Du verwendest dedizierte Dateien und „Streams“, um auf deine Assets und deinen Code einzuwirken, bevor er auf die Festplatte geschrieben wird. Jede Aufgabe, die du erstellst, ist eine „asynchrone“ Funktion, und du kannst sie entweder als privat oder öffentlich festlegen. Der Unterschied liegt in den Berechtigungen: private Tasks können nicht vom Endbenutzer ausgeführt werden und sind dafür gedacht, mit anderen Funktionen zu arbeiten.

Apropos, du kannst die Funktionen series() und parallel() verwenden, um Aufgaben zu erstellen. Es bedeutet, dass du kleine Aufgaben nehmen kannst, sie zu einem Rädchen in einem umfangreicheren System machen und sie dann verschachteln kannst.

Darüber hinaus kannst du die Funktionalität von Gulp durch von der Community erstellte Plugins erweitern:

Es mag eine Verallgemeinerung sein, aber sowohl Gulp als auch Grunt sind gut in verschiedenen Dingen. Gulp ist solide, wenn es darum geht, mit Assets zu arbeiten, die Teil eines umfangreicheren Anleitungssatzes sind. Aus diesem Grund solltest du den richtigen Task-Runner projektspezifisch auswählen.

Containerization Tools

Wir lehnen uns hier weit aus dem Fenster und sagen, dass dein Fortschritt als Webentwickler leiden wird, wenn du nicht irgendeine Form der Containerisierung oder ein Tool für virtuelle Maschinen verwendest.

Natürlich trifft das nicht unbedingt auf jeden zu, aber es gibt viele Vorteile, eine Container-basierte Entwicklungsumgebung zu nutzen. Hier sind ein paar ausgewählte Lösungen.

50. Docker

Für viele ist Docker die container-basierte Entwicklungsumgebung der Wahl. Bei der Open Source Plattform dreht sich nicht alles um Container, aber das ist ein oft genannter Grund für die Nutzung.

Das Docker Logo.

Auf dem Frontend ist es ein einfacher Prozess: Klicke auf einen Button und erhalte eine virtuelle Sandbox-Entwicklungsumgebung. Natürlich ist alles, was oben einfach aussieht, tief darunter. Docker kombiniert ein User Interface (UI), CLI und API mit einer Sicherheitsvorkehrung, um ein schnelles Deployment in deine Hände zu legen.

Für viele Entwickler wird Docker zentral sein, um neue Apps zu erstellen. Webentwickler – insbesondere WordPress-Devs – haben eine Auswahl an Tools für diesen Job. Local von Flywheel und DevKinsta sind führende Plattformen.

Hinweis: Wir haben vor kurzem DevKinsta eingeführt – ein lokales Entwicklungs-Tool, das dir hilft, neue WordPress Seiten zu erstellen. Du kannst deine Webseiten auch mit einem einzigen Klick auf deinem Kinsta-Konto bereitstellen.

Docker lässt sich auch mit vielen Tools integrieren – und einige davon werden bereits in deinem Workflow vorhanden sein. Apps wie GitHub, VS Code und mehr können sich mit Docker verbinden und bieten eine reibungslose Integration.

Im Großen und Ganzen könnte Docker eine ganze Reihe von Artikeln darüber einnehmen, was es beinhaltet. Trotzdem ist vielleicht nichts davon notwendig. Die Wahrscheinlichkeit ist groß, dass du Docker täglich benutzt und bereits weißt, wie großartig es ist!

51. LXD

Einfach ausgedrückt ist LXD ein Container-Manager für Linux-Distributionen. Es ist Image-basiert und kommt mit mehreren vorgefertigten Images für Linux. Die Verwendung von LXD gibt dir die Gewissheit, dass du auf demselben Standard-Betriebssystem entwickelst, auf dem auch der Endbenutzer läuft.

Das LXD-Logo.

Es wurde von den Ubuntu-Entwicklern Canonical gegründet und hat natürlich eine Open Source Struktur. Du kannst sichere Umgebungen mit unprivilegierten Containern erstellen, die Ressourcennutzung mit vielen Ressourcen kontrollieren und sogar Netzwerke verwalten.

LXD ist außerdem skalierbar, was bedeutet, dass du tausende von Rechenknoten betreiben kannst oder die Dinge einfach halten kannst. Für Cloud-basierte Anwendungen lässt sich LXD mit OpenNebula integrieren – letzteres hat offizielle Treiber, um LXD-Instanzen zu verwalten.

Standardmäßig nutzen viele Containerization Tools Ubuntu als virtuelle Standardumgebung. Trotzdem ist LXD für den Betrieb der Distro optimiert. Wenn es etwas ist, was du noch nicht ausprobiert hast, ist es die Zeit wert, einen Test-Workspace durchlaufen zu lassen. Du könntest feststellen, dass es für bestimmte Arbeitsabläufe oder Kundenprojekte besser geeignet ist als die Konkurrenz.

Bildoptimierungs Tools

Assets (oder Medien, oder wie auch immer du es nennen willst) gibt es im Web im Überfluss. Es gibt ganze Online-Kulturen, die sich um Bilder drehen. Aus diesem Grund ist es wichtig, dass deine Webentwicklungsprojekte trotz der Anzahl der verwendeten Bilder gut funktionieren.

Hier sind einige der beliebtesten und besten Tools zur Bildoptimierung.

52. ShortPixel

Es gibt viele Apps zur Bildoptimierung, aber ShortPixel hat einen subjektiv robusten Algorithmus. Es ist in der Lage, die Dateigröße von Bildern zu reduzieren, ohne die Qualität zu beeinträchtigen. Wenn wir pingelig sind, würden wir sagen, dass die Standardeinstellung die höchste verfügbare Komprimierung ist und es keine andere Möglichkeit gibt, wenn dein Bild nicht genug verkleinert wurde. Trotzdem ist das kein großer Kritikpunkt.

ShortPixel hat eine Menge Funktionalität unter der Haube. Es gibt drei Kompressionsstufen, einen tollen PDF-Optimierer und sogar einen GIF-Kompressor. Letzteres ist etwas, das du in vielen anderen Tools nicht findest, also ist es eine willkommene Ergänzung der Produktlinie.

Das gesamte Interface ist auch sehr zugänglich: Du ziehst deine Bilder auf den Uploader und wartest darauf, dass ShortPixel seine Magie einsetzt. Sobald deine Bilder verarbeitet sind, kannst du sie als Stapel herunterladen oder einzelne Bilder zum Download auswählen:

Herunterladen von Bildern von ShortPixel

Die ShortPixel API Tools sind ebenfalls robust. Du findest separate APIs für die Reduzierung von Online- und Offline-Bildern, umfangreiche PHP- und .NET-Client-Bibliotheken, eine JavaScript-basierte adaptive Engine und mehr.

Wir würden vorschlagen, dass ShortPixel ein Tool für Entwickler ist, da es großartig für die Anbindung deiner Webseite oder App ist. Wir würden auch sagen, dass es deine TinyPNG-Sucht im Handumdrehen überholen würde, vor allem, wenn du es als Teil eines größeren Workflows nutzen willst.

53. TinyPNG

Es ist Zeit für jedermanns Lieblings-Tool zur Bildoptimierung – TinyPNG. Du kannst auch TinyJPG in diesem Eintrag bündeln, obwohl beide Tools mit den gleichen Bildformaten arbeiten.

Du wirst feststellen, dass sich TinyPNG im Laufe der Jahre nicht viel verändert hat. Es ist immer noch ein einfaches Tool zum Optimieren deiner Bilder per Drag-and-Drop. Es gibt keinen Schnickschnack und keine umfangreiche Auswahl an Dateiformaten. Was TinyPNG jedoch bietet, ist eine hervorragende Benutzerfreundlichkeit und eine Reihe von Integrationen mit anderen Tools.

So gibt es zum Beispiel ein Photoshop Plugin und – für feinere Anwendungen – eine funktionale Entwickler-API. Sogar Python-Nutzer können mitmachen, da die API auch diese Sprache unterstützt. Für viele Tools von Drittanbietern wurden bereits Plugins erstellt, die die API nutzen.

Wir wollen nicht behaupten, dass TinyPNG ein Monopol auf dem Markt der Bildoptimierung hat, aber es ist oft die erste Wahl für viele Nutzer. Es dauert nur wenige Sekunden, ein Bild in den Uploader zu laden, und wenn du dann eine 99,9% perfekte Darstellung deines Bildes zurückbekommst, ist es einfach, ihm zu vertrauen.

Webseiten Testing Tools

Wir haben bereits über das Testen deiner API und des Kerncodes deiner Webseite gesprochen, aber das geht an der Performance deiner Webseite vorbei. Hier sind ein paar Tools, die wir lieben und die auch dir helfen können, die Leistung deiner Webseiten zu analysieren.

54. Responsive

Wenn du jemals von der Anzahl der Media-Queries überwältigt warst, die du in deiner App ausführen und perfektionieren musst, dann schau dir Responsively an. Es ist ein Open Source Tool, das dir dabei hilft, deine Webseiten für die verschiedenen Viewports der von dir gewählten Geräte zu entwickeln.

Ansicht verschiedener Geräte in Responsive

Das Tolle daran ist, dass du die Layouts Seite an Seite vergleichen kannst. Es gibt dir eine solide Chance, deine Konsistenz zwischen den Geräten zu verbessern. Jedes Gerät ist präzise, und es gibt viele, aus denen du wählen kannst, was hervorragend ist, wenn deine Webseite auf bestimmte Geräte ausgerichtet ist.

Du kannst auch die entsprechenden Browser-Erweiterungen für Mozilla Firefox, Microsoft Edge und Google Chrome hinzufügen, um Seiten an den Responsive-Browser zu senden. Von hier aus kannst du die eingebauten Dev Tools öffnen und dich an die Arbeit machen.

Es gibt tonnenweise andere Features, wie z.B. Screenshot-Funktionalität, Hot-Loading Support und mehr, die dich bei der Entwicklung unterstützen. Es ist schwer zu widerlegen, dass Responsively der „Browser für Webentwickler“ ist. Es könnte zu einer Kernkomponente deines Workflows werden.

55. Google Lighthouse

Für viele ist Googles PageSpeed Insights ein wertvolles Tool, um herauszufinden, wie eine Webseite performt und wo du die Ladegeschwindigkeit verbessern kannst.

Das heißt, einige der Software unter der Haube ist interessanter, wenn man sie genauer unter die Lupe nimmt. Es könnte auch eine bessere Lösung für deine Bedürfnisse sein. Google Lighthouse kann auf jeder Webseite ausgeführt werden und bietet Audits und Berichte für Seitenleistung, SEO, Progressive Web Apps (PWA), etc.

Die primären Möglichkeiten, Google Lighthouse auszuführen, sind die Kommandozeile, die DevTools von Chrome oder ein Node-Modul. Wenn du das PageSpeed Insights Interface verwendest, generiert Lighthouse einige der Scores und bietet weitere Einblicke.

Es ist erwähnenswert, dass Google Lighthouse und PageSpeed Insights auf den ersten Blick ähnlich aussehen. PageSpeed Insights verwendet jedoch laborbasierte Daten in Kombination mit realen Nutzerdaten. Die Analyse von Lighthouse’suse lässt die Nutzerdaten außer Acht und misst mehr Elemente deiner Webseite.

Unserer Meinung nach lohnt es sich, sowohl PageSpeed Insights als auch Lighthouse laufen zu lassen, vor allem, wenn es das Ziel deines Kunden ist, ganz oben auf den Search Engine Results Pages (SERPs) zu landen. In jedem Fall ist es ein solides Tool, das PageSpeed Insights als Performance Tool der Wahl ablösen könnte.

56. Cypress

End-to-End-Tests sind etwas, das für viele Entwickler keine freudige Erfahrung ist. Cypress hat sich diesen Hügel zum Sterben ausgesucht – es ist eine unkomplizierte Lösung, die gegen den Trend für End-to-End-Tests ankämpft und etwas Hervorragendes produziert.

Während die meisten End-to-End Testing Tools auf Selenium basieren, geht Cypress in eine andere Richtung. Es bedeutet, dass die Probleme, die Nutzer mit Selenium-basierten Testern haben, hier nicht vorhanden sind. Vielmehr wollen die Entwickler das Einrichten, Schreiben und Ausführen von Tests zu einem Kinderspiel machen.

Um dies zu erreichen, haben sie die Architektur von Grund auf neu aufgebaut und sich auf End-to-End-Tests konzentriert, um andere Formen auszuschließen. Um die Performance zu verbessern, läuft Cypress in der gleichen Run-Loop wie dein Programm, anstatt Remote-Befehle über das Netzwerk auszuführen.

Da der Testcode im Browser ausgeführt wird, gibt es keine Treiber- oder Sprachbindungen zu beachten. Trotzdem kannst du den Code vor der Ausführung der Tests in JavaScript kompilieren.

Wenn du ein Quality Assurance (QA) Ingenieur oder ein Entwickler bist, der für seine End-to-End Tests einen nativen Zugang zu seiner Arbeit haben möchte, sollte Cypress deine Aufmerksamkeit erregen. Das Beste daran ist, dass es auch eine kostenlose Version mit vollem Funktionsumfang gibt!

57. Stack Overflow und Suchmaschinen

Erlaube uns für einen Moment, die Grenzen dessen zu erweitern, was als Web Development Tool gilt. Stack Overflow ist jedem bekannt, der auch nur ein bisschen Ahnung von Webentwicklung hat:

Es ist eine Frage-und-Antwort-Webseite, die sich auf das Programmieren konzentriert und Teil des Stack Exchange Netzwerks ist, das alle möglichen anderen Themen abdeckt:

Eine von vielen Nischenseiten im Stack Exchange Netzwerk.

Es ist bekannt als Anlaufstelle für tausende von Entwicklern und trotz einiger Kontroversen über die Community ist der Traffic immer noch beträchtlich. Wir wagen zu behaupten, dass Stack Overflow, zusammen mit der Suchmaschine deiner Wahl, ein flexibles Tool für die Webentwicklung ist, um zu lernen und deine Fähigkeiten zu verbessern.

Zum Beispiel wirst du wahrscheinlich zu Stack Overflow gehen, wenn du auf eine Entwicklungsblockade in Bezug auf den Code stößt. Wenn ein Fehler auftaucht, bei dem du dir nicht sicher bist, wie er zu beheben ist, ist es der schnellste Weg, ihn in eine Suchmaschine einzufügen.

Wenn man bedenkt, dass 90% der befragten Nutzer Stack Overflow nutzen, um Probleme zu lösen, ist es wahrscheinlich, dass jeder das Tool nutzt. Wie auch immer, für Anfänger – oder auch wenn du dein Problem nicht artikulieren kannst – werden Suchmaschinen wohl ein wenig freundlicher sein.

Webentwicklung Referenzen

Wenn du ein Entwickler bist, der dem „RTFM“-Ethos anhängt, wirst du in den folgenden Einträgen nicht überzeugt werden müssen. Im Gegensatz dazu, wenn du gerne in ein Problem eintauchst und es herausfindest, solltest du wissen, dass es unzählige Entwickler vor dir gab, die wahrscheinlich schon eine Antwort gefunden haben.

In Anbetracht dessen, schau dir die folgenden paar Tools für die Webentwicklung an, die alle auf Web-Referenzmaterialien basieren.

58. MDN Web Docs

In den frühen Tagen des Internets gab es eine Webseite namens Webmonkey, die von Lycos betrieben wurde und das Ziel hatte, neuen Nutzern Webentwicklung und Programmierung beizubringen. Der Geist dieser Webseite lebt in Mozillas MDN Web Docs weiter. Webmoney wurde 2004 geschlossen und MDN Web Docs kam 2005 auf den Markt, also gibt es eine natürliche Verzahnung zwischen den beiden Seiten.

Es ist eine Sammlung von Ressourcen, die dir helfen, das Programmieren für das Web in einigen Fällen und Mozilla-spezifische Produkte in anderen Fällen zu lernen. Der Inhalt ist in zwei große Kategorien unterteilt: Technologien und Referenzhandbücher. Dir werden verschiedene Tutorials gezeigt, die auf deinen vorhandenen Fähigkeiten und Erfahrungen basieren, ein spezieller Referenzleitfaden und einige weitere Ressourcen für Ersteres.

Die Guides beziehen sich alle auf bestimmte Nischen und Industrien innerhalb der Entwicklungsindustrie. Zum Beispiel fungiert die Web-Entwicklungs-Referenz als „Eckpfeiler“ für weitere HTML-, CSS- und JavaScript-Anleitungen.

Es gibt auch breite Einblicke in verschiedene Industrien, wie z.B. die Spieleentwicklung und was es braucht, um in diesem Bereich anzufangen:

MDN Web Docs Leitfaden zur Spieleentwicklung.

MDN Web Docs ist eine unverzichtbare Lektüre für einen Anfänger unter den Webentwicklern, und es bietet auch mehr als genug Wert für einen Experten. Wenn es eine Webseite gibt, die ein Browser-Lesezeichen verdient hat, dann ist es diese!

59. DevDocs – API Dokumentation Browser

In der Vergangenheit hast du alle Handbücher für die Produkte, die du gekauft hast, in einer staubigen Schublade oder einem Schrank aufbewahrt. Da das Leben immer digitaler geworden ist, sind diese Papierhandbücher den PDF-Downloads von den Webseiten der Hersteller gewichen.

Dadurch gibt es jetzt Webseiten, die die digitalen Versionen von Handbüchern in kuratierten Bibliotheken sammeln. Es ermöglicht dir, alles, was du brauchst, aus einem Repository zu finden. Da liegt es nahe, dass es auch eine für Webentwicklungs-Themen gibt.

Kurz gesagt, DevDocs ist eine Dokumentationsbibliothek für APIs, und wir denken, dass es für fast alle Entwickler wertvoll sein wird:

Bevor du dir die Bibliothek ansiehst, solltest du die gewünschte API-Dokumentation aktivieren. Das machst du über den Bildschirm Einstellungen:

Sobald dies geschehen ist, kannst du über ein spezielles Baummenü auf die entsprechende Dokumentation zugreifen:

Es ist eine einfache Lösung für ein ineffizientes Problem, da du mehrere API-Referenzen an einem Ort hast. DevDocs ist eine weitere Webseite, die ein Lesezeichen verdient, und es ist eine Schande, dass es keine Desktop-App gibt, um noch schneller nachschlagen zu können.

60. CSS-Tricks

Chris Coyier ist ein Name, den viele Webentwickler kennen werden. Wir würden wetten, dass du bereits mit der von ihm gegründeten Webseite CSS-Tricks vertraut bist. Wie der Name schon sagt, ist es eine Webseite, die sich dem Frontend Coding widmet, speziell CSS, und wie man besser wird.

Wie auf der About-Seite zu lesen ist, war in den ersten Jahren CSS das vorherrschende Thema. Seitdem sind HTML, JavaScript, WordPress und mehr genauso wichtig geworden und werden häufig diskutiert. Das Ergebnis ist eine Webseite, die sich auf die Frontend-Entwicklung konzentriert, mit einer Reihe von Artikeln, Videos und Anleitungen, die dich inspirieren.

Ein einfaches, aber wertvolles Element ist der CSS Almanach, der die Selektoren und Eigenschaften von CSS umreißt. Es ist eine großartige Referenzquelle, wenn du dich mit bestimmten Aspekten der Sprache vertraut machen willst.

Obwohl CSS-Tricks einige referenzähnliche Aspekte aufweist, ist es keine Referenzquelle per se. Trotzdem sollte es ein regelmäßiger Anlaufpunkt für dich sein, sei es durch einen RSS-Feed oder eine andere Lösung. Der Inhalt ist von hoher Qualität und kann dich auf eine Art und Weise herausfordern, an die du vorher nicht gedacht hast. Abonniere zumindest den Newsletter und warte darauf, dass CSS-Tricks in deinem Posteingang landet.

61. DEV Community

Stell dir vor, du könntest die exzellenten Teile von Social Media, Webentwicklung und Stack Overflow nehmen und dann eine Webseite erstellen, die sie zusammenführt. Die DEV Community könnte das Ergebnis sein.

Es ist eine Blogging-Plattform, aber auch ein Weg, um die Antworten auf Entwicklungsfragen zu finden. Du wählst Tags und Leute aus, denen du folgen möchtest, und dein Newsfeed wird zu einer automatisierten und kuratierten Timeline mit Beiträgen und Einblicken:

Die DEV Community Timeline für den JavaScript Tag.

Man kann sagen, dass man diese Informationen überall finden kann – wenn man bereit ist, sie zu suchen. Der Vorteil der DEV Community ist, dass sie hier ist und dass sie eine gezielte Zusammenstellung von Entwicklungsthemen ist. Sieh es als Tracking einer Entwicklertagung, anstatt ein Gespräch an der Bushaltestelle zu belauschen und zu stören.

Es ist eine weitere Webseite, die sich gut in deinem RSS-Feed oder als Zusammenfassung in deinem Posteingang machen wird. Als solche ist es auch eine „Schläfer“-Ressource, die du oft besuchen wirst, ohne es zu bemerken.

62. Can I use…

Man könnte behaupten, dass Jeeves den Trend begann, dem Internet Fragen zu stellen, um Informationen zu finden. Er wurde schnell durch verschiedene Suchalgorithmen ersetzt, obwohl die fragebasierte Suche immer noch ein zuverlässiger Weg ist, um zu finden, was du brauchst.

Can I use… ist die Antwort des Frontend-Entwicklers auf „Gibt es ein Ask Jeeves für CSS?“

Die Can I use... Homepage — Die Can I use… Homepage

Die Prämisse ist einfach: Du gibst den CSS-Selektor oder die Eigenschaft in das Suchfeld ein, und die Datenbank gibt zurück, ob du es für die Erstellung von Webseiten verwenden kannst. Du bist auch nicht auf CSS beschränkt. JavaScript und HTML werden ebenfalls unterstützt:

Auf der Suche nach einem HTML-Element in Can I use…

Es handelt sich um eine Datenbank für Frontend-Sprachen, daher wird sie keine Ergebnisse für PHP, Python oder andere serverseitige Sprachen liefern. Trotzdem ist Can I use… ein sehr wertvolles Tool, das dir hilft, wenn es um Barrierefreiheit und Design für verschiedene Geräte geht.

Es ist ein einfacher Vorschlag, ein bestimmtes Element aufzurufen und auf einen Blick zu sehen, ob dein Zielbrowser es unterstützt:

Die Browser Support Tabelle in Can I use…

Wenn du genauer hinsiehst, kannst du auch Statistiken finden, wie z.B. das Veröffentlichungsdatum für das Element und einen Nutzungsanteil:

Informationen zu einem bestimmten Element in Kann ich…

Im Großen und Ganzen wird Can I use… vielleicht nicht regelmäßig genutzt. In bestimmten Phasen eines Projekts wird es jedoch fast immer geöffnet sein. Sobald du herausgefunden hast, was deine Zielbrowser unterstützen, legt sich Can I use… zurück in deine Lesezeichen und wartet darauf, dass du es das nächste Mal brauchst. Es ist ein hilfreicher Service, der ein „Wasserträger“ sein kann, wenn es um deinen Frontend-Code geht.

Zusammenfassung

Zeit und Geld sind knapp, und es gibt eine gewisse Logik, sich für die gleichen alten Web Development Tools zu entscheiden, die du schon immer benutzt hast. Aber eine wohlüberlegte Entscheidung über die Bedürfnisse eines Projekts wird sich in Zeit, Kosten und Produktivität auszahlen.

In diesem Beitrag haben wir 62 erstaunliche Webentwicklungs-Tools vorgestellt, die du im Jahr 2021 nutzen kannst, um dir und deinem Team einen Schub zu geben. Es könnte sein, dass du das bereits tust. Wenn die verschiedenen Umfragen stimmen, wenden sich mehr Entwickler denn je an GitHub, TypeScript, verschiedene Webservice-Stacks und eines der vielen JavaScript-Frameworks, um Projekte über die Linie zu bringen.

Egal, für welche Webentwicklungswerkzeuge du dich entscheidest, Kinsta-Kunden haben über die MyKinsta-Plattform Zugang zu noch mehr. So kannst du zum Beispiel mit der Code-Minifizierung, die direkt in das Dashboard von MyKinsta integriert ist, deine Website schnell und einfach optimieren, indem du mit einem einfachen Klick die automatische CSS- und JavaScript-Minifizierung aktivierst.

Hast du ein Web Development Tool zu empfehlen, das Entwickler im Jahr 2021 nutzen werden? Lass uns deine Gedanken unten in den Kommentaren wissen!

Salman Ravoof

Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.