Astro JS Islands Architecture – Ozean-Metapher mit Browser-Hauptinsel und UI-Komponenten-Inseln

Astro JS Islands 2026 – Performance durch selektive Hydration

Astro Islands ist ein Frontend-Architekturmuster, bei dem interaktive UI-Komponenten als isolierte "Inseln" in eine ansonsten statische HTML-Seite eingebettet werden. Jede Insel lädt ihr eigenes JavaScript-Bundle nur dann, wenn es tatsächlich benötigt wird – der Rest der Seite bleibt reines HTML ohne Client-Side-Runtime.

Das Konzept wurde 2019 von Katie Sylor-Miller beschrieben und von Jason Miller (Preact-Erfinder) weiterentwickelt. Astro hat es als erstes Mainstream-Framework mit eingebautem Selective Hydration produktionsreif gemacht. Seit der Cloudflare-Übernahme im Januar 2026 wird die Islands Architecture mit Server Islands und der workerd-Runtime konsequent weiterentwickelt. Unternehmen wie Porsche, IKEA, Visa und OpenAI setzen Astro produktiv ein.

Die Kernidee: Statt eine komplette SPA mit React oder Vue an den Browser zu schicken, rendert Astro jede Seite serverseitig zu statischem HTML. Nur Komponenten, die explizit mit einer client:-Direktive markiert sind, erhalten JavaScript. Das Ergebnis sind drastisch reduzierte Bundle-Größen, bessere Core Web Vitals und schnellere Time to Interactive – besonders relevant für barrierefreie Websites, die seit dem BFSG (Juni 2025) WCAG 2.2 AA erfüllen müssen.

Client Direktiven – Wann und wie Islands hydratisiert werden

Das Herzstück der Islands Architecture sind die client:-Direktiven. Sie steuern präzise, wann und ob eine Komponente JavaScript erhält. Ohne Direktive rendert Astro jede Komponente zu statischem HTML – null Bytes JavaScript. Erst durch eine explizite Direktive wird die Komponente zur interaktiven Insel.

Astro bietet fünf Client-Direktiven mit unterschiedlichen Prioritäten: client:load hydratisiert sofort beim Seitenladen – ideal für Above-the-Fold-Elemente wie Navigation oder Hero-Karussells. client:idle wartet, bis der Browser-Main-Thread frei ist – perfekt für Newsletter-Formulare oder sekundäre Widgets. client:visible nutzt den IntersectionObserver und hydratisiert erst, wenn die Komponente in den Viewport scrollt – optimal für Bildergalerien, Kommentarbereiche oder Diagramme unterhalb des Folds.

Zwei weitere Direktiven decken Spezialfälle ab: client:media="(max-width: 50em)" hydratisiert nur bei bestimmten Bildschirmgrößen – nützlich für mobile Navigation, die auf dem Desktop nicht gebraucht wird. client:only="react" überspringt das Server-Rendering komplett und rendert ausschließlich im Browser – notwendig für Third-Party-Widgets, die unter SSR nicht funktionieren.

Code:

          ---
import HeroCarousel from '../components/HeroCarousel.jsx';
import NewsletterSignup from '../components/NewsletterSignup.svelte';
import StatsChart from '../components/StatsChart.vue';
import MobileMenu from '../components/MobileMenu.jsx';
---

<h1>Statischer Seitentitel – Zero JavaScript</h1>
<p>Dieser Text ist reines HTML ohne Runtime.</p>

<!-- Sofort interaktiv: Above the Fold -->
<HeroCarousel client:load />

<!-- Hydratisiert wenn Browser idle: sekundäres Widget -->
<NewsletterSignup client:idle />

<!-- Hydratisiert beim Scrollen: Below the Fold -->
<StatsChart client:visible />

<!-- Nur auf Mobile: responsives Menü -->
<MobileMenu client:media="(max-width: 768px)" />

Jede Direktive ist ein Performance-Vertrag: Astro rendert die Komponente zuerst zu HTML, entscheidet dann basierend auf der Direktive, ob und wann JavaScript nachgeladen wird. Da jede Insel ihr eigenes Bundle erhält, kann Astro aggressiv Tree-Shaken – kein unbenutzter Code landet im Browser. Frameworks wie React, Vue, Svelte, Solid und Preact können dabei auf derselben Seite gemischt werden, ohne dass die Runtimes sich gegenseitig blockieren.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.

