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 …

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:

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

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>

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.

Ich versuche mich gerade am Schaffen einer React-basierten Komponenten-Bibliothek für das Blog der Zukunft und vielleicht sogar noch viele andere Seiten. Ziel soll es sein, irgendwann mittels Lerna oder einem anderen Monorepo-Tool jede Komponente einzeln ziehen zu können, quasi so:

import Button from "@Dreamseer/elements/button";

Mal schauen, ob mir das gelingt. Denn in der Firma haben wir gerade folgendes Problem: Wir haben eine von unseren React-Apps getrennte Komponenten-Bibliothek geschaffen, die zwar fürs Code Sharing wunderbar ist, aber nicht fürs Code Splitting – denn tatsächlich lädt man immer das komplette Bundle mit allen Komponenten. So hat man schnell ein paar hundert Kilobyte mit React-Komponenten, die man gerade gar nicht braucht.

Daher gibt es nun zwei Ideen: Die erste Idee ist, das „Haupt-App“-Repo mit dem Komponenten-Repo zusammen zu packen. Mal abgesehen davon, dass eine Git-Historie dann sicher flöten geht und ich sowas ganz, ganz schlimm finde, verlieren wir so auch den Sharing-Vorteil – allerdings ist das sicher auch der schnellste Weg. Und den kenne ich so quasi schon von weg.de, wo wir das Frontend in einem einzelnen Repository hatten. Die andere Idee ist die eines Monorepos für Komponenten und sich so nur das zu ziehen, was man braucht.

Das hoffe ich jedenfalls. Ich werde also wohl mal ein paar Dinge ausprobieren.

Die Gerüchte haben sich bewahrheitet: Microsoft gibt EdgeHTML zugunsten von Chromium auf. 😔 Damit befinden wir uns wohl wieder auf dem Weg zu einer Monokultur á la IE6, denn jetzt ist nur noch Firefox der einzige Nicht-Chromium-Browser – jedenfalls unter Windows und auf Android. Und wie sagt es das Smashing Magazine so schön:

So, please, for the love of Web: TEST IN FIREFOX.

Also: Testet auch immer alles im Firefox, Internetfreunde!

Mozilla hat natürlich eine ähnliche (und meiner Meinung nach absolute vertretbare) Meinung zum Thema.

Ich hab Edge immer gemocht, und hätte ich Windows genutzt, wäre er vermutlich mein Default-Browser geworden, so wie Safari das auf macOS und iOS geworden ist. Good bye, Edge!

Holy shit. Demnächst also nur noch Blink, WebKit und Gecko.

Ich weiß noch nicht, wie ich das finden soll.

Supergutes neues Feature von OwnYourSwarm:

So nerve ich Euch hoffentlich nicht mehr mit wirklich jedem mothereffin’ Swarm-Checkin, sondern nur noch mit den (hoffentlich) relevanteren Checkins! Whoop whoop! 🎉

… reporting to you live from Picus.

Grundgütiger. 😳