Posts about browser quirks, UI engineering, and progressive enhancement with a focus on usability and web performance from the perspective of a frontend developer.
Lastest Posts
Last updated: Jun 15, 2024
Displaying Line Numbers in 11ty Code Blocks
Add line numbers to 11ty code blocks with Prism and Markdown-it, bypassing the plugin's DOM-dependency by adjusting the renderer during the build process.
Patterns to Maintain Image Ratios without Layout Shift
Here are some practical patterns for displaying images according to their intrinsic aspect ratios while adhering to good web performance standards.
Image Aspect Ratio & Browser Quirks: Improve CLS Score
Browsers prioritize intrinsic dimensions in image display. This article explores browser image processing through experiments and ways to avoid layout shifts.
Shifting Content: Causes in SSR vs. SPA Rendering
Examining the differences between SSR and SPA rendering and its impact on layout shifts to improve user experience and boost CLS and LCP scores.
Navigating CORS and Cache API for 3rd Party Image Caching
Analysis and post-mortem on resolving a caching issue with third-party images, delving into Cache Storage API, HTTP Headers, Service Workers, and CORS.
Use Intersection Observer instead of Scroll Events
Guide to the Intersection Observer API, explaining its advantages over scroll events and providing practical examples.
How to use Cache-Control: A Guide to HTTP Cache Headers
Understanding HTTP caching: Its impact on web performance and user experience.
Create an Interactive TOC from Markdown-Generated Content
Create an interactive TOC for Markdown in Static Site Generators using the Intersection Observer API.
Adding Lighthouse Scores to Vite & SolidJS Site
Web component to continuously measure site performance with Speedlify.
Diagnosing LCP Issues on my Website
A post-mortem on diagnosing LCP issues on my personal website.
Node.js & PNPM Management on Unix
Guide to Node.js installation, version control, and package management with pnpm for Unix users.
Understanding WebHID and WebUSB: A Guide from Configur.io
Learn from Configur.io's experience, a guide that makes WebHID and WebUSB easy to use in your own web hardware projects.