Wie kam ich auf die Idee?

Das ich mich genau für diese Kombi Astro ↗️ + TailwindCSS ↗️ entschieden habe lag an dem Youtuber Programmieren mit Mario ↗️. (Das Video findest du hier YouTube)

Es gab vor einiger Zeit einen Hype von Englischsprachigen und Deutschen Devs auf YouTube, die Astro in den höchsten Tönen gelobt haben. Zu diesem Zeitpunkt war ich auch auf der Suche nach einem neuen Tech-Stack, mit dem ich meine eigene Seite bauen wollte. Da ich schon immer entweder mit Bootstrap ↗️ oder TailwindCSS arbeiten wollte, kam mir das mit TailwindCSS natürlich super gelegen. Also entschied ich mich für Astro/TailwindCSS.

(Das YouTube-Video wurde mit Astro 2.5 erstellt. Als ich mit Astro anfing, war gerade die Version 3.0 frisch auf dem Markt. Diese Version brachte ein großes Update mit sich, weshalb einige Erklärungen aus dem Video nicht mehr einwandfrei funktionierten. Stand heute, am 12.06.2024, ist Astro bereits bei Version 4.10.2. Es gibt ständig neue und interessante Updates..
Hier ist ein sehr informativer Link von allen bisherigen Astro Releases Astro Blog ↗️.)

Vorzüge von Astro und TailwindCSS?

Die Vorzüge von Astro: Warum Astro? ↗️
(Am besten ist du schaust einfach selbst bei Astro rein.)

Hier ein Beispiel für die Vorzüge von TailwindCSS:

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.mx-3 {
    margin-left: 0.75rem /* 12px */;
    margin-right: 0.75rem /* 12px */;
}

Was war dir wichtig und was waren No-Gos?

Oberste Priorität war es für mich den Code selber zu schreiben und kein Template zu benutzen. Es gibt im Netz Unmengen an Top-Templates for free oder gegen Cash, aber der Lerneffekt ist, wie ich finde, bei selbstgeschriebenem Code um ein Vielfaches höher als bei fertigem Code. Wir wollen ja lernen und weiter Erfahrung sammeln und an Margins, Paddings und „how to center a div“ verzweifeln 😂.

Was hast du unternommen um die Seite weiter auszubauen?

Nachdem ich nun den Kurs beendet habe und die Seite 1:1 wie in dem Video aussieht, kam bei mir schnell der Gedanke auf noch mehr daraus zu machen. Schon beim Aufbau der Seite schossen mir automatisch viele neue Ideen durch den Kopf, die ich gerne umsetzen wollte. Ich habe den Typewriter Effekt, der mit Javascript erstellt wurde, beibehalten. Astro arbeitet nach dem ZeroJS Prinzip. Das heißt je weniger JS von der Client-Side aus läuft, umso besser, da Astro Server-first bevorzugt. Ich habe auch einen Typewriter Effekt mit TailwindCSS hinbekommen, aber JS Code schaut irgendwie sexier aus 😂. Mal schauen was später Google Lighthouse ↗️ an werten ausgibt wenn die Seite fertig ist. Also auf zur Astro Docu(mentation) Seite und lesen, lesen und noch mehr lesen. An dieser Stelle muss ich sagen, dass die Doku von Astro super aufgebaut ist und alles gut erklärt wird.

Welche Eigenschaften sollte die Seite noch haben?

Ein Back-to-Top Button in Javascript Code sieht zum Beispiel so aus.

// Hier holt er sich die ID "to-top-button"
let toTopButton = document.getElementById("to-top-button");

// Checkt ob der Button existiert
if (toTopButton) {
  // Scroll event, toggle button wird erst sichtbar wenn nach unten gescrollt wird
  window.onscroll = function () {
    if (
      document.body.scrollTop > 500 ||
      document.documentElement.scrollTop > 500
    ) {
      toTopButton.classList.remove("hidden");
    } else {
      toTopButton.classList.add("hidden");
    }
  };

  // Funktion um "smooth" BackToTop zu gelangen
  window.goToTop = function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };
}

Ich habe einen “Back-to-Top”-Test zwischen meinem aktuellen Samsung S21FE (Chrome) und meinem alten iPhone 7+ (Safari) durchgeführt. Für den Test habe ich den Beitrag Blog 07 | Github - Cheat Sheet gewählt. Dieser hat den längsten Rückweg nach oben. Zu meiner Überraschung war mein fast 10 Jahre altes iPhone 7+ minimal schneller ganz oben als der Samsung S21FE.
WTF, dachte ich nur.
Respekt!

Welches Feature hat nicht geklappt oder konnte aktuell noch nicht übernommen werden?

Zum Beispiel „internationalization“ i18n ↗️. Das wollte ich nachträglich einpflegen und es wollte einfach nicht klappen. Habe mich strikt an die Docu gehalten. Ich habe es 2–3 Wochen lang geduldig ausprobiert, um es endlich zum Laufen zu bringen. Hab es am Ende genervt weg gelassen. Wollte erst mit „Deutsch/Englisch“ anfangen und dann, wenn es geklappt hätte, weitere Sprachen hinzufügen.

Thema Accessibility kam leider viel später auf, als die Seite schon fast fertig gewesen ist. Ich wollte die Seite auch endlich zum Abschluss bringen und nicht weiter herumexperimentieren. Ehrlich gesagt hatte auch keine Lust darauf mir wieder die Seite zu zerschießen. Man muss hier auch erwähnen, dass man lange mit Debuggen beschäftigt ist.

Was Planst du in Zukunft für diese Seite?

Mir werden schon weitere Ideen einfallen. Da bin ich mir sicher.

Was würdest du das nächste mal anders machen?

Ich würde von Anfang an genau wissen wollen, welche Funktionen und Eigenschaften die Seite haben muss. Ich habe die Erfahrung gemacht, dass spätere Implementierungen mehr Probleme verursacht haben, als wenn sie von Anfang an berücksichtigt worden wären.

Ich glaube, dass genau diese Situationen für Unternehmen und Entwickler problematisch sind, wenn ein Kunde ständig Änderungen an der beauftragten Webseite vornehmen lässt, was dazu führt, dass vieles nicht mehr so reibungslos funktioniert wie zuvor.

Welchen Tech-Stack hast du genau benutzt?

Mein Fazit

Bis auf den einen Vorfall, das ich selbstverschuldet mein Repository ↗️ zerschossen habe gefiel mir die Arbeit an diesem Projekt sehr gut.

Ich habe sehr viel neu erlerntes Wissen verstehen und aneignen können. Das ist das Schöne an der Entwicklung/Programmierung, am Ende wird irgendwie alles gut, aber der Weg bis zum Ende kann echt mühselig und 💩 sein.

Abends nach 21 Uhr mache ich zum Beispiel nur noch Sachen, die keine volle Gehirnaktivität mehr benötigen. Wie zum Beispiel in der Shell 2 + 2, cal, date oder echo Hello World eintippen.

Ich hätte auch niemals gedacht das ich die Seite so weit ausbauen würde. Es macht mir einfach einen riesen Spaß aus dem nichts dinge zu erschaffen, zu testen und zum laufen zu bringen.

Youtube Video