Web Dev

You can build a fully working Markdown editor with synchronized live preview using a <textarea> for input, the marked library for parsing, and a debounced input event listener that re-renders on every keystroke. The whole thing fits in under 100 lines of vanilla JavaScript and CSS, with no build tools , no framework, and no npm install. One index.html file, one CDN script tag, double-click to open in a browser, and you are writing Markdown with a rendered preview next to your cursor.

Drop @view-transition { navigation: auto; } into your stylesheet. Modern browsers will then cross-fade between same-origin page loads on their own. No SPA router, no fetch() interception, no JS framework needed. Add view-transition-name to shared elements like hero images, headings, or nav bars, and the browser morphs them between separate HTML documents. This works today in Chrome 126+, Edge 126+, and Safari 18.2+. Firefox support lands through the Interop 2026 push.

Combine HTMX (version 2.0.4, about 14KB gzipped) with Alpine.js (version 3.15.9, about 17KB gzipped). You get a full interactive web stack for 31KB total. No Webpack. No Vite. No Node.js. No build step. Drop two <script> tags in your HTML, sprinkle a few attributes on your markup, and let any backend serve HTML fragments. That’s the whole setup.

The split is clean. HTMX drives server-side partial updates. Alpine.js covers light client reactivity. The server returns HTML, not JSON. The browser swaps it into the page. Alpine.js attributes in the markup handle toggles, dropdowns, and modals. No compile step sits between you and your running app.

CSS subgrid lets a nested grid inherit its parent’s track sizes. Child elements inside nested components line up with the parent layout. No flat HTML, no JavaScript height math, no hardcoded min-heights. It shipped in every major browser by late 2023, sits at about 92% global usage, and is safe on any modern web project today.

Ever fought a card grid where the buttons won’t line up because one card has a longer description? Subgrid is the fix you’ve been waiting for.

Passkeys swap passwords for a public/private keypair kept in the device keychain and unlocked by Face ID, Touch ID, or Windows Hello. The WebAuthn API does the crypto work, while @simplewebauthn/server version 13.3.0 covers Node, Bun, and Deno backends. Sign-up, autofill login, and account recovery all fit in one evening of work.

What Passkeys Actually Are and Why 2026 Is the Year to Ship Them

A passkey is a public/private keypair made on the user’s device. The private key never leaves the secure enclave (Secure Enclave on Apple hardware, StrongBox on Android, TPM on Windows). Only a signed challenge travels over the wire. Your server stores no shared secret to steal and no hash to crack offline. The signature is bound to your domain, so it can’t be phished. If a user visits examp1e.com instead of example.com, the browser refuses to sign. Credential phishing ends at the protocol layer.

I’ll show you how to build a real URL shortener in under 200 lines of Python. We’re going to use FastAPI for the web layer, SQLite for storage, and base62 encoding for short codes. I’ll walk you through a redirect endpoint, a click counter, and rate limiting with SlowAPI . In my experience, this simple stack handles millions of links on one server.

Architecture and Tech Stack Choices

Before I write any code, I want to walk you through why I picked this stack. Picking the wrong stack for a small project either over-engineers it or under-builds it. I’ve seen systems fall over at a few hundred users, and I want to help you avoid that.