Bootstrap 5.0.0 ohne jQuery + mit praktischen neuen Features

6. Mai 2021

Ich habe die erste Bootstrap 5 Beta im Dezember vorgestellt, jetzt ist die offizielle v5.0.0 endlich verfügbar.

Wer mit der ersten Beta und den zwei nachfolgenden bereits experimentiert hat, weiß in etwa, welche Änderungen Bootstrap 5 mit sich bringt.

Die wohl wichtigste Änderung, oder zumindest diejenige, die von vielen Webentwicklern am meisten antizipiert wurde, ist der Verzicht auf die externe jQuery-JavaScript-Bibliothek.

Auch die Verfügbarkeit einer RTL-Variante ist zu begrüßen, wenn auch im westlichen Sprachraum nur selten Bedarf dafür besteht, Webinhalte von rechts nach links anzuzeigen.

Neue Bootstrap 5 Features

Nachfolgend eine kurze Liste der interessantesten Neuerungen in Bootstrap 5.0.0:

  • Redesign der Bootstrap-Dokumentation
  • Neues Farbsystem (tint-color(), tint-color())
  • Grid-Update: Neuer Breakpoint (xxl) für Displays >1400px
  • RFS (responsive font-sizing) out-of-the-box!
  • Dutzende Verbesserungen des Form-Handlings
  • Neue Akkordion-Komponente (.accordion)
  • Neue Offcanvas-Komponente

Eingeschränkter Bootstrap Browser Support

Der Browser Support für Bootstrap 5.x ist weiter entschlackt worden. Folgende Browser werden nicht mehr offiziell unterstützt:

  • Internet Explorer 10 und 11
  • Microsoft Edge < 16 (Legacy Edge)
  • Firefox < 60
  • Safari < 10
  • iOS Safari < 10
  • Chrome < 60
  • Android < 6

Auf der Bootstrap Github Seite findet man unter „Projects“ den Hinweis auf eine kommende v4.7.0 – der Support für v4.x dürfte noch einige Zeit gegeben sein.

Es lohnt sich jedoch, auf Bootstrap 5 umzusteigen, vor allem für brandneue Projekte empfiehlt sich der Versionswechsel. In einem Jahr stünden sonst unnötige Migrationsbemühungen auf dem Plan, um up-to-date zu bleiben. Der „Migration Guide“ für Bootstrap 5 ist sehr übersichtlich und beinhaltet alle Infos, die Webentwickler brauchen, um ihre eigenen und Kundenprojekte auch zukünftig mit einem modernen, stabilen Designsystem umzusetzen.

PS: Bootstrap 5.0.1 ist bereits in Arbeit, auf der Projektseite auf Github ist erkennbar, dass es sich um einen Bugfix-Release handeln wird, der vermutlich dem Gesamtpaket Bootstrap auch den nötigen Feinschliff verpassen soll.

WordPress 5.6.2 behebt den bisher nervigsten Bug des Jahres

23. Februar 2021

Mit erheblicher Verspätung wurde WordPress 5.6.2 veröffentlicht. Die wohl wichtigste Änderung ist die Behebung von #52440. Der Bug verhinderte das Verlassen einer Editor-Seite, wenn eines der Felder Titel, Auszug oder Post-Inhalt leer war. Es wurde darauf hingewiesen, dass die Seite nicht gespeichert sei, auch wenn man dies zuvor getan hatte. („Leave Site“ Browser-Warnung)

Für WordPress-Entwickler und Freelancer, die stundenweise abrechnen, war es eine kleine Katastrophe. Zwischenzeitlich hatte ein WordPress-Entwickler jedoch eine temporäre Lösung entwickelt, die in Form einer simplen Funktion in der functions.php-Datei angelegt werden musste. Warum es drei Wochen dauerte, bis der Bugfix in WordPress 5.6.2 landete, ist mir (und anderen Entwicklern) unbegreiflich.

Bis zur Veröffentlichung von WordPress 5.7 dauert es noch knapp zwei Wochen, wenn alles nach Plan läuft. Die aktuelle WordPress Roadmap beinhaltet die Entwicklungsziele der nächsten Monate und Jahre.

Mit WordPress 5.6.2 wurden außerdem weitere Kleinigkeiten verbessert:

  • Fataler Fehler in einigen PHP 8.x Umgebungen (class-pclzip)
  • Schriftgröße in Absatz-Blocks kann wieder geändert werden
  • Bildoptionen im Bild-Block sind wieder verfügbar

