NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Astro JS Islands Architecture – Ozean-Metapher mit Browser-Hauptinsel und UI-Komponenten-Inseln

Astro Islands 2026: Performance durch selektive Hydration

Astro Islands sind interaktive UI Komponenten, die als isolierte Inseln in einer sonst statischen HTML Seite sitzen. Jede Insel lädt ihr JavaScript nur dann, wenn es gebraucht wird, der Rest der Seite bleibt reines HTML ohne Client Runtime.

Den Begriff Component Islands prägte Katie Sylor-Miller, Frontend Architektin bei Etsy, im Jahr 2019. Jason Miller, der Erfinder von Preact, beschrieb das Muster 2020 ausführlich. Astro hat es als erstes großes Framework mit eingebauter selektiver Hydration produktionsreif gemacht. Seit Januar 2026 gehört das Astro Team zu Cloudflare, das Framework bleibt Open Source unter MIT Lizenz. Aktuell ist Astro 7, erschienen im Juni 2026.

Die Kernidee in drei Punkten:

  • Server zuerst: Astro rendert jede Seite zu statischem HTML.
  • JavaScript nur auf Wunsch: Nur Komponenten mit einer client: Direktive bekommen Code im Browser.
  • Isoliert: Jede Insel hat ihr eigenes Bundle und blockiert die anderen nicht.

Das Ergebnis sind kleine Bundles, bessere Core Web Vitals und schnelle Interaktion. Das hilft auch barrierefreien Websites, die seit dem BFSG (Juni 2025) die Anforderungen der WCAG erfüllen müssen.

Inhalt

Astro Islands mit NCA: Schnelle Hilfe vom Experten

Astro gehört bei uns zum täglichen Production Stack. Wir bauen Websites und Web Apps mit Astro, React und Vue, sichern sie mit TypeScript im Strict Mode ab und testen jede Insel mit Cypress und Cypress Cloud. Dazu kommen über 20 Jahre Erfahrung mit Testing und Refactoring. Deshalb wissen wir, wo Hydration Kosten erzeugt und wie man sie messbar senkt.

Wir helfen Teams bei der Frontend Entwicklung mit Astro, beim Ablösen von schwerem JavaScript und bei barrierefreiem Webdesign. Für KI-gestützte Projekte gibt es unser Vibe Coding Consulting, für Teams die Vibe Coding Schulung mit Astro Landing Page und den Cypress Workshop für E2E Tests.

Lass uns über deine Astro Islands sprechen
Finde das passende Angebot für dein Projekt
Anfrage-Konfiguration
Starten Sie Ihre Anfrage
Projektart
Infos
Nachricht

Eliminierung technischer Schulden mit PHPStan, Rector PHP und PHPUnit. Über 20 Jahre Praxiserfahrung in skalierbaren Backends.

CORE EXPERTISE

Gesetzliche Konformität & Inklusion. Optimierung von Performance und Conversion durch radikal nutzerzentriertes, universelles Design.

BFSG COMPLIANT

Skalierbare KI-Systeme mit echtem Code Ownership. CI/CD, Backup-Strategien und Infrastruktur, die mit deinem Team wächst.

ENTERPRISE READY

Client Direktiven: Wann und wie Islands hydratisiert werden

Das Herzstück sind die client: Direktiven. Sie steuern, ob und wann eine Komponente JavaScript bekommt. Ohne Direktive rendert Astro jede Komponente zu statischem HTML. Null Bytes JavaScript. Erst die Direktive macht die Komponente zur Insel.

Astro kennt fünf Client Direktiven:

  • client:load hydratisiert sofort beim Laden. Gut für Navigation oder Elemente im ersten Viewport.
  • client:idle wartet, bis der Main Thread frei ist. Gut für Newsletter Formulare oder Nebenwidgets.
  • client:visible hydratisiert erst, wenn die Komponente in den Viewport scrollt. Gut für Galerien, Kommentare und Charts.
  • client:media hydratisiert nur bei passender Media Query, etwa für ein mobiles Menü.
  • client:only überspringt das Server Rendering und rendert nur im Browser. Nötig für Widgets, die ohne window nicht laufen.
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: erster Viewport -->
<HeroCarousel client:load />

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

<!-- Hydratisiert beim Scrollen: weiter unten -->
<StatsChart client:visible />

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