Frontend 2025: Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile der Barrierefreiheit

Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile einer schnellen, sicheren und barrierefreien Webseite. Erfüllen Sie die gesetzlichen Anforderungen und verbessern Sie die Benutzererfahrung Ihrer Webseite. Mit Astro JS können Sie die Ladezeit reduzieren, die Sicherheit maximieren und die SEO-Optimierung verbessern. Kontaktieren Sie uns, um mehr zu erfahren und um Ihre Webseite auf ein neues Level zu heben.

Astro JS Frontend E-Mail Kontakt

Server Islands – Dynamische Inhalte ohne Performance-Einbußen

Server Islands erweitern die Islands Architecture um serverseitig gerenderte dynamische Komponenten. Während Client Islands interaktives JavaScript im Browser laden, werden Server Islands per HTTP-Request nachgeladen – die statische Seite wird sofort ausgeliefert und aggressiv im CDN gecacht. Das löst ein fundamentales Problem der Webentwicklung: Performance und Personalisierung gleichzeitig.

Eine Server Island wird mit der server:defer-Direktive markiert. Astro rendert die restliche Seite sofort und ersetzt die Insel durch ein kleines Script, das den dynamischen Inhalt per GET-Request nachlädt. Props werden als verschlüsselter String in der URL übergeben und können über den Cache-Control-Header gecacht werden. Bei URL-Längen über 2048 Bytes wechselt Astro automatisch auf POST-Requests.

Code:

          ---
import UserCart from '../components/UserCart.astro';
import ProductList from '../components/ProductList.astro';
---

<!-- Statisch gecacht: sofort sichtbar -->
<ProductList />

<!-- Server Island: dynamisch, personalisiert -->
<UserCart server:defer>
  <div slot="fallback">
    <p>Warenkorb wird geladen...</p>
  </div>
</UserCart>

Typische Anwendungsfälle für Server Islands sind personalisierte Elemente wie Login-Status, Warenkörbe, Empfehlungen oder A/B-Tests. Die statische Seitenhülle mit Hauptinhalt ist sofort sichtbar, während personalisierte Bereiche parallel und unabhängig voneinander nachladen. Jede Server Island hat ihren eigenen Lebenszyklus – eine langsame Datenbank-Abfrage in einer Insel blockiert nicht die anderen. Dieses Rendering-Pattern ist portabel und funktioniert mit jedem Host: von Node.js in Docker bis zu Cloudflare Workers.

Häufig gestellte Fragen zu Astro JS Islands

Die wichtigsten Fragen zur Islands Architecture in Astro – von Client-Direktiven über Server Islands bis zu Performance-Optimierung und Framework-Integration.

Was sind Astro JS Islands und warum sind sie 2026 so relevant?

Astro Islands sind isolierte, interaktive UI-Komponenten in einer ansonsten statischen HTML-Seite. Jede Insel lädt ihr eigenes JavaScript-Bundle nur bei Bedarf – der Rest bleibt reines HTML. Seit der Cloudflare-Übernahme Anfang 2026 werden Islands mit Server Islands und der workerd-Runtime konsequent weiterentwickelt, was sie zum zentralen Architekturmuster für performante Websites macht.

Welche Client-Direktiven bietet Astro 2026 für Islands?

Astro bietet fünf Client-Direktiven: client:load (sofortige Hydration), client:idle (bei Browser-Leerlauf), client:visible (beim Scrollen in den Viewport), client:media (bei CSS-Media-Query-Match) und client:only (nur Client-Rendering ohne SSR). Jede Direktive ist ein Performance-Vertrag, der präzise steuert, wann JavaScript geladen wird.

Wie verbessern Astro Islands die Core Web Vitals 2026?

Islands reduzieren die JavaScript-Payload drastisch, da nur interaktive Komponenten Code an den Browser senden. Das verbessert Largest Contentful Paint (LCP) durch sofortiges statisches HTML, First Input Delay (FID) durch weniger Main-Thread-Arbeit und Cumulative Layout Shift (CLS) durch serverseitig gerenderte Platzhalter. Vergleiche zeigen bis zu 83 Prozent weniger JavaScript gegenüber SPAs.

