In diesem Artikel-Serie, vertiefen ich, wie ich meine Website erstellt.

#Warum?

Eine Website mit einer Art Blog kann einen weiter bringennicht nur als Entwickler, sondern auch als Analyst, um sich mit Technik auseinander zu setzen, sondern das regelmäßige Schreiben kann auf lange Sicht die geistige Klarheit erhöhen.

Außerdem können man die eigene Website als Spielwiese nutzen, um damit seine Programmier-, Analytics- und Designfähigkeiten unter Beweis stellen!

#Anforderungen

#Aussehen

Als Möchtegern-Designer ist ein gute Gestaltung eine Selbstverständlichkeit. Um etwas ästhetisch ansprechend zu gestalten, braucht man nicht nur ein gutes Auge, sondern auch ein gewisses Wissen über Proportionen. Und vor allem muss es ein bewusstes Design sein, mit einem Hauch Minimalismus.

#Geschwindigkeit

Niemand wird mehrere Minuten warten, bis ein Seite oder Artikel geladen ist. Der Besucher wird vorher frustiert die Seite verlassen, sprich es ist eine schlechte User Experience.

#Prerendered

Damit die Seiten für den Google Bot gut gecrawlt werden kann oder beim Teilen Social Media ensprechend angezeigt werden, müssen sie vorgerendert werden, d.h. jede Route muss bereits zum Zeitpunkt der Erstellung gerendert und in eine html-Datei umgewandelt werden.

#Exkurs: Server Side Rendering (SSR) vs Static Side Generating (SSG)

Server Side Rendering ist eignet sich hervorragend für viele Seiten mit dynamischen Daten, z.B. einem Online Shop, Jobbörse, etc. Aber da sich Inhalte auf der Website nicht täglich, minutlich oder durch Nutzereingaben ändern, wäre Server Side Rendering ein Overkill. Und als Vorteil hat man noch, dass man keinen Datenbank-Server betreiben muss, da die Inhalte nicht, wie z.B. bei Wordpress, aus der Datenbank kommen, sondern im HTML Code für die normalen Seiten oder Markdown-Dateien für den Artikel-Bereich liegen. Daher viel die Wahl auf Static Side Generating (SSG).

#CO2-Fußabdruck reduzieren

Eine schnelle und nicht überfrachtete Seite vermeidet unnötigen Datentransfer, denn jeder Klick und Request führt zu CO2-Emissionen, vorallem, wenn diese sinnnlos sind. Reduzierung der überflüssige Datenübertragungen, durch Reduzierung sprich Minimalismus, spart Strom. Vorteil, die Maßnahmen zahlen sich auch auf die Google Core Web Vitals ein. Dazu zählen eine schnelle Ladezeiten, schnelle Interaktion und ein stabiler Seitenaufbau. Die Arbeit daran lohnt sich also gleich doppelt. Mit Website Carbon lässt sich auch der CO2-Fußabdruck anzeigen.

#Tech Stack

Die ist der verwendet Tech Stack für die Seite:

• Svelte als JavaScript Compiler.
• Svelte-Kit als Framework als die Static Site Generator.
• ShikiJS für das Syntax-Highlightning des Codes in den Artikeln.
• TailwindCSS CSS-Framework für das Erstellen des Layout und Design.
• All Inkl) für das Hosting

#Warum nicht Gatsby oder Next?

Gatsby und NextJS sind zwei angesagte Frameworks für die Erstellung von vorgerenderten Websites. Viele meiner persönlichen Lieblingswebseiten wurden mit Gatsby erstellt. Es gibt auch spezielle Static Site Generators, wie Hugo oder Jekyll, die eine komplett statische Website erstellen.

Warum dann nicht eines von oben genannten Frameworks? Warum Svelte?

1. Leicht zu erlernen und zu benutzen, was die Erfahrung mit Framework angeht. Man muss nicht komplexere Struktur bei wie Hooks, Router, etc erlernen. Beispiel die Routes werden durch die Ordner-Struktur im src erstellt. Svelte geht mehr Richtung Vanilla JS, ein einfaches fetch anstelle von HttpService oder Axios.

Hier ein Beispiel, damit man sich das besser vorstellen kann. Darstellen von "Hello World" in React

import React from 'react';

function App() {
   return (
      <div>
         Hello World
      </div>
   );
}

Darstellen von "Hello World" in Svelte

<h1>Hello world</h1>

Für einen, der Vollzeit arbeitet, und der Beruf nicht JavaScript-Programmierer ist, ist ein einfaches Framework und Syntax ein großer Vorteil.

2. Svelte ist performant und klein. Für eine einfache Seite, die schnell Laden soll, perfekt . Ein Vergleich gibt es auf Dev.to.

3. Die Möglichkeit, Code ohne virtual DOM zu kompilieren. Der Hauptunterschied zwischen Svelte und Vue oder React ist die Reduzierung der Anzahl der digitalen Schichten zwischen dem Browser und der App, was zu einer optimierten und schnelleren Ausführung führt. Laut diversen Aussagen ist Svelte etwa 20-30% schneller als die bekannten anderen Frameworks, wie Angular oder React.

4. Prerendering. Svelte-Kit liefer das Feature Static Site Generator gleich mit. Das bedeutet, dass alle Routen zum Zeitpunkt der Erstellung vorgerendert und in einfaches HTML umgewandelt werden, was die Seite wiederrum schnell macht.

#Design-Auswahl

#Farbpalette

Die Auswahl der Farbpalette war ziemlich einfach. Nach paar Stunden rumgespiele, habe ich die Farbpalette gefunden. Die Idee ganz simple, weißer oder schwarzer Hintergrund, eine Akentfarbe und eine Schattierungen zu haben. Für den Light Mode, weißer Hintergrund und schwarzer Text, um für einen guten Kontrast zu sorgen. Als Akzentfarbe #6DEFE6. Wenn man noch was Hervorheben will. Für die Schattierung einen leichten Grauton – bg-gray-100 – den ich mir aus TailwindCSS geliehen habe. Im dunklen Modus ist der Hintergrund bg-gray-900 #111827 - auch wieder aus der Standard-Tailwind CSS Palette genommen genommen. Als Akzent wieder #6DEFE6. Um die bg-gray-100 Flächen zu kontern, habe ich bg-gray-800 genommen.

#Schriftarten

Bevor ich weiteren Stunde das Internet nach Schriftarten durchsuche. Habe ich mich erstmal für keine Font entschieden. Das hilft, weniger Resourcen auf dem Client zu laden, was wiederum die Ladegeschwindigkeit erhöht.

#Website gestalten

#Minimalistisch bleiben

Ein minimalistisches Design kann Wunder für das Design bewirken. Wenn es richtig gemacht ist, sieht es toll aus, wirkt organisiert und hebt sich von anderen ab, indem man sich mehr auf die wichtigen Bereiche konzentriert. Ein minimalistisches Design gibt dem Benutzer mehr Kontrolle und verwirrt nicht, was wiederum gut für die User Experience ist.

#Animationen verwenden

Übergänge und Animationen können die emotionale Anziehungskraft einer Website erhöhen und gibt dem Nutzer eine Feedback, dass eine Aktion passiert. Wenn die Website oder Applikation den Nutzern ein gutes Gefühl vermittelt, steigert das Benutzererlebnis. Das ist der Grund, warum Unternehmen wie Google und Apple so viel Wert auf gute Animationen legen.

Aktuell habe ich nur Transitions zwischen den Seitenübergängen integriert. Jedoch plane ich noch weitere hinzuzufügen, beim Wechsel zwischen light und dark mode, beim Laden der Seite.