Web Dev

A WebSocket chat needs two pieces. The server holds open connections and sends each message to every client. The browser client opens a socket, sends text on form submit, and shows new messages in the page. This build uses Node.js with the ws library and plain JavaScript on the client. No React, no Socket.IO, no build step. The whole thing fits in under 150 lines and handles dozens of users at once on a cheap server. This tutorial walks through every part.

You can expose a local dev server to webhooks from GitHub, Stripe, or Twilio. Run cloudflared next to a FastAPI app. This drops port forwarding, public IPs, and paid ngrok plans. Cloudflare Tunnels open an outbound-only encrypted link from your machine to Cloudflare’s edge. The edge then proxies webhook requests back to your local FastAPI endpoint with full TLS, auto reconnect, and no firewall changes.

The trick works because cloudflared opens QUIC connections outward from your machine. No inbound ports ever open on your router. Cloudflare’s edge gets the webhook POST from GitHub or Stripe. It routes that POST through your tunnel and hands it to localhost:8000, where FastAPI handles it. You get a stable, public URL like webhooks.yourdomain.com that survives reboots.

Pair Meilisearch v1.12’s fast REST API with HTMX 2.0’s hx-get and hx-trigger attributes, and you get a real-time, typo-tolerant search box that returns results in under 50ms. You write no custom JavaScript and pull in no React or Vue. The server renders HTML fragments that HTMX swaps into the DOM, so the whole search box stays under 15 KB of total JS. This post covers the full setup, from Docker Compose to a working search UI with faceted filtering.

Service workers give you a programmable network proxy right inside the browser. They sit between your page and the server, intercept every fetch request, and let you decide whether to serve a response from cache or from the network. For static sites - where every page is a pre-built file and every asset has a predictable URL - this is a natural fit. A well-configured service worker makes your static site load in single-digit milliseconds on repeat visits, work fully offline, and pass every Lighthouse PWA audit. The entire implementation fits in a single JavaScript file under 100 lines.

For precise technical diagrams, prompt an LLM to output SVG or Mermaid.js syntax instead of pixel-based images. This creates lightweight, resolution-independent graphics that search engines can read. Vector formats offer performance and clarity that raster images simply can’t match.

Why SVG? The Case Against Raster Images for Technical Diagrams

Most bloggers use screenshots or PNG exports for diagrams. This habit seems easy but carries hidden costs. A PNG flowchart often weighs 100 KB to 400 KB. In contrast, the same SVG diagram usually stays between 5 KB and 20 KB. This huge difference improves Core Web Vitals metrics like Largest Contentful Paint. Better performance helps your search rankings.

CSS container queries (@container) style a component by the width of its parent, not the browser viewport. Add container-type: inline-size to a parent element. Then write @container (min-width: 400px) { ... } rules on the children. Those children adapt their layout to the space they get, not the screen size. All major browsers have supported them since early 2023: Chrome 105+, Firefox 110+, Safari 16+. As of 2026 they sit at over 96% global support, per Can I Use .