Was sind Server Islands und wie funktionieren sie 2026 in Astro?

Server Islands sind Astro-Komponenten mit der server:defer-Direktive. Die statische Seite wird sofort ausgeliefert und CDN-gecacht, während personalisierte Inhalte per HTTP-Request parallel nachladen. Props werden verschlüsselt in der URL übergeben und können über Cache-Control-Header gecacht werden. Server Islands sind seit Astro 5 stabil und werden in Astro 6 mit der Cloudflare-Runtime weiter optimiert.

Welche Frameworks unterstützt die Astro Islands Architecture 2026?

Astro ist framework-agnostisch und unterstützt React, Preact, Svelte, Vue, SolidJS und über Community-Integrationen auch Angular, Qwik und weitere. Mehrere Frameworks können auf derselben Seite gemischt werden – jede Insel lädt nur die benötigte Runtime. Das Framework wird pro Seite nur einmal gesendet, selbst bei mehreren Komponenten.

Wann sollte ich client:load statt client:visible verwenden?

Verwende client:load für Komponenten die sofort nach dem Seitenladen interaktiv sein müssen, etwa Navigation, Hero-Karussells oder Add-to-Cart-Buttons oberhalb des sichtbaren Bereichs. Nutze client:visible für alles unterhalb des Folds: Kommentarbereiche, Bildergalerien, Statistik-Charts oder Feedback-Formulare. Die Faustregel: Above the Fold mit load, Below the Fold mit visible.

Wie unterscheiden sich Client Islands und Server Islands?

Client Islands fügen clientseitige Interaktivität hinzu – sie hydratisieren eine Komponente im Browser mit JavaScript. Server Islands rendern dynamische Inhalte serverseitig per HTTP-Request nach, ohne JavaScript an den Client zu senden. Client Islands eignen sich für interaktive Widgets, Server Islands für personalisierte Inhalte wie Login-Status, Warenkörbe oder Empfehlungen.

Können Islands den State untereinander teilen?

Ja, Client Islands können trotz ihrer Isolation State teilen und miteinander kommunizieren. Dafür eignen sich Nano Stores, ein framework-agnostisches State-Management das mit React, Vue, Svelte und Solid funktioniert. Alternativ können Custom Events, URL-Parameter oder der Browser-LocalStorage verwendet werden. Server Islands kommunizieren nicht direkt miteinander.

Was passiert mit einer Komponente ohne client:-Direktive?

Ohne client:-Direktive rendert Astro die Komponente ausschließlich serverseitig zu statischem HTML. Es wird kein JavaScript an den Browser gesendet – null Bytes. Die Komponente ist nicht interaktiv, aber sofort sichtbar und SEO-indexierbar. Das ist das Standardverhalten und der Grund für Astros Zero-JavaScript-by-Default-Prinzip.

Wie setze ich Islands für barrierefreie Websites ein?

Islands verbessern die Barrierefreiheit durch semantisches HTML als Basis, minimales JavaScript für schnellere Ladezeiten und serverseitig gerenderte Inhalte die von Screenreadern sofort erfasst werden. Für WCAG 2.2 konformes interaktives Verhalten eignet sich die Accessible Astro Components Bibliothek mit über 20 barrierefreien Komponenten, die als Islands eingebunden werden können.

Wie beeinflusst die Cloudflare-Übernahme die Islands Architecture?

Seit Januar 2026 gehört Astro zu Cloudflare. Die Integration bringt den workerd-Dev-Server in Astro 6, der Development und Production angleicht. Server Islands profitieren besonders: Cloudflares CDN cached die statische Seitenhülle global, während Server Islands über Cloudflare Workers am Edge gerendert werden – mit Zugriff auf KV, R2 und Durable Objects.

Welche typischen Fehler sollte ich bei Islands vermeiden?

Drei häufige Fehler: Erstens, große Arrays in client:-Loops rendern statt eine einzelne Sorter-Insel zu hydratisieren. Zweitens, ganze Layouts als Framework-Komponente wrappen statt nur einzelne Widgets als Islands zu definieren. Drittens, client:load als Default verwenden statt client:idle oder client:visible – das verschwendet Bandbreite und blockiert den Main-Thread.

Kann ich Server Islands mit Fallback-Content versehen?