PS: Im WordPress 5.7 „Field Guide“ wird angedeutet, dass vor allem der umstrittene Gutenberg-Editor etliche Bugfixes und Performance-Optimierungen enthalten wird.

Bootstrap 4.6 Update für mehr Barrierefreiheit

21. Januar 2021

Obwohl die Bootstrap-Entwickler ihre Zeit nun erstranging dem ersehnten Bootstrap 5 Release widmen, erscheinen weiterhin sinnvolle Updates für Version 4.x des beliebten Web-Frameworks.

Vor wenigen Tagen ist Bootstrap 4.6 erschienen; folgende Änderungen machen Webentwicklern, die Barrierefreiheit zu schätzen wissen, gewiss Freude im neuen Jahr.

  • Tooltips und Popovers können individuelle Klassen erhalten
  • Neue .navbar-nav-scroll CSS-Klasse
  • Spinners werden langsamer, wenn „prefers-reduced-motion“ im User-Browser aktiv ist
  • v4.x Dokumentation basiert auf Hugo (v5.x ebenfalls)
  • Wer die Font Ubuntu sans-serif nutzt, kann sich über verbessertes Antialiasing freuen (nun wird „Liberation Sans“ verwendet)

Unter der Motorhaube (Bootstrap Dokumentation) läuft nun Hugo. Die Ruby-Abhängigkeit wurde entfernt und die Basis der Dokumentation und der gesamten Entwicklungsumgebung basiert nun auf den gleichen Komponenten wie die kommende Version Bootstrap 5.0.

Das offizielle Changelog findest du hier.

Herunterladen kannst du Bootstrap 4.6 auf der offiziellen Homepage.

Debian: Das universelle Betriebssystem hat eine neue Webseite

23. Dezember 2020

Als Webentwickler habe ich beruflich häufig mit Linux-basierten Betriebssystemen zu tun. Auch privat nutze ich Linux als Alternative zu MacOS und Windows (seit 2012).

Angefangen hat meine Leidenschaft für Linux mit Xubuntu, einer eigenständigen Ubuntu-Variante. Ubuntu wiederum basiert auf Debian Linux.

Ich war recht überrascht, als ich vor ein paar Tagen auf debian.org vorbeigeschaut habe, um die neue Version 10.7 zu testen. Angestoßen wurde die Änderung bereits im letzten Jahr während eines „Debian Sprints“: das Debian-Projekt hat eine neue Homepage.

Debian.org homepage 2020

Zum Vergleich die „alte“ Website:

debian.org old homepage 2019

Das Debian-Webteam hat offensichtlich einiges geändert. Mir gefällt die neue Seite nicht, aber das ist ja Geschmackssache. Gut finde ich, dass die Debian-Homepage auch mit mobilen Endgeräten vernünftig gelesen und bedient werden kann.

Es ist mir jedoch ein Rätsel, warum für einen derartigen Relaunch kein gängiges Framework wie z.B. Bootstrap 5 oder ein Content Management System (WordPress) genutzt wurde. Im aktuellen Zustand wirkt der neue Webauftritt wie ein Schnellschuss, aber die Verantwortlichen sprechen davon, das Design bzw. Layout eventuell noch weiter anzupassen.

Chrome 88: Automatische Silbentrennung via CSS-Eigenschaft „hyphens: auto“

16. Dezember 2020

Ein Feature, das lange auf sich warten lässt, kommt im Januar 2021: mit der ersehnten CSS-Eigenschaft hyphens: auto werden Silben bald automatisch getrennt. Chrome 88 enthält viele weitere nützliche Verbesserungen, die vor allem Webentwickler glücklich machen werden. Ich widme der genannten CSS-Eigenschaft einen eigenen kurzen Eintrag, da diese in der Vergangenheit für ausgiebiges Haareraufen verantwortlich war.

hyphens: auto CSS property

Was in mobilen Webbrowsern (Chrome auf Android z.B.) seit einiger Zeit völlig normal ist, konnte auf Desktop-Betriebssystemen (außer MacOS) nur mit sogenannten polyfills erreicht werden. Die automatische Silbentrennung wird in anderen Desktop-Browsern auf den meisten Betriebssystemen bereits unterstützt. Da Chrome weiterhin Marktführer ist (und voraussichtlich auch bleiben wird), hat das in den letzten Jahren häufig für Verwirrung und Frust gesorgt, da Silbentrennung logischerweise von Klienten erwartet wird. Logisch deshalb, weil Silbentrennung bereits in der Grundschule gelehrt wird und in den Köpfen als selbstverständlich abgespeichert ist.

