Latest in Frontend
Frontend guides on React, the DOM, and browser behaviour — component patterns, rendering quirks, and the JavaScript that ties a UI together.
Modern JavaScript features you can use in Node.js 26
A batch of genuinely useful JavaScript additions is now unflagged in Node.js 26: Set operations (union, intersection, difference), lazy iterator helpers, RegExp.escape, Promise.try, Array.fromAsync, and Float16Array. Here's each one with real, verified output.
Temporal: the modern way to handle dates in Node.js
JavaScript's broken Date object finally has a replacement. Temporal — Stage 4 in ES2026 and enabled by default in Node.js 26 — brings immutable date/time types, real time-zone support, and sane arithmetic. Here's how to use it, with examples and the polyfill for older environments.
The HTTP QUERY method: GET semantics with a request body
The new HTTP QUERY method (RFC 10008, 2026) gives you the safe, idempotent, cacheable semantics of GET with the request body of POST — ideal for large or structured read operations. Here's its status, browser and server support, and a form + fetch + Node example you can actually test.
How to set up Tailwind CSS v4
Tailwind CSS v4 is CSS-first: no tailwind.config.js, no @tailwind directives, and automatic content detection. Here's how to set it up with Vite, PostCSS, or the CLI, customize your theme with @theme, and migrate from v3.
How to Use Quill (with react-quill-new) and Distinguish <ul> vs <ol> Lists Using getSemanticHTML()
Quill internally renders both bullet and numbered lists as <ol> elements, which can break list semantics when saving content. Using getSemanticHTML() with react-quill-new ensures your exported HTML correctly distinguishes between <ul> and <ol>.
TypeScript-friendly useSize from @react-hook/resize-observer.
Here's a version that is TypeScript-friendly... And not just that, it's a complete file you can put in your project and import from your components:
import useResizeObserver from "@react-hook/resize-observer" import { useLayoutEffect, useState } from "react" const useSize = (target:any) => { const [size, setSize] = useState<DOMRectReadOnly>() useLayoutEffect(() =>...Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record | URLSearchParams | undefined'.
Here's the full error as shown by TypeScript:
const fd = new FormData(form); const values = new URLSearchParams(fd).toString(); Argument of type 'FormData' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'. Type 'FormData' is missing the following properties from type 'URLSearchParams': size, sort...Group in a group with TailwindCSS.
group classes. Imagine having a main menu dropdown group, where top level elements are groups, and sub-level elements are groups as well. You might be tempted to use something like this:<ul class="relative"> <li class="group"> Top level item <ul class="hidden group-hover:block"> <li class="group"> Sub level items will be here <ul class="hidden group-hover:block"> <li>Sub-sub level item 1</li> <li>Sub-sub level item 2</li> <li>Sub-sub level item 3</li> </ul> </li> </ul> </li> </ul>Another day, another TypeScript challenge with useRef.
Today I got this:
Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'. Type 'MutableRefObject<HTMLInputElement | undefined>' is not assignable to type 'RefObject<HTMLInputElement>'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not assignable to type 'HTMLInputElement | null'.ts(2322)clearTimeout or clearInterval in React Native views with React Navigation
useFocusEffect to the rescue
useFocusEffect is a special hook from @react-navigation/native,...Next.js ChunkLoadError: Loading chunk failed after deploying.
ChunkLoadError after you deploy to production. Moreover, the frontend becomes blank white and you see Application error: a client-side exception has occurred (see the browser console for more information). The issue seems to be here for a while, and it looks like no-one knows which part exactly is responsible for the error (Next.js or Webpack or both), but the workaround is present.Here are the steps that helped in my situation:
Your TypeScript project can't find
expo/tsconfig.base, although you are sure it is there (besides, the project works just fine). Here's the fix.You probably use VS Code, am I right? Then, restart your IDE. Yes, simple as that...