Ja, über den benannten Slot fallback kann Loading-Content definiert werden, der angezeigt wird bis die Server Island geladen ist. Das können generische Platzhalter-Avatare, Skeleton-UIs, Ladeindikatoren oder informative Texte sein. Der Fallback wird beim Build in die statische Seite eingebettet und ist sofort sichtbar, während der dynamische Inhalt parallel nachlädt.

Wie performant sind Islands im Vergleich zu einer React SPA?

Astro Islands senden nur JavaScript für explizit interaktive Komponenten. Eine typische Content-Website mit Astro liefert oft unter 50 KB JavaScript, während eine vergleichbare React SPA allein für die Runtime über 100 KB benötigt. Benchmarks zeigen bis zu 83 Prozent weniger JavaScript und deutlich bessere Time to Interactive. Für content-lastige Websites sind Islands SPAs überlegen.

Eignen sich Astro Islands auch für komplexe Web-Applikationen?

Islands eignen sich hervorragend für content-getriebene Websites mit gezielter Interaktivität: Marketing-Sites, Blogs, Dokumentationen, E-Commerce-Produktseiten und Unternehmensportale. Für hochgradig interaktive Anwendungen wie Dashboards, Echtzeit-Editoren oder SaaS-Tools mit durchgehendem Client-State ist eine SPA mit React oder Vue oft die bessere Wahl. Die Stärke liegt in der Kombination beider Welten.

Fazit – Islands Architecture als Grundlage performanter Websites

Die Islands Architecture ist 2026 das zentrale Architekturmuster für content-getriebene Websites, die Performance und Interaktivität vereinen müssen. Mit Client-Direktiven für präzise Hydration, Server Islands für personalisierte Inhalte und der Unterstützung aller gängigen UI-Frameworks bietet Astro ein Toolset, das SPAs in puncto Performance überlegen ist – ohne auf moderne Entwicklererfahrung zu verzichten.

Seit der Cloudflare-Übernahme profitiert die Islands Architecture von CDN-Edge-Rendering, der workerd-Runtime und einem Ökosystem, das von Unternehmen wie Webflow, Wix, Netlify und Sentry mitgetragen wird. Für Projekte, die sowohl schnelle Ladezeiten als auch Barrierefreiheit nach WCAG 2.2 erfordern, ist Astro mit Islands die technisch fundierte Wahl.

Du planst eine performante Website mit Islands Architecture oder möchtest ein bestehendes Frontend auf Astro migrieren? Never Code Alone unterstützt bei Architektur-Entscheidungen, Framework-Integration und BFSG-Compliance. Vereinbare eine kostenlose Erstberatung unter roland@nevercodealone.de oder ruf direkt an: +49 176 24747727.

Unsere live Coding Astro JS Tutorials auf YouTube

Mit Astro JS Bilder optimieren und die Performance verbessern

Astro JS bietet revolutionäre Bildoptimierung und Caching für maximale Performance. Automatische Bildkompression, responsive srcset-Generierung und Framework-Caching machen Astro zur idealen Lösung für Entwickler. In diesem Tutorial zeige ich, wie Astro automatisch Bilder optimiert und ein nahtloses Nutzererlebnis ermöglicht. Am Beispiel von Sulu CMS und Headless-Strukturen erkläre ich die Vorteile, die das Framework für Webentwicklung und barrierefreies Design bietet. 0:00 Warum Astro JS die beste Wahl für Performance ist 0:20 Bilder automatisch optimieren mit Astro – so funktioniert’s 0:55 Sulu CMS und Headless-Modus erklärt 1:40 Die Astro Image-Komponente in Aktion 2:15 Perfekte Bildoptimierung mit Caching und srcset Diskutiert mit: Wie optimiert ihr Bilder in euren Projekten? Welche Frameworks nutzt ihr? Schreibt eure Fragen und Gedanken in die Kommentare! Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Astro JS: Headless-Modus, API-Caching und Performance im Fokus

