Static-Sites

Implement Dark Mode in Vanilla CSS (Zero JavaScript)

You can build a solid dark mode using only the prefers-color-scheme media query and CSS Custom Properties (variables). This CSS-first approach gives users a flash-free theme switch. It also keeps your site’s code clean, light, and free of JavaScript.

Why Avoid JavaScript for Dark Mode

Most dark mode tutorials reach for JavaScript to toggle a class on <body>. It feels like the obvious fix. You add a button, read a preference from localStorage, and apply a class. It works well enough in demos. But in production, on real hardware and real networks, this approach breaks in ways worth knowing about before you commit to it.

Building a Progressive Web App from Scratch with Vanilla JavaScript

A Progressive Web App requires just three things beyond your existing website: a Web App Manifest JSON file that defines the app’s name, icons, and display mode; a service worker that intercepts network requests for offline support and caching; and HTTPS hosting. Add these to any site with plain JavaScript - no React, Angular, or framework needed - and browsers will offer an install prompt, enable push notifications, and cache your app for offline use. The entire setup can be done in under an hour with three files.

The Best Static Site Generators for Your Blog in 2026

In 2026, the web has returned to its roots: speed, simplicity, and security. Static Site Generators (SSGs) are now the top pick for bloggers. You can focus on content and skip the worry about database holes or slow load times. These tools turn plain Markdown (.md) files into fast static HTML, so your blog is quick, SEO-friendly, and easy to host. Once it’s live, you can speed up repeat visits with a service worker that serves pages instantly from the browser cache.

Build Interactive Charts in Hugo without JavaScript

Can you build interactive charts in Hugo without any JavaScript? Yes - by using Hugo shortcodes that transform CSV or JSON data into styled SVG graphics at build time. This “Zero-JS” approach produces charts that render instantly, work in every browser environment including RSS readers and print, and score significantly better on the page-speed metrics Google ranks on than anything built with Chart.js or D3.js .

The Problem with Client-Side Charting Libraries

Chart.js is excellent software. So is D3.js. But both carry a tax that static blog authors rarely think about until they run their first Lighthouse audit.

Hugo Builds: Parallel Rendering, Image Cache, Fingerprinting

Hugo is one of the fastest static site generators ever built. That speed only holds when the project is set up well. A fresh Hugo site compiles in milliseconds. A production site with three hundred posts, SCSS pipelines, and hundreds of hero images can balloon past thirty seconds per build. Image caching, asset pipelines, and CI setup must be tuned with care.

This guide covers every layer of Hugo speed. It walks through the parallel render engine in recent versions, the image pipeline, CSS and JS bundling with fingerprints, WebAssembly modules for heavy client-side work, and CI/CD caching tricks. The goal is to make GitHub Actions and Cloudflare Pages builds as fast as local dev. Before you change any settings, run time hugo in the repo root to get a baseline. Measure each tweak against that number.

Core Web Vitals: Fix LCP, CLS, and INP

To pass all three Core Web Vitals, target three numbers. Get LCP under 2.5 seconds by preloading your hero image and cutting server response time. Get CLS under 0.1 by reserving explicit dimensions for all media. Get INP under 200ms by breaking long JavaScript tasks into smaller chunks. Diagnose all three with Chrome DevTools, Lighthouse, and the CrUX Dashboard for real-user field data.

Why Core Web Vitals Matter for SEO and User Experience

Google added Core Web Vitals to its ranking algorithm in 2021, and their weight has grown since. The March 2026 core update brought holistic CWV scoring. Google now aggregates performance data across your whole domain rather than judging it page by page. If 30% of your indexed pages fail LCP thresholds, that drags down the site-wide score even when your homepage is fast.