Top 15 Websites für Webentwickler 🧑💻💡
Wir haben unsere Kolleg:innen gefragt:
Welche Tools und Websites erleichtern Euch den Arbeitsalltag am meisten?
Aus einer Flut an Links im Slack haben wir die 15 spannendsten Helferlein für Euch herausgesucht und zusammengefasst.
Accessibility & Best Practices testen
WAVE steht für “Web Accessibility Evaluation Tool” und es hält, was der Name verspricht. Es bietet dabei die wahrscheinlich angenehmste Benutzeroberfläche, um ganze Webseiten auf Barrierefreiheit zu überprüfen: Durch eine Live-Vorschau der Website mit aussagekräftigen Icons könnt Ihr auf einen Blick sehen, wo die Fehler eurer Seite liegen. Bei Klick auf einen der Hinweise bekommt Ihr detaillierte Informationen sowie weiterführende Links präsentiert.
Farbpaletten erstellen nach Tinder-Prinzip
Mit Coolors könnt Ihr spielerisch einfach Farbpaletten generieren. Dazu müsst Ihr einfach nur immer wieder die Leertaste drücken und der Generator liefert euch bis zu 10 aufeinander abgestimmte Farben aus. Wenn Euch eine Farbe gefällt, könnt Ihr sie über das Schloss-Icon einloggen, wodurch sie bei den nächsten Durchläufen beibehalten wird. Diesen Schritt wiederholt Ihr so oft, bis Ihr eine komplette Palette erzeugt habt.
CSS Box-Shadows generieren lassen
Ansprechende Schatten für Web-Elemente zu definieren ist nicht immer ganz einfach. Das Tool Smooth Shadow hilft Euch dabei, indem es basierend auf den Einstellungen im rechten Panel die passenden CSS-Anweisungen generiert. Dadurch sind bis zu 10 Schichten an Schatten möglich, und durch die Live-Vorschau ist leicht zu erkennen, welche Einstellung welchen Einfluss auf das Element hat.
Google Fonts vernünftig einbinden
Spätestens seit der Datenschutz-Abmahnwelle aufgrund von direkt per URL eingebundenen Google Fonts sollte allen bewusst sein, dass eine lokale Einbindung der Schriftarten (direkt auf dem Webserver) die bessere Lösung ist. Dazu sind jedoch pro Schriftart und -schnitt einige Zeilen CSS nötig, vor allem wenn auch ältere Browser unterstützt werden sollen. Der Google Webfonts Helper bietet umfangreiche Einstellungen für Zeichensätze und -schnitte für jede verfügbare Google Schriftart, und spuckt Euch das generierte CSS dann zum Kopieren aus. Im Anschluss könnt Ihr das Schriftpaket zusätzlich als ZIP-Archiv herunterladen.
Sicherheitscheck: HTTP Header analysieren
Security Headers ist ein Dienst, der die HTTP-Antwort-Header anderer Websites analysiert, aber im Gegensatz zu anderen Angeboten die Ergebnisse auch mit einem Bewertungssystem beurteilt. So könnt Ihr Eure Website auf Sicherheit überprüfen, und bei Mängeln gibt Euch das Tool ausführliche Informationen zur Korrektur zurück.
Strukturierte Daten (RICH-Suchergebnisse) testen
Um bei Google hoch gerankt zu werden und die nativen Google-Ergebnisse für Karussells, Bilder oder andere nicht textbasierte Elemente zu unterstützen, ist eine korrekte Struktur der Daten und RICH-Suchergebnisse erforderlich. Zur Überprüfung bietet Google selbst ein Tool zum Test für Rich-Suchergebnisse an:
Browserkompatibilität für einzelne Features prüfen
Die Website Can I use ist den meisten von Euch vermutlich bereits untergekommen, und war auch bei unserer internen Umfrage eines der am häufigsten genannten Tools. Can i use zeigt Euch auf einen Blick, welche HTML-, CSS- und JavaScript-Features in welchen Browserversionen unterstützt werden. Dazu müsst Ihr einfach nur nach einem Feature suchen und die Seite gibt Euch eine übersichtliche Tabelle inklusive Ausnahmen und Verwendungsstatistik des jeweiligen Browsers aus.
Und für alle im Newsletter- und Email-Marketing: Es gibt mittlerweile auch den kleinen Bruder Can I email, der die selbe Funktionalität für verschiedenste Mail-Clients bietet.
Empfohlen von LinkedIn
Cronjob Schedules definieren
Aus unserer Backend-Fraktion kam der Hinweis auf dieses hilfreiche Tool, welches Euch die per se recht spezifische Notation für das Scheduling von Cronjobs entschlüsselt. Dadurch spart man sich mit dem crontab guru das Auswendiglernen der Syntax des Timings. Pro-Tipp: Mit einem Klick auf “next” oberhalb des Ergebnisses zeigt crontab guru zusätzlich auch die nächsten 4 darauf folgenden Iterationen an.
Regex testen
Mit Regex (regular expression) kann man so gut wie jede Zeichenkette schematisch abbilden. Das kann bei komplexeren Zeichenfolgen schon mal etwas umständlich werden. Daher geben wir Euch mit regex101 ein umfangreiches Tool an die Hand, mit dem Ihr Eure regulären Ausdrücke überprüfen, testen und in Worten erklären lassen könnt.
Git Cheat Sheet
Wer mit dem Versionierungssystem Git arbeitet, kennt die Momente, in denen man schon beim Drücken der Enter-Taste spürt, dass da gerade etwas schief gelaufen ist. Um sich dann nicht im Undo-Reset-Ammend-Dschungel zu verirren, haben wir Oh Shit, Git!?! für Euch zum wegspeichern. Die Snippet-Sammlung beinhaltet einige hilfreiche Commands mit anschaulichen Code-Beispielen.
So ziemlich alle API Dokumentationen
Wer keine Lust hat, sich beim Coden je nach Software auf eine anders aussehende und strukturierte Dokumentation einzustellen, findet bei DevDocs (zumindest gefühlt) so ziemlich jede API Dokumentation in einem zusammengefassten Glossar. Durch die Volltextsuche in der Seitenleiste kann man auch quer durch alle Dokumentationen fündig werden, und mit der entsprechenden Konfiguration funktioniert das Wiki sogar offline.
Schluss mit Screenshots
Wer (wie wir) hin und wieder mal Code-Snippets auf Social Media teilt, muss sich jetzt nicht mehr mit aufwendigen Layouts und Designs rumschlagen – diese Aufgabe übernimmt das Tool carbon. Dazu einfach die entsprechenden Code-Zeilen in das “Terminal” kopieren und carbon übernimmt das Layout und Highlighting für Euch. Sogar ein direkter Export zu Twitter ist möglich!
Seitenverhältnisse einfach berechnen
Wenn Ihr auf die Schnelle wissen wollt, in welchem Seitenverhältnis sich beispielsweise ein Foto befindet, könnt Ihr die Abmessungen im RatioBuddy eintragen und dieser gibt Euch das Seitenverhältnis aus – oder auch umgekehrt, wenn Ihr das Verhältnis sperrt. Das bunte Rechteck mit dem kleinen Gesicht gibt einem direkt ein Gefühl für das Verhältnis zwischen Breite und Höhe und sieht dabei auch noch so niedlich aus, dass man fast verführt ist, die eingesparte Arbeitszeit direkt wieder beim Austesten der extremsten Seitenverhältnisse zu verbraten.
SEO – Google Suchanfragen einsehen
Auf Google wird ja bekanntlich nach den verrücktesten Dingen gesucht – falls Ihr Euch also schon einmal gefragt habt, welche Suchbegriffe am öftesten kombiniert werden, oder mit welchen Suchanfragen Nutzer:innen nach Eurem Unternehmen oder Euren Produkten suchen, hilft Euch AnswerThePublic weiter. Gegliedert in den Kategorien “Fragen”, “Präpositionen”, “Vergleiche” und “verwandte Begriffe” erhaltet Ihr Diagramme zu den häufigsten Suchanfragen mit Eurem Schlagwort.
SVGs optimieren
SVGOMG basiert auf dem NPM-Paket SVGO und bietet nach eigener Aussage die fehlende Benutzeroberfläche für das Tool. Über die Seitenleiste links könnt Ihr eine Datei oder alternativ den SVG-Code hochladen, oder einfach per Drag and Drop ins Fenster ziehen. Danach bietet die Website zahlreiche Optionen zur Optimierung des SVG-Codes und zeigt basierend auf Eurer Auswahl direkt die prozentuale Datenersparnis an.
Habt Ihr noch mehr hilfreiche Links, die Euch den Alltag im Web erleichtern? Ab in die Kommentare damit! 👇🏻