My Notes

The compound component pattern allows you to create components that work together while sharing implicit state. Key points: use React.Children.map for iteration, cloneElement for prop injection, and context for deeply nested children. Remember to export both the parent and child components.

Jul 28, 2026

Always define colors as semantic tokens, not raw values. Use primary, secondary, accent, destructive, muted, etc. Map tokens to CSS custom properties. Ensure WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text). Dark mode should invert lightness, not hue.

Jul 22, 2026 (edited Jul 23, 2026)

tRPC provides end-to-end type safety without code generation. Define your router with procedures (query, mutation, subscription). Use Zod for input validation — it integrates seamlessly. The client infers types from the router definition. Middleware can be used for auth checks.

Jul 12, 2026 (edited Jul 14, 2026)

Render props are still useful when you need to share behavior between components without HOCs. However, custom hooks have replaced most render prop use cases. Render props shine when you need inversion of control — letting the consumer decide how to render the UI while the provider handles the logic.

Jul 26, 2026 (edited Jul 27, 2026)

Use auto layout for everything — it makes designs responsive by default. Key shortcuts: Shift+A to add auto layout, hold Ctrl when resizing to ignore constraints. Use spacing mode for tight layouts and space-between for navigation bars. Nested auto layouts are the key to complex responsive designs.

Jul 20, 2026

Gradient descent is an optimization algorithm that iteratively moves toward the minimum of a function. Learning rate controls step size — too large and you overshoot, too small and convergence is slow. Stochastic GD uses random subsets (mini-batches) for faster training. Adam optimizer combines momentum and RMSprop for adaptive learning rates.

Jul 18, 2026 (edited Jul 19, 2026)

Step 1: Brainstorm seed keywords. Step 2: Use tools to find related terms. Step 3: Analyze search volume, difficulty, and intent. Step 4: Group keywords by topic clusters. Step 5: Prioritize by business impact and ranking potential. Focus on long-tail keywords for new sites.

Jul 8, 2026

D3 scales map data values to visual values (pixels, colors). scaleLinear for continuous data, scaleBand for categorical. Always set domain (data range) and range (pixel range). Axes are generated from scales using axisBottom, axisLeft, etc. Use transition() for smooth updates.

Jul 2, 2026 (edited Jul 3, 2026)

Server components run only on the server — no client-side JavaScript. They can directly access databases and filesystems. Use the client directive to opt into client components. Server components cannot use useState, useEffect, or browser APIs. They are great for static content and data fetching.

Jul 30, 2026 (edited Aug 1, 2026)

Top of funnel: Blog posts, social media, infographics — awareness stage. Middle of funnel: Case studies, whitepapers, webinars — consideration stage. Bottom of funnel: Free trials, demos, testimonials — decision stage. Map content to each stage and measure with appropriate metrics.

Jul 6, 2026