Von der ersten Ankündigung im November bis heute wartete ich gespannt auf Ivory. Ivory ist der Mastodon-Client von Tapbots und somit von den beiden Texanern, die auch meinen Lieblings-Twitter-Client Tweetbot entwickelt hatten.

Heute ist Ivory endlich erschienen und sofort in meinem Dock gelandet. Es fühlt sich alles wie früher an! Toll!

Unter iOS 15 (oder vielleicht sogar früher) kann man nun auch das Versal-Eszett eintippen:

Warum das relevant ist und warum ich finde, dass man sich das angewöhnen sollte, erklärt dieser Artikel aus dem TypoJournal.

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 …

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.

41 °C ist mal ’ne Ansage – Homeoffice morgen wird töfte!