For coders TYPO3 Tech Corner

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!

Zurück

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns