Cheat Sheet: Unsere Top Websites und Online-Tools für die Webentwicklung

Cheat Sheet: Unsere Top Websites und Online-Tools für die Webentwicklung

Wir haben unsere Kolleg:innen gefragt: Welche Tools und Websites erleichtern Euch den Arbeitsalltag im und mit dem World Wide Web? Aus einer Flut an Links im Slack ist dieses Cheat Sheet mit unseren liebsten Helferlein entstanden.

 

Accessibility

whocanuse.com – Farbkombinationen im Hinblick auf verschiedene Seheinschränkungen testen

a11ysupport.io – Kompatibilität von Frontend-Features mit Hilfstechnologien testen

wave.webaim.org – Accessibility & Best Practices direkt auf der Website testen

polypane.app und accessible-colors.com – Farbkontraste prüfen

accesible-color-matrix und colorsafe.co – barrierefreie Farbpaletten generieren

experte.com/accessibility – mehrere Seiten crawlen und Lighthouse Reports generieren

 

Website Performance

webpagetest.org – verschiedene Performance Tests mit umfangreichen Konfigurationsmöglichkeiten

waterfaller.dev – Core Web Vitals Test mit ausführlichem Guide zur Optimierung

 

Farbpaletten

mycolor.space und color.adobe.com – klassische Farbgeneratoren

coolors.co – Farbpaletten nach Tinder-Prinzip

ColorBox – Farbabstufungen im HSB-Farbraum generieren

picular.co – bildbasiertes Generieren nach Schlagworten

Sass Color Generator – Farbabstufungen wie sie im SASS/SCSS berechnet werden

branition.com – handverlesene Farbpaletten, ideal für Branding

 

CSS

shadows.brumm.af – CSS Box-Shadows berechnen

sassmeister.com – SCSS und SASS in CSS umwandeln

cssfontstack.com – ganze Font Stacks inklusive Fallbacks generieren

google webfonts helper – optimale Einbindung von Google Fonts

flexbox playground – interaktives FlexBox Cheat Sheet

css cheat sheet – praktische Übersicht über häufig genutzte CSS Anweisungen

 

TYPO3

t3versions.com – TYPO3-Version einer Website per URL herausfinden

Composer Helper – Composer-Befehle für TYPO3 Extensions generieren

fluid-to-inline-converter.com – TYPO3 Fluid Tags in inline-Notation umwandeln

Rector Update Guide – Mit rector alte Extensions automatisch erneuern lassen

TYPO3 Icons – Icons im Backend finden und über einen ViewHelper rendern lassen

 

HTTP Header

permissionspolicy.com – HTTP Header generieren lassen

securityheaders.com – HTTP Header per URL prüfen

 

Strukturierte Daten

search.google.com – Rich-Suchergebnisse und Darstellungsvarianten von Inhalten auf Google testen

developers.google.com – Ausführliche Erläuterung von strukturierten Daten

 

Software- & Technology-Versionen

caniuse.com und caniemail.com – Browser- & Mailkompatibilität für einzelne Features prüfen

whatwebcando.today – Feature-Kompatibilität für den aktuellen Browser checken

caniphp.com – PHP Feature Support nach Versionen

 

Backend Coding

crontab.guru – Cronjob Schedules definieren

regex101.com – Regular Expressions prüfen

ohshitgit.com – Git Code Snippets für brenzlige Situationen

devdocs.io – so ziemlich alle API Dokumentationen

drawsql.app – schnell schicke SQL-Diagramme erstellen

ptsv2.com – POST und GET Test Server

 

Sonstiges

devhints.io – Cheat Sheet für diverse Web-Anwendungen

carbon.now.sh – Template für Code Snippets

ratiobuddy.com – Seitenverhältnisse berechnen

answerthepublic.com – Google Suchanfragen und Relationen einsehen

svgomg – SVGs verkleinern und optimieren

 

Habt Ihr noch mehr hilfreiche Links, die Euch den Alltag im Web erleichtern? Wir würden diese Liste gerne stetig erweitern – also schreibt uns einfach auf LinkedIn oder Twitter!

Anna Obermair

Fragen zum Thema Design?

Haben Sie Fragen in den Bereichen Design und UX?

Unsere Mediengestalterin Anna Obermair hilft Ihnen gerne weiter.

Anna Obermair  |  Mediendesign

TYPO3: Unbenutzte Dateien im fileadmin finden

Ihr wollt unbenutzte oder verwaiste Dateien im fileadmin oder einer anderen Storage löschen? Leider gibt es hier nichts direkt vom Core. Aber ein kleiner Command in eurem Sitepackage hilft schnell...

Zum Beitrag

TYPO3: Redakteure mit individuellen user_upload Folder

Vielleicht kennt ihr die Kundenanforderung? Redakteure sollen Videos über den Button "Add media by URL" hinzufügen können. Aber die Dateien sollen sich dann nicht in fileadmin/user_upload/ sondern in...

Zum Beitrag

TYPO3: Seiten im Mixed Mode finden

Mixed Mode bezeichnet man in TYPO3 übersetzte Seiten, auf denen sich Seiteninhalte befinden, die nur zum Teil eine Relation auf entsprechende Seiteninhalte in der Hauptsprache haben. Dies wird im...

Zum Beitrag

Extbase Extensions: An Erweiterbarkeit denken mit data, site und language

Heute mal eine kleine Bitte an die TYPO3-Extension-Autoren da draußen: Achtet auf Erweiterbarkeit eurer Extensions. Dies fördert dann auch die Verbreitung der entsprechenden Plugins.

Zum Beitrag

SQL: Zeige alle Tabellen absteigend nach Größe sortiert

Ich brauche in letzter Zeit häufiger den SQL-Befehl, um herauszufinden, welche Tabellen in der TYPO3-Datenbank am größten sind. Ich habe das Snippet einmal veröffentlicht.

Zum Beitrag

TYPO3 12 mit CKEditor 5: Stile als Einfachauswahl

Wenn man im RTE in TYPO3 einen Link setzt, kann es sein, dass man zwischen verschiedenen Link-Klassen auswählen muss, um beispielsweise Buttons im Frontend zu erzeugen. Neu ist in TYPO3 12 dass man...

Zum Beitrag