Caring isn't just a nicety, it's a productivity multiplier.

This is the first of a series of posts about the most common mistakes in Frontend development. This is the most common mistake I see in React projects.

This post explains what the Single Responsibility Principle (SRP) is and why it's important for React components. It shows how putting too much code and too many tasks in one component can lead to messy, hard-to-maintain apps.

Cookies are tiny key–value blobs with rules. Chrome enforces those rules rigorously: where the cookie applies (domain/path), when it’s sent (request matching + SameSite), how it’s protected (Secure/HttpOnly), and how long it survives (expiry/eviction). This post walks through the full lifecycle, browser behavior, sharp edges, and production patterns—with TypeScript examples.

• Use server-set, Secure; HttpOnly; SameSite=Lax cookies for auth.
• Scope deliberately with domain and path; avoid accidental overlaps.
• Understand SameSite (and partitioning) for cross-site flows.
• Keep cookies small, few, and purposeful.

The Compound Component Pattern has become a popular approach in React for building flexible, reusable components. You'll often see it in two flavors: separate exports (<SelectTrigger />) or dot notation (<Select.Trigger />). But like any pattern, it comes with significant trade-offs. Let's explore both sides.

When you need to inspect, modify, or replay HTTP(S) traffic, few tools are as powerful and flexible as mitmproxy.
It's open-source, scriptable in Python, and works seamlessly as a man-in-the-middle proxy.

A guide for macOS developers who want to use Claude CLI without installing Node.js globally. The post demonstrates how to set up a local Claude CLI installation using mise for Node version management, configure a shell function in .zshrc for easy access, and solve the common issue where Claude CLI loses the current working directory context. This approach keeps your global system clean while making Claude CLI available from any project directory.

This article explores the growing significance of linguistic precision and thorough understanding of foundational knowledge in the context of AI and software development, highlighting the historical importance of clear communication in the field and the relevance of Agile methodologies in the AI era. It also outlines the skills needed to effectively work with AI and navigate the evolving landscape of web development and other tech-related fields.

In software development, managing dependencies and state is crucial for ensuring deterministic behavior: for any given input, we aim for a consistent output (This is a key reason behind the growing hype for functional programming, as it emphasizes immutability and stateless functions, simplifying the management of dependencies and state). However, as the number of inputs and modules increases, so does the complexity of handling them, potentially leading to a higher risk of bugs—unintended outcomes. To mitigate this, it's essential to minimize and manage dependencies effectively, acknowledging that they can introduce similar challenges by increasing system interconnectedness and potential failure points.

The following article ("Stop testing your code!") made me think about the benefits of testing beyond Bug Cacthing.

Diving into the world of tests reveals a multitude of benefits beyond the obvious ones (like ensuring functionality integrity and catching bugs early). Let's break down some of these benefits and then touch upon common mistakes that can undermine these advantages.

Vite, Next Generation Frontend Tooling

The Vite project is a modern, fast front-end build tool that significantly improves the development experience for web projects. Created by Evan You, the creator of Vue.js, Vite leverages modern web standards such as native ES modules (ESM) to enable lightning-fast server start-up and hot module replacement (HMR). Here's a quick rundown of its core features and philosophies:

• Instant Server Start: By using native ESM, Vite starts its server in milliseconds, allowing developers to begin working on their project almost immediately after running the start command.
• Hot Module Replacement (HMR): Vite provides out-of-the-box support for HMR, which means changes you make in your code can be reflected in the browser without needing a full page reload.
• Optimized Build: For production builds, Vite uses Rollup under the hood. This combination allows for highly optimized output that's both efficient and scalable.
• Rich Plugin Ecosystem: Vite supports a wide range of plugins, enabling integration with various frameworks (Vue, React, Svelte, etc.) and tools (TypeScript, PostCSS, etc.), enhancing its versatility.
• Built-in Features: It comes packed with features like TypeScript support, CSS pre-processing, and more, all configured to work out-of-the-box.