Ein neues Blog

Das ist mein neues Blog. Warum? Das steht in den Antworten. In diesem Eintrag geht es um die Technik.

Inhaltsverzeichnis

Grundlegendes

Dieses Blog ist mit Hugo gemacht – mit einem komplett selbstgestrickten Theme. Ich hab es „complicated-technology“ genannt. Ursprünglich hatte ich vor, dieses Blog so zu nennen. Daraus ist dann nichts geworden, weil ich mich in diesem Blog nicht nur um Technik drehen wollte und weil ich es dann auch spannender fand, ein deutsches Blog zu schreiben.

Ich fand es vor allem spannend, von Grund auf ein CSS-Theme so zu schreiben wie ich mir das vorstelle. Mit meinem Layout, meiner Schriftart, meiner Vorstellung von meinem Menü etc.. Das kann man jetzt alles hier ausprobieren. Dieser Post soll alle Dinge vorführen, die ich eingebaut habe. Man beachte auch das Inhaltsverzeichnis oben. Das ist optional. Man kann es bei langen Einträgen wie diesem benutzen.

Außerdem verwende ich für die Kommentare isso und für die Seitenaufruf-Statistiken GoatCounter.

Fließtext

So sieht Fließtext aus. Dazu gibt es nicht viel zu sagen. Außer vielleicht, dass ich gemerkt habe, dass man nur bis zu einer gewissen Mindestbreite Blocksatz verwenden kann. Irgendwann ist es dann empfehlenswert auf linksbündigen Text umzustellen. Die Standard-Formatierungen wie fetter oder kursiver Text sollen sich natürlich auch schön einfügen.

Dunkelmodus

Selbstverständlich gibt es einen Dunkelmodus. Un zwar keine halben Sachen. Schwarz ist schwarz und weiß ist weiß. Niemand will einen OLED-Bildschirm in seinem Handy, um dann einen dunkelgrauen Hintergrund anzuzeigen. Looking at you, Spotify!

Code

Und dann will ich in diesem Blog vielleicht auch mal Code teilen. Da können Zeilen schon mal länger sein, was dann hässlich aussehen kann. Lösung dafür: Wenn die Zeilen zu lang werden, wird abgeschnitten. Mit Mouseover wird dann aber alles angezeigt. Mobil kann man stattdessen seitlich scrollen. Beispiel gefällig?

class Pizza {
    public List<Topping> getToppings() {
        return ToppingsFactory.getTopping().stream()
                              .filter(Topping::isTasty)
                              .collect(toList());
    }
    
    //return extra-tasty toppings
    public List<Topping> getExtraTastyToppings(ToppingFactoryGenerator toppingFactoryGenerator) {
        return toppingFactoryGenerator.generateFactory().getTopping().stream().filter(Topping::isExtraTasty).collect(toList());
    } 
}

Tabellen

Manchmal – aber selten – ist eine Tabelle ganz praktisch. Die wollte ich aber möglichst schlicht darstellen. Das sieht dann so aus.

Zitate

Es ist natürlich auch praktisch, Zitate gut darstellen zu können:

Wenn ich zitiert werde, dann will ich schick zitiert werden. Ich will, dass mein Wort gut zur Geltung kommt und in eine ansprechende Umgebung eingebettet ist. Deshalb ist es mir wichtig, wie meine Zitate aussehen.

Diverse Listen

Die gibt es natürlich auch.

• Zum Beispiel unsortierte Listen.
• Die kann man verwenden, wenn die Reihenfolge nicht wichtig ist.
  • Unterlisten kann man natürlich auch verwenden.
  • Die enthalten dann vermutlich auch mehrere Elemente.

Sortierte Listen braucht man auch manchmal. Und Fein-Tuning für die Abstände zwischen Absätzen und Listen. Das ist alles auf den Pixel genau positioniert hier, weil:

1. Gutes Layout wichtig ist.
2. Für gutes Layout auch weiße Flächen sehr wichtig sind.
   1. das kann auch Unterpunkte haben
   2. die sollen auch nett aussehen
3. Es einfach schön aussehen soll.

Besondere Komponenten

Es gibt auch zwei besondere Komponenten, die ich für mein Blog haben wollte: Seitennotizen und Fotos

Seitennotizen

Manchmal will man bei Text eine Fußnote anbringen. Terry Pratchett hat das perfektioniert Die Discworld-Serie muss man gelesen haben. Das reicht eigentlich als Hinweis für eine Seitennotiz. Diese Seitennotiz ist deshalb nur länger um zu demonstrieren wie sie mit mehreren Zeilen aussieht. und ich könnte nie sein Niveau erreichen. Mangels Fußzeile geht das hier schlecht. Stattdessen ist seitlich Platz. Falls seitlich nicht genug Platz ist, kann man die Fußnote ausklappen.

Fotos

Ich habe vor, auf diesem Blog Fotos zu zeigen. Damit das funktioniert, habe ich einen Komponente geschrieben, die das Foto bildschirmfüllend anzeigt und in passender Auflösung nachlädt. Außerdem gibt’s ein Wasserzeichen in der Ecke und die Fotos tauchen in der Foto-Übersicht auf. Hier ist ein Beispiel:

Natürlich kann es mehrere Bilder pro Post geben.

Es gibt aber auch Bilder, die keine Fotos sind. Die sollten dann auch nicht in der Foto-Übersicht auftauchen. Zum Beispiel ein Screenshot wie dieser hier:

Fein Fein

Fein fein. Jetzt brauche ich nur noch echte Inhalte.