Jede Direktive ist ein Performance Vertrag. Astro rendert zuerst HTML und lädt JavaScript nur nach dieser Regel. Jede Insel bekommt ihr eigenes Bundle. React, Vue, Svelte, Solid und Preact lassen sich auf einer Seite mischen. In unseren Projekten nutzen wir vor allem React und Vue.

Server Islands: Dynamische Inhalte ohne Performance Verlust

Server Islands erweitern das Muster um dynamische Inhalte vom Server. Client Islands laden JavaScript im Browser. Server Islands laden fertiges HTML per Request nach. Die statische Seite kommt sofort und kann im CDN gecacht werden. So passen Performance und Personalisierung zusammen.

Eine Server Island bekommt die Direktive server:defer. Astro liefert die Seite sofort aus und setzt an die Stelle der Insel ein kleines Script. Das lädt den Inhalt per GET Request nach. Die Props reisen verschlüsselt in der URL mit. Die Antwort lässt sich per Cache-Control Header cachen. Werden die Props zu groß für die URL, wechselt Astro auf POST.

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 Fälle für Server Islands:

  • Login Status und Avatar
  • Warenkorb und Merkliste
  • Persönliche Empfehlungen
  • A/B Tests

Jede Server Island hat ihren eigenen Lebenszyklus. Eine langsame Abfrage in einer Insel bremst die anderen nicht. Das Muster läuft mit jedem Adapter, der eine Server Runtime bietet: von Node.js im Docker Container bis zu Cloudflare Workers.

Islands in Astro 7: Was sich 2026 geändert hat

Astro 7 ist am 22. Juni 2026 erschienen. Es ist vor allem ein Release für die Infrastruktur. Die API für Islands bleibt gleich. Darunter wird vieles schneller:

  • Compiler in Rust: Der .astro Compiler ist neu geschrieben und strenger. Nicht geschlossene Tags werfen jetzt einen Fehler.
  • Vite 8 mit Rolldown: Der neue Bundler baut auch die Bundles der Inseln deutlich schneller.
  • Queued Rendering: Die neue Rendering Engine ist jetzt Standard.
  • AstroDB entfernt: @astrojs/db gibt es nicht mehr. Daten für Server Islands holen wir mit SQLite und Drizzle statt Astro DB.

Laut Astro Team bauen echte Projekte mit Astro 7 zwischen 15 und 61 Prozent schneller. Die Neuerungen der Minor Releases fassen wir im Artikel über Astro als Static Site Generator zusammen. Die folgende Tabelle zeigt alle Direktiven auf einen Blick.

Astro Direktiven im Vergleich

Direktive Wann lädt der Inhalt Typischer Einsatz
client:load Sofort beim Laden der Seite Navigation, Suche, Button im ersten Viewport
client:idle Wenn der Main Thread frei ist Newsletter Formular, Chat Widget
client:visible Beim Scrollen in den Viewport Galerie, Kommentare, Charts
client:media Wenn die Media Query passt Mobiles Menü
client:only Nur im Browser, ohne Server Rendering Widgets, die window brauchen
server:defer Per Request nach dem ersten HTML Login Status, Warenkorb, Empfehlungen

Islands richtig einsetzen: Typische Fehler und Barrierefreiheit

Drei Fehler tauchen in Code Reviews immer wieder auf:

  1. client:load als Standard. Das lädt alles sofort und blockiert den Main Thread. Besser sind client:idle oder client:visible.
  2. Ganze Layouts als Insel. Ein React Layout um die ganze Seite hebelt das Muster aus. Nur Widgets werden Inseln.
  3. Große Listen hydratisieren. Lieber die Liste statisch rendern und nur Filter oder Sortierung als Insel bauen.

Für Barrierefreiheit ist das Muster ein Vorteil. Inhalt kommt als semantisches HTML und ist sofort für Screenreader da. Interaktive Teile wie Accordion, Modal oder Tabs müssen trotzdem Fokus, Tastatur und ARIA korrekt steuern. Fertige Bausteine dafür liefern die Accessible Astro Components. Für eigene Scripts ohne Framework lohnt der Blick auf unsere Best Practices zum Astro Script Tag.

Testen ist Pflicht. Eine Insel, die nicht hydratisiert, sieht fertig aus, reagiert aber nicht. Wir prüfen das mit E2E Tests, wie sie das NCA Cypress Glossar beschreibt, direkt in der CI Pipeline.

The general idea of an "Islands" architecture is deceptively simple

