In den letzten Tagen habe ich Stück für Stück einige Anpassungen an dieser Seite vorgenommen. Traditionell dokumentiere ich die Änderungen in einem kleinen, sehr technischen Blogpost.

Persönliche Startseite

Bisher bestand die Startseite aus einer dynamischen Auflistung meiner Beiträge. Die neue Startseite besteht aus vier Teilen: einer persönlichen Vorstellung, einem Call-to-Action-Bereich, einem ausgewählten Inhalt (z. B. ein Video oder eine Terminankündigung) und der dynamischen Beitragsliste.

Die neue Startseite dürfte die Bedürfnisse des*der tpyischen Website-Besucher*in besser abdecken. Wer ist dieser Typ? Was macht er? Und dann: Ach, der schreibt einen Blog? Mehr Personality und weniger Content-Maschine ...

Außerdem ermöglicht mir die neue Startseite, Inhalte  – wie meinen Wahlwerbespot – hervorzuheben.

Bekanntlich sind es die kleinen Dinge, die in der User Experience einen großen Unterschied machen. Im Fall der Startseite gab es zwei Herausforderung:

  • eine sinnvolle Einteilung des (Weiß-)Raums
  • eine übersichtliche Seiten-Hierarchie

Letzteres betraf vor allem die Call-to-Action-Buttons, die sich nahe der Tag-Cloud befinden. Um die beiden Button-Typen besser unterscheidbar zu machen, habe ich die Call-to-Action-Buttons höher und breiter gemacht.

Inhaltsübersichten

Apropos Seiten-Hierarchie – einige meiner Blogposts sind längere Texte mit mehreren Zwischenüberschriften. Bei solchen Texten erscheint künftig ein interaktives Inhaltsverzeichnis.

Das Inhaltsverzeichnis basiert auf dem Tocbot-Skript. Mit einigen Anpassungen am CSS passt es wunderbar auf diese Seite.



.toc-container {
    order: 1;
    background-color: #e5e7e9;
    width: auto;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-bottom: 5em;
}

.toc-title {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 1em;

}

Lazy Loading

Damit die Startseite auch bei instabiler Internetverbindung schnell laden kann, werden einige Seitenelement asynchron heruntergeladen. Insbesondere bei externen Skripten – wie dem Vimeo-Embed –  erhöht dies die initiale Ladegeschwindigkeit.



<script async src="script.js"></script>;

Theme-Deployment via GitHub

Lange überfällig war, das Theme über eine GitHub Actions zu deployen. Bisher musste ich auch für kleine Änderungen am CSS das komprimierte Theme herunterladen, entpacken, bearbeiten, verpacken und wieder hochladen. Das wird beim typischen Trial-and-Error-Verfahren schnell zur Tortur.

Prism.js angepasst

Um Code-Schnipsel einzubetten, verwende ich seit meinem letzten Update Prism.js. Nun habe ich einige grundlegende Anpassungen am Theme für die Code-Schnipsel unternommen.

Hier beispielsweise ein Auszug aus einem R-Skript, an dem ich gerade arbeite:



 plot1 <- ggplot() +
    geom_line(data = kum_faelle, 
              aes(x = Date, y = CumCases, color = "Kumulierte Fallzahl"),
              size = 1) +
    geom_line(data = agg_faelle, 
              aes(x = Date, y = NewCases / coeff, color = "Neue Fälle"),
              size = 1) +
    scale_y_continuous(name = "Kumuliert",
                       sec.axis = sec_axis(~.*coeff, name = "Neue Fälle")) +
    labs(color = "Legende") +
    scale_color_manual(name = "Legende",
                       values = c("Kumulierte Fallzahl" = "steelblue", "Neue Fälle" = "pink")) +
    theme(plot.title = element_text(color = "black", face = "bold", size = 20, hjust = .5),
          plot.subtitle = element_text(color = "darkgrey", size = 14, hjust = .5),
          axis.text.x = element_text(vjust = .5, hjust = .5),
          axis.title.x = element_text(vjust = -3),
          axis.title.y.left = element_text(vjust = 2),
          axis.title.y.right = element_text(vjust = 2),
          legend.position = "bottom") +
 	 scale_x_date(limits = c(min, max))

MathJax-Integration

Für eines meiner nächsten Projekte muss ich einige Formeln in meinen Text einbinden. Dafür bietet sich MathJax an, welches sich mit einem einfachen Skript aktivieren lässt.

\[R_{XY} = \frac{Cov(X, Y)}{\sqrt{Var(X) \times Var(Y)}}\]