4 posts tagged with "frontend"

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.

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.

When working in a React application with API calls, handling redirects in the middle of the request chain can be tricky.