Astro JS bietet maximale Performance für moderne Webprojekte. Mit Funktionen wie serverseitigem API-Caching und blitzschnellem Rendering bringt Astro einen enormen Vorteil, ohne dass du dich um komplexe Optimierungen kümmern musst. In diesem Tutorial zeige ich dir, wie wir eine Headless-Website mit Astro umsetzen und dabei Tools wie Tailwind CSS und Best Practices für barrierefreies HTML nutzen. Wir analysieren die Ladezeiten der Seite, erklären, wie Astro serverseitig und im Frontend arbeitet, und zeigen, wie schnell Inhalte geladen werden. 0:00 Einführung – Was macht Astro JS so besonders? 0:22 Headless-Modus und rolandgolla.de im Fokus 0:53 Daten laden und Performance analysieren 1:30 Astro Server- und Frontend-Funktionalität erklärt 2:10 Tipps für barrierefreies Design und Best Practices Hast du Fragen zum Headless-Modus oder zu Astro? Schreib sie gerne in die Kommentare! Diskutiere mit mir über barrierefreies Webdesign, API-Caching oder andere spannende Themen. Schau auch in meine anderen Videos für weitere Tutorials und Tipps! Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Headless HTML Rendern mit Astro.js

Wie du RAW-HTML aus einem CMS mit Astro.js headless renderst – einfach erklärt! Lerne, wie du Sicherheitsprobleme wie Escape-Handhabung löst und Inhalte korrekt darstellst. Astro.js bietet großartige Möglichkeiten, dynamische Inhalte direkt in HTML zu rendern. In diesem Video zeige ich dir, wie du HTML-Tags aus einem Rich-Editor eines CMS korrekt und sicher mit der Funktion setHTML renderst. So vermeidest du, dass Inhalte fälschlicherweise escaped werden, und sorgst für die perfekte Darstellung im Browser. 0:00 Einleitung: Astro.js und RAW-HTML 0:20 Das Problem: Escaped HTML-Tags 0:50 JSON-Daten richtig analysieren 1:30 Die Lösung: setHTML anwenden 2:20 Abschluss und nächste Schritte Diskutiere mit uns: Wie nutzt du Astro.js in deinen Projekten? Was sind deine Herausforderungen beim Headless-Rendering? Lass es mich in den Kommentaren wissen – ich freue mich auf den Austausch! Neue Videos: Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Astro Framework: Dein Guide für schnelle Projekte

Erstelle barrierefreie Webseiten mit dem Astro-Framework und unserem Schritt-für-Schritt-Tutorial! Erfahre, wie du Astro installierst, konfigurierst und für Best Practices in deinen Projekten nutzt. Im Video zeigen wir dir die grundlegenden Befehle, erklären die Starter-Templates wie das Basic-Minimal- und Starlight-Template und geben Tipps zur optimalen Einrichtung in Visual Studio Code. Du lernst außerdem, wie du Änderungen im Hot-Reload-Modus sofort testen kannst und welche Vorteile Astro für Frontend-Entwickler bietet. 00:00 - Einstieg: Barrierefreie Webseiten mit Astro 00:45 - Installation und Projektstart 02:05 - Die besten Starter-Templates erklärt 03:20 - Projekt einrichten in Visual Studio Code 04:55 - Hot-Reload & Projektstruktur optimieren Diskutiere mit uns in den Kommentaren: Was sind deine größten Herausforderungen mit Headless-Frameworks? Welche Features wünschst du dir für zukünftige Tutorials? Lass es uns wissen und bleib dran für mehr spannende Inhalte! Neue Videos: Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Tailwind CSS in Astro JS in Minuten einrichten

Tailwind CSS in Astro JS – Schritt-für-Schritt-Anleitung für moderne Webprojekte In diesem Video zeige ich dir, wie du Tailwind CSS in dein Astro JS-Projekt integrierst. Perfekt für Entwickler, die auf schnelle und moderne Webdesign-Lösungen setzen. Wir starten mit der Installation von Tailwind über npx astro add tailwind. Ich erkläre, wie die Konfiguration automatisch erstellt wird und wie du die Integration testest, indem wir die Textfarbe ändern. Ein einfacher Einstieg für alle, die mit Astro und Tailwind arbeiten möchten. 00:00 – Einführung und Ziel des Tutorials 00:20 – Dev Mode beenden und Konfiguration starten 01:00 – Tailwind-Konfiguration erstellen 01:50 – Test: Tailwind funktioniert! 02:20 – Ausblick und nächste Schritte Diskutiere mit! Welche Features möchtest du mit Tailwind umsetzen? Gibt es besondere Herausforderungen, bei denen ich dir helfen kann? Lass es mich wissen, und ich gehe darauf in den nächsten Videos ein! Neue Videos: Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Astro Framework – Basics für dein erstes Projekt

