nextjs
nextjs
css
CSS units - which one should be used and when
CSS units decide how responsive and accessible your site is. A practical tour of px, em, rem, vh, vw and friends: what absolute, relative, and viewport based units really do, plus a short opinionated guide on which unit to pick for fonts, spacing, and layout.
react
How to work with metadata in NextJS?
Metadata in NextJS drives SEO and social sharing. How to define static metadata with the metadata export, build consistent titles with templates, inherit and override values across routes, and generate dynamic metadata from fetched data.
Latest
What is the difference between Layout and Template in NextJS
Layout and template in NextJS look interchangeable but behave differently: a layout preserves state across navigation while a template remounts and rebuilds it on every visit. Code examples of both, plus guidance on when each one is the right choice.
How to deep equal in Javascript?
Deep equality in JavaScript is trickier than it looks: JSON.stringify fails when key order differs. Compare the real options: the deep-equal package, writing your own recursive check, lodash isEqual, and Node's built-in assert.deepStrictEqual.
BiomeJS - A 35x faster alternative to Prettier for formatting and linting
BiomeJS formats and lints JavaScript, TypeScript, JSX, and JSON up to 35x faster than Prettier, with almost 97% compatibility. How to install it, migrate your Prettier config to biome.json, and cut minutes off CI without changing how your code looks.
Event bubbling in Javascript and React
Event bubbling in JavaScript and React: how a click travels from the target element up the DOM tree, what benefits that gives you, and why React does not really bubble events but simulates them with its synthetic event system.
What is THIS word in Javascript
What 'this' means in JavaScript: why its value depends on how a function is called, how setTimeout callbacks break your assumptions, and how bind, call, and apply put you back in control, shown with simple Dog and Cat examples.
How to send files from Javascript/React to a Ruby on Rails API Controller
Sending files from JavaScript or React to a Rails API: build a FormData object with the file and extra params, POST it with fetch, then read params[:file] in your controller. A minimal frontend plus backend walkthrough that works.
When you don't need to use useState in React
Three cases where React's useState is unnecessary: read inputs with useRef, submit forms with the FormData pattern, and keep state in the URL with useSearchParams. Code snippets show each alternative and when it beats state.
React Code splitting using lazy load techniques
React code splitting with React.lazy and Suspense: break a growing bundle into chunks users download only when needed, with a walkthrough of lazy imports, fallback UI, and why smaller initial loads help user experience and SEO.
How to deal with infinite scroll in React
Infinite scroll in React gets much easier with react-query: the useInfiniteQuery hook fetches posts page by page, cancels stale requests with AbortSignal, and exposes fetchNextPage for loading more. A complete typed example wrapped in a reusable usePosts hook.
Understanding generic types in Typescript
Generic types in TypeScript let one function, class, or interface work safely with many data types. What generics are, how a type parameter beats hardcoding a concrete entity type in a validation helper, and honest pros and cons before you use them everywhere.
Enums with Typescript - why it's bad? Possible solutions
TypeScript enums generate extra JavaScript at compile time and numeric enums are not even type-safe. Why enums can hurt bundle size and correctness, and two safer alternatives: assigning explicit string values or replacing enums with plain objects.
Map vs WeakMap in practice
Map vs WeakMap in JavaScript comes down to keys and memory: WeakMap only accepts object keys and lets garbage collection reclaim unused entries, while Map holds onto everything. Differences, similarities, and practical guidance on when each one is the right choice.