Stranger Than Usual

Das Favicon meines Blogs ist irgendwie langweilig:

Ich habe es erst recht spät hinzugefügt. Wenn ich git log richtig lese, dann erst 2020, nur wenige Monate bevor ich auf den neuen static site generator umgestiegen bin. Ich wollte damals vor allem ein Favicon, besser als keins, und habe also etwas sehr Einfaches genommen.

Die PNG-Datei des Favicons ist auch nur 212 Byte groß, das ist weniger als der Overhead, den der HTTP-Request erzeugt, um diese Datei zu laden. Dafür ist das Icon auch nur 64×64 Pixel groß. Ausreichend für ein kleines Icon im Browser, aber an vielen Stellen werden ja heutzutage größere Icons verwendet. Ideal wäre also eine SVG-Datei.

Aber wie schon gesagt, das Icon selber ist langweilig. Wenn ich es schon ändere, kann ich es ja auch direkt interessanter machen. Ich meine, im Ernst: „S“? Ich bin doch nicht Supermann (und auch nicht Syndrome, aus The Incredibles). Also vielleicht irgendwas, was zu diesem Blog passt. Aber was passt denn? Keine Ahnung.

Auf der anderen Seite: Ich mag Katzen, und Katzen gehen im Internet immer gut. Und ich hätte auch eine Idee. Ich habe nämlich dieses Foto unseres 2020 verstorbenen Katers:

Dieses Foto eignet sich hervorragend, um davon ein Binärbild zu machen, nur schwarz und weiß. Das habe ich schon vor Jahren mal aus Spaß gemacht:

Als Favicon sollte es transparent und quadratisch sein. Also noch ein bisschen croppen…

Schön, das sind um die 700×700 Pixel, als WEBP nur ungefähr 1,4 kiB groß. Eigentlich bräuchte ich nicht einmal eine SVG-Datei, denn das hier ist schon klein genug. Aber irgendwie wäre eine SVG-Datei schon einfacher zu handhaben und würde die durch den Binärfilter eckig gewordenen Kanten abrunden. Also habe ich mir Inkscape geschnappt, alle Regler auf ein möglichst kleines Ergebnis eingestellt und eine SVG-Datei erstellt, die ich dann mal wieder mit svgo und von Hand optimiert habe.

Zunächst nur ein bisschen komprimiert:

Dumm nur: Die Datei ist mit 4,7 kiB deutlich größer als die Rastergrafik. Selbst komprimiert kommt sie noch auf 1,9 kiB (gz) bzw. 1,7 kiB (Brotli). Aber für das Favicon kann ich noch ein bisschen Qualität schleifen lassen. Das war jetzt mit zwei Nachkommastellen Präzision. Ohne Nachkommastellen sieht es auch noch passabel aus. Die Datei ist dann kleiner als die Webp-Datei, und komprimiert kommt sie auf unter 1 kiB. Analog zum bisherigen Favicon grün gefärbt, sähe das dann so aus:

Ich habe das dann als Favicon ausprobiert und musste feststellen: Es passt nicht. Wenn das in der typischen Icongröße des Browsers gerendert ist, erkennt man nur einen grünen Blob, bestenfalls etwas, das ein Fuß sein könnte. Aber die Katze erkenne zumindest ich nicht darin.

Ich habe dann stattdessen erst einmal wieder das alte Favicon genommen, allerdings in einer SVG-Version. Die ist mit knapp 943 Byte (467 gz, 439 brotli) zwar größer als das bisherige Favicon, sieht herunterskaliert noch gut aus und lässt sich auch hochskalieren.

Also viel Arbeit, wenig Ergebnis. Und ich habe immer noch kein nicht-langweiliges Favicon.

Im Rahmen der aktuell laufenden Artemis 2-Mission und deren Umkreisung des Monds habe ich mich gefragt, ob es auch für den Mond ein Äquivalent des geostationären Orbits gibt. Also quasi ein lunastationärer Orbit. Ich dachte mir schon, dass das schwierig wird.

Tatsächlich ist ein lunastationärer Orbit nicht möglich. Der verlinkte Blogpost erklärt das schön anschaulich. Grob gesagt: Der Radius des lunastationären Orbits müsste so groß sein, dass die Schwerkraft der Erde überwiegt und der Satellit sich stattdessen direkt in einem Orbit um die Erde bewegen würde.

In diesem Zusammenhang habe ich auch den Begriff der Hill-Sphäre kennengelernt.

Meine steuerbare Winkekatze hat immer noch einen lahmen Arm, trotz aller Bemühungen, das zu ändern. Also schreibe ich statt über die Fertigstellung dieser von Unglück verfolgten Katze darüber, wie ich ein paar Kleinigkeiten an der Website verbessert habe.

