Web Dev

Modern web development from someone who builds it. CSS, JavaScript, web standards, and the patterns that actually scale.

Python Markdown Blog: 100 Lines of Code

You can build a working static site generator in about 100 lines of Python. The result reads Markdown files from a content directory, parses their YAML front matter, converts the Markdown to HTML, wraps everything in Jinja2 templates, and writes the output to a public/ folder ready to be served by any web server. It is the same fundamental pipeline that powers tools like Hugo , Jekyll , and Eleventy - just stripped down to the essentials so you can see exactly how the pieces fit together.

WCAG 2.2 Web Forms: Error Handling, Validation, ARIA

Accessible web forms start with semantic HTML and use ARIA only to fill gaps native elements can’t reach. Use aria-live for error announcements and aria-describedby to link messages to fields. Following WCAG 2.2 AA ensures every user can perceive, navigate, and complete your forms using only a keyboard.

Most form accessibility failures are not caused by missing ARIA. They come from developers skipping basic HTML semantics like labels and fieldsets. Patching this damage with ARIA often makes things worse. The W3C’s first rule is simple: no ARIA is better than bad ARIA. Misapplied roles or redundant labels create noise instead of clarity.

Monorepo Management with Turborepo: A Practical Guide

Turborepo is a fast build system for JavaScript and TypeScript monorepos. It uses content-aware caching, parallel tasks, and smart dependency ordering. The result: multi-package repos that stay fast to work with. You define workspace packages in a pnpm-workspace.yaml file, then add a turbo.json that declares task dependencies and caching rules. Turborepo handles the rest. Running turbo run build only rebuilds packages whose source files changed. Cache hits restore build outputs in milliseconds instead of minutes.

Type-Safe APIs with Pydantic v3 and FastAPI: A Best Practices Guide

Pydantic v3 shipped in late 2025. It has a new Rust-backed core and a fresh model system. With FastAPI 0.115+, you get auto request checks, fast JSON output, and OpenAPI 3.1 docs. No manual schema work. Data errors get caught at the API edge. Client SDKs come from the live spec. The check overhead that used to be a bottleneck is now mostly gone.

This guide walks through what changed in v3, how to lay out a production project, the validation patterns to know, and what deployment looks like when you care about speed.

CSS Anchor Positioning: Replace Floating UI With CSS

CSS Anchor Positioning is a browser-native feature that pins any absolutely-placed element to another element in the document. No JavaScript required. With the anchor() function, position-anchor property, and @position-try rules, you can build tooltips, dropdown menus, and context menus in pure CSS and HTML. It now works in Chrome 125+, Firefox 132+, and Safari 18.2+, which covers about 91% of browser traffic. Pair it with the HTML popover attribute (Baseline 2024) and you get show/hide toggling, keyboard dismissal, and top-layer stacking for free. The JavaScript tooltip library is dead for most use cases.

Implement OAuth 2.0 with PKCE: Flask + GitHub Login

You implement OAuth 2.0 login by using the Authorization Code flow with PKCE (Proof Key for Code Exchange). Your web app redirects the user to the provider’s authorization endpoint with a code_challenge, the user authenticates and consents, the provider redirects back with an authorization code, and your backend exchanges that code along with the code_verifier for an access token. PKCE is mandatory for all OAuth 2.0 clients under the OAuth 2.1 draft specification (currently at draft-ietf-oauth-v2-1-15) and eliminates the need for a client secret in public clients. Building this from scratch - without Auth0, Clerk, or NextAuth - takes roughly 200 lines of code and teaches you exactly how token exchange, session management, and token refresh actually work.

AltStyle によって変換されたページ (->オリジナル) /