Takina · · 3 min read React Suspense, Explained
React Suspense lets components pause rendering while they wait on async data, showing a fallback UI instead of manual loading-state juggling.
#React
#JavaScript
#Frontend
Topic
#Frontend
91 posts tagged “Frontend”.
Takina · · 3 min read 
Takina · · 4 min read What Is the Beacon API? navigator.sendBeacon()
The Beacon API lets a page send one last async request as it unloads, without blocking navigation or racing the browser's page teardown.
#Web Development
#Frontend
#Performance
Takina · · 3 min read What Is Fetch Priority? The fetchpriority Attribute
fetchpriority lets you tell the browser which resources matter most, overriding its default heuristics to load critical assets sooner.
#Web Development
#Performance
#Frontend
Takina · · 4 min read CSS object-fit and object-position, Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 5 min read CSS inherit, initial, unset & revert Explained
CSS's four global keywords control where a property's value comes from. How inherit, initial, unset, and revert differ, with a comparison table.
#CSS
#Web Development
#Frontend
Takina · · 5 min read Promise.all() vs allSettled() vs race() Compared
Promise.all() fails fast, allSettled() waits for every result, and race() returns whichever promise finishes first — how to choose correctly.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read JavaScript Spread vs Rest Operators, Explained
The spread operator (...) expands an iterable into individual elements; the rest operator collects elements back into an array. Same syntax, opposite jobs.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read Dynamic Viewport Units: dvh, svh, and lvh Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read ResizeObserver API Explained: Watching Element Size
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.
#Web Development
#JavaScript
#Frontend
Takina · · 4 min read localStorage vs sessionStorage vs Cookies
localStorage, sessionStorage, and cookies all store data in the browser, but differ in lifetime, size limits, and whether the server can see them.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Grid repeat() and minmax() Explained
repeat() and minmax() let CSS Grid build responsive layouts without media queries. How the two functions combine, and common patterns.
#CSS
#Web Development
#Frontend
Takina · · 5 min read Web Push Notifications: How the Push API Works
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Stacking Contexts and Z-Index Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 5 min read CSS ::before and ::after Pseudo-Elements, Explained
How ::before and ::after generate content without extra markup, which properties they need, and common patterns like icons and counters.
#CSS
#Web Development
#Frontend
Takina · · 5 min read JavaScript Destructuring: Arrays, Objects, Rest/Spread
JavaScript destructuring unpacks values from arrays and objects into variables in one expression. How it works, with the rest and spread operators.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read JavaScript's this Keyword, Explained
How JavaScript determines what this refers to: default, implicit, explicit, and new binding, plus why arrow functions behave differently.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read The Popover API Explained: Native Popovers Without JS
The Popover API gives HTML a built-in popover element with the popover attribute — top-layer rendering, light-dismiss, and no JavaScript required.
#CSS
#Web Development
#Frontend
Takina · · 5 min read CSS will-change Explained: Compositing and Performance
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.
#CSS
#Web Development
#Performance
Takina · · 4 min read What Is CSS Houdini? Extending CSS With JS
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.
#CSS
#Web Development
#Frontend
Takina · · 5 min read What Is IndexedDB? Browser-Side Structured Storage
IndexedDB is a browser API for storing large amounts of structured data client-side, with indexes, transactions, and no size limit like localStorage.
#Web Development
#JavaScript
#Frontend
Takina · · 4 min read JavaScript Event Delegation Explained
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read The HTML dialog Element Explained
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.
#Accessibility
#Web Development
#Frontend
Takina · · 3 min read CSS :nth-child() and Structural Pseudo-Classes Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read WebP vs AVIF vs JPEG: Choosing an Image Format
WebP, AVIF, and JPEG trade off compression, browser support, and encode speed differently. Which format to use where, and how to serve fallbacks safely.
#Web Development
#Frontend
#Performance
Takina · · 4 min read structuredClone() Explained: Deep Copies in JS
structuredClone() is a built-in JavaScript function for deep-copying values, including cycles and typed arrays, without the workarounds JSON tricks require.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read Responsive Images: srcset, sizes, and picture Explained
Responsive images use srcset and sizes to let the browser pick the right file for each screen, cutting wasted bytes without extra JavaScript.
#Web Development
#Performance
#Frontend
Takina · · 4 min read CSS Grid-Template-Areas: Named Layouts Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS Gradients Explained: Linear, Radial, and Conic
CSS gradients render smooth color transitions directly in the browser — no image files. How linear, radial, and conic gradients work, with practical examples.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is requestAnimationFrame? Smooth JS Animation
requestAnimationFrame schedules a callback right before the browser repaints, syncing JavaScript animation to the display's refresh rate. How it works.
#JavaScript
#Frontend
#Performance
Takina · · 4 min read Solid.js vs React: Two Models of Reactivity Compared
Solid.js uses fine-grained signals and no virtual DOM; React re-renders components and diffs. How the two reactivity models differ in practice.
#JavaScript
#Frameworks
#Web Development
Takina · · 4 min read What Is backdrop-filter? Frosted-Glass CSS Effects
backdrop-filter blurs, darkens, or otherwise adjusts whatever sits behind an element, powering frosted-glass UI without extra markup or JavaScript.
#CSS
#Web Development
#Frontend
Takina · · 4 min read The Speculation Rules API Explained
The Speculation Rules API lets browsers prerender pages before a click, making navigation feel instant. How it works and how it differs from prefetch.
#Web Development
#Frontend
#Performance
Takina · · 4 min read JavaScript Symbols Explained: The Unique Primitive Type
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Counters Explained: Auto-Numbering Without JS
CSS counters auto-number elements with counter-reset, counter-increment, and the counter() function — no JavaScript or manual list numbers required.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is Progressive Enhancement? Web Dev Explained
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.
#Web Development
#Frontend
#Performance
Takina · · 4 min read var vs let vs const in JavaScript
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Environment Variables and env() Explained
CSS env() reads values from the browser or device itself, like safe-area insets on notched phones, instead of from your own custom properties.
#CSS
#Web Development
#Frontend
Takina · · 4 min read JavaScript Optional Chaining and Nullish Coalescing
Optional chaining (?.) short-circuits on null or undefined instead of throwing; nullish coalescing (??) supplies a default only for null or undefined.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS :focus-visible vs :focus Explained
:focus-visible only shows a focus ring for keyboard and other non-pointer input, while :focus matches every focus event, including mouse clicks.
#CSS
#Web Development
#Frontend
Takina · · 4 min read JavaScript Prototypal Inheritance Explained
Prototypal inheritance means JavaScript objects inherit properties directly from other objects via a prototype chain, not from classes. How it works.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read Map, Filter, Reduce: JavaScript's Core Array Methods
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Transitions vs Animations: Which to Use
CSS transitions animate a single state change; animations run independent, repeatable keyframe sequences. How to pick the right one for the job.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS clip-path and Masking Explained
clip-path and mask-image clip or fade elements into custom shapes in pure CSS, replacing image editors and SVG sprites for cropping.
#CSS
#Web Development
#Frontend
Takina · · 3 min read JavaScript Currying Explained: Partial Application Guide
Currying transforms a multi-argument function into a chain of single-argument functions. How currying and partial application work in JavaScript.
#JavaScript
#Web Development
#Frontend
Takina · · 3 min read Lazy Loading Images: Native vs Intersection Observer
Lazy loading defers offscreen images until they near the viewport. Comparing the native loading attribute against Intersection Observer-based approaches.
#Web Development
#Frontend
#Performance
Takina · · 4 min read Vue vs React: Which Framework Fits Your Project
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.
#JavaScript
#Frameworks
#Web Development
Takina · · 4 min read CSS Dark Mode: prefers-color-scheme and light-dark()
How to build dark mode in CSS with the prefers-color-scheme media query and the light-dark() color function, without duplicating your palette.
#CSS
#Web Development
#Frontend
Takina · · 5 min read WeakMap and WeakRef in JavaScript, Explained
A WeakMap holds object keys without blocking garbage collection, unlike a regular Map. How WeakMap and WeakRef work and when to reach for them.
#JavaScript
#Web Development
#Frontend
Takina · · 3 min read CSS Scroll Snap Explained
CSS scroll snap locks scrolling to fixed positions using scroll-snap-type and scroll-snap-align, no JavaScript required. Here's how it works.
#CSS
#Web Development
#Frontend
Takina · · 4 min read JavaScript Map and Set: When to Use Them Over Objects
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read JavaScript Temporal API: Fixing Date's Biggest Flaws
The Temporal API is JavaScript's built-in replacement for Date — immutable, timezone-aware objects for dates, times, and durations.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read Resource Hints: Preload, Prefetch, and Preconnect
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.
#Web Development
#Frontend
#Performance
Takina · · 4 min read CSS Anchor Positioning Explained
CSS anchor positioning lets an element attach to another element's edges without JavaScript. How anchor(), position-anchor, and fallbacks work.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS text-wrap: balance, Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read Astro Islands Architecture Explained
Astro's islands architecture ships static HTML by default and hydrates only the interactive components that need JavaScript. Here's how it works.
#Astro
#Web Development
#Performance
Takina · · 4 min read CSS @property: Typed Custom Properties Explained
@property registers a CSS custom property with a type, initial value, and inheritance rule — unlocking smooth animation and real error checking.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS aspect-ratio: Sizing Boxes Without Padding Hacks
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read Optimistic UI Updates Explained
Optimistic UI updates the interface immediately, before the server confirms a change, then rolls back if the request fails — for apps that feel instant.
#Web Development
#Frontend
#JavaScript
Takina · · 4 min read CSS clamp() and Fluid Typography, Explained
CSS clamp() scales a value smoothly between a minimum and maximum, letting font sizes and spacing flex with the viewport without media queries.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Are Web Components? Custom Elements Explained
Web Components are browser-native APIs for building reusable, encapsulated custom elements that work in any framework, or none at all.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read CSS Color Functions: oklch, lch, and color-mix() Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS Scroll-Driven Animations Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 3 min read CSS Subgrid Explained: Nested Grids That Align
CSS subgrid lets a nested grid item inherit its parent's row and column tracks, so child elements line up across unrelated components.
#CSS
#Web Development
#Frontend
Takina · · 4 min read SSR vs SSG: Server-Side Rendering vs Static Generation
SSR renders pages per request; SSG renders them at build time. How the tradeoff affects speed, freshness, and hosting cost — and how to pick.
#Web Development
#Frontend
#Performance
Takina · · 4 min read JavaScript Generators and Iterators, Explained
Generators are functions that pause and resume with the yield keyword, producing values lazily on demand instead of computing them all at once.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read The Critical Rendering Path: How Browsers Draw Pixels
The critical rendering path is the sequence a browser follows from HTML bytes to painted pixels — DOM, CSSOM, render tree, layout, paint.
#Web Development
#Frontend
#Performance
Takina · · 4 min read rem vs em vs px: CSS Units Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is a PWA? Progressive Web Apps Explained
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.
#Web Development
#Frontend
#Performance
Takina · · 4 min read CSS Cascade Layers Explained: The @layer Rule
CSS cascade layers let you group styles into named layers with explicit priority order, so specificity fights between resets, components, and overrides disappear.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is the Virtual DOM? How React Updates the UI
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read What Is :has() in CSS? The Parent Selector Explained
: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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is Web Accessibility (a11y)? A Practical Guide
Web accessibility (a11y) means building sites usable by people with disabilities. The core principles, semantic HTML, ARIA, and common patterns.
#Accessibility
#Web Development
#Frontend
Takina · · 5 min read Svelte vs React: Which Should You Choose?
Svelte compiles away at build time; React ships a runtime and virtual DOM. Bundle size, reactivity model, and ecosystem tradeoffs compared.
#JavaScript
#Frameworks
#Web Development
Takina · · 5 min read CSS Nesting Explained: Native Nested Selectors
Native CSS nesting lets you nest selectors inside a parent rule without a preprocessor. How the syntax works, the & selector, and specificity gotchas.
#CSS
#Web Development
#Frontend
Takina · · 4 min read CSS Custom Properties: Variables in CSS Explained
CSS custom properties are native variables that cascade, inherit, and update live at runtime. How they work, why they beat preprocessor variables.
#CSS
#Frontend
#Web Development
Takina · · 3 min read What Are CSS Logical Properties? Direction-Aware Layout
CSS logical properties like margin-inline and padding-block size and space elements relative to writing direction, not fixed physical sides.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is a Service Worker? Offline Web Apps Explained
A service worker is a script that runs separately from your page, intercepting network requests to enable offline access, caching, and push notifications.
#Web Development
#Frontend
#Performance
Takina · · 5 min read JavaScript Closures Explained, With Examples
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.
#JavaScript
#Web Development
#Frontend
Takina · · 5 min read Debounce vs Throttle: Rate-Limiting Events in JS
Debounce and throttle both tame rapid-fire events, but differently — debounce waits for a pause, throttle enforces a steady rate. When to use each.
#JavaScript
#Frontend
#Performance
Takina · · 5 min read What Is CSS Specificity? The Cascade, Explained
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read The CSS Box Model, Explained: Content, Padding, Border
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.
#CSS
#Web Development
#Frontend
Takina · · 3 min read Getting Started with htmx: Interactive UIs Without a Framework
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.
#Web Development
#Frontend
#JavaScript
Takina · · 3 min read What Is HTML? The Building Blocks of Every Web Page
HTML is the standard markup language that structures every web page. Learn how elements, tags, and semantic HTML shape the web.
#HTML
#Web Development
#Frontend
Takina · · 4 min read CSS Container Queries: Components That Adapt Anywhere
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.
#CSS
#Web Development
#Performance
Takina · · 4 min read CSS Grid vs. Flexbox: When to Use Each
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.
#CSS
#Web Development
#Frontend
Takina · · 4 min read What Is CSS? How the Web Gets Its Style
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.
#CSS
#Web Development
#Frontend
Takina · · 5 min read Signals: The Reactivity Model Taking Over Frontends
Signals offer fine-grained reactivity with automatic dependency tracking — and nearly every major framework has adopted them. Here's why the model won.
#JavaScript
#Web Development
#Frameworks
Takina · · 4 min read The View Transitions API: Native Animated Page Changes
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.
#Web Development
#CSS
#JavaScript
Takina · · 4 min read What Is Hydration? Making Server HTML Interactive
Hydration is how JavaScript wakes up server-rendered HTML so static markup becomes interactive. The cost, the tradeoffs, and the modern alternatives.
#Web Development
#Frontend
#Performance
Takina · · 4 min read What Is the DOM? The Document Object Model, Explained
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.
#JavaScript
#Web Development
#Frontend
Takina · · 4 min read What Is Vite? The Modern Front-End Build Tool
Vite serves source over native ES modules in development and bundles with Rollup for production. Why it replaced Webpack for most front-end projects.
#Web Development
#Developer Tools
#Frontend