Die CSS-Eigenschaft hyphens: auto wird ab Chrome Version 88 auf Windows, Linux, ChromeOS, und weiterhin MacOS und Android unterstützt. Ich empfinde Erleichterung und freue mich darauf, Kunden nicht mehr erklären zu müssen, warum ihre Webseiten-Texte so schrecklich aussehen.

Mehr Informationen zu dieser Änderung und weiteren Verbesserungen (die in der Chrome Beta 88 bereits enthalten sind) findest du hier.

WordPress 5.7 erscheint im März 2021

14. Dezember 2020

Nach der erfolgreichen Veröffentlichung von WordPress 5.6 in der vergangenen Woche (inklusive brandneuem Standard Theme!), wird schon fleißig an WordPress 5.7 gebastelt.

Der Release-Termin für WP 5.7 dürfte um den 09. März 2021 liegen, also knapp drei Monate nach dem aktuellen Update. Geplant sind vor allem weitere Verbesserungen des umstrittenen Gutenberg-Editors. Es ist davon auszugehen, dass bis dahin ein oder zwei kleinere Updates, also Point Releases folgen. Wer bei der Entwicklung von WordPress 5.7 helfen möchte, sollte sich diesen Beitrag aus dem WordPress Core Blog anschauen.

Im Hintergrund wird weiterhin am Update auf jQuery 3.x gearbeitet, was jedoch noch etwas dauern könnte, da etliche breaking changes involviert sind, die mit Weitsicht gehandhabt werden müssen, um einen unbeschwerten Übergang zu ermöglichen.

Das Update auf Gutenberg 9.6 ist für diesen Dezember geplant, vermutlich kommt der Release am 23. Dezember 2020.

Mehr Informationen zu zukünftigen WordPress-Versionen findest du auf der WordPress Roadmap 2021.

Bootstrap 5 Beta mit experimentellem RTL-Support

13. Dezember 2020

Letzten Monat konnten wir uns über die dritte Bootstrap 5 Alpha freuen, am 07.12.2020 ist endlich die erste Bootstrap 5 Beta erschienen. Zu den interessantesten neuen Features gehört der experimentelle RTL-Support. Nein, damit ist nicht der peinliche TV-Sender gemeint, sondern das R(ight)-T(o)-L(eft) Konzept, das für Nutzer und Entwickler sinnvoll ist, die mit Sprachen interagieren, die von rechts nach links gelesen und interpretiert werden.

new bootstrap 5 beta homepage screenshot

