Du hast nach Beiträgen mit diesem Tag gesucht:
Blog

Flugdaten

In den letzten Wochen habe ich begonnen, meine über 4.000 Instagram-Beiträge ins Blog zu holen. Auch wenn noch etwas Finetuning erforderlich ist, hat das soweit ganz gut geklappt. Über die Jahre habe ich auch Fotos an Flughäfen oder auf Flügen gemacht, und inspiriert durch Dominiks Flüge habe ich diesen Fotos nun ein paar zusätzliche Machine Tags verpasst:

  • flight:from=muc
  • flight:to=dus
  • flight:number=LH2734

Die Tags werden nicht in der üblichen Tag-Liste ausgegeben, sondern rendern stattdessen – zusammen mit den Daten des Beitrags – einen Pseudo-Boardingpass:

Screenshot der von mir gebauten Flugdaten-Karte mit Route, Flugnummer und Datum.

Die Daten habe ich meinen alten Flugtickets aus Apple Wallet entnommen – ja, die habe ich immer noch.

Kleines Frontend-Detail am Rande: Für den border-radius nutze ich hier erstmals corner-shape: scoop, das funktioniert aber aktuell nur in Chromium-basierten Browsern.

Hach, Internet!

WIP: Frühjahrsputz im Code

Nicht abgesprochen, aber wie bei Markus gibt es auch hier ein kleines Facelift:

Ich bin jetzt auf die Farbdefinition via oklch() umgestiegen. Das stand schon länger auf meiner Liste – in anderen Projekten hatte ich es sogar schon umgesetzt – aber Jeremy Keiths Beitrag hat mich dann doch dazu gebracht, auch hier endlich Hand anzulegen. Parallel dazu habe ich ein wenig am Kontrast geschraubt, wobei da aber noch Luft nach oben ist.

Apropos frische Ideen: Bei WebKit wurde kürzlich über Line Height Units geschrieben, und da konnte ich auch nicht widerstehen. Jetzt sind lh und rlh an vielen Stellen im Einsatz. Ein bisschen Feintuning steht hier noch an, aber der Grundstein ist gelegt.

Auch die Schrift habe ich ausgetauscht. Vorher war’s Inter – solide, aber auf Dauer doch etwas beliebig. Jetzt läuft hier Rubik, ebenfalls eine variable Schrift, aber deutlich kompakter mit fast 50% weniger Dateigröße. Nicht schlecht, oder?

Und dann wäre da noch ein kleiner Fünfzeiler, den ich ebenfalls bei Jeremy aufgeschnappt habe:

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

Mein Einstieg in die View Transition API – mal sehen, wie sich das in den nächsten Wochen so anfühlt.