- CSS
- Responsive Design
- Component Design
Build Component-Responsive Layouts with CSS Container Queries
Use CSS container queries to switch a component based on its own available width, making reusable cards more responsive than viewport-only rules.
Articles
Web development articles
Practical notes that explain implementation steps, the reasons behind each choice, and the boundaries most likely to cause problems.
- CSS
- Responsive Design
- Typography
Design Responsive Type Sizes with CSS clamp()
Use CSS clamp() to define minimum, fluid, and maximum type sizes without multiplying media queries, while keeping text readable.
- CSS
- Design Systems
- Custom Properties
Manage Theme Values with CSS Custom Properties
Learn how to manage colors, spacing, and typography with CSS custom properties so component values stay consistent.
- CSS
- Gradients
- JavaScript
Design and Implement a CSS Gradient Generator
Design a CSS gradient generator with linear and radial gradients, color stops, CSS output, and copy handling.
- Canvas API
- WebP
- JavaScript
Convert and Compress WebP Images in the Browser with Canvas API
Use file reading, Canvas conversion, quality control, transparency, and Blob downloads to make a browser-only WebP converter.
- WCAG
- Accessibility
- CSS
Calculate Color Contrast Ratios Under WCAG
Use the color contrast checker implementation to understand relative luminance, WCAG thresholds, and boundary cases.
- Cloudflare Pages
- Functions
- Security
Validate Contact Input in Cloudflare Pages Functions
Validate JSON, lengths, Origin, request size, and error responses at a Cloudflare Pages Functions contact endpoint.
- Astro
- SEO
- JSON-LD
Implement BlogPosting and BreadcrumbList Structured Data in Astro
Generate BlogPosting and BreadcrumbList JSON-LD in a shared Astro head component and verify the built HTML.
- Astro
- Content Collections
- Publishing
Safely Manage Drafts and Publish Dates with Astro Content Collections
Use draft and pubDate validation to keep unpublished Astro posts out of lists, static routes, and sitemaps.
- JavaScript
- i18n
- UX
Implement a Browser-Language Notice Without Forced Redirects
Detect browser language, offer a non-modal language notice, and respect a visitor choice with localStorage.
- SEO
- i18n
- Astro
canonical, hreflang, and x-default for Multilingual Sites
Set self-referencing canonicals, language URLs, and x-default consistently to prevent multilingual URL and reference mistakes.
- Astro
- i18n
- Multilingual sites
Build a Multilingual Astro Site While Keeping Japanese URLs
Use Astro i18n with Japanese as the default URL structure and English under /en/ without changing existing Japanese URLs.
- Git
- Commits
- Workflow
How to Commit Only Selected Files in Git
Stage only selected files and inspect the staged diff to prevent unrelated changes from entering a Git commit.
- Cloudflare
- robots.txt
- SEO
Checking Cloudflare Content Signals Added to robots.txt After Deployment
A record of comparing the repository-managed robots.txt with the public response and confirming Cloudflare-managed content.
- Cloudflare Pages
- Security
- Environment Variables
How to Separate Environment Variables and Secrets in Cloudflare Pages Functions
A practical way to decide which contact-form settings can reach the browser and which must remain as secrets.
- Astro
- Google Analytics
- Web Performance
Loading GA4 in Astro Only Once and Only on Production
An implementation record of initializing GA4 once in a shared head component while keeping non-production hosts out of measurement.
- Cloudflare Turnstile
- Cloudflare Pages
- Security
Validating Cloudflare Turnstile Server-Side for a Contact Form
An implementation record of explicitly rendering Turnstile and confirming its token with Siteverify in a Pages Function.
- Cloudflare Pages
- Cloudflare Email Service
- Security
Sending Contact Form Email with a Cloudflare Pages Function and the Email Service REST API
An implementation record that separates contact-form validation, Turnstile verification, and Email Service REST API calls.
- Cloudflare
- Email Routing
- DNS
Forwarding Custom-Domain Email to an Existing Mailbox with Cloudflare Email Routing
A record of setting up inbound email forwarding for a custom domain, while keeping it separate from the contact form's sending path.
- Cloudflare Pages
- DNS
- Astro
Connecting a Domain Registered with XServer Domain to Cloudflare DNS and Pages
A record of checking the registrar, Cloudflare DNS, Cloudflare Pages, and Astro's canonical URL setting separately.
- Astro
- Cloudflare Pages
- HTTP
Why Missing URLs Can Return 200 on Cloudflare Pages and How Astro Handles 404s
A record of adding an Astro 404 page and verifying both the visible error screen and the HTTP status in production.
- Astro
- Quality Assurance
- SEO
Pre-Publish Checks for an Astro Blog: HTML, Links, and Metadata
Verify static generation, output HTML, internal links, metadata, and structured data before publishing an Astro blog, separating recorded results from general checks.
- Git
- Conventional Commits
- Workflow
Conventional Commits and Practical Commit Scope for Solo Development
Use Conventional Commits prefixes, reviewable change boundaries, and short-lived branches to keep a solo project's history understandable and reversible.
- Astro
- Image Optimization
- Web Performance
Image Optimization and WebP Delivery with Astro's Image Component
Manage formats, dimensions, and responsive image sizes with astro:assets, prevent image-related CLS, and verify WebP output in generated HTML.
- TypeScript
- REST API
- Error Handling
REST API Error-Handling Patterns for Frontend Applications
Classify network failures, HTTP errors, and invalid responses, then separate finite retry policy from actionable UI notifications.
- CSS
- Tailwind CSS
- Responsive Design
Practical Flexbox vs. CSS Grid: Headers and Card Layouts
Use Flexbox for one-dimensional headers and CSS Grid for two-dimensional card lists, with Tailwind examples and mobile-safe layout constraints.
- TypeScript
- Web Storage
- Browser API
Choosing Between localStorage and sessionStorage and Building a Safe Wrapper
Use Web Storage safely in SSR projects, validate parsed JSON, and distinguish unavailable storage, quota failures, and serialization errors in TypeScript.
- Astro
- SEO
- OGP
Designing Reusable SEO Meta Tags and OGP Images in Astro
Manage canonical URLs, meta descriptions, Open Graph data, and Twitter cards safely in one Astro component for both static and article pages.
- TypeScript
- Fetch API
- API
A Type-Safe Fetch Wrapper for External APIs in TypeScript
Design a TypeScript fetch wrapper that distinguishes HTTP errors, invalid JSON, and response-shape mismatches while performing runtime validation.
- Astro
- Cloudflare Pages
- Deployment
Deploying a Static Astro Site to Cloudflare Pages
Deploy Astro static output through Cloudflare Pages Git integration, configure a custom domain, and verify build output, canonical URLs, and production settings separately.
- Tailwind CSS
- Astro
- Markdown
Styling Markdown Beautifully with Tailwind CSS Typography
Use Tailwind CSS 4 and the Typography plugin to make headings, code, links, and long-form Markdown content readable in an Astro site.
- Astro
- TypeScript
- Content Collections
Astro Content Collections: Building a Robust, Type-Safe Blog with Zod
Learn how to validate Markdown frontmatter with Astro 7 Content Collections, keep dates and tags consistent, and retrieve article lists with reliable inferred types.