Hinzu kommen weitere spannende Neuerungen, die Bootstrap 5 fit für das Jahr 2021 machen:

  • Einge Klassen wurden umbenannt, z.B. wird aus .ml-4 nun .ms-4 (Das „s“ steht für „start“, das „e“ für „end“)
  • Die Popper JavaScript-Bibliothek (TOOLTIP & POPOVER POSITIONING ENGINE) kommt nun in v2.x statt v1.x
  • Namespaced data attributes – damit wird sichergestellt, dass Bootstrap den Namespace für JS-Funktionalität exklusiv und ohne Verwirrungen nutzen kann
  • Es gibt einige neue sogenannte Utilities, z.B. für die Positionierung von Toasts
  • scale-color() heißt nun shift-color()
  • Performance-Verbesserungen durch die Entfernung einiger standardmäßiger linearer Farbverläufe, z.B. in Tabellen (Siehe #32277)

Wie zu erwarten, enthält die Bootstrap 5 Beta neben experimentellem RTL-Support diverse „breaking changes“. Das heißt, dass Webentwickler umlernen müssen. Bis zum endgültigen Release von Bootstrap 5 sollten noch einige Wochen vergehen, aber es sieht so aus, als hätte das Bootstrap-Entwickler-Team sehr gute Arbeit geleistet. Sprich: so viel umzulernen gibt es dann doch nicht.

Ich habe einige Testprojekte bereits auf Bootstrap 5 umgestellt und bisher funktioniert alles prima. Die lang ersehnte Entfernung der jQuery-Abhängigkeit ist tatsächlich eine tolle Sache. Ich werde allerdings einen der nachfolgenden Point Releases abwarten, bis ich Live-Projekte und Seiten von Kunden endgültig umstelle.

Die offiziellen Release Notes für die erste Bootstrap 5 Beta findest du hier.

Exif Metadaten mit zwei Klicks entfernen

9. Dezember 2020

Jeder, der mit Digitalkameras, digitalen Spiegelreflexkameras, oder auch mit dem Smartphone Bilder macht, verrät im schlimmsten Fall mehr als nötig. Die sogenannten Exif Metadaten, die Bildern im JPG-Format hinzugefügt werden, enthalten Informationen über harmlose Daten wie Farbtiefe, Kameramodell, Verschlusszeit, etc. Das ist nicht problematisch; zusätzlich zu diesen Metadaten, die dem Fotografen oder Bildbearbeiter keine Sorgen bereiten dürften, können Exif Metadaten auch Informationen zum Standort (GPS) und Namen (z.B. Photoshop-Registrierungsname) enthalten.

Wer regelmäßig Bilder ins Internet lädt, z.B. auf Facebook teilt, oder in einer der unzähligen Foto-Communities, sollte sämtliche Exif Metadaten vor dem Upload entfernen.

exif metadaten entfernen screenshot

Die im obigen Screenshot abgebildete App bedient sich eines simplen Tricks, um die Exif Metadaten schnell und sicher zu entfernen. Es werden selbstverständlich keine Daten auf dem Server gespeichert; die App basiert auf einer minimalen JavaScript-Anwendung, die vollständig im Webbrowser (lokal) ausgeführt wird.

Im Bild ist zu erkennen, dass „Artist“ eine der Meta Informationen ist, die ich entsprechend verpixelt habe. Eine eindeutige Identifizierung einer Person über diesen Eintrag ist mit wenig Arbeit verbunden und kann von Laien durchgeführt werden. Damit es nicht irgendwann zu Problemen kommt, entfernt das Werkzeug sämtliche Exif Metadaten im Handumdrehen.

Im Anschluss kann das bereinigte Bild ohne Metadaten heruntergeladen werden. Du kannst leicht testen, ob tatsächlich alle Daten entfernt wurden, indem du das heruntergeladene Bild erneut hochlädst. Es sollten nun keine Metadaten mehr vorhanden sein.

Hier geht es zum EXIF Removal Tool

Linux Klatsch & Tratsch

7. Dezember 2020

Wer häufiger auf molekulo.de verweilt, hat sicherlich bemerkt, dass ich als Webentwickler Linux-basierte Betriebssysteme nutze, um meinen Job zu machen. Vor knapp einem Jahr habe ich auf der populären Plattform medium.com eine Publikation erstellt, die sich mit Linux und Open Source beschäftigt. Bisher sind knapp 50 Artikel erschienen, die meisten davon widmen sich Neuerscheinungen im Bereich der Linux-Distributionen.

Linux Gossip (Medium Publikation)

Neben Tests diverser Linux-Distributionen gibt es auch Artikel, die sich mit dem Status Quo der Open Source Community auseinander setzen. Ein Beitrag, der besonders gut angekommen ist: The GIMP has a marketing problem

Mein Plan sieht eine Übersetzung der wichtigsten Artikel ins Deutsche auf meiner Seite hier vor, allerdings kann dies noch etwas dauern, da ich sonst auch gut ausgelastet bin.

Wasmer 1.0 Beta: WebAssembly überall

5. Dezember 2020

Typischerweise erscheinen an Tagen, die mit M, D, F, oder S beginnen, neue Web-Technologien, von denen Entwickler zumindest mal gehört haben sollten. WebAssembly gehört zu den Entwicklungen, die in der näheren Zukunft relevant werden könnten.

Mit der Wasmer 1.0 Beta („Universal WebAssembly runtime“) kannst du WebAssembly-Code in beliebigen Clients ausführen lassen.

Die erste Alpha-Version (Wasmer 1.0.0-alpha5) ist vor einem Monat erschienen; viele Änderungen beinhaltet die Beta-Version nicht, allerdings geht die Entwicklung in die richtige Richtung.

Folgende Verbesserungen sind in der Wasmer 1.0 Beta enthalten:

  • Support für Metering Middleware
  • Instanzen können exportiert werden
  • Support für Apple Silicon (arm64-apple-darwin)
  • diverse andere sinnvolle Änderungen

Das vollständige Changelog findest du hier. Wenn du mehr über WebAssembly bzw. die Wasmer-Implementation erfahren möchtest, dann schau mal hier vorbei: https://wasmer.io

Ähnlich wie bei Node.js gibt es einen Paket-Manager für WebAssembly bzw. Wasmer: https://wapm.io