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.
Static-Sites
Cross-Document View Transitions: Animate Between Full Page Navigations Without JavaScript
Python Markdown Blog: 100 Lines of Code
You can build a working static site generator in about 100 lines of Python. The result reads Markdown files from a content directory, parses their YAML front matter, converts the Markdown to HTML, wraps everything in Jinja2 templates, and writes the output to a public/ folder ready to be served by any web server. It is the same fundamental pipeline that powers tools like Hugo
, Jekyll
, and Eleventy
- just stripped down to the essentials so you can see exactly how the pieces fit together.
CSS Anchor Positioning: Replace Floating UI With CSS
CSS Anchor Positioning is a browser-native feature that pins any absolutely-placed element to another element in the document. No JavaScript required. With the anchor() function, position-anchor property, and @position-try rules, you can build tooltips, dropdown menus, and context menus in pure CSS and HTML. It now works in Chrome 125+, Firefox 132+, and Safari 18.2+, which covers about 91% of browser traffic. Pair it with the HTML popover attribute (Baseline 2024) and you get show/hide toggling, keyboard dismissal, and top-layer stacking for free. The JavaScript tooltip library is dead for most use cases.
Web Font Subsetting: Cut Payload by 90% with Variable Fonts
By subsetting a variable font with pyftsubset to include only the Unicode ranges and OpenType features your site actually needs, and serving it as a WOFF2 file with the CSS unicode-range descriptor, you can reduce web font payload by 70-85%. A typical setup drops a 300 KB variable font to under 40 KB while keeping full weight and italic axis support for every glyph you actually use. This post walks through the entire process from font selection to CI integration.
Self-Host Plausible Analytics: 1 KB Script, No Cookies
You can run a self-hosted Plausible Analytics
instance on a $6/month VPS. It uses Docker Compose and a Caddy
reverse proxy for automatic HTTPS. The whole process takes under 30 minutes. Once it runs, you add one <script> tag to your site and you’re done. No cookie banners, no personal data collected. The tracking script weighs under 1 KB gzipped. It stores everything in a ClickHouse
database on your own server, and gives you a clean, fast dashboard for your traffic.
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.
Botmonster Tech




