Astro & CSS
Eliminating Layout Shifts in Astro View Transitions
How to avoid subtle 15px horizontal shifts and bounding box distortions when transitioning between static pages in Astro.
#astro#view-transitions#web-perf#css
Digital Garden • Page 1 of 2
Notes, Snippets & Mental Models
A lightweight digital garden for atomic thoughts, CSS subgrid mental models, OKLCH theming, PWA caching recipes, and production debugging notes.
Design Systems
Configuring Custom OKLCH Themes with DaisyUI 5 and Tailwind CSS v4
How to construct accessible, high-contrast dark and light themes using OKLCH color space and CSS @plugin directives in Tailwind v4.
#daisyui#tailwindcss#oklch#css
PWA & Edge
Zero-Config Offline PWA Caching Patterns for Static Sites
How to combine Stale-While-Revalidate service workers with Astro static site generation for sub-10ms offline page loads.
#pwa#service-worker#offline#web-perf
SEO & Structured Data
Programmatic Schema.org JSON-LD Generation in Astro
How to automatically generate Google rich-result Person, WebSite, BlogPosting, and Service schemas using Astro Content Collections and Zod schemas.
#seo#schema-org#json-ld#astro
TypeScript
Advanced TypeScript Utility Patterns
Compact snippet for creating deeply immutable types and type-safe key transformations.
#TypeScript#Generics#TypeLevel
CSS
CSS Subgrid Mental Model
Align card headers and footers across independent grid tracks without layout hacks.
#CSS#Subgrid#Layout