Adieu, 2018!

Eigentlich habe ich gerade wenig Zeit für so einen Jahresende-Beitrag, denn ich bin im totalen Aufräum- und Putzfieber: Ich will die Bude zum Jahreswechsel endlich wieder besuchsfähig haben. Und da wären wir auch schon bei meiner Krux von 2018: Ich habe (oder vielmehr hatte) ein bisschen die Kontrolle über mein Leben verloren. Auf den ersten Blick, nach außen hin, sah das für viele sicher nicht so aus, aber seit meiner Kündigung bei weg.de war dieses Jahr für mich ausgesprochen chaotisch und wirr.

Weiterlesen …

Marc war hier: EDEKA

Marc war hier: Tüddern

Was man so beim Aufräumen findet. 😅🧢🏖

Marc war hier: Gaststätte Vermeulen-Schäpers

Heute sind wir ein letztes Mal bei Franz und Adele – in drei Wochen wird die Kneipe abgerissen. 🍻

Haldenzauber

Gestern waren Julia, Udo, Raffaela und ich beim so genannten Haldenzauber in Hückelhoven. Auf der 70 Meter hohen Millicher Halde gibt es dort noch bis zum 6. Januar einen Parcours aus Lichtinstallationen, kunstvollen Objekten, interaktiven Figuren und musik-synchronen Inszenierungen.

Weiterlesen …

Marc war hier: Marktplatz Heinsberg

Marc war hier: Millicher Höhe

Uhr-Icon mit Uhrzeit

Nachdem ich vor einigen Tagen schon von einem Icon-Font zu SVG-Icons gewechselt bin, um das Rendering ein wenig zu beschleunigen, habe ich mir heute morgen noch ein kleines Gimmick zurecht gebastelt.

Das Uhr-Icon gibt nun die Uhrzeit des Posts wieder. Vorher war es lediglich ein statisches Vier-Uhr-Icon:

16:00 Uhr

Dank SVG Transforms lassen sich die Pfade für die Zeiger aber wunderbar drehen, so kann ich z.B. jetzt 18:06 Uhr darstellen:

18:06 Uhr

Den Stundenzeiger rotiere ich dabei jeweils um 30° (360° / 12), den Minutenzeiger jeweils um 6° (360° / 60):

<svg version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
  <title>18:06 Uhr</title>
  <circle cx="6" cy="6" r="5.425" stroke="black" stroke-width="1.15" fill="none"/>
  <line x1="6" y1="6" x2="6" y2="4" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(180 6 6)"/>
  <line x1="6" y1="6" x2="6" y2="2.5" stroke="black" stroke-linecap="round" stroke-width="1.35" transform="rotate(36 6 6)"/>
</svg>

Den „Dark Mode“ mit CSS abfragen

Mein Blog präsentiert sich seit Kurzem im Dark Mode, wenn das System und der Browser das unterstützen. In der Safari Technology Preview für macOS Mojave ist das zum Beispiel bereits möglich:

Seit Jahren verwende ich bereits dunkle Themes für die Editoren meiner Wahl, darum mag ich auch einen systemweiten Dark Mode. Ich finde ihn viel angenehmer für die Augen, und längere Texte lassen sich so – gerade am Abend – viel besser lesen. Darum denke ich auch, dass jedes Blog ein dunkles Theme mit sich bringen sollte. Ich habe das hier kurzerhand mit CSS Custom Properties (oder einfacher gesagt: CSS-Variablen) gelöst, etwa so:

:root {
  --text: gray;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
    --background: gray;
  }
}

Schon ziemlich lässig.

Entdeckt habe ich das übrigens ursprünglich in den Show Notes zu ATP #299 und dem anschließenden Forschen im CSS. Dort war zunächst das bereits seit dem IE9 in allen großen Browsern unterstützte @media (color-index: ...) im Einsatz, der technischen Basis von prefers-color-scheme.

Die Syntax ist allerdings deutlich kruder:

  • @media (color-index: 48) ist das Pendant zu @media (prefers-color-scheme: dark), weil 48 der Keycode für 0, dem Hexidezimalwert von Schwarz ist.
  • @media (color-index: 70) ist das Pendant zu @media (prefers-color-scheme: light), weil 70 der Keycode für F, dem Hexidezimalwert von Weiß ist.
  • @media (color-index: 22) ist das Pendant zu @media (prefers-color-scheme: no-preference).

Völlig Banane.

Andy Clarke geht in seinem Artikel Redesigning your product and website for dark mode noch etwas mehr ins Detail und zeigt auch einige typografische Anpassungen für den Dark Mode auf.

Marc war hier:

Viel wird dieses Jahr nicht mehr passieren, oder zumindest nicht mehr so viel, dass es in den Top 9 für 2018 landen wird. Dieses Jahr habt Ihr nur zwei Essensfotos extrem geliket (und beide wurden nach einem Arbeitsamt-Besuch geknipst). Dafür hat es diesmal ein richtiges echtes Selfie in die Liste gebracht, WTF! 2018 war auf jeden Fall ein verrücktes Jahr, viel Auf und Ab und Hin und Her. 2019 kann gerne kommen! Bis nächstes Jahr, Internetfreunde! 🥂📸