Front-end and performance writer — frameworks, CSS, and the craft of building fast, accessible web apps.
An editorial pen name used by the Lycoris Technologies team. How we work .
Takina · · 4 min read Structural typing checks shape, not name — TypeScript treats two differently-named types as compatible if their members match, unlike nominal systems.
Takina · · 4 min read CSS subgrid lets a nested grid item inherit its parent's track sizing, so children can align to the same columns or rows across unrelated containers.
Takina · · 4 min read Content negotiation lets a client and server agree on a response's format, language, or encoding using Accept headers, before any body is sent.
Takina · · 3 min read Import attributes let JavaScript modules declare a resource's expected type at import time, such as JSON — catching mismatches before code runs.
Takina · · 4 min read The :focus-within pseudo-class styles a parent element when any descendant has focus — perfect for highlighting a form field's container.
Takina · · 4 min read The Streams API lets JavaScript process data as chunks arrive instead of buffering it all in memory. How ReadableStream, WritableStream, and pipes work.
Takina · · 4 min read Workspaces let npm and pnpm manage multiple packages in one repository, sharing a single dependency tree and letting packages reference each other locally.
Takina · · 4 min read The CSS field-sizing property lets form controls like textareas grow to fit their content automatically, without JavaScript resize listeners.
Takina · · 5 min read OpenAI's GPT-6 Astra took the #1 spot on Code Arena's WebDev leaderboard, edging Claude Fable 5.1 by 35 points while matching its price. What the result shows.
Takina · · 4 min read The Web Locks API lets JavaScript acquire named locks shared across tabs, so only one tab does work like a token refresh or a write at a time.
Takina · · 3 min read CSS now styles scrollbars natively with scrollbar-color and scrollbar-width, replacing years of vendor-prefixed hacks. Here's how they work.
Takina · · 4 min read CSS color-scheme tells the browser which themes a page supports so native form controls, scrollbars, and UI render in dark mode without extra CSS.
Takina · · 4 min read Biome is a Rust-based linter and formatter that replaces ESLint and Prettier with one faster tool, one config file, and no plugin ecosystem to manage.
Takina · · 4 min read Svelte 5 runes like $state and $derived replace the old reactive-assignment magic with explicit function calls that work anywhere in a file.
Takina · · 5 min read Variance decides when TypeScript accepts Array<Dog> where Array<Animal> is expected — covariant, contravariant, or invariant, explained with examples.
Takina · · 4 min read The CSS accent-color property recolors native checkboxes, radios, and range inputs without replacing them with custom-built controls.
Takina · · 4 min read The inert attribute removes an element and its children from focus, click handling, and screen reader access in one line, without hiding it visually.
Takina · · 4 min read A shallow copy duplicates an object's top-level properties but shares nested references; a deep copy duplicates everything recursively. How to do each.
Takina · · 4 min read Canvas draws immediate-mode pixels you redraw yourself; SVG keeps a live, styleable DOM of vector shapes. Here's how to pick between the two.
Takina · · 5 min read toSorted(), toReversed(), toSpliced(), and with() copy an array instead of mutating it, fixing a long-standing footgun in JavaScript's Array API.
Takina · · 4 min read A variable font packs every weight, width, and style into a single file, controlled with CSS — cutting requests and enabling fluid typography.
Takina · · 3 min read A SharedWorker runs one script shared across every tab and window of the same origin — a single background thread they can all connect to and message.
Takina · · 4 min read BEM and utility-first CSS (Tailwind's model) solve the same styling problem in opposite ways. How each works, and when to reach for one over the other.
Takina · · 5 min read shape-outside lets text wrap around circles, polygons, and image silhouettes instead of a floated element's rectangular box. How it works, with examples.
Takina · · 5 min read Zod infers static TypeScript types directly from its schemas; Yup was built for JavaScript form validation first. How the two approaches differ.
Takina · · 4 min read Bun and Deno both aim to replace Node.js with a faster, more batteries-included runtime. How their runtimes, tooling, and compatibility differ.
Takina · · 5 min read A .d.ts file describes a library's types without its implementation. How TypeScript declaration files work, and how to write one for an untyped JS package.
Takina · · 4 min read CSS trig functions like sin(), cos(), and atan2() let you compute angles and coordinates directly in stylesheets, no JavaScript required. How they work.
Takina · · 4 min read A TypeScript tuple is a fixed-length array where each position has its own type. How tuples work, labeled elements, and when to use them over arrays.
Takina · · 5 min read ResizeObserver watches an element's size; IntersectionObserver watches its visibility. Both replace scroll/resize listeners — here's when to use each.
Takina · · 3 min read overscroll-behavior stops scroll chaining and pull-to-refresh bounce at a container's edge. How the property works and when to use it.
Takina · · 4 min read Most regex engines backtrack through an NFA; a few compile to a DFA instead. The difference explains why some patterns hang forever and others never do.
Takina · · 4 min read Astro content collections give markdown and MDX files a type-safe schema and a query API, catching bad frontmatter at build time instead of runtime.
Takina · · 4 min read The Server-Timing HTTP header exposes backend performance metrics — database time, cache hits — directly in the browser's DevTools network panel.
Takina · · 4 min read CSS pseudo-classes like :valid, :invalid, :required, and :user-invalid style form feedback natively, without JavaScript watching every keystroke.
Takina · · 6 min read Runway unveiled Solaris, an 'Interface World Model' that renders interactive apps frame by frame with no code. How it works, the benchmarks, and the caveats.
Takina · · 4 min read JavaScript private class fields use a # prefix to enforce true encapsulation at the language level, hiding state that closures and underscores never could.
Takina · · 5 min read The CSS contain property tells the browser an element's layout, paint, or size won't affect the rest of the page — unlocking safe, targeted rendering shortcuts.
Takina · · 4 min read An index signature lets a TypeScript type describe objects whose keys aren't known in advance. How the syntax works, and when to reach for a Record instead.
Takina · · 4 min read The overflow property controls what happens when content doesn't fit its box. A rundown of visible, hidden, scroll, auto, and clip — and when to use each.
Takina · · 3 min read The CSS filter property applies blur, brightness, contrast, grayscale, and other graphical effects directly to an element, no image editor required.
Takina · · 4 min read JavaScript's iterator helper methods bring map, filter, and take directly to iterators, so lazy sequences no longer need a library or a manual loop.
Takina · · 4 min read JavaScript's Reflect object mirrors fundamental object operations as functions, designed to pair with Proxy traps and simplify metaprogramming.
Takina · · 4 min read The Navigation API gives JavaScript a structured way to intercept and control browser navigations — a modern alternative to the History API.
Takina · · 4 min read CSS @supports lets a stylesheet test whether a browser supports a property or selector before using it. How feature queries work and when to reach for them.
Takina · · 3 min read Array.sort() converts elements to strings by default, so numbers sort out of order. Here's why, and how a compare function fixes it.
Takina · · 4 min read WebTransport is a browser API for low-latency, bidirectional client-server messaging over HTTP/3. How it works and when to reach for it.
Takina · · 4 min read Outline and border both draw lines around an element, but only one affects layout. Here's when to use each, including for accessible focus states.
Takina · · 5 min read Next.js patched two critical unauthenticated RCE flaws — an AVIF image bug and a Windows path traversal. Update to 16.3.3 or 15.5.24 now. What's affected.
Takina · · 5 min read The BroadcastChannel API lets same-origin tabs, windows, and workers pass messages to each other instantly, with no server round trip or polling.
Takina · · 4 min read useMemo caches a computed value; useCallback caches a function reference. Both skip work on re-render, but they memoize different things.
Takina · · 4 min read position: sticky toggles between relative and fixed based on scroll position within its containing block — no JavaScript scroll listener required.
Takina · · 4 min read Robots.txt tells crawlers what not to fetch; sitemap.xml tells them what exists. How the two files work together, and where each one fails.
Takina · · 4 min read React's Context API passes data through the component tree without manually threading props at every level — and where it stops being the right tool.
Takina · · 4 min read setTimeout runs a callback once after a delay; setInterval repeats it on a fixed cadence — but drifts under load in ways setTimeout recursion avoids.
Takina · · 4 min read TypeScript is JavaScript plus a compile-time type system — same runtime, different guarantees. Where each one wins and how they fit together.
Takina · · 4 min read A devcontainer defines a project's dev environment as code — tools, extensions, and dependencies — so every contributor gets an identical setup.
Takina · · 3 min read JavaScript's Set object now has built-in union, intersection, difference, and subset methods — replacing manual loops for combining collections.
Takina · · 5 min read Top-level await lets a JavaScript module pause at import time without wrapping code in an async function. How it works and when it bites.
Takina · · 4 min read A design token is a named, platform-agnostic value — a color, spacing unit, font size — that keeps design and code in sync across a product.
Takina · · 5 min read Hydration re-runs a framework's JS to attach interactivity after render; resumability serializes state so the browser can skip that work.
Takina · · 4 min read Node's cluster module forks whole processes to use every CPU core; worker_threads share memory inside one process. How to pick between them.
Takina · · 3 min read grid-auto-flow: dense reorders grid items to fill leftover gaps automatically — how it works, when to use it, and the accessibility tradeoff it hides.
Takina · · 5 min read Nx and Turborepo both speed up monorepo builds with caching and task graphs — the real difference is scope, plugins, and how much structure you want.
Takina · · 4 min read Strict mode turns silent JavaScript mistakes into thrown errors and closes off unsafe legacy behavior. Modules and classes use it by default.
Takina · · 4 min read Stale-while-revalidate serves a cached response instantly while fetching a fresh one in the background, so no request waits on the network.
Takina · · 4 min read BigInt is JavaScript's built-in type for whole numbers beyond Number's safe limit. How the syntax works, what it can't do, and when you actually need it.
Takina · · 4 min read Semantic HTML elements like nav, article, and main describe meaning, not just appearance, improving accessibility and SEO. How to use them.
Takina · · 4 min read esbuild, Rollup, and webpack all bundle JavaScript, but trade off speed, configurability, and output shape differently. Which fits which project.
Takina · · 4 min read JavaScript frees memory automatically by tracking reachability, not reference counts. How the mark-and-sweep algorithm works and what causes leaks anyway.
Takina · · 4 min read Long polling holds an HTTP request open until new data arrives, faking real-time updates without a persistent connection. How it works and when to use it.
Takina · · 3 min read Reflow recalculates layout; repaint just redraws pixels. Why the difference matters for animation performance and how to avoid triggering reflow.
Takina · · 4 min read requestAnimationFrame schedules work right before the next repaint; requestIdleCallback runs only when the browser is otherwise idle. When to use each one.
Takina · · 4 min read Micro-frontends split one web app into independently deployable pieces owned by separate teams. How the pattern works, and its real tradeoffs.
Takina · · 4 min read The line-clamp property truncates text to a fixed number of lines and adds an ellipsis, without JavaScript or a fixed-height container.
Takina · · 4 min read Media queries respond to the viewport size; container queries respond to a component's own container. When to reach for each in a responsive layout.
Takina · · 4 min read Node's Buffer class holds raw binary data outside the V8 heap, letting Node handle files, sockets, and streams efficiently. Here's how it works.
Takina · · 3 min read CSS @scope limits selectors to a subtree of the DOM, giving native scoped styling without the specificity wars of global stylesheets.
Takina · · 4 min read ArrayBuffer allocates raw binary memory; typed arrays like Uint8Array give it a numeric type and view. How JavaScript handles binary data directly.
Takina · · 4 min read oklch(), hsl(), and rgb() define color differently in CSS. How each works, why oklch is perceptually uniform, and when to reach for which.
Takina · · 4 min read INP measures how long a page takes to visually respond to a click, tap, or keypress. What it counts, how it's scored, and how to bring it down.
Takina · · 4 min read CSS blend modes combine an element's colors with what's behind it, using mix-blend-mode and background-blend-mode instead of extra markup or canvas tricks.
Takina · · 5 min read The CSS writing-mode property switches text flow between horizontal and vertical, and it's the foundation logical properties like margin-inline build on.
Takina · · 4 min read A Makefile defines targets, dependencies, and shell commands so `make` only rebuilds what changed. Here's how the rule syntax and dependency graph work.
Takina · · 4 min read tRPC lets TypeScript clients call server functions with full type inference and no schema or codegen step. How it works and where it fits.
Takina · · 4 min read Deno vs Node.js compared: security model, TypeScript support, module resolution, and when each runtime is the better choice.
Takina · · 4 min read Trunk-based development merges small changes into main constantly; Git Flow routes work through long-lived branches. How each affects releases and CI.
Takina · · 5 min read Hoisting moves variable and function declarations to the top of their scope before code runs, which explains some of JavaScript's most confusing bugs.
Takina · · 3 min read CSS color-mix() blends two colors in a chosen color space right in a stylesheet, replacing the color math Sass and JavaScript used to handle.
Takina · · 4 min read The bfcache stores a full, running snapshot of a page in memory so back and forward navigation is instant instead of a fresh load. How it works.
Takina · · 4 min read Server Actions let Next.js run server-side functions directly from client components and forms, without hand-written API routes. How they work.
Takina · · 4 min read CSS :target styles the element whose ID matches the URL fragment, enabling tabs, modals, and highlights with zero JavaScript. How it works, with examples.
Takina · · 4 min read Node.js worker threads run JavaScript on real OS threads in parallel, letting CPU-heavy work run without blocking the event loop.
Takina · · 4 min read CSS transforms move, resize, and rotate elements without triggering layout. How translate, scale, rotate, and skew work, and why they're fast.
Takina · · 4 min read The URL API parses, builds, and validates URLs natively in JavaScript — no regex needed. How URL and URLSearchParams work, with practical examples.
Takina · · 4 min read The Clipboard API lets web pages read and write the system clipboard asynchronously, replacing the old execCommand copy/paste hacks with a real API.
Takina · · 4 min read The Web Share API lets a web page open the device's native share sheet to send text, links, or files to other apps, no clipboard hack required.
Takina · · 5 min read Virtual scrolling renders only the rows visible in the viewport, keeping the DOM small so lists with tens of thousands of items stay smooth.
Takina · · 4 min read Remix and Next.js both extend React with routing and data loading, but differ sharply in rendering model, data fetching, and deployment targets.
Takina · · 4 min read Playwright drives multiple browsers out-of-process via a devtools protocol; Cypress runs its test code inside the browser. How they differ in practice.
Takina · · 3 min read The Web Animations API lets JavaScript create and control animations natively, combining CSS-animation performance with imperative, scriptable control.
Takina · · 4 min read How flex-grow, flex-shrink, and flex-basis actually distribute space in a flex container, with the flex shorthand values worth memorizing.
Takina · · 4 min read The MutationObserver API watches for changes to the DOM — attributes, child nodes, and text — without polling. How it works and when to use it.
Takina · · 3 min read SharedArrayBuffer lets JS threads share raw memory; Atomics provides race-free operations on it. How true multi-threaded data sharing works in JS.
Takina · · 4 min read Astro ships zero JS by default and hydrates only what needs it; Next.js is a full React application framework. How to pick between them.
Takina · · 4 min read A polyfill is code that implements a missing browser feature so older environments behave as if they supported it natively.
Takina · · 5 min read Branded types attach a compile-time-only tag to a primitive so TypeScript rejects mixing values that share a shape but not a meaning.
Takina · · 4 min read flat() flattens nested arrays by a given depth; flatMap() maps then flattens one level in a single pass. How each works and when to pick one.
Takina · · 4 min read The History API lets JavaScript change the URL and manage browser history without a page reload, which is what makes client-side routing possible.
Takina · · 4 min read Zustand is a minimal hook-based store with almost no boilerplate; Redux is a stricter, more structured pattern built for large, predictable state trees.
Takina · · 4 min read Declaration merging lets TypeScript combine multiple declarations of the same name into one — the mechanism behind extending interfaces and global types.
Takina · · 4 min read The App Router uses React Server Components and nested layouts; the Pages Router is Next.js's original file-based model. How they differ and when to pick each.
Takina · · 3 min read The CSS gap property adds space between flex and grid items without margin hacks, and it works identically across both layout modes.
Takina · · 4 min read CSS media queries apply styles conditionally based on viewport size, device features, and user preferences like color scheme or reduced motion.
Takina · · 4 min read Object.freeze() locks an object completely; Object.seal() only stops adding or removing properties. How the two immutability methods differ.
Takina · · 4 min read Abstract classes in TypeScript define shared implementation plus methods subclasses must fill in. How they differ from interfaces and when to reach for them.
Takina · · 3 min read React Suspense lets components pause rendering while they wait on async data, showing a fallback UI instead of manual loading-state juggling.
Takina · · 4 min read The Page Visibility API tells JavaScript when a tab is hidden or visible, so you can pause polling, animations, and timers the user can't see.
Takina · · 4 min read The Beacon API lets a page send one last async request as it unloads, without blocking navigation or racing the browser's page teardown.
Takina · · 4 min read The CSS :not() selector excludes elements matching an argument list from a rule, letting you style everything except specific cases without extra classes.
Takina · · 4 min read A lockfile records the exact dependency versions your package manager resolved, so every install — from your laptop to CI — reproduces the same tree.
Takina · · 3 min read never represents values that can't exist — it marks unreachable code, exhaustive switches, and functions that always throw or loop forever.
Takina · · 4 min read TTFB measures the delay between a browser's request and the first byte of the response — a signal for server, network, and routing latency.
Takina · · 3 min read fetchpriority lets you tell the browser which resources matter most, overriding its default heuristics to load critical assets sooner.
Takina · · 4 min read TypeScript's readonly keyword blocks reassignment at compile time for properties, arrays, and tuples — with no runtime enforcement at all.
Takina · · 4 min read The Intl API formats dates, numbers, and currency using a user's locale without a library. How Intl.DateTimeFormat and Intl.NumberFormat work.
Takina · · 4 min read The prefers-reduced-motion media query detects a user's OS-level motion setting so CSS animations can be toned down or removed for people who need it.
Takina · · 4 min read A backend-for-frontend (BFF) is a dedicated backend layer for one client type — shaping, aggregating, and simplifying calls to shared downstream APIs.
Takina · · 4 min read requestIdleCallback runs low-priority JavaScript when the browser is idle, without blocking rendering, input, or the main thread.
Takina · · 5 min read Turbopack is a Rust-based bundler built for incremental speed; Webpack is the mature, plugin-heavy standard. How they differ and when to pick each.
Takina · · 4 min read HTTP range requests let a client ask for just part of a resource, enabling video seeking, resumable downloads, and partial file fetches over HTTP.
Takina · · 4 min read object-fit controls how an image or video is cropped inside its box, and object-position controls which part of it stays visible. How they work together.
Takina · · 5 min read CSS's four global keywords control where a property's value comes from. How inherit, initial, unset, and revert differ, with a comparison table.
Takina · · 5 min read Promise.all() fails fast, allSettled() waits for every result, and race() returns whichever promise finishes first — how to choose correctly.
Takina · · 4 min read JavaScript's dynamic import() loads a module on demand and returns a promise, letting you split bundles and defer code until it's actually needed.
Takina · · 4 min read The spread operator (...) expands an iterable into individual elements; the rest operator collects elements back into an array. Same syntax, opposite jobs.
Takina · · 4 min read dvh, svh, and lvh fix the classic mobile vh bug where browser toolbars cut off full-height layouts. Here's what each unit measures and when to use it.
Takina · · 4 min read TypeScript's as const assertion locks a value to its literal, readonly type instead of widening it. How it works and when to reach for it.
Takina · · 4 min read The ResizeObserver API lets JavaScript watch an element's box size and react without polling or resize-event hacks. How it works and when to use it.
Takina · · 7 min read Five rust-lang/rust teams ratified an LLM policy: models can analyze and review, but not author contributions. Here's what's permitted, banned, and why.
Takina · · 5 min read A JavaScript memory leak happens when a reference outlives its usefulness and the garbage collector can't reclaim it. Common causes and how to find them.
Takina · · 4 min read localStorage, sessionStorage, and cookies all store data in the browser, but differ in lifetime, size limits, and whether the server can see them.
Takina · · 4 min read repeat() and minmax() let CSS Grid build responsive layouts without media queries. How the two functions combine, and common patterns.
Takina · · 4 min read Import maps let browsers resolve bare module specifiers like "react" to real URLs, enabling native ES module imports without a bundler.
Takina · · 5 min read The Push API lets a web app send notifications through a service worker, even when the site isn't open in a browser tab. Here's the full flow.
Takina · · 4 min read Z-index only compares elements within the same stacking context. What creates a new context, how they nest, and why z-index: 9999 sometimes fails.
Takina · · 5 min read Gzip and Brotli both shrink HTTP responses before they hit the wire. How each algorithm works, and why Brotli usually compresses text tighter.
Takina · · 5 min read How ::before and ::after generate content without extra markup, which properties they need, and common patterns like icons and counters.
Takina · · 5 min read JavaScript destructuring unpacks values from arrays and objects into variables in one expression. How it works, with the rest and spread operators.
Takina · · 4 min read How JavaScript determines what this refers to: default, implicit, explicit, and new binding, plus why arrow functions behave differently.
Takina · · 5 min read Type guards are functions and checks that narrow a TypeScript union to a specific type at runtime. How typeof, instanceof, in, and custom guards work.
Takina · · 4 min read HTTP status codes are three-digit responses that tell a client what happened to its request. A practical tour of the codes that actually matter.
Takina · · 4 min read The Popover API gives HTML a built-in popover element with the popover attribute — top-layer rendering, light-dismiss, and no JavaScript required.
Takina · · 5 min read The CSS will-change property hints the browser to prepare an element for an upcoming change, moving it to its own compositor layer. When to use it and when not to.
Takina · · 4 min read TypeScript function overloads let one function name accept multiple call signatures with different types. How overload signatures work and when to use them.
Takina · · 4 min read CSS Houdini is a set of low-level browser APIs that let JavaScript hook into the CSS rendering pipeline itself, instead of working around it.
Takina · · 4 min read Tagged template literals let a function intercept a template string's parts before interpolation — the mechanism behind safe SQL, styled-components, and i18n.
Takina · · 5 min read IndexedDB is a browser API for storing large amounts of structured data client-side, with indexes, transactions, and no size limit like localStorage.
Takina · · 4 min read Event delegation attaches one listener to a parent instead of one per child, using event bubbling to catch clicks from elements added after page load.
Takina · · 4 min read The native dialog element gives you modals and popovers with built-in focus trapping and accessibility, no JavaScript library required. Here's how it works.
Takina · · 3 min read The :nth-child() family selects elements by position among siblings, using a simple an+b formula. How it works and where it beats manually added classes.
Takina · · 4 min read The Intersection Observer API tells you when an element enters or leaves the viewport, without scroll-event polling. How it works and where to use it.
Takina · · 4 min read WebP, AVIF, and JPEG trade off compression, browser support, and encode speed differently. Which format to use where, and how to serve fallbacks safely.
Takina · · 4 min read structuredClone() is a built-in JavaScript function for deep-copying values, including cycles and typed arrays, without the workarounds JSON tricks require.
Takina · · 4 min read The CSS font-display property controls whether text waits for a web font or renders in a fallback first. Here's how swap, block, and optional differ.
Takina · · 4 min read HTTP/2 fixed request multiplexing but stayed on TCP; HTTP/3 moves to QUIC over UDP to kill head-of-line blocking at the transport layer. The real differences.
Takina · · 4 min read tsconfig.json controls how TypeScript checks and compiles your code. Here are the options that actually change behavior, and the ones you can leave alone.
Takina · · 4 min read Responsive images use srcset and sizes to let the browser pick the right file for each screen, cutting wasted bytes without extra JavaScript.
Takina · · 4 min read grid-template-areas lets you name grid regions and place items by name instead of row and column numbers, turning your CSS into a visual map of the layout.
Takina · · 4 min read Template literal types let TypeScript build string types from other types, like JavaScript template strings. How they work, with practical patterns.
Takina · · 4 min read CSS gradients render smooth color transitions directly in the browser — no image files. How linear, radial, and conic gradients work, with practical examples.
Takina · · 4 min read The Fetch API is JavaScript's built-in interface for making HTTP requests. How it works, its promise-based flow, and where it trips people up.
Takina · · 4 min read TypeScript's interface and type both describe object shapes, but they diverge on declaration merging, unions, and extension. When to reach for each.
Takina · · 4 min read content-visibility lets the browser skip layout, style, and paint for off-screen content, cutting rendering cost on long pages without JavaScript.
Takina · · 4 min read requestAnimationFrame schedules a callback right before the browser repaints, syncing JavaScript animation to the display's refresh rate. How it works.
Takina · · 4 min read Solid.js uses fine-grained signals and no virtual DOM; React re-renders components and diffs. How the two reactivity models differ in practice.
Takina · · 5 min read SSE streams one-way updates over plain HTTP; WebSockets open a full-duplex channel. How they differ and which fits your real-time feature.
Takina · · 4 min read Mapped types transform one type into another by iterating over its keys — the mechanism behind Partial, Readonly, Record, and Pick under the hood.
Takina · · 4 min read backdrop-filter blurs, darkens, or otherwise adjusts whatever sits behind an element, powering frosted-glass UI without extra markup or JavaScript.
Takina · · 4 min read The Speculation Rules API lets browsers prerender pages before a click, making navigation feel instant. How it works and how it differs from prefetch.
Takina · · 4 min read TypeScript enums group named constants under one type. How numeric, string, and const enums compile, and when a union type is the better choice.
Takina · · 4 min read A JavaScript Symbol is a guaranteed-unique primitive used for collision-free object keys. How Symbols work, well-known Symbols, and when to use them.
Takina · · 4 min read CSS counters auto-number elements with counter-reset, counter-increment, and the counter() function — no JavaScript or manual list numbers required.
Takina · · 4 min read Progressive enhancement builds a working page with HTML first, then layers CSS and JavaScript on top — so a slow network or failed script never breaks the core experience.
Takina · · 4 min read A discriminated union tags each variant of a type with a shared literal field, letting TypeScript narrow the type automatically inside a switch or if check.
Takina · · 4 min read var, let, and const differ in scope, hoisting behavior, and reassignment rules. Here's what each one actually does and when to reach for it.
Takina · · 4 min read CSS env() reads values from the browser or device itself, like safe-area insets on notched phones, instead of from your own custom properties.
Takina · · 4 min read ESLint catches bugs and enforces code patterns; Prettier only reformats how code looks. Why most JavaScript projects run both, not one or the other.
Takina · · 4 min read Optional chaining (?.) short-circuits on null or undefined instead of throwing; nullish coalescing (??) supplies a default only for null or undefined.
Takina · · 4 min read :focus-visible only shows a focus ring for keyboard and other non-pointer input, while :focus matches every focus event, including mouse clicks.
Takina · · 4 min read Prototypal inheritance means JavaScript objects inherit properties directly from other objects via a prototype chain, not from classes. How it works.
Takina · · 4 min read Web workers run scripts off the main thread for parallel computation. Service workers intercept network requests for offline and caching. How they differ.
Takina · · 4 min read map, filter, and reduce transform arrays without loops or mutation. How each one works, when to reach for it, and where they trip people up.
Takina · · 4 min read TypeScript's unknown forces a type check before use; any opts out of type checking entirely. When to reach for each in real code.
Takina · · 4 min read A source map is a file that maps minified, bundled, or transpiled code back to its original source, so debuggers and stack traces stay readable.
Takina · · 4 min read CSS transitions animate a single state change; animations run independent, repeatable keyframe sequences. How to pick the right one for the job.
Takina · · 4 min read Conditional types let TypeScript pick a type based on another type, using T extends U ? X : Y — the foundation of most advanced type utilities.
Takina · · 4 min read clip-path and mask-image clip or fade elements into custom shapes in pure CSS, replacing image editors and SVG sprites for cropping.
Takina · · 3 min read Currying transforms a multi-argument function into a chain of single-argument functions. How currying and partial application work in JavaScript.
Takina · · 3 min read Lazy loading defers offscreen images until they near the viewport. Comparing the native loading attribute against Intersection Observer-based approaches.
Takina · · 4 min read Vue uses a template syntax with a reactive proxy system; React uses JSX with a virtual DOM. How the two frameworks differ and when to pick each.
Takina · · 4 min read Node.js streams process data in chunks instead of loading it all into memory. How readable, writable, and transform streams work, and when to reach for them.
Takina · · 4 min read How to build dark mode in CSS with the prefers-color-scheme media query and the light-dark() color function, without duplicating your palette.
Takina · · 5 min read Cache-Control and ETag are the two headers that control HTTP caching — how long a response stays fresh and how to revalidate it cheaply, explained.
Takina · · 5 min read A WeakMap holds object keys without blocking garbage collection, unlike a regular Map. How WeakMap and WeakRef work and when to reach for them.
Takina · · 3 min read CSS scroll snap locks scrolling to fixed positions using scroll-snap-type and scroll-snap-align, no JavaScript required. Here's how it works.
Takina · · 4 min read JavaScript's Map and Set are built-in collections with cleaner semantics than plain objects and arrays. Here's how each works and when to reach for one.
Takina · · 4 min read The Temporal API is JavaScript's built-in replacement for Date — immutable, timezone-aware objects for dates, times, and durations.
Takina · · 4 min read Resource hints like preload, prefetch, and preconnect tell the browser what to fetch early. Here's how each one works and when to reach for it.
Takina · · 4 min read TypeScript's satisfies operator checks a value against a type without widening or erasing its inferred literal type. Here's when to reach for it.
Takina · · 4 min read CSS anchor positioning lets an element attach to another element's edges without JavaScript. How anchor(), position-anchor, and fallbacks work.
Takina · · 4 min read text-wrap: balance evens out line lengths in headlines using the browser's own layout engine, no JavaScript required. How it works and when to use it.
Takina · · 4 min read Astro's islands architecture ships static HTML by default and hydrates only the interactive components that need JavaScript. Here's how it works.
Takina · · 4 min read TypeScript decorators attach reusable behavior to classes and members with an @ syntax. How class, method, and field decorators work, with real examples.
Takina · · 4 min read @property registers a CSS custom property with a type, initial value, and inheritance rule — unlocking smooth animation and real error checking.
Takina · · 4 min read The CSS aspect-ratio property locks a box's width-to-height ratio in one line, replacing the old padding-top percentage trick. Syntax, gotchas, and use cases.
Takina · · 4 min read A feature flag is a runtime switch that turns functionality on or off without a deploy, used for gradual rollouts, A/B tests, and instant kill switches.
Takina · · 4 min read Shadow DOM attaches an isolated DOM tree to an element so a component's styles and markup can't leak in or out. Here's how it actually works.
Takina · · 4 min read npm, pnpm, and Yarn all install the same packages but differ in speed, disk usage, and monorepo support. Here's how to pick the right one.
Takina · · 4 min read AbortController lets JavaScript cancel an in-flight fetch or async task on demand, preventing stale responses from overwriting newer state.
Takina · · 5 min read ESM and CommonJS are JavaScript's two module systems — how import/export differs from require/module.exports, and when each one is used.
Takina · · 4 min read Optimistic UI updates the interface immediately, before the server confirms a change, then rolls back if the request fails — for apps that feel instant.
Takina · · 4 min read CSS clamp() scales a value smoothly between a minimum and maximum, letting font sizes and spacing flex with the viewport without media queries.
Takina · · 4 min read Web Components are browser-native APIs for building reusable, encapsulated custom elements that work in any framework, or none at all.
Takina · · 4 min read TypeScript utility types like Partial, Pick, Omit, and Record transform existing types instead of redeclaring them. How the common ones work, with examples.
Takina · · 4 min read A monorepo holds multiple projects in one repository with shared tooling and atomic commits. How it compares to splitting projects across separate repos.
Takina · · 4 min read oklch(), lch(), and color-mix() let CSS describe color perceptually and blend it directly in the browser. How each works and when to reach for them.
Takina · · 4 min read CSS scroll-driven animations tie keyframes to scroll position instead of a clock, running smoothly off the main thread. Here's how the timeline model works.
Takina · · 3 min read CSS subgrid lets a nested grid item inherit its parent's row and column tracks, so child elements line up across unrelated components.
Takina · · 4 min read SSR renders pages per request; SSG renders them at build time. How the tradeoff affects speed, freshness, and hosting cost — and how to pick.
Takina · · 4 min read Generators are functions that pause and resume with the yield keyword, producing values lazily on demand instead of computing them all at once.
Takina · · 4 min read The critical rendering path is the sequence a browser follows from HTML bytes to painted pixels — DOM, CSSOM, render tree, layout, paint.
Takina · · 4 min read px is a fixed unit, em scales to a parent's font size, and rem scales to the root. How to choose between them for sizing and typography in CSS.
Takina · · 4 min read Semantic versioning encodes compatibility into a version number's three parts — major, minor, patch — so dependents know what a version bump might break.
Takina · · 4 min read REST exposes fixed endpoints per resource; GraphQL lets clients query exactly the fields they need through one endpoint. How to choose between them.
Takina · · 4 min read :is() and :where() group selector lists into one rule. Same matching logic, different specificity — here's when to reach for each.
Takina · · 4 min read A PWA is a website built to behave like a native app — installable, offline-capable, and fast — using standard web technologies, not app-store code.
Takina · · 4 min read TypeScript generics let functions and types work with any type while preserving the specific type used at each call site, avoiding both duplication and any.
Takina · · 4 min read CSS cascade layers let you group styles into named layers with explicit priority order, so specificity fights between resets, components, and overrides disappear.
Takina · · 4 min read Async/await is syntactic sugar over Promises, not a different mechanism. How each looks in practice, and when to still reach for raw Promises.
Takina · · 4 min read The virtual DOM is an in-memory copy of the UI tree that frameworks diff against the previous version to batch and minimize real DOM updates.
Takina · · 4 min read :has() is CSS's relational pseudo-class — it lets a selector match an element based on what's inside or after it, finally enabling a parent selector.
Takina · · 4 min read A JavaScript Proxy wraps an object and intercepts operations like get and set through traps. How traps work, with practical examples and Reflect.
Takina · · 4 min read A web worker runs JavaScript on a background thread, freeing the main thread to keep the UI responsive. How workers communicate and when to use one.
Takina · · 4 min read Web accessibility (a11y) means building sites usable by people with disabilities. The core principles, semantic HTML, ARIA, and common patterns.
Takina · · 5 min read Svelte compiles away at build time; React ships a runtime and virtual DOM. Bundle size, reactivity model, and ecosystem tradeoffs compared.
Takina · · 5 min read Native CSS nesting lets you nest selectors inside a parent rule without a preprocessor. How the syntax works, the & selector, and specificity gotchas.
Takina · · 4 min read CSS custom properties are native variables that cascade, inherit, and update live at runtime. How they work, why they beat preprocessor variables.
Takina · · 3 min read CSS logical properties like margin-inline and padding-block size and space elements relative to writing direction, not fixed physical sides.
Takina · · 5 min read Microsoft shipped TypeScript 7.0 with a Go-native compiler that's roughly 10x faster than 6.0. What changed, what breaks, and how to upgrade.
Takina · · 4 min read Tree shaking removes unused exports from a JavaScript bundle at build time, shrinking file size by relying on ES module static structure.
Takina · · 4 min read A service worker is a script that runs separately from your page, intercepting network requests to enable offline access, caching, and push notifications.
Takina · · 5 min read A JavaScript closure is a function that remembers the variables from where it was defined. How closures work, why they matter, and the classic loop gotcha.
Takina · · 5 min read Debounce and throttle both tame rapid-fire events, but differently — debounce waits for a pause, throttle enforces a steady rate. When to use each.
Takina · · 5 min read CSS specificity is the scoring system that decides which rule wins when several target the same element. How the weights work and how to keep them low.
Takina · · 4 min read The CSS box model defines how every element is sized — content, padding, border, and margin. Here's how the layers stack and why box-sizing matters.
Takina · · 3 min read htmx lets you build dynamic, interactive pages with HTML attributes — no SPA, no build step. Learn the core ideas and ship a working live-search example in minutes.
Takina · · 2 min read Cloudflare's June updates target AI agents: longer-lived Durable Objects, tokenless temporary deploys, PlanetScale databases, and a private bot protocol.
Takina · · 4 min read WebRTC lets browsers stream audio, video, and data directly between peers — no plugins. How getUserMedia, RTCPeerConnection, and ICE/STUN/TURN fit together.
Takina · · 3 min read HTML is the standard markup language that structures every web page. Learn how elements, tags, and semantic HTML shape the web.
Takina · · 4 min read Container queries let components respond to the space they're given, not the viewport. Here's how they work and when to reach for them.
Takina · · 5 min read Static sites don't need a search server. Learn how Pagefind indexes your HTML at build time and adds fast, client-side full-text search for free.
Takina · · 4 min read Grid and Flexbox aren't rivals — they solve different problems. A simple rule of thumb, with examples, for choosing the right layout tool every time.
Takina · · 5 min read WebAssembly lets near-native code run in the browser and beyond. It's no longer experimental — here's where it's actually being used and why it matters.
Takina · · 4 min read A WebSocket is a protocol for full-duplex, persistent communication over a single TCP connection. Learn how it works, when to use it, and what the alternatives are.
Takina · · 3 min read GraphQL is a query language for APIs where clients request exactly the data they need. Learn how it works, when to use it, and how it compares to REST.
Takina · · 4 min read CORS lets a server opt in to cross-origin browser requests, relaxing the same-origin policy in a controlled way. Why it exists and how to fix CORS errors.
Takina · · 4 min read JavaScript is single-threaded, yet pages stay responsive. A clear tour of the call stack, task queue, and microtasks — with examples you can run.
Takina · · 4 min read CSS is the language that styles every web page. Learn how selectors, the cascade, the box model, and modern layout tools like flexbox and grid work.
Takina · · 5 min read Signals offer fine-grained reactivity with automatic dependency tracking — and nearly every major framework has adopted them. Here's why the model won.
Takina · · 4 min read Tailwind v4 rewrites the engine from scratch for dramatically faster builds and moves configuration into CSS itself. Here's what changed and how to work with it.
Takina · · 4 min read The View Transitions API brings smooth, app-like transitions to the web without a heavy SPA framework. Here's how it works and how to use it today.
Takina · · 4 min read Hydration is how JavaScript wakes up server-rendered HTML so static markup becomes interactive. The cost, the tradeoffs, and the modern alternatives.
Takina · · 5 min read An honest comparison of Bun and Node.js in 2026 — speed, ecosystem, built-in tooling, and when each runtime actually wins.
Takina · · 4 min read Astro 6 lands with a refined Content Layer, faster builds, and tighter defaults — what matters for content sites and how to upgrade calmly.
Takina · · 2 min read A complete, step-by-step guide to deploying your Astro blog or site to Cloudflare Pages — from git push to a live URL on the global edge.
Takina · · 4 min read HTTP/3 runs over QUIC instead of TCP, cutting head-of-line blocking and speeding up connections with built-in TLS 1.3. What changed and why it matters.
Takina · · 3 min read JavaScript is the programming language that makes web pages interactive. Learn how it works alongside HTML and CSS, and why it runs nearly everywhere.
Takina · · 5 min read React Server Components render exclusively on the server and stream a serialized result — no client JS shipped for that component. Here's what that actually means.
Takina · · 4 min read The DOM is the live in-memory tree browsers build from your HTML, which JavaScript reads and manipulates. Learn how it works and why it matters.
Takina · · 3 min read TypeScript adds a safety net to JavaScript without slowing you down. Here's how to set it up, the handful of concepts that matter, and how to adopt it gradually.
Takina · · 4 min read Vite serves source over native ES modules in development and bundles with Rollup for production. Why it replaced Webpack for most front-end projects.
Takina · · 5 min read Core Web Vitals affect both user experience and search ranking. Here's what LCP, INP, and CLS actually measure and the highest-impact ways to fix each one.
Takina · · 4 min read WebGPU is far more than a WebGL replacement. It exposes compute shaders, maps to modern GPU APIs, and enables in-browser ML inference.
Takina · · 4 min read A webhook is an HTTP callback that notifies your server the moment something happens — no polling. How webhooks work and how to use them safely.
Takina · · 4 min read Server-Sent Events stream real-time updates over a single HTTP connection. How SSE works, when to use it, and how it compares to WebSockets.