Die Winkekatzenwebsite gibt es schon eine Weile. Als ich auf sie gestoßen bin, sind mir sofort ein paar Sachen aufgefallen, die ich verbessern wollte: viel zu große Bilddateien, übergroßes CSS und Javascript und vor allem ungültiges HTML. Also habe ich gefragt, und die Leute haben mich an den Code der Seite gelassen. Ich finde so etwas relativ entspannend, weil ja kein beruflicher Druck dahintersteht und ich niemandem Rechenschaft schuldig bin, warum ich gerade zwei Stunden investiert habe, um die Hierarchie der Überschriften zu korrigieren.

Ich habe auch einige Erfolge einfahren können, während ich noch auf ein Micro-USB-Kabel wartete und bevor mir die Lust vorrübergehend vergangen ist. Ich habe

• das fehlerhafte HTML korrigiert
• die Bilddateien verkleinert bzw. besser komprimiert
• Abhängigkeiten aktualisiert
• ein paar Styles verbessert
• opengraph-tags eingeführt (aktuell gemerged, aber nicht deployed)
• unnützes Javascript entfernt
• Favicons eingebaut

Was ich noch vor mir habe: bootstrap aus dem Style der Seite entfernen, was (CSS und Javascript zusammen) mehrere hundert kiB einsparen würde. Aber dafür muss ich ein bisschen Arbeit dort reinstecken (speziell: damit das Menü noch so funktioniert wie bisher), dass ich das erst einmal vertagt habe. Ganz klein werde ich das Javascript auch nicht kriege, weildie MQTT-Bibliothek alleine recht groß ist.

Alles schön. Aber die Sache mit dem Favicon war echt nicht einfach:

Das Favicon-Drama

Bis dahin hatte die Seite kein Favicon. Ich habe gefragt, ob wir eins wollen und direkt einen Vorschlag gemacht. Ich habe einfach eine gemeinfreie SVG-Datei einer Winkekatze genommen, ihr magentafarbene Augen gegeben (analog zu der Katze auf dem Foto auf der Seite) und das als Vorschlag eingereicht:

Das ist erst einmal gut angekommen. Die Sache hatte nur einen Haken: Der Hintergrund ist transparent, und der schwarze Teil der Winkekatze ist ein einzelner Pfad mit Aussparungen. Innere Ohren, Pfoten, Schnauze und Halsband sind also auch transparent. Positiv: Das machte es sehr einfach, die Augen zu färben (einfach ein farbiges Rechteck hinter die Augen gesteckt). Bei Menschen mit dunklem Theme / Dark Mode hingegen sah man von dieser Katze nichts, außer zwei farbigen Augen.

Also habe ich der Katze einen kompletten weißen Hintergrund verpasst. Das gefiel dann auch nicht. Außerdem sah die Katze auf 16×16 Pixel herunterskaliert (Auflösung des Favicons im Browser) eher schlecht aus. Also habe ich erst einmal runterskalierte Varianten der Katze erstellt, indem ich die SVG-Datei gerendert und manuell nachkorrigiert habe, z.B. für 32×32 Pixel:

Besser, aber löst noch nicht das Problem mit dem transparenten bzw. weißen Hintergrund und ist nur für kleine Auflösungen gut. Für größere Auflösungen brauchten wir weiterhin die SVG-Datei. Oh, und Firefox for Android unterstützt als einziger halbwegs gängiger Browser keine SVG-Favicons. Ich benutze den zwar selber, dachte mir aber: Ein Favicon, das fast überall funktioniert ist besser als keins. Und irgendwann wird dieser Browser das ja auch unterstützen.

An diesem Punkt habe ich angefangen, eine kleine Showcase-Seite (die nicht mehr online ist) zu erstellen, die verschiedene Varianten des Favicons vor verschiedenen Hintergründen zeigt. Zunächst nur schwarz und weiß, später auch verschiedene Grauschattierungen. So bin ich auch auf die verschiedenen Merkwürdigkeiten mit CSS-grau gekommen.

Gut, also wenn der Hintergrund transparent bleiben soll, mache ich halt einen weißen Rahmen um die Katze und weiße Flächen für alle Aussparungen innerhalb der Katze:

Mist. Natürlich ist dann auch zu den Augen hin ein weißer Rand. Das sieht nicht gut aus. Also neuer Versuch: Ich nehme die Winkekatze, kopiere sie, entferne die Aussparungen aus dem Pfad, vergrößere sie ein bisschen und färbe sie weiß. Dann lege die die Augen und die schwarze Katze (zentriert) darüber:

