Firefox 84 Beta: WebRender und Linux

21. November 2020

Firefox 84 ist die letzte Version, die Adobe Flash und NPAPI Plugins unterstützt. Mit der Veröffentlichung von Firefox 85 wird Flash nicht mehr funktionieren.

Für Linux-Nutzer besonders interessant in diesem Release: Firefox 84 Beta aktiviert WebRender.

Firefox stellt nun auch sicher, dass URLS via „localhost“ (http://localhost) auf das lokale Loopback Interface verweisen, z.B. http://127.0.0.1

Apple’s neue Silicon Hardware wird nun ebenfalls unterstützt. Du findest die aktuellen Release Notes hier.

Firefox 83: Verbesserte JavaScript-Performance mit Warp

18. November 2020

Der Marktanteil des freien Firefox-Browsers ist seit der Veröffentlichung von Google’s Chrome stetig gesunken. Mittlerweile sind wir bei knapp 8% Desktop-Marktanteil für den Firefox-Browser angekommen, Chrome führt im Vergleich mit über 70%. Auf dem mobilen Browsermarkt sieht es noch verheerender aus, denn vor allem auf Smartphones führt natürlich Chrome, gefolgt von Safari.

Im Screenshot sind die Jahre 2015 bis 2020 dargestellt. Ich habe als Datenquelle statcounter.com verwendet. Außerdem habe ich mich auf die Desktop-Statistiken konzentriert, da diese für klassisches Web Development weiterhin ausschlaggebend bleibt und nicht durch „Appstore-Bias“ verfälschte Ergebnisse zeigt.

Trotz massiver Verluste, sowohl im Bereich des Marktanteils, als auch beim Personal, wird Firefox fleißig weiterentwickelt. Kürzlich wurde SpiderMonkey, die JavaScript-Engine des Mozilla-Browsers, mit Warp ausgestattet, welcher die JavaScript-Performance erheblich verbessern kann.

Im Mozilla-Devblog kommt Freude auf: „we had a 20% improvement on Google Docs load time, and we are about 10-12% faster on the Speedometer benchmark“.

Ob Otto-Normal-Nutzer einen Unterschied bemerken, ist fraglich. Beim Test mit Firefox 83 auf Linux habe ich bisher keine Quantensprünge erlebt. Ohnehin entwickle ich mittlerweile fast ausschließlich für und mit Chrome.

Schluss mit Blablabla: So findest du unnötige Füllwörter

17. November 2020

Screenshot Füllwörter finden

Vor zwei Jahren habe ich für ein Kundenprojekt meine Regex-Kenntnisse aufgefrischt. Beim Experimentieren ist mir aufgefallen, dass auf der Kundenseite unzählige Texte mit Füllwörtern vollgestopft wurden. Die Texte waren kaum lesbar, ohne dass man schmunzeln musste.

Ich habe mit der Kundin darüber gesprochen und vorgeschlagen, eine Zusatzfunktion für ihren WordPress-Editor zu erstellen. Blogeinträge der Kundin werden beim Verfassen automatisch auf Füllwörter untersucht. Die Füll- oder Flickwörter werden entsprechend markiert.

Der obige Screenshot zeigt das auf regulären Ausdrücken basierende Standalone-Projekt, das ich daraufhin erstellt habe.

Auf der linken Seite gibst du deinen Text ein, auf der rechten Seite siehst du, wo du Füllwörter benutzt hast bzw. wo du nachbessern solltest.

Der Algorithmus, der die Flickwörter zum Vorschein bringt, könnte kaum simpler sein. Via JavaScript wird lediglich der eingegebene Text nach vorher definierten Füll- und Flickwörtern durchsucht, und dann entsprechend via CSS farblich hervorgehoben.

txt = str.replace(/\b(fuellwort1|flickwort2)\b/gi)

Es ist ganz einfach: Der Text wird auf die angegebenen Begriffe geprüft, im Beispiel „fuellwort1“ und „flickwort2“, und dann markiert.

Mit dem nützlichen Tool auf https://regex101.com kannst du mit Regex experimentieren. Viele Aufgaben, die mit Textverarbeitung im Browser zu tun haben, können mit Regex-Regeln extrem vereinfacht werden. Die redundante Suche nach wiederkehrenden Füllwörtern beispielsweise kann mit /gi verkürzt werden, da somit global und case-insensitive gesucht wird.

Wenn du dich mit deinen eigenen Texten unsicher fühlst, und Füllwörter bzw. Flickwörter dir nicht sofort ins Auge fallen, dann kannst du https://frjk.de/flickwort nutzen. Die Textverarbeitung findet komplett im Browser statt, es werden keine sensiblen Daten auf meinem Server gespeichert oder auf diesen übertragen!

Bootstrap 5 Beta rückt ein Stückchen näher

15. November 2020

Um uns die Wartezeit auf Bootstrap 5 zu versüßen, veröffentlichen die Bootstrap-Entwickler regelmäßig Alpha-Versionen, die auch in professionellen Projekten bereits jetzt eine gute Figur machen.

Bootstrap 5 Alpha 3

Die dritte Alpha-Version ist ein bedeutsames Update, denn zum ersten Mal wird mit „breaking changes“ veröffentlicht.

Folgende Änderungen (und viele mehr) sind jetzt live:

  • Neue Akkordion-Komponente
  • Neue Block-Buttons
  • Verbesserte Dokumentation
  • Wechsel zu Dart Sass statt LibSass
  • Entfernung von Polyfills für IE und Legacy Edge
  • Neue Utility-API mit sinnvollen Änderungen
  • Viele neue Formular-Verbesserungen
  • Wechsel von BootstrapCDN zu jsDelivr

Mehr Infos findest du im offiziellen Bootstrap-Blog hier.

Die vollständige Liste aller Änderungen kannst du hier begutachten.

So langsam wird es Zeit für die erste Bootstrap 5 Beta. Was noch fehlt, bis Bootstrap 5 endlich veröffentlicht wird, kannst du auf Github nachlesen.

Die erste Beta wird folgende Änderungen enthalten:

  • RTL-Support: Von rechts nach links
  • Popper.js v2 !
  • Neue Utility-API („pseudo classes“)

Wenn du Bootstrap 5 schon jetzt ausprobieren möchtest, findest du auf https://v5.getbootstrap.com alles was du dazu brauchst.

WordCamps im Jahr 2020 (Finnland & Mexiko)

7. November 2020

Bedingt durch die globalen Geschehnisse und die damit verbundene Unsicherheit, wurden so ziemlich alle geplanten WordCamps für 2020 in virtuelle Events verwandelt. Die zwei verbliebenen finden (virtuell) in Finnland und Mexiko statt.

WordCamp Finland 2020

Das WordCamp Finland findet in diesem Jahr am 12. November 2020 statt. Die Agenda liest sich vielversprechend und beinhaltet folgende virtuelle Vorträge:

  • Less is more – Caching tips for WordPress developers
  • Fixing Fraud and Improving SEO with Blockchain Timestamps
  • Why Progressive Web Apps for WordPress?
  • How Fun is DNS?!?
  • und viele weitere interessante Vorträge

WordCamp México 2020

Das WordCamp México findet vom 25. bis 28. November statt. Wer Spanisch spricht, kann dem finalen WordCamp im Jahr 2020 mit Sicherheit etwas abgewinnen.

  • Get the hooks right in the WooCommerce checkout
  • 5 steps to consider for your digital project launch
  • Technical SEO configurations that your ecommerce must incorporate
  • Template hierarchy in WordPress
  • und dutzende weitere Vorträge

* Ich habe die Titel der Vorträge des WordCamp México 2020 via Google Translate ins Englische übersetzen lassen.

Die Zukunft der WordCamp-Idee

Virtuelle Events sind praktisch und kostengünstig umzusetzen, allerdings fehlt vielen WordPress-Entwicklern der „echte“ persönliche Kontakt zu Kollegen und Freunden aus der ganzen Welt.

WordCamps haben diesen Austausch seit vielen Jahren möglich gemacht, in Zukunft jedoch wird es vermutlich mehr virtuelle Events geben. Das populäre WordCamp Europe findet 2021 weiterhin nur virtuell statt, für 2022 ist dann wieder ein Zusammentreffen geplant, bei dem eventuell sogar die Hände geschüttelt werden dürfen.

Es scheint momentan ungewiss, ob wir je wieder zur ursprünglichen WordCamp-Idee zurückkehren können. Vielleicht wollen wir das aber auch gar nicht mehr, weil uns die Vorteile virtueller WordCamp-Events so sehr überzeugen.

GIMP 2.99.2: „Render Caching“ und Wayland-Support

6. November 2020

Vor einem Monat wurde The GIMP 2.10.22 veröffentlicht, heute kommt die Development Version (GIMP 2.99.2) mit „Render Caching“, Wayland-Support, und diversen Änderungen, die den Weg für GIMP 3.0 bereiten sollen. Der Umstieg von GTK2 auf GTK3 wird mit Version 2.99.2 einen Schritt weiter gebracht.

Folgende Änderungen sind im Update enthalten:

  • UI basierend auf GTK3
  • nativer Wayland-Support
  • Neue Plugin-API (breaking changes!)
  • Plugins können mit Python, JavaScript, Vala, und Lua geschrieben werden
  • „Render Caching“ ermöglicht bessere Performance
  • Zoom-Qualität kann für bessere Performance reduziert werden

Du kannst The GIMP 2.99.2 hier herunterladen. Die offiziellen Release Notes findest du hier.

The GIMP wird häufig kritisiert, da das Programm trotz jahrzehntelanger Entwicklungsarbeiten dem Idol Adobe Photoshop hoffnungslos hinterherhinkt. Ein Strawman-Argument, denn The GIMP ist ein gutes Bildbearbeitungsprogramm, dem es hauptsächlich an repräsentativem Marketing mangelt.

Mit outline (CSS-Eigenschaft) Layout-Fehler finden

30. September 2020

Manchmal sieht man das <div> vor lauter <html> nicht mehr. Abhilfe schafft eine CSS-Eigenschaft namens „outline“. Diese kann so ziemlich allen HTML-Tags zugeordnet werden, was aus einem Layout-Dschungel eine leicht nachvollziehbare Übersicht machen kann. Fehler im Layout können damit schnell aufgespürt werden, eine Anpassung des Layouts mit diesem visuellen Hilfsmittel ist bedeutend einfacher als ohne.

So sieht es aus, wenn die outline-Eigenschaft bei allen HTML-Elementen aktiv ist:

So kannst du es in Chrome und Browsern, die auf Chromium basieren, testen:

  • F12 → Developer Tools ausklappen
  • Unter „Elements“ einen neuen Style hinzufügen:
    * { outline: 1px solid red; }

Um den outline-Trick temporär aktiviert zu lassen, kannst du in deiner CSS-Datei den obigen Code ergänzen, am besten zu Beginn der Datei.

Bootstrap 4.5.1: Verbesserungen & mehr

4. August 2020

Während wir schon sehnsüchtig auf Bootstrap 5 warten, wird Bootstrap 4.x fleißig weiterentwickelt. Stabilität und Zuverlässigkeit stehen dabei im Fokus, daher sollten keine Quantensprünge für das Update auf Bootstrap 4.5.1 erwartet werden.

Folgende Änderungen (und viele mehr, die ich hier nicht erwähne) erfreuen Webentwickler auf der ganzen Welt:

CSS

  • Vereinfachte Ränder bei gruppierten Listen (Cards)
  • Wiederherstellung von word-break: break-word
  • Toasts für IE11
  • Duplizierte Eigenschaften einiger individueller Kontrollelemente entfernt
  • overflow: hidden bei Toasts entfernt

JavaScript

  • role="dialog" bei Modals via JavaScript hinzugefügt
  • Timeout wird zurückgesetzt, bevor ein Toast angezeigt wird

Dokumentation

  • Verbesserung der Texte auf der Download-Seite
  • Einige funktionsunfähige Beispiele wurden repariert
  • Verbesserungen der Barrierefreiheit bei den Formularen in der Dokumentation

Ich habe die aktuelle Version in einigen Testumgebungen und für Apps in der Entwicklung genutzt und bin mit dem Update völlig zufrieden. Einen Grund zum Upgrade aller Bootstrap-Installationen gibt es für mich bei Version 4.5.1 nicht.

Bootstrap Support

Bootstrap finanziell unterstützen:
opencollective.com/bootstrap

Bootstrap-Blog:
blog.getbootstrap.com/2020/08/04/bootstrap-4-5-1/

Bootstrap 4.5.1 auf Github:
github.com/twbs/bootstrap/releases/tag/v4.5.1

Bootstrap 5 (alpha):
https://v5.getbootstrap.com/