Flexboxen und weitere Herausforderungen

Zum Einstieg gleich ein Knaller, der unsere Art, wie wir Filme schauen, radikal verändern wird: Der US-amerikanische Filmregisseur und Drehbuchautor Rian Craig Johnson darf ab heute von allen Filmemachern und Filmfreunden offiziell gehasst werden. Warum? Eigentlich wollte Johnson mit VanityFair nur über sein neues Werk „Knives Out“ sprechen. In einem Nebensatz jedoch enthüllte er ein kleines, aber nicht unbedeutendes Detail über Apples Vorschriften hinsichtlich Produktplatzierungen: “[..]bad guys cannot have iPhones on camera[…]”.

So, nachdem unsere Feindbilder geschärft und ich deine volle Aufmerksamkeit genieße, können wir uns den wesentlichen Dingen widmen. In meinem letzten Blogpost habe ich mir Ziele für 2020 gesetzt.

Ich wollte schon lange die Startseite auf dennis.ruhr verändern und diese etwas persönlicher gestalten. Mit der neuen Fokussierung auf 2020 haben sich die Schwerpunkte sehr schnell heraus kristallisieren lassen. Mit großer Freude und viel Leidenschaft erstelle ich sehr gerne einfache, 2D-Vector-Grafiken mit dem Affinity Designer. Also habe ich einen Tag in meinem Urlaub investiert, um drei SVG-Grafiken für meine neue Startseite zu kreieren.

Erste Erfahrungen mit svgator

Nachdem ich mich für ein Mammut (für Mastodon), ein Popcorn-Menü (für Letterboxed) und eine Tasklist (für meinen GitHub-Account) als Symbolbild entschieden und diese umgesetzt hatte, juckte es mich in den Fingern mindestens eine Grafik davon zu animieren. Weil ich aber keine Lust hatte die SVG-Grafik von Hand via CSS oder Javascript zu animieren, habe ich mich kurze Hand bei svgator angemeldet und habe die 14-tägige Testversion begonnen. Für das Erstellen einer simplen Animation ist das Tool wirklich perfekt. Binnen einer Stunde habe ich mich im Tool zurechtgefunden kann per Klick SVG-Animation erstellen. Ob ich das Tool (für 18 US-Dollar im Monat) aber noch weiter nutze, ist mehr als fraglich, da das Erstellen von Animationen für mich eher Ausnahmen sind, werde ich das Geld lieber in ein Tool zum Hosten von Podcasts stecken (kleiner Spoiler am Rande )

Verfluchtes Zentrieren von Flexboxen

Nachdem die Icons erstellt waren, ging es an die Umsetzung der neuen Startseite. Eigentlich dachte ich, dass ich diesen Task binnen einer halben Stunde schnell heruntergeschrieben habe. Aber bekanntlich steckt der Teufel im Detail: Das Zentrieren von Flexboxen hat mich dann doch vor eine größere Herausforderung gestellt. Erst nach ca. 3,5 Stunden und drei konnte ich den Task erfolgreich abschließen.

Wer auch vor dieser Herausforderung steht, dem habe ich meinen finalen Quellcode hier eingefügt.

Mein HTML-Gerüst

<div>
  <ul class="open-project-list">
    <li class="open-project-list-item">
      <a href="#" class="open-project-list-item-link">
        <img src="#" class="project-icon">
      </a>
    </li>
    <li class="open-project-list-item">
      <a href="#" class="open-project-list-item-link">
        <img src="#" class="project-icon">
      </a>
    </li>
    <li class="open-project-list-item">
      <a href="#" class="open-project-list-item-link">
        <img src="#" class="project-icon">
      </a>
    </li>
  </ul>
</div>

Der dazugehörige SCSS-Code

.open-project-list{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.open-project-list-item{
    list-style: none;
    display: flex;
    width: 33.333%;
    margin-left: 0;
    padding: 0;
}

.open-project-list-item-link{
    display: flex;
}

.open-project-list-item::before{
    width: 0px;
    height: 0px;
}

@media only screen and (max-width: 690px) {
    .open-project-list-item{
        width: 100%;
        justify-content: center;
        margin-top: 0.5em;
        margin-bottom: 0.5em;        
    }
    .open-project-list-item-link{
        width: 100%;
        justify-content: center;
    }
}

Änderungen am Blog-Design

Als ich mir die Geschichte hinter dem Spiegel-Relaunch auf Medium angesehen habe, war ich sofort verliebt. Nicht in das Nachrichtenmagazin. Nein. Das Design des Artikels hat mich schlicht weg umgehauen. Also habe ich mich hingesetzt und habe -so gut es mir möglich ist- dieses Design als ein weiteres Blogdesign auf dennis.ruhr umgesetzt. Wie gefällt es dir? Bist du auch so begeistert wie ich? Schreibt es mir sehr gerne auf Twitter.

Ein neues -Projekt: staydown.app

Immer wenn ich mit meinen Freunden im Kino sitze, frage ich mich, ob es sich lohnt sitzen zu bleiben, um eine oder mehrere Post-Credit-Szenen nicht zu verpassen. Nach einiger Recherche hat sich dann gezeigt, dass (fast) alle bestehenden -Apps dieses Feature noch gar nicht berücksichtigen. Also habe ich mich entschlossen, den Kinogängern dieser Welt die Entscheidung -ob sie sitzen bleiben oder gehen können- zu erleichtern. staydown.app war geboren.

In alter Manier habe ich mir natürlich erst einmal die Domain gesichert. Aktuell bin ich dabei erste Screen- und Systemdesigns zu erstellen. Als Quelle der Filme werde ich auf TMdB als offene Filmdatenbank zurückgreifen. Auf welcher Technologie das Portal basieren soll befindet sich gerade noch in der Findungsphase.

Du fragst dich, warum ich -bevor ich eine erste Version veröffentlicht habe- das hier einfach so raus haue? Ganz einfach. Mein Gedanke ist nicht mit dem Portal später Geld zu verdienen. Vielmehr suche ich Mitstreiter, die den gleichen Schmerz haben und mit anderen Menschen zusammen an einer Lösung tüfteln wollen.

Wenn du dich angesprochen fühlst: Dann melde dich einfach über die bekannten Kanäle bei mir. Ich freue mich auf ein spannendes Projekt.