Writing on front-end architecture & AI
Web components, Lit, micro frontends, linting, Content Security Policy, and hands-on AI with MCP and LangChain.
- Lit & Web Components
Building Web Components Story-First with Storybook
The most useful shift we made with our Storybook web components setup was a change of mindset: from “add a story…
13 min read
AI Unleashed (Part 3): Build A Prompt Interface (UX) For Your Agent
In this post we will design a simple UX to build upon the previous posts where we set up an MCP…
3 min read
AI Unleashed (Part 2): Connect Your Langchain AI Agent to an MCP Server
Ready to make your AI agent smart enough to use real tools? In this post, we’ll build a Langchain-powered agent that…
4 min read
AI Unleashed (Part 1): Build Your First MCP Server
In this post, we explore how to build a Model Context Protocol (MCP) server using FastAPI. In future posts, we’ll build an AI agent that communicates with this MCP…
4 min read
- Linting
Modern Linting in 2025: ESLint Flat Config with TypeScript and JavaScript
Clean, consistent, and secure code is essential—especially in modern web applications where performance, accessibility, and maintainability intersect. With ESLint’s flat…
7 min read
- CSP & Security
HTML Linting for a Robust Content Security Policy
Maintaining a strict Content Security Policy can be quite challenging. Ensuring a robust linting policy is in place can help keep your codebase free from any potential…
2 min read
Master Micro Frontends with Lit-Element – Part 2
Micro Frontends are a design pattern that allow teams a way to break down monolithic applications into smaller independent modules, improving development speed,…
9 min read
Master Micro Frontends with Lit-Element – Part 1
Micro Frontends are a design pattern that allow teams a way to break down monolithic applications into smaller independent modules, improving development speed,…
4 min read
- CSP & Security
Preventing Content Security Policy violations with ESLint
Content Security Policy (CSP) stands as an essential element in bolstering the security of web applications. In this article, I will demonstrate different approaches for…
6 min read
- CSP & Security
Enhancing CSP with ESLint: Preventing Unsafe setAttribute “style” usage
Content Security Policy (CSP) is a crucial component for securing web applications. One common practice is to disallow the use of the ‘setAttribute(“style”, …)’ command,…
2 min read
- Lit & Web Components
Separate Lit-Element and lit-html templates.
The article will demonstrate a technique to separate lit-html code, typically housed within the render method, into an external .html…
4 min read
- Build tooling
How to concatenate files using Rollup
This code defines a Rollup plugin called rollup-plugin-concat to concatenate multiple files into a single output file. It has been built…
4 min read
- Lit & Web Components
Find all focusable elements in a document including all Shadow DOM’s
This article illustrates the process of locating all focusable elements, even if they are within nested Shadow DOM. Additionally, it provides guidance on filtering…
3 min read
- Lit & Web Components
How to decouple custom elements with versioning
Custom elements offer many advantages, but they have a significant downside: versioning. Since custom elements are defined globally, if multiple micro…
4 min read
- Lit & Web Components
How to use named anchors with the Shadow DOM
Using named anchors to navigate to specific sections of a page is a simple concept, but it can become more complicated when dealing with shadow DOM. Fortunately, this…
2 min read
- Lit & Web Components
How to capture Shadow DOM events
Shadow DOM events behave differently to traditional events. Under normal circumstances, when an event is captured the e.target will contain a…
3 min read