Martin ärgert sich, dass lange Attributwerte in den Firefox Devtools gekürzt werden. Hat es mich auch schon einige Male.

Aber: Man kann das abschalten, wie ich erst neulich herausfand!

Der einfachste Weg geht über die Devtools-Einstellungen. „Truncate DOM attributes“ abhaken, fertig.

Wer es etwas granularer einstellen möchte, kann devtools.markup.collapse* in about:config bemühen.

Ich habe vor einigen Wochen die Website meines Musikvereins einem Relaunch unterzogen. Nicht nur das Frontend ist erneuert, auch den kompletten technischen Unterbau habe ich neu geschrieben. So ist auch das Caching statischer Ressourcen neu, also CSS, Skripte oder Bilder. Im Folgenden beschreibe ich, was ich getan habe. Vorab: Ich nutze kein CMS oder Framework.

Weiterlesen …

Ein kleines „Abfallprodukt“ meines letzten privaten Projekts habe ich gerade auf GitHub und npm gepusht: create-launch-images

iOS erstellt für PWAs leider immer noch keine Launch-Screens auf Basis des Web App Manifests – die Bilder (und es sind nicht wenige!) muss man selber bereitstellen. Das war ich leid, darum habe ich kurzerhand ein Node-Script geschrieben, das das Manifest auswertet und mit dem größten darin hinterlegten PNG-Icon, dem name oder short_name und der background_color die Launch-Screens für iPhone 6 und höher erstellt.

Der Code ist sicher nicht der Schönste, Robusteste oder gar Performanteste, funktioniert aber für meine Zwecke ganz gut. Darum habe ich das mit meow zu einem kleinen CLI-Tool verdrahtet und veröffentlicht, damit Ihr auch was davon habt. Natürlich ohne Gewähr, ist ja auch v0.0.1! 😁

Weiterlesen …

So. 9 Stunden Code geschrubbt; es verbleiben noch zwei Kleinigkeiten, die hebe ich mir für morgen auf. Und dann endet ein Projekt, das ich laut Things am 24.03.2017 begonnen habe, dessen erster Commit laut GitHub am 03.04.2018 stattfand und das inzwischen 101.688 Changes hat.

Eine nette Sache, die im mobilen Chrome (und in einer Reihe von anderen Browsern) funktioniert, ist das Einfärben der Adressleiste. Man setzt einfach dazu einfach ein Meta-Tag:

<meta name="theme-color" content="lime">

Im iOS-Safari ist das nicht möglich, auch nicht mit dem Web App Manifest.

Beim längst überfälligen Redesign der Vereinsseite bin ich aber zufällig auf einen netten Effekt gestoßen: Mittels einer background-color auf dem body färbt diese Farbe die Adressleiste ein. Die „normale“ Hintergrundfarbe legt man dann auf dem direkten Kind-Element des Bodys. Zum Beispiel so:

body {
  /* this will color the address bar in iOS/iPadOS Safari */
  background-color: lime;
  /* reset body margin for full background-color of wrapper */
  margin: 0;
}

body > *:first-child {
  /* apply default background-color and “body” padding here */
  padding: 1em;
  background-color: white;
}

Das Ergebnis wäre dieses:

Ups, der Content ist zu kurz, die Hintergrundfarbe soll so aber nicht aussehen. Der Trick ist, jetzt noch eine Hintergrundfarbe auf html zu setzen:

html {
  background-color: white;
}

Idealerweise ist es die gleiche Farbe wie die des ersten Kind-Elements. Aber man kann natürlich auch etwas kreativer sein und eine ganz andere Farbe nehmen:

Hinweis am Rande: Im macOS-Safari sorgt die Farbe übrigens für das Einfärben der Scrollleiste.

Nach über 20 Jahren geht SETI@home jetzt in den Winterschlaf:

Wissenschaftlich gesehen sind wir an dem Punkt angelangt, an dem die Erträge abnehmen; im Grunde haben wir alle Daten analysiert, die wir für den Moment benötigen.

Der Nerd in mir findet das natürlich sehr schade, war ich doch von Anfang an dabei – auch wenn ich meinen ursprünglichen Account „verlegt“ habe und 2006 neu startete.

Dafür stecke ich aber jetzt mehr Rechenleistung in die medizinische Forschung. Rosetta@home unterstütze ich schon einige Jahre, jetzt kommt noch IBMs World Community Grid dazu. Und wer weiß, wenn ich meine letzten SETI@home-Pakete abgearbeitet habe, vielleicht sogar noch was mehr …

Dieser Moment, wenn der Prototyp des Terminators gelenkiger ist als Du:

Brad Frost ist auf eine sehr coole Lösung für accessible GIFs gestoßen: Reducing motion with the picture element

Vor Kurzem bin ich endlich in die Welt der Hooks eingestiegen. Refactoring a component to use React hooks ist ein guter Einstieg fürs Refactoring.

2018 habe ich (natürlich) wieder sehr viel Daft Punk gehört. Aber dass es der Soundtrack zu „Black Panther“ zum Top-Album schafft, hätte ich nicht gedacht. Und möglicherweise habe ich mein Solowerk für Weihnachten etwas zu oft gehört …