Jason Miller, Erfinder von Preact – jasonformat.com: Islands Architecture

NCA Erfahrung: Astro Islands im Projektalltag

Wir setzen Astro mit Islands täglich ein, von der Landingpage bis zur Web App mit Login. Unser Muster ist einfach: erst die statische Seite, dann gezielt Inseln dort, wo Nutzer klicken, tippen oder filtern. Styles kommen aus Tailwind CSS, Typen aus TypeScript im Strict Mode, Tests aus Cypress.

Bei Migrationen helfen wir Teams, eine bestehende SPA Schritt für Schritt auf Astro umzustellen. Oft startet das mit einem Prototyp aus Lovable oder Base44, den wir mit Astro sauber umsetzen. Den Einstieg für Vibe Coder beschreibt unser Artikel Astro Framework als Start fürs Vibe Coding. Wie sich die Performance im Feld messen lässt, zeigt der Beitrag zu CrUX und Core Web Vitals.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Frontend: 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.

E-Mail Kontakt

Häufige Fragen zu Astro Islands

Die wichtigsten Antworten zu Client Direktiven, Server Islands, Astro 7 und Performance.

Was sind Astro Islands und warum sind sie 2026 relevant?

Astro Islands sind interaktive Komponenten in einer sonst statischen HTML Seite. Jede Insel lädt ihr JavaScript nur bei Bedarf, der Rest bleibt reines HTML. 2026 ist das Muster wichtiger denn je: Core Web Vitals zählen für Rankings, das BFSG fordert barrierefreie Seiten und Astro 7 macht Builds deutlich schneller. Islands verbinden schnelle Seiten mit gezielter Interaktion.

Welche Client Direktiven bietet Astro 2026?

Astro bietet fünf Client Direktiven. client:load hydratisiert sofort, client:idle wartet auf einen freien Main Thread, client:visible startet beim Scrollen in den Viewport, client:media reagiert auf eine Media Query und client:only rendert nur im Browser ohne Server Rendering. Ohne Direktive bleibt eine Komponente statisches HTML. Jede Direktive steuert also genau, wann JavaScript lädt.

Wie verbessern Astro Islands die Core Web Vitals 2026?

Islands senden nur JavaScript für interaktive Komponenten. Das statische HTML ist sofort sichtbar, was den Largest Contentful Paint verbessert. Weniger Script entlastet den Main Thread und hilft bei Interaction to Next Paint. Platzhalter aus dem Server Rendering halten das Layout stabil und senken den Cumulative Layout Shift. Messen solltet ihr das mit echten Felddaten aus CrUX.

Was sind Server Islands und wie funktionieren sie 2026?

Server Islands sind Astro Komponenten mit der Direktive server:defer. Die statische Seite kommt sofort und lässt sich im CDN cachen. Personalisierte Teile laden parallel per Request nach. Props reisen verschlüsselt in der URL mit, die Antwort ist per Cache-Control Header cachebar. Server Islands sind seit Astro 5 stabil und laufen auch in Astro 7 mit derselben API.

Was ändert Astro 7 im Jahr 2026 für Islands?

Die API für Islands bleibt in Astro 7 gleich. Neu ist die Basis darunter: ein Compiler in Rust, Vite 8 mit dem Bundler Rolldown und Queued Rendering als Standard. Builds werden laut Astro Team zwischen 15 und 61 Prozent schneller. AstroDB wurde entfernt. Für Daten in Server Islands nutzt ihr stattdessen SQLite mit Drizzle oder eine andere Datenbank.

Welche Frameworks unterstützt die Islands Architektur in Astro?

Astro bringt offizielle Integrationen für React, Preact, Vue, Svelte, SolidJS und Alpine.js mit. Weitere Frameworks kommen über Community Integrationen dazu. Mehrere Frameworks lassen sich auf einer Seite mischen. Jede Insel lädt nur die Runtime, die sie braucht, und die Runtime wird pro Seite nur einmal geladen. Wir nutzen in Projekten vor allem React und Vue.

Wann nutze ich client:load und wann client:visible?

client:load ist für Komponenten, die sofort nach dem Laden reagieren müssen. Beispiele sind Navigation, Suche oder ein Button im ersten Viewport. client:visible passt für alles weiter unten auf der Seite: Kommentare, Galerien, Charts oder Feedback Formulare. Die Faustregel lautet: oben load, unten visible. Wenn Zeit keine Rolle spielt, ist client:idle ein guter Mittelweg.