Dann musste ich noch das Firefox-for-Android-Problem lösen. Dafür habe ich eine gerenderte Version als Alternative hinzugefügt. Im HTML-Code verweise ich dann auf beide Varianten mit Größen- und Dateiformathinweisen:

<link rel="icon" type="image/webp" sizes="192x192" href="favicon_192.webp">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Das funktioniert, auf allen (getesteten) Browsern wird ein Favicon dargestellt. „Aber was ist mit den Pixelvarianten?“, höre ich euch fragen. Nun: Ich habe versucht, die Pixelvarianten auch hinzuzufügen. Das ist aber leichter gesagt als getan: Zwar kann ich einfach zwei weitere passende <link>-Elemente für die Pixelvarianten hinzufügen, aber die Browser… ignorieren die einfach. Sobald eine SVG-Datei da ist, wird immer die SVG-Datei genommen. Selbst wenn ich der explizit eine Größe zuordne. Der Browser sagt: „Hey, für die SVG-Variante muss ich dann insgesamt für alle Größen nur eine Datei laden, also nehme ich die“ und er nimmt sie. Auch wenn es für kleine größen handoptimierte Varianten gibt, die besser aussehen.

Immerhin hat diese Variante dann endlich alle zufrieden gestellt, der PR wurde gemerged und wir haben Favicons für die Winkekatzenseite.

Ich habe ja nicht mehr sooo viel übrig für Aprilscherze. Auf jeden Fall darf ein Aprilscherz keine ernsten Themen behandeln, die jemand für echte Informationen halten darf. Und in Online-Resourcen muss das spätestens am 2. April aufgeklärt werden, denn oft schaut man nicht, an welchem Datum ein Artikel veröffentlicht wurde. Früher habe ich mal Aprilscherze auf diesem Blog gemacht, aber habe das nie ganz durchgezogen. Meist war ich sowieso im Urlaub und konnte mich nicht darum kümmern.

Manche Aprilscherze finde ich hingegen ganz lustig. So wie zum Beispiel als Fefe eine simulierte Cloudflare-Seite vor sein Blog geschaltet hat (obwohl er doch immer so über Cloudflare schimpft). Ich selber habe schon einmal mein Blog verschmutzt. Und grundsätzlich mag ich visuelle Aprilscherze auf meinem Blog ganz gerne und falsche Artikel eher nicht.

Dieses Jahr habe ich mal wieder einen Aprilscherz geschaltet, beende ihn aber jetzt, gegen 21:00 Uhr wieder, weil er mein Blog einfach unbenutzbar macht. Ich glaube, ich hatte ihn vor ein paar Jahren (2020 oder 2021) schon einmal, hatte damals wenn dann aber nicht darüber geschrieben. Für die Zukunft: Mein Blog sah heute so aus:

Gemacht habe ich das mit diesem simplen CSS-Schnipsel:

@keyframes wiggle {
    from {
        transform: rotate(1deg);
    }
    to {
        transform: rotate(-1deg);
    }
}

