Kurz vor Ende dieses wilden Jahres habe ich endlich Zeit gefunden, eine Reihe kleiner Verbesserungen an dieser Website vorzunehmen. Traditionell dokumentiere ich alle Änderungen in einem kurzen Blogposts.

Nach meinem Umzug auf Ghost haben sich einige Fehler(chen) eingeschlichen, von denen ich heute einige wenige gefixt habe.

Intern: Wieder alles neu
Was ein Hin und Her. Kaum bin ich Anfang des Jahres auf Wordpress umgestiegen, wechsle ich nun zu Ghost. Dabei ist es viel mehr als ein reiner „Wechsel“, denn ich habe in der Zwischenzeit auch die Arbeitsprozesse „dazwischen“ optimiert.

Bilder und Bildunterschriften zentrieren

Es ist mir ein Rätsel, wie mir dieser Design-Fehler entgehen konnte. Bislang waren Bilder und deren Unterschriften linksbündig angeordnet. Dadurch kippten bildlastige Blogposts nach links – unschön.

Durch eine geringfügige Anpassung im CSS habe ich diesen Fehlern jetzt behoben:


img {
    display: block;
    max-width: 100%;
    min-height: 0;
    height: auto;
    vertical-align: middle;
    border-radius: 5px;
    margin: 0 auto;
}
figcaption {
        display: block;
        text-align: center;
}

Button auf Über-mich-Seite

Bisher habe ich am Ende meiner Über-mich-Seite über einen Hyperlink auf meinen Lebenslauf verlinkt.

Der Link zum Lebenslauf war bisher ein einfacher Hyperlink.

Das war ein wenig eleganter Workaround, der fortan obsolet ist. Den Hyperlink habe ich durch ein kleines Script ersetzt, dass einen Button aus dem Website-CSS generiert:




<a href="https://cloud.dominiklawetzky.de/2020-09-21_Lebenslauf_FIN_geschwaerzt.pdf" class="widget-tag-cloud__tag  widget-tag-cloud__tag--{{slug}} button button--color-light-gray button--hover-accent button--slim button--short">Lebenslauf</a>


Daraus entsteht dann ein Button im Stile der Tag-Wolke (am Desktop rechts außen):

Button auf dem "Lebenslauf" steht und der einen sichtbaren Hover-Effekt hat

Prism.js für Syntax-Highlighting

Ich plane für das nächste Jahr eine Reihe von Blogposts, in die ich Codeschnippsel einbauen möchte. Damit dieser Code besser lesbar ist, bedarf es Syntax-Highlighting. Am weitesten verbreitet ist aktuell Prism.js, das wahlweise lokal oder über ein Content-Delivery-Network (CDN) integriert werden kann.

Die Integration über ein CDN kam für mich nicht infrage, da sie sowohl datenschutztechnisch als auch hinsichtlich der Seitenperformanz Probleme erzeugt. Dementsprechend legte ich prism.css und prism.js in meiner Ghost-Instanz ab.

Das Ergebnis lässt sich sehen. Hier ein Beispiel mit R:


coin <- c(TRUE, FALSE)

replicate(5, expr = sample(coin, 1, TRUE))

rep_num <- 100000

sum(replicate(rep_num, expr = sample(coin, 1, TRUE)))/rep_num