Webentwicklung
Hier findest du schnelle Tipps und Tutorials zur Webentwicklung, erstellt mit ❤️ von DasPeTe.
Bereiche
Vue.js
Reaktive Oberflächen mit Vue 3 und der Composition API.
CSS
Layouts und Styling-Techniken, die auf jedem Bildschirm funktionieren.
Backend
APIs und Server: der Teil des Webs, den deine Nutzer nie sehen.
CMS
Inhalte in einem CMS verwalten und Websites darauf bauen.
DevOps
Server, Container und Deployments: alles zwischen deinem Code und der laufenden Website.
Alle Tutorials
Einfaches API-Fetch-Composable
So erstellst du ein einfaches API-Fetch-Composable in Vue.js
Fortgeschritten40 Min.
Responsive Karten-Grids mit CSS Grid
Baue ein Karten-Layout, das sich ohne einen einzigen Breakpoint an jeden Bildschirm anpasst, und richte die Inhalte aller Karten mit Subgrid aneinander aus.
Einsteiger15 Min.
Eine kleine REST-API mit Hono bauen
Erstelle mit Hono eine Quest-Tracker-API in TypeScript: Routen, Statuscodes und Eingabeprüfung, alles in einer kleinen Datei.
Einsteiger20 Min.
Teil 1: Manablox installieren und dein CMS anlegen
Installiere Node.js, pnpm und Docker, lege mit einem Befehl ein Manablox-Projekt an und richte dein Admin-Konto ein.
Einsteiger25 Min.
Rootless Docker: Docker ohne Root unter Linux
Installiere Docker auf einem Linux-Host so, dass der Daemon und jeder Container als dein eigener Benutzer laufen statt als root, und lerne die paar Dinge kennen, die anders funktionieren.
Einsteiger25 Min.
Teil 1: Fastify trifft GraphQL Yoga
Richte ein TypeScript-Projekt ohne Build-Schritt ein, setz GraphQL Yoga auf einen Fastify-Server und schick ihm deine ersten Queries.
Fortgeschritten20 Min.
Einfache Lokalisierung
So schreibst du ein einfaches Lokalisierungs-Composable für Vue.js
Fortgeschritten25 Min.
Teil 2: Ein gestaltetes Portfolio ohne Code
Leg deinen ersten Space als fertiges Portfolio an, wähl ein Theme und ein Design, und sieh deine Website laufen.
Einsteiger20 Min.
Teil 2: Eine Datenbank mit PostgreSQL und Drizzle
Starte PostgreSQL in Docker, beschreib die Tabellen des Gildenbretts in TypeScript mit Drizzle, leg sie mit einer Migration an und füll sie mit Beispieldaten.
Fortgeschritten25 Min.
Vite | Tailwind | PrimeVue Setup
So richtest du ein Vue.js-Projekt mit Vite, Tailwind und PrimeVue ein
Einsteiger30 Min.
Teil 3: Füll das Portfolio mit deiner Arbeit
Lade Bilder hoch, mach aus den Beispielprojekten deine eigenen, bearbeite die Abschnitte deiner Seiten und gib der Website deinen Namen und deine Farben.
Einsteiger35 Min.
Teil 3: Erst das Schema, typisiert von Codegen
Schreib das GraphQL-Schema des Gildenbretts, lass GraphQL Codegen daraus die Typen der Resolver erzeugen, beantworte Queries aus PostgreSQL und finde das N+1-Problem im SQL-Log.
Fortgeschritten25 Min.
Deine ersten Vue-3-Composables
Lerne, wiederverwendbare Logik aus Komponenten herauszulösen: vom einfachen Zähler bis zu einem useFetch, das veraltete Anfragen abbricht.
Fortgeschritten30 Min.
Teil 4: Dein eigenes Frontend mit Astro
Lies deine Inhalte über die öffentliche API, leg eine Astro-Website an, die sie zeigt, und stell den Space auf dein eigenes Frontend um.
Einsteiger30 Min.
Teil 4: Bündeln mit DataLoader
Sammle die Abfragen eines Requests mit DataLoader und beantworte sie mit einer Abfrage pro Tabelle, sodass das Questbrett drei SQL-Abfragen braucht statt sechzehn.
Fortgeschritten25 Min.
Teil 5: Layout, Hero und Projektkarten
Gib der Astro-Website ein Layout mit Kopf- und Fußbereich, einen großen Hero, Projektkarten mit Titelbildern und eine richtige Projektseite.
Einsteiger40 Min.
Teil 5: Mutations und Live-Updates mit Subscriptions
Schreib Quests mit Mutations aus, nimm sie an und erledige sie, schick jede Änderung über Server-Sent Events an die Clients, die sie abonniert haben, und halt den Cache von DataLoader in langlebigen Subscriptions frisch.
Fortgeschritten30 Min.
Teil 6: Galerie, Kontakt und der letzte Schliff
Gestalte die übrigen Abschnitte, ergänze einen Inhaltstyp um ein Feld für einen Kontaktknopf, beschreib deine Seiten für Suchmaschinen und bau die Website für den Betrieb.
Einsteiger40 Min.
Teil 6: Subscriptions über mehrere Instanzen mit Valkey
Starte eine zweite Instanz der API, sieh zu, wie ihre Abonnenten die Events der ersten verpassen, und teil die Events über Valkey, damit jede Instanz jede Änderung mitbekommt, selbst nach einem Neustart von Valkey.
Fortgeschritten20 Min.
Teil 7: Bring dein Portfolio online
Miete einen Server, richte deine Domain darauf und betreib dort das CMS, die öffentliche API und deine Astro-Website mit Docker und automatischem HTTPS.
Fortgeschritten45 Min.
Teil 7: Ganze Antworten in Valkey cachen
Cache komplette Query-Ergebnisse mit dem Response-Cache von Yoga in Valkey, räum sie ab, wenn Mutations die Daten ändern, beantworte wiederholte GET-Requests mit 304 und halt die API am Laufen, wenn der Cache ausfällt.
Fortgeschritten25 Min.
Teil 8: Query-Limits und Persisted Operations
Schütz die API mit einem Tiefenlimit und einem Kostenlimit vor Operationen, die zu tief oder zu teuer sind, und beschränk sie mit Persisted Operations auf die Operationen deiner eigenen Clients.
Fortgeschritten25 Min.