Dave Rupert is a front-end engineer at Microsoft, web components specialist, and co-host of the ShopTalk Show podcast. He shares insights on modern HTML, CSS, and web development through talks, writing, and community events.
18 articles from this blog
MicroLighter is a tiny client-side syntax highlighter using CSS Custom Highlights API, with on-demand Textmate grammars and light-dark themes.
A web developer discusses solving CSS @layer ordering issues for web components by using a shadow-piercing technique to style local component variables from global stylesheets.
CodePen 2.0 is released with a new editor, file system, versioning, and deployments for better prototyping.
A guide to finding curated public domain images from the late 1800s, with recommended resources like The Public Domain Review and Artvee.
A CSS workaround using @scope to hide empty slots in Chromium web components, solving the ghost gap issue.
Explores the potential of small language models (SLMs) in browsers, highlighting benefits like privacy, low cost, and offline use.
Explores how AI-generated code leads to cognitive overload and burnout, comparing it to industrial bottlenecks.
A critique of sharing AI chatbot screenshots, highlighting sycophancy, asymmetry of thought, and preference for human ideas over LLM outputs.
Analysis of how prioritizing speed over communication in tech projects leads to collaboration breakdowns, technical debt, and system fragmentation.
A technical article on using CSS light-dark() for adaptive themes, including a trick for inverted themes with style queries.
Critique of AI's 'frictionless' promise, arguing human expertise and collaboration remain essential despite automation hype.
Explores the concept of 'skills' in agentic AI, comparing them to 'magic numbers' in programming and discussing their inconsistent, opaque nature.
A developer explains why they are giving up on building apps that rely on external APIs due to access issues, ethical concerns, and platform risks.
A developer details the major design refresh of their personal website, focusing on a monospace font, named CSS grid lines, and multi-page view transitions.
Explores using nested CSS contrast-color() to create accessible focus rings, comparing it to alternative methods like light-dark().
Explores using CSS contrast-color() and if() statements to create more nuanced, color-harmonious hover states by adjusting lightness instead of mixing black/white.
Explains how to use CSS contrast-color() with design system colors, including a workaround for current browser support.
Explores using CSS contrast-color() for algorithmic hover states and accessible color systems in web design.