Astro JS Tutorial: Dein Einstieg in die Webentwicklung mit Headless-Technologie In diesem Video zeige ich dir, wie du Schritt für Schritt dein erstes Projekt mit dem Astro Framework erstellst. Perfekt für Anfänger und ideal für Entwickler, die moderne Webentwicklung lieben. Zunächst lernst du die Basics kennen: Projektanlage, Installation von Abhängigkeiten und erste Schritte im Development-Modus. Außerdem zeige ich dir, wie du deine Struktur in Visual Studio Code organisierst und was Astro besonders macht, wie z. B. Hot Reloading. 00:00 – Einführung und Ziele 00:45 – Projektstart mit NPM Create 02:00 – Ordnerstruktur und Konfiguration 03:15 – Hot Reloading erklärt 04:30 – Abschluss und Ressourcen Diskutiere mit! Welche Projekte möchtest du mit Astro umsetzen? Fehlen dir spezifische Beispiele oder möchtest du tiefer in bestimmte Features eintauchen? Lass es mich wissen, damit ich darauf in künftigen Tutorials eingehen kann! Neue Videos: Zweimal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Huggingface JSON Response Schema in Javascript für API Call definieren

Willkommen bei Nevercode Alone! In diesem kurzen Tutorial zeige ich dir, wie du ein Schema FAQ für eine JSON-Response von Hugging Face erstellst. Beim letzten Mal haben wir uns angeschaut, wie man FAQs über eine API von Hugging Face holt. Dieses Mal konzentrieren wir uns auf das Schema, das dafür benötigt wird. Inhalt: 00:00 JSON Response Tutorial auf Deutsch für Huggingface und Mistral mit Roland Golla 00:20 Javascript Typesscript JSON Loader aus Utils Folder 00:32 Type Properties Array und Object mit Required Fields Best Practice Setup 01:17 Outro mit Javascript Freelancer Roland Golla aus Duisburg Neue Videos: Zwei Mal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

FAQ mit Huggingface API in Javascript für Content Management System implementieren

Willkommen bei Nevercode Alone! In diesem Video zeige ich dir, wie du AI-Tools direkt in dein Webdesign integrierst und damit über Hugging Face FAQs kostenlos für deine bestehenden Content-Seiten generierst. Timestamps: 00:00 Huggingface FAQ Generator mit Javascript als Tutorial auf Deutsch mit Roland Golla 00:44 NPM run für Localhost in Javascript mit dem ASTRO Framework 01:43 AI Tools als CMS Features in Frontend Komponenten als Live Demo 04:15 Struktur im Astro Framework und Frontend Komponente mit Click Handler 08:12 Künstliche Intelligenz in Javascript Services über Huggingface Chat Completion nutzen 11:19 Tipps und Tricks mit AI Data Engineer Roland Golla Neue Videos: Zwei Mal wöchentlich veröffentliche ich hier Live-Coding-Tutorials und alles als Open Source. Falls du den Kanal noch nicht kennst, folge gerne und schalte die Glocke ein, um keine neuen Videos zu verpassen! ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

AI API Advice String für JSON Response nach vorgegebenen Schema

In dieser Folge von Never code Alone tauchen wir tief in den Advice String meines Fade to Accessibility Projekts ein. Ich bin Roland und heute führe ich euch durch den Claude CLI Service, der die Barrierefreiheit von Websites revolutioniert. Zuerst einmal, wenn ihr neu hier seid, vergesst nicht, den Kanal zu abonnieren und die Glocke einzuschalten, um keine Folge zu verpassen. Wir nehmen genau da auf, wo wir im letzten Video aufgehört haben, und tauchen ein in die Welt des Advice Strings. Ich führe euch durch den Claude Client Service und erkläre, wie der Advice String geladen wird und welche Funktionen er bietet. Vom Modell bis zur Temperatursteuerung für die Kreativität des LLMs - wir decken alles ab. Außerdem werfen wir einen Blick darauf, wie der HTML-Code in eine saubere JSON-API für das Astro Framework umgewandelt wird. Aber das ist noch nicht alles! Wir diskutieren auch die Herausforderungen und Lösungen beim Umgang mit unerwünschten Inhalten und geben euch einen Einblick in unser optimiertes Setup. Schaut euch den gesamten Prozess an, vom Laden des Advice Strings bis hin zur Anwendung des Schemas und der Extraktion relevanter Daten. Ich hoffe, diese Einblicke helfen euch, die Funktionsweise besser zu verstehen und selbst kreativ zu werden. 00:00 Promot Engineering mit Roland Golla für JSON Response von Anthropic Claude 3 01:04 Claude Client Service und Anthropic Chat Response in Javascript bekommen 04:11 Advice String für die Integration eines LLMs in Javascript Astro DB 08:25 Schema JSON Vorgabe für AI Chat Response 08:45 Outro und Ausblick mit Roland Golla ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Astro JS Projekt Struktur für die implememtiering von Large Language Models

