Web Development
Here you can find quick tips and tutorials about web development created with ❤️ by DasPeTe.
Areas
Vue.js
Reactive interfaces with Vue 3 and the Composition API.
CSS
Layouts and styling techniques that hold up on every screen.
Backend
APIs and servers: the part of the web your users never see.
CMS
Manage content in a CMS and build websites on top of it.
DevOps
Servers, containers and deployments: everything between your code and the running site.
All tutorials
Fetching From an API With Composables
Build a small fetch client and a generic composable for REST entities in Vue 3: lists with paging, search and sorting, single items, saving and deleting, with loading states, errors and no race conditions.
Intermediate40 min
Responsive Card Grids with CSS Grid
Build a card layout that adapts to any screen without a single breakpoint, and line up the content of every card with subgrid.
Beginner15 min
Build a Small REST API with Hono
Create a quest tracker API in TypeScript with Hono: routes, status codes and input validation, all in one small file.
Beginner20 min
Part 1: Install Manablox and Create Your CMS
Install Node.js, pnpm and Docker, create a Manablox project with one command and set up your admin account.
Beginner25 min
Rootless Docker: Run Docker Without Root on Linux
Install Docker on a Linux host so that the daemon and every container run as your own user instead of root, and learn the few things that work differently.
Beginner25 min
Part 1: Fastify Meets GraphQL Yoga
Set up a TypeScript project that runs without a build step, put GraphQL Yoga on a Fastify server and send it your first queries.
Intermediate20 min
Localization Without a Library
Translate a Vue 3 app with one small composable instead of a library: typed keys, placeholders, plurals through Intl.PluralRules, numbers in the reader’s format, and one language shared by every component.
Intermediate25 min
Part 2: A Designed Portfolio Without Code
Create your first space as a ready-made portfolio, pick a theme and a design, and see your website running.
Beginner20 min
Part 2: A Database With PostgreSQL and Drizzle
Start PostgreSQL in Docker, describe the tables of the guild board in TypeScript with Drizzle, create them with a migration and fill them with sample data.
Intermediate25 min
Vue With Vite, Tailwind CSS and PrimeVue
Set up a Vue 3 project with TypeScript and Vite by hand, file by file, then add Tailwind CSS and PrimeVue and make them share their colors and dark mode.
Beginner30 min
Part 3: Fill the Portfolio With Your Work
Upload pictures, turn the example projects into your own, edit the sections of your pages, and give the site your name and colors.
Beginner35 min
Part 3: Schema First, Typed by Codegen
Write the GraphQL schema of the guild board, let GraphQL Codegen generate the resolver types from it, answer queries from PostgreSQL and find the N+1 problem in the SQL log.
Intermediate25 min
Your First Vue 3 Composables
Learn to pull reusable logic out of your components, starting with a counter and ending with a useFetch that cancels outdated requests.
Intermediate30 min
Part 4: Your Own Frontend With Astro
Read your content through the public API, create an Astro website that shows it, and switch the space over to your own frontend.
Beginner30 min
Part 4: Batching With DataLoader
Collect the lookups of a request with DataLoader and answer them with one query per table, so the quest board needs three SQL queries instead of sixteen.
Intermediate25 min
Part 5: Layout, Hero and Project Cards
Give the Astro site a layout with header and footer, a big hero, project cards with covers and a proper project page.
Beginner40 min
Part 5: Mutations and Live Updates With Subscriptions
Post, accept and complete quests with mutations, push every change to subscribed clients over Server-Sent Events, and keep the DataLoader cache from going stale in long-lived subscriptions.
Intermediate30 min
Part 6: Gallery, Contact and the Finishing Touches
Style the remaining sections, add a field to a content type for a contact button, describe your pages for search engines and build the site for production.
Beginner40 min
Part 6: Subscriptions Across Instances With Valkey
Run a second instance of the API, watch its subscribers miss the events of the first, and share the events through Valkey, so every instance hears every change, even after Valkey restarts.
Intermediate20 min
Part 7: Put Your Portfolio Online
Rent a server, point your domain at it, and run the CMS, the public API and your Astro site there with Docker and automatic HTTPS.
Intermediate45 min
Part 7: Caching Whole Responses in Valkey
Cache complete query results in Valkey with the response cache of Yoga, clear them when mutations change the data, answer repeated GET requests with 304, and keep the API up when the cache is down.
Intermediate25 min
Part 8: Query Limits and Persisted Operations
Protect the API from operations that are too deep or too expensive with a depth limit and a cost limit, and lock it to the operations of your own clients with persisted operations.
Intermediate25 min