p, h1, h2, h3, h4, h5, h6, ol, ul, pre, article footer {
    animation-duration: 0.25s;
    animation-name: wiggle;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

Ich wohne jetzt seit gut zwei Jahren in Witten, und über eine Sache wollte ich schon länger mal schreiben. In Witten stehen nämlich Figuren wie diese hier herum:

Speziell diese beiden stehen am Eingang zum Park an der Ruhrstraße. Und solche Figuren sieht man hier an verschiedenen Stellen. Keine heroischen Kaiser zu Ross, keine berühmten Menschen, nicht einmal so etwas für das Ruhrgebiet Markantes wie die Bergleute in der Waschkaue auf dem Kaiser-Otto-Platz in Steele. Nein, einfach ganz generische Menschen. Aber in Farbe.

Es handelt sich um Alltagsmenschen, Betonfiguren aus einem Wittener Atelier. Die Künstlerinnen machen das jetzt wohl schon seit dreißig Jahren und stellen die überall in Deutschland aus, aber in Witten sieht man sie natürlich besonders häufig. Also habe ich mich auf den Weg gemacht, um noch ein paar von ihnen zu fotografieren. An der ersten Stelle, an die ich mich erinnern konnte, wo Figuren standen, fand ich aber nur das hier:

Das war vor der Sparkasse. Hier standen früher immer eine ganze Warteschlange von Alltagsmenschen. Immerhin: In der Sparkasse stand noch eine Figur. Während die meisten der Figuren annähernd lebensgroß sind, ist diese hier größer:

Gegenüber der Sparkasse steht dann noch ein Paar:

Und vor der Polizei steht dann natürlich ein Polizist, in der alten Uniform (ich fand die alten Uniformen irgendwie schöner).

Das erste Mal habe ich im Podcast „Methodisch Inkorrekt“ von IKEAs „Skådis“-System gehört. Das ist ein System bestehend aus einer Wandplatte mir senkrechten Schlitzen und einem großen Angebot an verschiedenen Elementen, die man in die Schlitze einhängen kann. Was mich aber besonders interessiert hat: Es gibt in er Makerszene eine gewissen Fangemeinde, und man findet bei den üblichen Seiten für 3D-Druck-Vorlagen eine Menge zusätzlicher Elemente, die man dort einhängen kann.

Ich habe das System auch bei einem Freund in der Küche gesehen. Als ich mir dann letztes Jahr einen Hobbyarbeitstisch mit Lötstation eingerichtet habe, schien mir das das richtige System, um Werkzeuge, die man häufiger mal braucht, unterzubringen. Ich habe mir ein Starterpaket bersorgt und mir auf dem 3D-Drucker meiner damaligen Professorin ein paar zusätzliche Teile ausgedruckt. Einige davon leuchten sogar im Dunkeln:

Da ist noch Luft nach oben für mehr. Wie komme ich jetzt darauf? Hier hat jemand eine Garderobe mit Skådis gebastelt, auch mit selbstgedruckten Haken.

Heute beim Brötchenholen entdeckt: In einem Lichtschacht zu einem Kellerfenster wachsen nicht nur irgendwelche Pflanzen, sondern tatsächlich kleine Bäume:

Die Bäume sind knapp über dem Lichtschachtgitter abgetrennt, vermutlich, weil da ständig Leute herlaufen. Ich habe auch noch eine Nahaufnahme, weil man auf dem ersten Bild nicht sieht, dass es wirklich ein Bäumchen ist:

Ich war heute nach etwa 15 Jahren mal wieder im Labor. Irgendwie ist das gegen Ende meines Studiums eingeschlafen, dann bin ich nach Hamburg gezogen… jetzt bin ich schon seit zwei Jahren wieder in der Gegend, aber erst heute habe ich mich mal dazu aufraffen können, in das Labor zu gehen. Zur Erinnerung: Das Labor e.V. ist ein Hackspace in Bochum.

Ich habe mich irgendwie vorher nicht getraut, zurückzugehen. Heute war aber Internationaler Tag des offenen Hackspace und spring(); break;. Also ein guter Anlass mal zurückzukehren und daraus hoffentlich wieder eine Gewohnheit werden zu lassen.

Ich habe mich mit ein paar Leuten nett unterhalten. Ein Laborant hat mir geholfen, den losen Draht an der Spule meiner Winkekatze festzulöten (der Arm lahmt aber immer noch). Außerdem gab es einen kleinen Workshop zum Spleißen von Glasfasern (nicht, dass ich erwarte, das jemals zu machen) und einen Vortrag von jemandem, der anhand einer Veröffentlichung des Bundesamts für Verfassungsschutz herausfinden konnte, welchen Instragram-Account der Verfassungsschutz verwendet, um linken Gruppen zu folgen.

Alles in allem ein schöner Nachmittag, und ich nehme mir fest vor, mal wieder häufiger zum Labor zu gehen.

Gestern bin ich über einen Blogpost gestolpert, in dem sich jemand darüber wundert, dass sein Blog überhaupt nicht bei Google indiziert ist. Kann man sich durchaus durchlesen, und ich wollte dazu auch ein bisschen über die Indizierung meines eigenen Blogs bei Suchmaschinen schreiben.

Dann bin ich darüber gestolpert, dass derselbe Autor auch eine kleine Seite für Lakritz, seine junge Katze hat. Also keine Aufregung über Suchmaschinen von mir, stattdessen ein Link zu ein paar Katzenbildern.

Rollenspielszene. Nachdem wir ein entführtes Mixtape mit geheimen Botschaften zurückbekommen haben, sind wir auf dem Weg zu unserem nächsten Auftritt. Wir haben ein subtil subversives Lied geplant, und Anis muss seinen Teil dafür noch üben. Dabei lässt er sich wieder von Cracker helfen.

Cracker ist keine Frau vieler Worte, und der Trubel mit der Band ist ihr eigentlich zu viel. Deswegen macht sie Anis einen Vorschlag:

Meinst du, wir könnten eine Band gründen? Nur mit zwei Bassspielern? Dann müssen wir nie wieder mit anderen Leuten reden.