🌐 Frontend Dev

Auth.js: Authenticate with Custom Credentials

The Auth.js Credentials provider lets you authenticate against your own system, like a user database. It's for when OAuth isn't an option and you need full control. The footgun: you are entirely responsible for the security of the login logic.

Design System Adoption: A Product, Not a Project

Treat your design system like a product with users (your teams), not a one-off project. This is crucial when launching a new system to ensure teams actually use it. The biggest footgun is assuming 'if you build it, they will come.'

Media Source Extensions: The Engine for Web Streaming

MSE lets you build streaming video players in JavaScript by feeding media chunks to a <video> element, instead of a single file URL. It's the foundation for adaptive streaming like DASH/HLS.

JSON Web Tokens (JWTs): Stateless API Passports

A JWT is a digitally signed passport for your web session, letting a server verify your identity without a database lookup on every request. It's used for stateless API authentication. The footgun: its payload is readable, so never store secrets there.

SvelteKit Prerendering: Build-Time HTML for Faster Sites

SvelteKit prerendering creates static HTML files at build time for instant loads. It's ideal for content that doesn't change per user, like marketing pages or blog posts. The main footgun: unlinked pages won't be found unless you explicitly list them.

Vercel: The Frontend Cloud Platform

Vercel turns your Git repo into a live, globally-scaled app. It's a CI/CD pipeline, server, and CDN in one, ideal for deploying Next.js apps with automatic previews for every PR.

The RFC Process: Formalizing Technical Decisions

An RFC (Request for Comments) is a formal document for proposing a major technical change, creating a public record of the decision. It's used for big shifts like adding a new design system component or changing a core API.

SvelteKit Server-Only Modules: Keep Your Secrets Secret

SvelteKit's server-only modules are a firewall for your code, preventing sensitive data like API keys from ever being bundled for the browser. Use them for database clients or secret logic.

Declaration Files: How TypeScript Knows Your Library's Shape

A .d.ts file is a type-only blueprint for existing JavaScript code, describing its shape without any implementation. This is how TypeScript provides type-checking for third-party libraries or browser APIs. The footgun is adding logic to them; it's ignored.

Next.js Environment Variables: Server vs. Browser

Next.js environment variables separate server secrets from public browser config. Use them for API keys or database strings. The key footgun is exposing secrets by forgetting to prefix browser-accessible variables with NEXT_PUBLIC_.

Web Workers: Offload Heavy Tasks from the UI Thread

Web Workers run JavaScript on a background thread, preventing heavy tasks from freezing your UI. Use them for complex calculations or data processing that shouldn't block rendering.

ISR: Static Speed for Dynamic Content

Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.

easy1 min read

DefinitelyTyped: Type Definitions for JavaScript Libraries

@types packages from DefinitelyTyped are instruction manuals for JavaScript libraries, letting TypeScript understand their shapes. You install them for JS libs that lack their own types, enabling autocompletion.

Session Authentication: JWT vs. Database

Session auth gives users an ID after login. A JWT is a self-contained ID card with their data; a database session is a library card pointing to their record. The key trade-off: JWTs are fast but can't be easily revoked, while database sessions are revocable.

CSS Nesting: Grouping Related Styles

CSS nesting groups related styles like folders for files. Instead of repeating parent selectors, you write child rules inside the parent. This is great for component-based styling, but over-nesting creates specificity headaches that are hard to override.

intermediate1 min read

Angular NgModules: Organizing Legacy Code

Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.

TypeScript's Module Resolution Strategy

TypeScript's moduleResolution is the compiler's search plan for finding files behind import statements. It's crucial when mixing module types (ESM/CJS) or targeting Node.js vs. the browser. The footgun is assuming the default node works for modern ESM.

OAuth 2.0: Delegated Access, Not Shared Passwords

OAuth 2.0 lets users grant limited access to their data without sharing passwords. It's used when a third-party app needs to read your Google Calendar. The common footgun is mistaking it for authentication (logging in); it's for authorization.

Fix Ragged Text Lines with `text-wrap: balance`

Fix awkward text wrapping in headings. text-wrap: balance tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.