Mein Profilbild

<Webseite Level-Up!/>

Die Webseite hat sich weiterentwickelt 🎉


 Webseite Level-Up!

Webseiten Update Schaubild
18.09.2018

Dies ist ein großes Update für diese Seite. Ich habe das komplette Backend überarbeitet und ein paar nette Funktionen hinzugefügt.

Kurz und Knapp:

  • Neue Webseiten Navigation mit:
    • Startseite
    • Spiel Button, damit man mit den Hintergrund spielen kann
    • Einstellungen
      • Hintergrund stumm schalten
      • Weitere Funktionen hinzufügen oder abschalten
  • Neue Funktionen
    • Teile die Interaktionen auf dem Hintergrund mit allen andern Besuchern
    • Teile Beiträge per Twitter
  • Neue Hintergrund-Magie:
    • Die Webseite hat ein Build-Script
    • Beiträge werden in JSON-Format gespeichert
    • Performance gesteigert
      • Verkleinerung von Skripten/Styles
      • Code Abhängigkeiten werden schon im Build-Script geladen und in der Seite intrigiert
      • Nur ein paar Beiträge werden am Anfang geladen, der Rest wird nachgeladen

Webseiten Navigation:

Die Webseite ist nun keine One-Page-Webseite mehr, sondern vieles mehr.

Vorerst erlaubt diese Navigation den Benutzer, ein schnellen Zugriff auf die Startseite, ein Spielen-Button und ein Link zu den Einstellungen.

Startseite:

Jeder Beitrag hat nun seine eigene Seite. Mit den Startseiten-Link, kommt man schnell wieder zum Anfang zurück. Auf der Startseite können nun Auszüge von Beiträge angezeigt werden. Das erlaubt mir längere Beiträge, wie diesen zu schreiben, ohne die Startseite zu überfluten. Auch können nun Beiträge mit Vorschau-Bild per Twitter geteilt werden, da es eine eindeutige URL pro Beitrag gibt.

Spielen:

Ich wollte die spielerische Art des Hintergrund mehr hervorheben. Wenn man diesen Button drückt, werden alle Inhalte verkleinert, damit man vollen Zugriff auf den Hintergrund hat. Dies behebt auch den Fehler, das man auf dem Handy, nicht mit den Hintergrund interagieren konnte. Einfach klicken und spaß haben!

Einstellungen:

Ich möchte neue Funktionen nicht einfach aufzwingen. Mir ist die sicherheit der Daten der Nutzer sehr wichtig. Funktionen wie der Twitter-Button können das Verhalten des Nutzers aufzeichnen. Ich wollte gern einen Platz, wo der Nutzer die Funktionen die er möchte anschalten kann. Bei jeder Funktion die durch ein externen Dienst ermöglicht wird, wird die Firma und deren Nutzungsbedingungen verlinkt.

Neue Funktionen:

Teile die interaktionen des Hintergrund mit anderen:

Wenn diese Funktion aktiviert wird, wird jede Interaktion, mit anderen geteilt, die auch diese Funktion aktiv haben. Dafür benutze ich Google Firebase.

Dieser Dienst stellt eine real-time Datenbank, mit synchronisation aller Internaktionen, bereit. Ich hoffe bald eure Interaktionen zu sehen!

Teile Beiträge per Twitter:

Wenn diese Funktion aktiviert wird, erscheint bei jedem Beitrag ein Twitter-Teilen-Button.

Der Button ist vorgefüllt, mit der URL des Beitrags und einem Text. Des Weiteren hat jede Beitragsseite weitere Informationen für Twitter zur Anzeige, zum Beispiel ein Vorschaubild. Diese kann Twitter benutzen und mit zum Tweet anzeigen.

Neue Hintergrund-Magie:

Um all diese Funktionen hinzufügen zu können, musste ich meine Webseite komplett umschreiben. Ich liebe die einfach Struktur von GitHub Pages um einfache HTML-Seiten anzuzeigen und ich möchten keinen eigenen Server hosten. Ich habe ein Build-Script geschrieben, damit jeder Beitrag einfach und effizient gespeichert werden kann. Dieses System erlaubt es mir, jeden Beitrag auf der Startseite, aber auch auf einer eigenen generierten Seite anzuzeigen ohne den Beitrag zweimal zu schreiben.

Build-Script:

Ich benutze Node.js mit dem Task-Runner Gulp und der Template-Engine Jade. Das ist nicht alles, weitere Pakete sind:

Diese Tools erlauben mir meine Beiträge als JSON zu speichern, Scripte & Styles minimieren, externe Schriften zu laden und die Templates in HTML-Dateien zu konvertieren.

Dies sind wunderbare Tools, des Weiteren benutzte ich:

Vielen Dank an diese Tools.

Der komplette Code dieser Webseite ist öffentliche unter GitHub renmuell.github.io.

Das Beitragsbild hatte ich auf meinen Computer herumliegen und ich dachte es trifft den "Level-Up" Charakter des Beitrags sehr gut. Ich habe es am 28.09.2014 gezeichnet, fast vier Jahre her 😬