Webentwicklung
Bilder in WebP konvertieren (und wann man es lassen sollte)
Was WebP ist, wie viel es gegenüber JPEG und PNG spart, wie man Bilder im Browser, im Terminal oder mit Node.js konvertiert und wie man sie mit picture ausliefert.
Autor
Aimran Oukham
Full-Stack-Entwickler zwischen Valencia und Alicante, Gründer und Betreiber des AIMRAN-Ökosystems: aimran.es, AIMRAN Tools, AIMRAN Library und AIMRAN Universe.
Was Aimran macht
Aimran baut und betreibt die Projekte des AIMRAN-Ökosystems. Alle sind online und können besucht werden:
- aimran.es: die Hauptwebsite mit Informationen über Aimran und seine Projekte.
- AIMRAN Tools: Online-Tools für Entwickler, die im Browser laufen.
- AIMRAN Library: eine Bibliothek mit Komponenten und Ressourcen für Webprojekte.
- AIMRAN Universe: die Karte des Ökosystems und seiner Projekte.
- AIMRAN Blog: dieser Blog, in dem er dokumentiert, was er beim Bauen und Betreiben all dessen lernt.
Werdegang
Wie er auf aimran.es erzählt, baut Aimran seit vier Jahren Websites und verwaltet Server, hat mehr als 130 Projekte abgeliefert (viele für Agenturen und Unternehmen) und studiert parallel Entwicklung plattformübergreifender Anwendungen, während er eigene Produkte entwickelt. Sein üblicher Stack umfasst React, TypeScript, Supabase, WordPress und WooCommerce sowie Infrastruktur und technisches SEO.
Warum er über diese Themen schreibt
Die Themen des Blogs (Webentwicklung, angewandte künstliche Intelligenz, Entwickler-Tools, technisches SEO und Technologie) sind genau die, an denen er täglich beim Bauen und Betreiben dieser Websites arbeitet. Die Artikel entstehen aus konkreten, in diesen Projekten gelösten Problemen, nicht aus Keyword-Listen.
Hängt ein Artikel von externen Informationen ab (Google-Dokumentation, Webspezifikationen, Release Notes eines Tools), wird die Originalquelle verlinkt, damit du sie prüfen kannst.
Kontakt aufnehmen
Artikel von Aimran
18 Artikel
SEO
Canonical und hreflang richtig umsetzen (und die Fehler, die sie aushebeln)
Was Canonical und hreflang leisten, wie man beides auf einer mehrsprachigen Website mit x-default kombiniert und welche Fehler Google sie ignorieren lassen.
Entwickler-Tools
Cron-Ausdrücke lesen und schreiben (mit Beispielen zum Kopieren)
Was jedes der fünf Felder eines Cron-Ausdrucks bedeutet, was *, Komma, Bindestrich und Schrägstrich bewirken, die häufigsten Stolperfallen und Beispiele.
Webentwicklung
Docker: der Unterschied zwischen Image und Container, erklärt mit Befehlen
Ein Docker-Image ist eine schreibgeschützte Vorlage, ein Container eine laufende Instanz davon. Der Unterschied, die Grundbefehle und die häufigsten Fehler.
Webentwicklung
Den letzten Commit in Git rückgängig machen, ohne Arbeit zu verlieren
Wie du den letzten Commit mit reset, revert und amend rückgängig machst, was du nutzt, wenn er schon gepusht ist, und wie du einen verlorenen Commit zurückholst.
Technologie
HTTP-Sicherheitsheader: welche du auf jeder Website setzen solltest und was jeder bewirkt
Was HSTS, Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, Referrer-Policy und Permissions-Policy bewirken, mit empfohlenen Werten und Prüfung.
Entwickler-Tools
JSON validieren und die häufigsten Fehler verstehen
Die JSON-Syntaxregeln laut Standard, die fünf Fehler hinter fast jedem Parse-Fehler und wie man eine Datei im Browser, im Terminal oder mit Node.js validiert.
Webentwicklung
Lazy Loading von Bildern in HTML: loading="lazy", fetchpriority und decoding
Wie du verzögertes Laden mit loading="lazy" aktivierst, warum du es nicht auf das Hauptbild anwenden darfst und wie du es mit fetchpriority und decoding kombinierst.
SEO
robots.txt oder noindex: was jedes bewirkt und wann du es einsetzt
robots.txt steuert das Crawling, noindex die Indexierung. Was bei falscher Kombination passiert, wie man interne Suche und Filter behandelt und wie man es prüft.