Willkommen zu Teil 2 des Fade to Accessibility Astro DB-Projekts! Hier ist Roland, und ich führe euch durch alle Details dieses spannenden Projekts. Euer Feedback ist uns wichtig, also lasst gerne Kommentare da! Falls ihr neu auf dem Kanal seid, erwarten euch zweimal wöchentlich Live-Coding-Tutorials. Vergesst nicht, die Glocke anzuschalten und zu abonnieren! Heute tauchen wir tief in die Projektstruktur von AstroDB ein, um zu verstehen, wie alles funktioniert. Wir werfen einen Blick darauf, wann der Request gegen Claude 3 als Large Language Model abgefeuert wird, um uns bei der Programmierung zu unterstützen. Erfahrt, wie HTML-Code eingespart und das Caching implementiert wird. Im letzten Video haben wir die Seite des Duisburger Schwimmvereins gegrabt und in simple und expert Kategorien eingeteilt. Jetzt werfen wir einen genaueren Blick auf die Projektstruktur in Visual Studio Code. Ich führe euch durch wichtige Dateien wie die environment-Datei, die für die API-Keys und das Modell verwendet wird, entscheidend ist. Wir erkunden auch verschiedene Komponenten und Helfermethoden und geben euch einen Überblick über das Projekt. Von der Navigation bis zum Fetch-Data-Utility zeigen wir euch, wie alles zusammenarbeitet, um Inhalte dynamisch zu laden und zu verarbeiten. Mit einem Blick auf den Content Processor und das Schema erklären wir, wie der Content bearbeitet und strukturiert wird, bevor er in der Datenbank abgelegt wird. Dabei zeigen wir euch Best Practices und zukünftige Entwicklungspläne für das Projekt. 00:00 Astro JS und Large Language Models verbinden mit Frontent Developer Roland Golla 01:04 Astro DB dynamsiches Routing, Components und Data Handling 04:18 Get static path Navigation in Index Astro File für unterschiedliche Languages und Variants 06:01 Navigation Component in Astro Framework verwenden 08:25 Website Grapper mit Cheerio Javascript Library HTML Einlesen und Bereinigen 12:37 Content Prozessor mit LLM Service Klasse für die Integration mit unterschiedlichen AI Tools 13:25 Claude 3 API Servive als Chat in Javascript verwenden 14:58 Utilts Klassen und Helfer Funktinen für das Fade to Accessibility Astro DB Projekt 17:05 Outro und Ausblick mit Javascript Frontent Developer Roland Golla ChatGPT Playlist: https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu Cypress.IO Live Coding Tutorial Playlist: https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs Vim Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn Tailwind Playlist: https://www.youtube.com/playlist?list=PLKrKzhBjw2Y92eHOPEfwwZmAkxxcGr-yi ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Hier geht es zu unseren Social-Media-Kanälen: ► Patreon: https://patreon.com/nevercodealone ► Twitter: https://twitter.com/nevercodealone ► Instagram: https://www.instagram.com/nevercodealone/ ► LinkedIn: https://www.linkedin.com/company/never-code-alone/ ► Facebook: https://www.facebook.com/nevercodealone ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Das sind unsere Webseiten: ► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de ► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Du möchtest Never Code Alone unterstützen? Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare. Danke fürs zuschauen! Ich hoffe das Video hat dir gefallen.

Astro JS Island Bilder

Header Images und Bilder zu Astro JS Islands