Unsere live Coding Astro JS Tutorials auf YouTube

Headless HTML Rendern mit Astro.js

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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

Review PHP-Schulung

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.

Fade to Accessibility Projekt in der Vorstellung AI basierter Website Grabber mit Astro JS

Review PHP-Schulung

In dieser Episode von NeverCodeAlone tauche ich, Roland, in die faszinierende Welt des "Fade to Accessibility"-Projekts ein. Wenn du mir auf LinkedIn folgst, weißt du bereits, dass ich mich seit geraumer Zeit damit beschäftige, einen KI-gestützten Website-Grabber mit JavaScript zu entwickeln. Das Ziel? Automatische Barrierefreiheit im Astro-Framework! Verpasse keine meiner Entwicklungen und abonniere den Kanal, um immer up-to-date zu bleiben. Aktiviere die Glocke, damit du keine meiner Tutorials verpasst! In diesem Video öffne ich meine lokale Entwicklungsumgebung am 5. Mai und teile einen Einblick in mein Open-Source-Projekt. Falls du Zugriff möchtest oder dich für den Code interessierst, melde dich gerne bei mir unter roland@nevercodealone.de. Schalte in den Entwicklungsmodus mit 'npm run astrodef verbose' und begleite mich durch den Prozess. Sieh selbst, wie der Website-Grabber arbeitet, HTML-Markup reduziert und barrierefreie Inhalte generiert. Dank der Integration von Claude 3 können wir Inhalte in verschiedenen Sprachen und Stilen ausgeben, ohne die ursprüngliche Seite zu ändern! In kommenden Videos werde ich detailliert auf die Programmierung eingehen. Hast du bereits Ideen, wie du KI und deine Websites nutzen möchtest? Lass es mich in den Kommentaren wissen! 00:00 Einleitung Fade to Accessibility Projekt mit Roland Golla 00:47 Terminal Run Astro DB im Development Verbose Mode 01:46 Website Grabber auf dem Linux Terminal mit Claude 3 in JSON API umwendeln 02:29 Claude 3 Large Language Model in Javascript verwenden und Response auswerten 03:22 Unterschiedliche Sprachen und Varianten in Astro DB Rendern und Ausgeben 04:01 Vorteile eines externen Website Grabbers mit AI Tool Anbindung 05:15 Outro 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.

Part 3: Astro JS mit Headless API aus Sulu CMS verbinden

Review PHP-Schulung

In diesem Video erfahrt ihr, wie ich den Headless-Modus aktiviert habe und Daten von Sulu in Astro integriere. Ich teile mein Wissen gerne in kleinen Schritten direkt hier auf YouTube. Das Astro Framework ist einfach fantastisch, besonders in Bezug auf Tailwind CSS und barrierefreies Webdesign. Wenn ihr meinen Kanal noch nicht kennt, folgt gerne und aktiviert die Glocke, um keine Videos zu verpassen. Wir werfen heute einen Blick auf das Admin-Interface von Suulu, das im Headless-Modus ohne Templates läuft. Dabei nutze ich die JSON-API zur Datenbereitstellung. Wir betrachten ein erstes Hero-Element auf der Startseite und schauen uns an, wie diese Daten im JSON-Format aussehen. Anschließend gehen wir zu Astro und sehen, wie die Landing Pages als Vorlagen funktionieren. Ich zeige euch, wie die Daten von Sulu in Astro gerendert werden und gehe dabei auf die Implementierung von fetch-Requests ein. Außerdem erläutere ich, wie ich die Daten strukturiere und an die verschiedenen Komponenten in Astro weitergebe. Dabei nutze ich Best Practices und zeige euch einige fantastische Möglichkeiten von AstroWind. Ich hoffe, dieses Video hilft euch, einen ersten Eindruck davon zu bekommen, wie man mit Astro und einem Headless CMS arbeiten kann. Mein Ziel ist es, euch das Thema leicht verständlich näherzubringen. 00:00 Astro JS Api Connection zu lokalen Sulu CMS aufbauen 00:56 Headless CMS API Data Provider mit dem Sulu CMS für Hero Component 01:40 JSON Request für Headless Content Management System 03:13 API Connection mit Astro JS Framework und Public Environment Variables 04:21 Data Fetching im Astro Index File von einem Sulu Block Element 06:19 Hero Component mit Daten aus JSON von der API Rendern 06:58 Zusammenfassung 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.