Wie unterscheiden sich Client Islands und Server Islands?

Client Islands bringen Interaktivität in den Browser. Sie hydratisieren eine Komponente mit JavaScript. Server Islands rendern dynamische Inhalte auf dem Server und laden fertiges HTML nach. Client Islands passen für Widgets wie Filter, Slider oder Formulare. Server Islands passen für personalisierte Inhalte wie Login Status, Warenkorb oder Empfehlungen. Beide lassen sich auf einer Seite kombinieren.

Können Islands untereinander State teilen?

Ja. Client Islands sind isoliert, können aber Daten teilen. Die Astro Doku empfiehlt dafür Nano Stores, eine kleine Bibliothek, die mit React, Vue, Svelte und Solid funktioniert. Alternativ gehen Custom Events, URL Parameter oder Local Storage. Server Islands teilen keinen State direkt miteinander. Sie bekommen ihre Daten über Props und eigene Abfragen auf dem Server.

Was passiert mit einer Komponente ohne client Direktive?

Ohne Direktive rendert Astro die Komponente nur auf dem Server zu statischem HTML. Es geht kein JavaScript an den Browser. Die Komponente ist nicht interaktiv, aber sofort sichtbar und für Suchmaschinen lesbar. Das ist das Standardverhalten in Astro. Genau daraus entsteht das Prinzip Zero JavaScript by Default, das Astro Seiten so schnell macht.

Wie helfen Islands bei barrierefreien Websites?

Islands liefern Inhalte als semantisches HTML aus. Screenreader können sie sofort lesen, ohne auf JavaScript zu warten. Weniger Script bedeutet schnellere Seiten, auch auf schwachen Geräten. Interaktive Teile müssen aber Fokus, Tastatur und ARIA korrekt umsetzen. Dafür eignen sich die Accessible Astro Components. Prüfen solltet ihr das Ergebnis mit automatischen Tests und manuell.

Was bedeutet die Übernahme durch Cloudflare für Astro?

Im Januar 2026 ist das Astro Team zu Cloudflare gewechselt. Astro bleibt Open Source unter MIT Lizenz und läuft weiter auf vielen Hosts. Ihr seid also nicht an Cloudflare gebunden. Server Islands funktionieren mit jedem Adapter, der eine Server Runtime bietet, etwa Node.js. Wir hosten Astro Projekte auf eigenen Servern in Deutschland.

Welche typischen Fehler gibt es bei Astro Islands?

Drei Fehler kommen oft vor. Erstens client:load als Standard für alles, das lädt zu viel Script zu früh. Zweitens ganze Layouts als Framework Komponente statt einzelner Widgets. Drittens große Listen komplett hydratisieren, statt nur Filter oder Sortierung als Insel zu bauen. Wer diese Punkte vermeidet, holt den größten Teil der Performance aus Astro heraus.

Kann ich Server Islands mit Fallback Inhalt versehen?

Ja. Über den Slot mit dem Namen fallback legt ihr Inhalt fest, der bis zum Laden der Server Island sichtbar ist. Das kann ein Platzhalter Avatar, ein Skeleton oder ein kurzer Ladetext sein. Der Fallback steckt direkt im statischen HTML und erscheint sofort. Der echte Inhalt ersetzt ihn, sobald die Antwort vom Server da ist.

Eignen sich Astro Islands auch für komplexe Web Apps?

Islands sind stark bei Websites mit gezielter Interaktion: Marketing Seiten, Blogs, Dokumentation, Shops und Unternehmensportale. Für Apps mit viel Client State, etwa Dashboards oder Echtzeit Editoren, kann eine SPA mit React oder Vue besser passen. Oft ist die Mischung ideal: Astro für die Seiten drumherum und eine große Insel für den App Teil.

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 

Astro Docs: Lernen Sie, wie die Islands-Architektur von Astro dazu beiträgt, Websites schnell und effizient zu halten.

Astro Docs: Erfahren Sie, wie Sie Zustände zwischen Framework-Komponenten mit Nano Stores teilen können, um eine effiziente Zustandsverwaltung zu ermöglichen.

Astro: Entdecken Sie die neue Server-Islands-Architektur, die Websites schneller und effizienter macht.

Astro Docs: Erfahren Sie, wie die Astro-Inselarchitektur dazu beiträgt, dass Websites schnell und performant sind.