Botmonster TechBy combining Meilisearch
v1.12’s fast REST API with HTMX
2.0’s hx-get and hx-trigger="keyup changed delay:300ms" attributes, you can build a real-time, typo-tolerant search interface that returns results in under 50ms - without writing a single line of custom JavaScript or pulling in React, Vue, or any frontend framework. The server renders HTML fragments that HTMX swaps into the DOM, keeping the entire search experience under 15 KB of total JS payload. What follows covers the full setup from Docker Compose to a working search UI with faceted filtering.
Meilisearch + HTMX: Sub-50ms Search in 14 KB, No Framework
Service Worker Caching: Network-First, Cache-First, SWR
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.
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.
CSS Container Queries: Build Truly Responsive Components
CSS container queries
(@container) style components based on the width of their parent container instead of the browser viewport. Add container-type: inline-size to a parent element, write @container (min-width: 400px) { ... } rules on the children, and those children automatically adapt their layout based on the space available to them - not the screen size. All major browsers have supported container queries since early 2023 (Chrome 105+, Firefox 110+, Safari 16+), and as of 2026 they sit at over 96% global support according to Can I Use
.
Implement Dark Mode in Vanilla CSS (Zero JavaScript)
You can implement a robust dark mode using only the prefers-color-scheme media query and CSS Custom Properties
(variables). This “CSS-first” approach delivers a completely flash-free experience for users while keeping your site’s codebase clean, lightweight, and JavaScript-independent.
Why Avoid JavaScript for Dark Mode
Most dark mode tutorials reach for JavaScript to toggle a class on <body>. It is the intuitive solution - add a button, read a preference from localStorage, apply a class - and it works well enough in demos. But in production, on real hardware, across real network conditions, this approach has critical failure modes that are worth understanding 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.