Svg

Generating SVG Graphics with AI

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.

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.

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.