Tag: Frontend
36 posts
-
Finding and Fixing Slow React Renders: memo, useMemo, useCallback, Code Splitting and Profiling
Measure React re-renders with DevTools and the Profiler API, then fix them with React.memo, useMemo, useCallback, virtualization and code splitting.
-
Vue 3 from API to Internals: Composition API, Proxy Reactivity, VDOM Patching and Compiler Hints
End-to-end Vue 3 guide: Composition API, Proxy reactivity, Virtual DOM patching, compiler optimizations, and production patterns for real apps.
-
React from Usage to Internals: Fiber Reconciliation, Diffing, Hooks and Concurrent Rendering
React from everyday APIs to internals: Fiber reconciliation, key-based diffing, hooks on fibers, automatic batching, transitions, Suspense, streaming SSR and what React 19 changed.
-
Playwright E2E Testing: Auto-Waiting Locators, Route Mocking, Auth State and Sharded CI
End-to-end testing with Playwright: projects, auto-waiting locators, route mocking, auth storage state, sharded CI, trace viewer, and how the runner.
-
shadcn/ui in Practice: Owning Copied Components, Tailwind v4 Theming, asChild and Forms
What shadcn/ui's copy-in model means for updates, CLI init and add, Tailwind v4 CSS-variable theming, Radix accessibility, asChild and react-hook-form + zod.
-
SolidJS Reactivity in Practice: Signals, Components That Run Once, and the Props Destructuring Trap
How SolidJS reactivity works: signals as getters, why destructuring props breaks updates, createMemo vs createEffect, <For> vs map, stores and routing.
-
Building Components in Isolation with Storybook: Stories, Args and Controls, Decorators, Docs and Tests
Component-driven development with Storybook: writing stories, component states, args and controls, decorators, addons, documentation, interaction testing and deployment.
-
Svelte 5 Runes Deep Dive | Reactivity Rebuilt from Scratch
How Svelte 5 runes replace implicit reactivity: $state, $derived, $effect, $props, $bindable, snippets, runes in .ts files, and migrating from Svelte 4.
-
TanStack Query v5 in Practice: Query Keys, staleTime vs gcTime, Mutations and SSR Hydration
How TanStack Query v5 behaves: query keys as dependencies, staleTime vs gcTime, isPending vs isLoading, invalidation, optimistic rollback and SSR hydration.
-
Native Web Components: Custom Elements, Shadow DOM, Templates, Events and Framework Integration
Building reusable UI with Web Components: custom elements, Shadow DOM, HTML templates, properties and events, a modal dialog example, and using them inside frameworks.
-
Qwik and Resumability: Instant-Loading Apps with routeLoader$, routeAction$ and Qwik City
Building instant-loading web apps with Qwik: how resumability differs from hydration, event handling, stores, routeLoader$ and routeAction$, Qwik City routing, and lifecycle hooks.
-
Preact as a 3KB React Alternative: Hooks, Signals, preact/compat and Where It Differs
Building fast web apps with Preact: core concepts, hooks, React compatibility via preact/compat, Signals, routing, server-side rendering, and the differences from React that matter.
-
Peer-to-Peer Video with WebRTC: Signaling, RTCPeerConnection, Data Channels and TURN in Production
Building real-time peer-to-peer apps with WebRTC: a signaling server, RTCPeerConnection, a complete video call, data channels, screen sharing, media controls and production considerations.
-
Pinia in Vue 3: Setup vs Option Stores, storeToRefs, Stores Outside Components, SSR and Testing
How Pinia behaves in real Vue 3 apps: setup vs option stores, why destructuring loses reactivity, the no active Pinia error, $reset, SSR hydration, plugins and tests.
-
esbuild in Practice: CLI and JS API, Watch Mode, Plugins and Dual ESM/CJS Library Builds
Bundling and transforming JavaScript and TypeScript with esbuild: the CLI and Node.js API, watch mode and dev server, plugins, library builds for ESM and CJS, and the transform API.
-
Lit 3 Web Components: Reactive Properties, Attribute Converters, Shadow DOM Styling and Lifecycle Pitfalls
How Lit 3 components behave in practice: properties vs state, attribute converters, shadow DOM styling, update lifecycle traps, SSR caveats and React interop.
-
Building Charts with D3.js: Scales, Axes, Bar and Line Charts, Transitions and React
Building interactive charts with D3.js: SVG basics, scales, bar and line charts, tooltips, transitions, a scatter plot with brushing, and integrating D3 with React.
-
Styling React with Emotion: css Prop vs styled, Theming, SSR and How It Compares to Tailwind
Style React apps with Emotion. Covers the css prop, styled components, theming, keyframes, global styles, server-side rendering, and performance tips.
-
Alpine.js: Reactive UI in HTML Markup with x-data, x-show and Transitions
Alpine.js for reactive UIs with minimal JavaScript: core directives, component state, transitions, Ajax examples, and how it compares to Vue and React for small interactive pieces.
-
Zustand in React and TypeScript: Stores, Selectors, persist/devtools/immer and Next.js SSR
Manage React state with Zustand: typed stores, selectors that avoid re-renders, persist, devtools and immer middleware, and store setup for Next.js SSR.
-
What TypeScript 5 Changed: Standard Decorators, satisfies, const Type Parameters and Migrating from 4
TypeScript 5's major changes: the standard decorators proposal, the satisfies operator, const type parameters, performance improvements, and how to migrate from TypeScript 4.
-
Vite for Frontend Projects: Config, Env Variables, Assets, HMR, Plugins and Library Mode
Using Vite for modern frontend development: project structure, vite.config.ts, environment variables, asset handling, HMR, plugins, library mode and multi-page apps.
-
How Webpack 5 Builds a Bundle: Dependency Graph, Tapable Hooks, Loaders, Splitting and Tree Shaking
Webpack 5 deep dive: dependency graph, Tapable hooks, loader pipeline, code splitting, tree shaking, and production caching.
-
WebSocket vs SSE vs Long Polling
WebSocket, SSE or long polling? Node.js examples of each, SSE for AI streaming, reconnect logic, the WebSocket handshake and frames, and scaling concerns.
-
React Hooks Pitfalls: Stale Closures, Effect Loops, Fetch Races and Useless Memoization
Why hook bugs happen: stale closures, effect loops, fetch races, and memoization that does nothing, explained through the render model, with fixes and the Strict Mode behavior that exposes them.
-
Svelte 5 Runes: $state, $derived, $effect, Snippets and Migrating from Svelte 4
What changed in Svelte 5: runes ($state, $derived, $effect, $props), snippets replacing slots, event handling, shared reactive state in .svelte.ts files, and migrating from Svelte 4.
-
Tailwind CSS v4 in Practice: Utilities, Responsive Layouts, State Variants, Dark Mode and Themes
Style UIs with Tailwind CSS v4: utilities, responsive breakpoints, flex and grid, state variants, dark mode, CSS theme tokens, and cn() for conditional classes.
-
ESLint 9 Flat Config: Migrating from .eslintrc, typescript-eslint, Prettier and Custom Rules
Setting up ESLint 9 with the flat config system: migrating from .eslintrc, TypeScript and framework setups, working alongside Prettier, writing custom rules, and CI integration.
-
React Animations with Framer Motion: Variants, Gestures, Exit and Layout Animations
Animating React UIs with Framer Motion: transitions, variants, gesture animations, AnimatePresence exit animations, page transitions in Next.js, layout animations, and performance tips.
-
Chakra UI in React: Layout Primitives, Theming, Dark Mode and Accessible Components
Chakra UI v3 in React: style props and layout, Field with React Hook Form, createSystem tokens and recipes, dark mode via next-themes, and removed v2 APIs.
-
Babel Setup for Legacy Browser Support: Presets, Plugins, Polyfills and Bundler Integration
Babel for older browsers: how preset-env reads browserslist, syntax transforms vs core-js polyfills, transform-runtime for libraries, and Babel 8 changes.
-
Angular for Enterprise Apps: Components, Services, DI, Signals and Standalone Components
Modern Angular with standalone components: DI and services, HttpClient, routing, typed reactive forms, Signals vs RxJS, and NullInjectorError fixes.
-
Building an Admin Dashboard with Ant Design: Forms, Tables and Theming
Ant Design v5 admin screens in React: Form instances and rules, typed Table columns, server-side paging, design tokens, and static message pitfalls.
-
Forms with React Hook Form: register, Zod Validation, Controller and Field Arrays
Building fast forms with React Hook Form: register and handleSubmit, validation, Zod integration, watch and control, Controller for custom inputs, and dynamic field arrays.
-
Building a Design System on Tailwind CSS v4: Tokens, Primitives and Class Conflicts
Tokens with @theme, semantic colors and dark mode, @utility vs @layer components, why dynamic classes vanish, and how tailwind-merge tames overrides.
-
HTML and CSS Basics: How the Browser Builds the DOM, Applies the Cascade and Lays Out Your First Page
Learn HTML and CSS by how browsers actually work: DOM parsing, semantic elements, the cascade and specificity, box-sizing, margin collapse and the viewport tag.