DEV Community: Raj Aryan

Why React Still Dominates Frontend Development in 2026

Raj Aryan — Thu, 05 Mar 2026 09:47:03 +0000

why millions of developers still choose it over newer frameworks.

The frontend ecosystem moves fast. One year everyone is talking about Angular, then Vue, then Svelte, then some new framework that promises to replace everything.

Yet somehow React keeps winning.

Even in 2026, React continues to power some of the largest platforms on the internet.

Facebook

Instagram

Netflix

Airbnb

Shopify

Despite new frameworks appearing every year, React remains the most widely used frontend library in the world.

So the real question is:

Why does React still dominate modern frontend development?

Let’s break it down.

Component-Based Architecture Makes Development Scalable

React introduced a simple but powerful idea:

Build UI using reusable components.

Instead of writing large blocks of HTML and JavaScript, React lets you break your UI into small reusable pieces.

Example:

function Button({ text }) {
return {text};
}

You can reuse this component anywhere:

Benefits:

Code becomes reusable

UI becomes modular

Applications become easier to maintain

For large projects, this architecture is a game changer.

React Has the Largest Developer Ecosystem

React is not just a library anymore.

It is an entire ecosystem.

Popular tools built around React include:

Tool Purpose
Next.js Full-stack React framework
Redux Toolkit State management
React Query Server state management
Material UI UI component library
React Hook Form Form management

Because of this ecosystem, developers can build almost anything:

SaaS dashboards

Ecommerce platforms

Social media apps

AI tools

Enterprise platforms

When developers choose React, they are choosing an entire development universe.

Huge Job Market

Let’s talk reality.

Developers choose technologies that pay the bills.

React dominates the job market.

Companies actively hiring React developers include:

Google

JavaScript: The Language That Accidentally Took Over the World

Raj Aryan — Mon, 02 Mar 2026 09:17:07 +0000

There was a time when JavaScript was just a tiny scripting language living inside browsers. It was created in 1995 by Brendan Eich in about 10 days. The goal? Add simple interactivity to web pages.

That’s it.

Nobody expected it to become the backbone of modern digital life.

But here we are.

Today, JavaScript runs your favorite websites, powers mobile apps, controls servers, drives real-time chat systems, runs AI tools in browsers, and even helps operate IoT devices.

Let’s break down how this happened — and what the future looks like.

🌍 JavaScript’s Impact on Today’s World

1️⃣ It Owns the Frontend

Every major website you use relies on JavaScript:

Social media platforms
Streaming apps
E-commerce websites
Banking dashboards
SaaS platforms

Frameworks like:

React
Angular
Vue

have transformed how user interfaces are built. Modern UI is dynamic, responsive, and real-time because of JavaScript.

Without it, the web would still feel like 2003.

2️⃣ It Took Over the Backend (Thanks, Node.js)

When Node.js launched in 2009, everything changed.

Now developers could run JavaScript outside the browser.

This meant:

Same language for frontend and backend
Faster development cycles
Huge ecosystem growth

Startups love it because it speeds up MVP development.
Enterprises use it because it scales well with proper architecture.

JavaScript stopped being “just a browser language.” It became full-stack.

3️⃣ Mobile Apps? Also JavaScript.

With:

React Native
Ionic
Electron

JavaScript now builds:

Android apps
iOS apps
Desktop apps

That “native-like” experience you enjoy? Often JavaScript under the hood.

4️⃣ Real-Time Web Changed Everything

Think about:

Live chat
Stock trading dashboards
Multiplayer games
Collaborative tools

WebSockets + JavaScript made real-time interaction normal.

We now expect apps to update instantly.

Patience on the internet is dead.

JavaScript helped kill it. 😌

5️⃣ It Democratized Development

This is the part people don’t talk about enough.

JavaScript:

Has a low entry barrier
Runs in every browser
Doesn’t require heavy setup

A student with a laptop can start building real products immediately.

That accessibility created:

Indie hackers
Solo founders
Bootstrapped startups
Freelance economies

It changed careers. It changed lives.

🚀 Why JavaScript Became So Dominant

It wasn’t just luck.

✔ Runs Everywhere

Browser, server, mobile, desktop, IoT.

✔ Massive Ecosystem

NPM is the largest software registry in the world.

✔ Community-Driven

Thousands of contributors improving tools daily.

✔ Constant Evolution

ES6, ESNext, TypeScript, Deno, Bun — it keeps adapting.

JavaScript never stayed stagnant.

🔮 The Future of JavaScript

Now let’s talk seriously.

Where is this heading?

1️⃣ Type Safety is the Future

TypeScript adoption is exploding.

Large-scale applications demand maintainability.
Strong typing reduces bugs and improves developer experience.

JavaScript’s future will heavily involve TypeScript-style safety.

2️⃣ Edge & Serverless Computing

JavaScript is dominating serverless environments:

Edge functions
Cloud workers
Microservices

It’s lightweight and event-driven — perfect for modern cloud architecture.

3️⃣ AI in the Browser

With tools like TensorFlow.js and WebLLM, we’re seeing AI models running directly in browsers.

This reduces server load and improves privacy.

JavaScript is becoming part of the AI ecosystem.

4️⃣ Performance Wars: Bun & Deno

Node.js is no longer alone.

New runtimes like:

Deno
Bun

are pushing performance, security, and better defaults.

Competition = innovation.

5️⃣ WebAssembly + JavaScript

WebAssembly (WASM) allows near-native performance in browsers.

JavaScript will likely remain the orchestrator language, while heavy computation moves to WASM.

Instead of replacing JavaScript, WASM complements it.

🧠 Will JavaScript Ever Die?

Short answer: No.

Long answer: Extremely unlikely.

Too much infrastructure depends on it.
Too many developers use it.
Too many tools are built around it.

It may evolve.
It may transform.
It may become more typed and structured.

But it’s not disappearing.

⚖ The Honest Truth

JavaScript has flaws:

Historical design quirks
Inconsistent behavior
Dependency chaos
Rapid ecosystem churn

But its adaptability is unmatched.

It survives because it changes.

🎯 Final Thoughts

JavaScript didn’t just impact the web.

It:

Accelerated startup culture
Lowered entry barriers in tech
Enabled global remote work
Powered the SaaS explosion
Became the language of modern product development

And the future?

More edge computing.
More AI in the browser.
More type safety.
More performance.

JavaScript isn’t just a language anymore.

It’s infrastructure.

React 18 changed the game. And in 2026, it’s expected knowledge.

Raj Aryan — Tue, 17 Feb 2026 12:52:53 +0000

You must understand:

Automatic Batching
startTransition
useTransition
useDeferredValue
Suspense for data fetching
Streaming UI

Modern React = performance-first mindset.

If your app freezes during heavy state updates, that’s on you now 😅

3️⃣ Server Components (RSC) Are Not Optional

This is big.

React Server Components are becoming standard — especially in frameworks like:

Next.js (App Router)
Remix

You need to understand:

What runs on server vs client
When to use "use client"
How server components reduce bundle size
Streaming & partial rendering

In 2026, sending 1MB JS to the browser is basically a crime.

4️⃣ Next.js is Practically Mandatory

You can say “I only use React without frameworks,” but hiring managers will blink slowly.

Learn:

App Router
Layouts
Server Components
Route Handlers
Middleware
SEO optimization
Image optimization
Edge runtime

React without meta-framework knowledge = incomplete skillset now.

5️⃣ TypeScript Is No Longer Optional

If you’re still writing pure JS in serious projects… brave.

You must know:

Generics
Utility Types
React component typing
Proper typing for hooks
Strict mode best practices

TS in 2026 is not about “making it compile.”
It’s about making your future self hate you less.

6️⃣ State Management (Choose Wisely)

Redux is not dead.
It’s just… evolved.

Know at least one deeply:

Redux Toolkit
Zustand
Jotai
Recoil (if still maintained in your ecosystem)
React Query / TanStack Query (for server state)

Understand the difference between:

Server state
UI state
Global state

Most developers overcomplicate state.
Don’t be most developers.

7️⃣ Performance Optimization

In 2026, performance is part of frontend engineering.

You must understand:

Memoization strategies
Code splitting
Lazy loading
React Profiler
Avoiding unnecessary renders
Virtualization (react-window, etc.)

If your app lags on a mid-range Android phone in India, congratulations, you failed real-world testing.

8️⃣ Testing (Yes, You Can’t Escape)

You need:

React Testing Library
Jest / Vitest
Component testing
Mocking APIs
Testing async behavior

Testing is not optional anymore. It’s credibility.

9️⃣ Accessibility (A11y)

Modern React dev = responsible dev.

Learn:

ARIA roles
Keyboard navigation
Focus management
Semantic HTML
Screen reader behavior

If your app only works with a mouse, that’s not “cool minimalism.” That’s bad engineering.

🔟 AI Integration in Frontend

Welcome to 2026.

React apps now integrate:

LLM APIs
Streaming responses
AI-assisted UX
Real-time updates

Understanding:

Streaming UI
Optimistic updates
Token-based response rendering

will give you serious edge.

🧠 Bonus: What Separates Senior React Devs

It’s not hooks.

It’s:

Architecture thinking
Folder structure decisions
Scalable design systems
Clean component boundaries
Avoiding prop-drilling disasters
Knowing when not to abstract

And most importantly:

Simplicity.

The best React code feels boring.
Boring is scalable.

🎯 2026 React Learning Roadmap

If I had to simplify:

React fundamentals
TypeScript mastery
Next.js App Router
Server Components
TanStack Query
Performance patterns
Testing
Accessibility
Real production projects

Build real apps.
Break things.
Fix them.
Repeat.

💬 Final Thoughts

React in 2026 is not about knowing more libraries.

It’s about:

Thinking in components
Thinking in performance
Thinking in architecture

The ecosystem moves fast.
But the principles stay stable.

Learn deeply.
Build deliberately.
Ship confidently.

And please… stop using random UUID as React keys. I beg you. 😌🔥

AI Is Not Magic. It’s Just Really Fast Math (And That’s the Point)

Raj Aryan — Mon, 02 Feb 2026 09:01:42 +0000

AI didn’t suddenly become intelligent in the last few years. It became usable.

That’s the part people miss.

Developers didn’t wake up one day and decide, “Let’s worship neural networks.” We adopted AI because it reduced friction. Less boilerplate. Fewer repetitive decisions. Faster feedback loops.

AI is not here to replace developers. It’s here to replace the boring parts we secretly hated but pretended to enjoy.

What AI Actually Is (No Hype Edition)

At its core, modern AI is:

Pattern recognition at scale
Probability engines predicting the next most likely output
Models trained on absurd amounts of data

That’s it.

No consciousness. No intentions. No creativity in the human sense.

If AI feels “smart,” it’s because humans are predictable and computers are fast.

Why Developers Actually Use AI

Nobody uses AI because it’s trendy. We use it because it:

Writes annoying boilerplate faster than we ever could
Explains legacy code we’re scared to touch
Debugs errors at 2 AM without judging us
Acts like a junior dev who never sleeps

The real win isn’t code generation. It’s cognitive load reduction.

When your brain isn’t busy remembering syntax trivia, you can focus on architecture, performance, and decisions that actually matter.

Where AI Shines in Real Projects

1. Code Assistance

AI excels at:

Refactoring repetitive logic
Generating tests
Explaining unfamiliar codebases

It’s bad at:

Understanding business context
Making architectural tradeoffs
Knowing why your company made weird decisions in 2019

Use it as an assistant, not an architect.

2. Debugging and Error Analysis

Stack traces are hostile by design. AI translates them into human language.

That alone saves hours every week.

3. Documentation That Doesn’t Hurt

Most docs fail because humans hate writing them.

AI doesn’t hate anything.

Use it to:

Generate initial docs
Improve readability
Keep internal documentation updated

Just review it. Blind trust is how bugs are born.

Where AI Falls Flat (Important Part)

AI struggles with:

Novel problems
Ambiguous requirements
Ethical decisions
Accountability

If your product requires judgment, AI cannot replace you.

If your job is only copying patterns, then yes, AI is coming for that role. Harsh but accurate.

The Real Skill Shift for Developers

The future developer is not “AI-proof.”

That’s the wrong mindset.

The future developer:

Knows how to ask good questions
Understands systems deeply enough to verify AI output
Uses AI as leverage, not a crutch

Prompting is not a skill. Critical thinking is.

AI Won’t Replace Developers

But Developers Who Ignore AI Will Be Replaced

Not by AI directly.

By developers who:

Ship faster
Learn quicker
Adapt without ego

Tools change. Fundamentals don’t.

The same developers who survived:

jQuery → React
REST → GraphQL
Monoliths → Microservices

will survive AI too.

Final Thought

AI isn’t the end of programming.

It’s the end of pretending that typing is the hard part.

The real work has always been thinking, designing, and taking responsibility when things break.

AI can help you move faster.

How to Build Flexible Web Page Designs with CSS3 Flexbox

Raj Aryan — Thu, 22 Jan 2026 07:26:21 +0000

CSS has been capable of elegant, flexible layouts for years. Yet somehow, a shocking number of websites still limp along using tables, floats, and other relics from the archaeological layers of the web. CSS3 Flexbox exists precisely to end this suffering.

Flexbox is one of the most practical, production-ready layout systems we have. It is simple, expressive, responsive by default, and designed for modern interfaces where content size changes constantly. If you care about clean layouts, maintainable CSS, and your own sanity, Flexbox deserves a permanent place in your toolkit.

This article walks through what Flexbox is, why it matters, and how to use it effectively to build flexible, real-world web page designs.

Why Flexbox Still Matters

CSS3 has been around long enough that browser support is no longer a serious excuse. Flexbox is supported by the vast majority of browsers, and even older ones degrade gracefully if your HTML is written properly.

Flexbox solves a problem that traditional CSS struggled with for years:

Aligning items horizontally and vertically
Distributing available space intelligently
Reordering content without touching the HTML
Adapting layouts as content grows or shrinks

Instead of micromanaging positions with floats or absolute values, Flexbox lets you define rules and let the browser do the math.

That is the entire value proposition.

What Is CSS3 Flexbox?

Flexbox is a layout model that allows elements inside a container to automatically adjust their size and position to best fill the available space.

You define:

A flex container
flex items inside it

Then you control how those items:

Flow horizontally or vertically
Wrap to new lines
Grow or shrink relative to each other
Align along both axes

The browser handles the rest.

Creating a Flex Container

Any element can become a flex container. The most common choices are semantic HTML elements such as:

<main>
<section>
<article>
<ul> or <ol>
<div> when no better option exists

To activate Flexbox:

.container {
  display: flex;
}

That single line already changes how child elements behave.

If you want an inline container:

.container {
  display: inline-flex;
}

Controlling Layout Direction and Wrapping

Flexbox layouts are built around two axes:

Main axis
Cross axis

You control the main axis with flex-direction:

.container {
  flex-direction: row;          /* default */
  /* row-reverse | column | column-reverse */
}

To allow items to wrap onto multiple lines:

.container {
  flex-wrap: wrap;
}

Most developers use the shorthand:

.container {
  flex-flow: row wrap;
}

This single rule defines direction and wrapping together.

Aligning Items Inside the Container

Flexbox gives you precise alignment control without hacks.

Horizontal Alignment (Main Axis)

Use justify-content:

.container {
  justify-content: space-between;
}

Common values:

flex-start
flex-end
center
space-between
space-around

Vertical Alignment (Cross Axis)

Use align-items:

.container {
  align-items: center;
}

Common values:

flex-start
flex-end
center
baseline
stretch (default)

When items wrap onto multiple lines, use align-content instead.

Styling Flex Items

Any direct child of a flex container becomes a flex item.

Flex items can be simple elements or complex structures containing images, text, and controls.

Example:

<main class="container">
  <figure>
    <img src="img1.png">
    <figcaption>Item 1</figcaption>
  </figure>
  <figure>
    <img src="img2.png">
    <figcaption>Item 2</figcaption>
  </figure>
</main>

Here, each <figure> is a flex item, regardless of its internal complexity.

Controlling Item Size and Behavior

Flexbox provides three core properties:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 200px;
}

These define:

How much the item grows when space is available
How much it shrinks when space is limited
Its starting size before space is distributed

Most developers use the shorthand:

.item {
  flex: 1 1 200px;
}

You can also control item order visually without changing HTML:

.item {
  order: 2;
}

Lower numbers appear first.

A Simple Flexbox Example

<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>

.container {
  display: flex;
  background: #004f7f;
  height: 500px;
}

.item {
  width: 200px;
  height: 200px;
  margin: auto;
  list-style: none;
  background: white;
}

With just a few lines of CSS, the layout becomes centered, flexible, and readable.

Building a Responsive Page Layout with Flexbox

Flexbox shines when combined with media queries.

A single layout can adapt from:

One column on small screens
Two columns on tablets
Three columns on desktops

By adjusting flex, order, and flex-flow at breakpoints, you get a responsive layout without rewriting your HTML.

This is exactly how modern navigation bars, dashboards, and content grids are built.

Why Flexbox Is Still Underused

The reasons are mostly historical:

Early browser support concerns
Habitual reliance on floats and tables
Lack of understanding of the Flexbox mental model

None of those hold up anymore.

Flexbox is stable, powerful, and widely supported. Avoiding it today is not caution. It is technical debt.

Summary

CSS3 Flexbox gives you:

Cleaner layouts
Less brittle CSS
Built-in responsiveness
Predictable alignment without hacks

It works for small components and full-page layouts alike. Once you understand the container-and-items model, Flexbox becomes one of the most intuitive tools in CSS.

If you want flexible web pages that adapt gracefully to real content and real devices, Flexbox is not optional. It is baseline.

Reference
Browser support data sourced from CanIUse.com

Top CSS Glassmorphism Examples to Explore

Raj Aryan — Tue, 06 Jan 2026 06:43:48 +0000

How frosted glass UI is reshaping modern web design

Glassmorphism has quietly shifted from a design experiment into a full-fledged UI trend. You’ve seen it in dashboards, landing pages, and product cards that look like they’re floating above the background, softly blurred yet perfectly readable.

This design style doesn’t scream for attention. Instead, it whispers sophistication.

Glassmorphism brings depth, transparency, and realism to interfaces, making digital products feel tactile and alive. When done right, it balances beauty and usability in a way few trends manage to achieve.

Let’s break down what makes CSS glassmorphism so compelling, explore practical examples, and understand how to use it responsibly in real-world projects.

What Is Glassmorphism in Web Design?

Glassmorphism is a UI design technique that mimics the appearance of frosted glass. It relies on transparency, background blur, subtle borders, and soft shadows to create layered interfaces.

Key characteristics include:

Semi-transparent surfaces
Background blur effects
Light borders or highlights
Layered depth using shadows and z-index

The goal isn’t decoration for decoration’s sake. Glassmorphism improves visual hierarchy, guiding users naturally through the interface.

Why Designers Are Drawn to Glassmorphism

Design trends come and go, but glassmorphism sticks because it solves real problems.

It adds depth without heavy graphics
It works beautifully with gradients and illustrations
It feels modern without being loud
It improves focus by separating foreground from background

For dashboards, cards, modals, and hero sections, glassmorphism creates clarity while maintaining elegance.

Popular CSS Glassmorphism Examples

1. Glassmorphic Cards

Perfect for feature sections, pricing tables, or profile cards. These elements appear elevated, subtly separating content from busy backgrounds.

2. Frosted Navigation Bars

Transparent navbars with blur maintain visibility of background visuals while keeping navigation readable and accessible.

3. Glass Dashboards

Used in analytics panels and admin interfaces, glassmorphism reduces visual clutter and enhances focus on data.

4. Modal Windows with Blur

Background blur instantly shifts attention to the modal, improving user flow without harsh overlays.

Creating the Frosted Glass Effect with CSS

At its core, glassmorphism relies on a few key CSS properties:

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

This combination creates the illusion of glass while preserving readability. The blur strength and transparency should always be adjusted based on background contrast.

Using a CSS Glassmorphism Generator

Not everyone wants to fine-tune CSS values manually, and that’s okay.

Glassmorphism generators allow you to:

Preview effects live
Adjust blur, opacity, and saturation
Apply presets like subtle, bold, or frosted
Export production-ready CSS

They’re especially useful for rapid prototyping and design exploration.

Performance Considerations You Shouldn’t Ignore

Glassmorphism looks lightweight, but it isn’t free.

Backdrop blur is GPU-intensive and can impact performance if:

Overused across many components
Applied to large containers
Used on low-end mobile devices

Best practice:

Use glassmorphism sparingly
Apply it only to key UI layers
Avoid stacking multiple blur layers

A little glass goes a long way.

Browser Compatibility Tips

While modern browsers support backdrop-filter, it’s not universal.

To ensure consistent behavior:

Always include -webkit-backdrop-filter
Test on Chrome, Safari, Firefox, and Edge
Provide solid color fallbacks for unsupported browsers

Graceful degradation matters more than visual perfection.

Combining Glassmorphism with Other Trends

Glassmorphism works exceptionally well with:

Gradient backgrounds
Soft shadows (neumorphism-inspired)
Micro-animations
Modern typography

The trick is restraint. Let glass highlight content, not overwhelm it.

Is Glassmorphism Suitable for Mobile?

Yes, but with caution.

On mobile:

Reduce blur intensity
Limit glass elements to critical UI parts
Prioritize text contrast and accessibility

When optimized properly, glassmorphism can feel incredibly smooth on mobile devices.

Using Glassmorphism with CSS Frameworks

Popular frameworks make glassmorphism easier to implement:

Tailwind CSS allows utility-based blur and transparency
Bootstrap supports custom glass components with minimal overrides

Frameworks help standardize styles while keeping performance predictable.

Best Practices for Glassmorphism Design

Maintain text readability at all times
Balance aesthetics with performance
Use z-index thoughtfully
Test across screen sizes and devices
Avoid decorative overuse

Glassmorphism should enhance usability, not compete with it.

Final Thoughts

Glassmorphism isn’t just a trend. It’s a design philosophy that values clarity, depth, and subtlety.

When used with intention, it transforms flat layouts into immersive experiences. By understanding how blur, transparency, and layering interact, you can create interfaces that feel modern without sacrificing performance or usability.

Master the balance, and your designs won’t just look good. They’ll feel right.

Design isn’t about showing everything at once. Sometimes, letting things softly blur into place is what makes an interface unforgettable.

How to Use React Icons in Next.js (The Clean & Efficient Way)

Raj Aryan — Wed, 24 Dec 2025 09:40:50 +0000

Icons are the silent workhorses of modern UI. They explain actions faster than text, reduce cognitive load, and make your app feel finished instead of “still in dev mode.”
If you’re building with Next.js, there’s a simple, performance-friendly way to use icons without bloating your bundle: React Icons.

Let’s walk through it step by step, minus the noise.

Why React Icons?

React Icons is popular for a reason:

✅ Supports multiple icon libraries (Bootstrap, Font Awesome, Material, etc.)

✅ Tree-shaking friendly (only loads what you use)

✅ Simple ES module imports

✅ Works perfectly with Next.js

In short: small footprint, big payoff.

Step 1: Install React Icons

Inside your Next.js project directory, run:

npm install react-icons

That’s it. No extra config. No Next.js drama.

Step 2: Import an Icon

React Icons organizes icons by library.
For example, Bootstrap icons live under react-icons/bs.

import { BsGrid3X3GapFill } from "react-icons/bs";

Now you can use it like any React component:

Yes, it’s that boringly simple. Good software usually is.

Step 3: Using Multiple Icons

Most real-world UIs need more than one icon.
Let’s say you’re building a Grid/List view toggle.

Import both icons:

import { BsGrid3X3GapFill, BsList } from "react-icons/bs";

Now conditionally render them based on state.

Step 4: Practical Example – Grid/List Toggle

Here’s a clean, real-use example:

import { BsGrid3X3GapFill, BsList } from "react-icons/bs";
import { useState } from "react";

export default function ViewToggle() {
const [isGridView, setIsGridView] = useState(true);

return (

className="px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700"
onClick={() => setIsGridView(!isGridView)}
>
{isGridView ? : }

);
}

What’s happening here?

State controls which icon is shown

Icons replace text for cleaner UX

Only two icons are loaded, not the whole library

Efficient. Readable. Scalable.

Performance Notes (Because It Matters)

React Icons uses named imports, which means:

❌ No full icon pack loaded

✅ Only the icons you import end up in your bundle

✅ Works well with Next.js code-splitting

So yes, you can safely use icons without murdering Lighthouse scores.

Best Practices

Stick to one icon library per project for visual consistency

Avoid inline styling icons everywhere; wrap them in reusable components if needed

Don’t overuse icons. If everything screams, nothing communicates

Final Thoughts

React Icons + Next.js is one of those combinations that just works.
No hacks. No workarounds. No regret at build time.

If your UI still looks like plain text pretending to be an app, icons are the easiest upgrade you can make today.

Build clean. Ship fast. Keep bundles small. 🧠✨

Responsive Web Design: Understanding the Viewport (The Small Tag That Decides Everything)

Raj Aryan — Tue, 23 Dec 2025 11:47:45 +0000

Responsive web design sounds fancy until you realize most layout disasters start with one missing line of HTML.

Yes, this one.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ignore it, and your beautifully crafted site turns into a zoom-and-scroll nightmare on mobile. Include it correctly, and suddenly your layout behaves like it went to finishing school.

Let’s unpack why the viewport matters, what this meta tag actually does, and how to size content so users don’t rage-quit your website.

What Is the Viewport?

The viewport is the visible area of a web page on a device.

That’s it. No mystery.

On a desktop, it’s wide and forgiving
On a mobile phone, it’s narrow and brutally honest
On tablets, it’s somewhere in between and mildly judgmental

Without guidance, browsers try to be “helpful” by rendering pages as if they were designed for desktops. On mobile, that means tiny text, forced zooming, and horizontal scrolling. Basically, pain.

Setting the Viewport Correctly

Every responsive website should include this inside the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What This Line Actually Means

width=device-width
Tells the browser to match the page width to the actual screen width of the device. No fake desktop sizing.

initial-scale=1.0
Sets the initial zoom level to normal. Not zoomed in. Not zoomed out. Just sane.

Together, they give your layout a fair chance to behave across devices.

If this tag is missing, your CSS media queries can be perfectly written and still fail in spectacular silence.

With vs Without the Viewport Meta Tag

Without the viewport tag:

Mobile browsers pretend the screen is ~980px wide
Content shrinks to fit
Users pinch, zoom, squint, and leave

With the viewport tag:

The layout adapts to the real device width
Text stays readable
No horizontal scrolling circus

If you’ve ever wondered why a site “looks fine on desktop but broken on mobile,” this tag is usually the first suspect.

Size Content to the Viewport (Or Else)

Users expect to scroll vertically, not horizontally. Horizontal scrolling is the web equivalent of a door that opens the wrong way.

Here are rules that save UX lives.

1. Avoid Large Fixed-Width Elements

Fixed widths are fine until they’re not.

Bad idea:

img {
  width: 1200px;
}

Better idea:

img {
  max-width: 100%;
  height: auto;
}

If any element is wider than the viewport, the browser has no choice but to add horizontal scrolling. That’s on us, not the user.

2. Don’t Design for One Screen Width

The web is not:

1440px wide
375px wide
Or whatever your monitor happens to be

Designing layouts that only look good at one width is betting against reality.

Instead:

Use flexible layouts
Let content flow
Accept that screens vary wildly

Responsiveness is about adaptation, not pixel perfection.

3. Use Media Queries the Right Way

Media queries exist so you don’t have to torture one layout into fitting every screen.

Example:

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

Key ideas:

Prefer relative units like %, vw, em, rem
Be careful with absolute positioning
Avoid large fixed margins or offsets on small screens

Layouts should respond, not resist.

The Viewport Is the Foundation

Responsive design doesn’t start with Flexbox, Grid, or fancy frameworks.

It starts with:

Respecting the viewport
Letting content scale naturally
Designing for humans holding devices, not screenshots

That single meta tag doesn’t make your site responsive, but without it, nothing else truly works.

Think of it as opening the door before inviting CSS inside.

Final Thought

The viewport meta tag is small, boring, and easy to forget.

Which is exactly why it breaks so many websites.

Set it once. Understand it properly. And your layouts stop fighting the devices they’re running on.

That’s not magic. That’s just good web design.

🧩 Creating CSS Theme Variables from a JavaScript File

Raj Aryan — Fri, 24 Oct 2025 01:43:48 +0000

One source of truth for your design system — without manual duplication.

💡 Introduction

Ever changed a brand color in your design system and spent half your day hunting it down in both JavaScript and CSS? Yeah, that pain is universal.

In modern web projects — especially those involving data visualizations, dashboards, or multi-brand UIs — keeping your theme consistent between JavaScript and CSS is essential. But maintaining two parallel systems (a JS theme and a CSS variables file) is like maintaining two separate hearts for one body — inefficient and prone to drift.

So, what if you could generate your entire CSS theme automatically from a JavaScript file?
That’s exactly what we’ll do today.

🎨 The Problem: Duplicated Color Definitions

Imagine defining your theme like this:

const theme = {
  color: {
    brand: {
      primary: {
        DEFAULT: '#7B1FA2',
        light: '#BA68C8',
        dark: '#4A148C',
      },
      secondary: {
        DEFAULT: '#E91E63',
        light: '#F48FB1',
        dark: '#C2185B',
      },
    },
    data: {
      blue: '#40C4FF',
      turquoise: '#84FFFF',
      mint: '#64FFDA',
    },
  },
};

Looks great in JavaScript — but what about CSS?
You’ll still need something like:

:root {
  --color-brand-primary: #7B1FA2;
  --color-brand-primary-light: #BA68C8;
  ...
}

That’s where the nightmare begins — two files, double maintenance, and guaranteed inconsistency after your third late-night refactor.

Let’s fix that.

⚙️ Step 1: Project Setup

Make sure you have Node.js and npm installed.
Run the following to initialize your project:

npm init -y

Then create a file named theme.js and paste your theme object there.
Also, create a index.js — that’s where our automation script lives.

touch theme.js index.js

🧠 Step 2: Import the Theme

Inside index.js:

import theme from './theme.js';

console.log(theme);

Run it:

node index.js

If your theme logs correctly — you’re golden. Now we’ll transform that object into CSS variables.

🪄 Step 3: Mapping JS Theme to CSS Variables

We’ll need a function that takes a deeply nested JS object and flattens it into CSS variable definitions.

Here’s the magic function:

const mapTheme = ([key, value]) => {
  if (typeof value === 'string') {
    return `--${key}: ${value}`;
  }

  return Object.entries(value).flatMap(([nestedKey, nestedValue]) => {
    const newKey = nestedKey === 'DEFAULT' ? key : `${key}-${nestedKey}`;
    return mapTheme([newKey, nestedValue]);
  });
};

When we run:

console.log(Object.entries(theme).flatMap(mapTheme));

We’ll get an array like:

[
  '--color-brand-primary: #7B1FA2',
  '--color-brand-primary-light: #BA68C8',
  '--color-data-blue: #40C4FF',
  ...
]

Clean, structured, and scalable.

🔁 Step 4: Writing to a CSS File

Now let’s export those variables into an actual CSS file so your app can use them.

import { writeFile } from 'fs/promises';
import theme from './theme.js';

const mapTheme = ([key, value]) => {
  if (typeof value === 'string') {
    return `--${key}: ${value}`;
  }

  return Object.entries(value).flatMap(([nestedKey, nestedValue]) => {
    const newKey = nestedKey === 'DEFAULT' ? key : `${key}-${nestedKey}`;
    return mapTheme([newKey, nestedValue]);
  });
};

const buildTheme = async () => {
  try {
    const result = Object.entries(theme).flatMap(mapTheme);

    let content = result.map((line) => `\t${line};`);
    content = [':root {', ...content, '}'].join('\n');

    await writeFile('src/theme.css', content, { encoding: 'utf-8' });

    console.log('✅ CSS file written successfully!');
  } catch (e) {
    console.error('❌ Error:', e);
  }
};

buildTheme();

Run:

node index.js

Your project now has src/theme.css automatically generated from your JS theme.

🌈 The Result

Your CSS file will look like this:

:root {
  --color-brand-primary: #7B1FA2;
  --color-brand-primary-light: #BA68C8;
  --color-brand-primary-dark: #4A148C;
  --color-brand-secondary: #E91E63;
  --color-brand-secondary-light: #F48FB1;
  --color-brand-secondary-dark: #C2185B;
  --color-data-blue: #40C4FF;
  --color-data-turquoise: #84FFFF;
  --color-data-mint: #64FFDA;
}

Now both your CSS and JS share the same source of truth.
Update one color in your theme.js, rerun the script — and voilà, your entire design system stays in sync.

🧩 Why This Matters

No more duplication.
One source of truth — your JS theme.
Works with any design system.
Extend beyond colors — typography, spacing, breakpoints — all can be auto-generated.
Future-proof your codebase.
As your app scales, your theme stays manageable and consistent across frameworks (React, Vue, or even plain HTML).

🚀 Bonus: The Recursive Power

This solution isn’t limited to colors — it works for any nested object structure.
That means you can generate CSS variables for spacing, fonts, shadows, transitions, or even brand-specific theming.

🧩 Final Thoughts

This approach merges two worlds — JavaScript flexibility and CSS custom property power.
You write your theme once, and your build script ensures perfect alignment between logic and presentation.

If you’re serious about design consistency and developer happiness,
automate your theme.

✍️ Written by Er Raj Aryan

Senior Software Engineer | Frontend Architect | Lover of clean design systems and declarative CSS

🧩 Testing Feature Support for Modern CSS — The Smart Developer’s Guide

Raj Aryan — Thu, 23 Oct 2025 16:51:30 +0000

“CSS evolves faster than your morning coffee cools.”
Browsers update monthly. Specs evolve weekly. Twitter debates daily.

So how do you, a developer with a product to ship, know when a CSS feature is safe to use?

Let’s break it down — no fluff, no theory overdose — just clear tactics for testing feature support, using fallbacks, and shipping confidently in a world where CSS never sits still.

🚀 Why CSS Feature Testing Matters

Modern CSS is a marvel.
You can build responsive layouts without media queries, animate scroll timelines, or even nest selectors like a pro.
But — here’s the catch — not every user sees what you see.

Different browsers, versions, devices, and update habits create a compatibility maze.
Feature testing ensures your sleek interface doesn’t fall apart when your user’s Safari decides to act prehistoric.

In this post, we’ll cover:

How to discover new CSS features
How to test for feature support
When to adopt new features
How to create solid fallbacks
And which tools & polyfills make your life easier

🧭 Step 1: Discovering New CSS Features

The web community moves fast, but it’s surprisingly trackable if you know where to look.

🔍 Where to Stay Updated

Follow the experts:

Una Kravets (Chrome)
Jen Simmons (WebKit)
Miriam Suzanne
Bramus Van Damme
Chen Hui Jing
Kevin Powell
Michelle Barker

Read developer-first newsletters:

CSS Weekly
Frontend Focus
Smashing Magazine Newsletter
CSS Layout News
The CodePen Spark

Watch the big three:

And if you’re the kind who loves dashboards — check the Interop Dashboard to see which features are becoming cross-browser stable.

💡 Pro Tip:
You don’t need to learn every new feature immediately.
Just be aware — so when you face a layout problem, you already know there might be a smarter, cleaner, modern solution.

🧪 Step 2: Testing for CSS Feature Support

Enter your best friend: the @supports at-rule.

It lets you ask the browser directly — “Do you understand this property or selector?”

🎯 Example: Basic Feature Detection

@supports (accent-color: red) {
  button {
    accent-color: teal;
  }
}

If the browser understands accent-color, that block runs. Otherwise, it’s ignored silently.
You can also test selectors:

@supports selector(:is(a)) {
  a:is(.primary, .secondary) {
    color: hotpink;
  }
}

Combine them using and, or, and not — just like logical operators.

@supports (display: grid) and (aspect-ratio: 1) {
  /* Use advanced layout magic */
}

⚠️ Limitations of @supports

It cannot detect at-rules like @container or @layer.
Partial implementations might fool you — for example, early versions of Firefox’s :has() returned false positives.
Even @supports itself might not be supported in very old browsers.

So test broadly — Chrome, Edge, Firefox, Safari — before celebrating.

🧮 Step 3: Deciding When to Use a New Feature

The million-dollar question: “Should I use it yet?”

Let’s talk strategy.

💻 Check Real-World Support

Use caniuse.com for an overview — it shows browser versions, support percentage, and known issues.
But don’t just trust the percentage. Cross-check it with your site analytics.

If your audience is 90% on Chrome and Edge, go wild.
If you’re building a dashboard for a bank running Windows 7 machines on IE mode… play it safe.

🧠 Understand Impact

Low-impact features (safe to use early):

accent-color
scroll-margin
text-underline-offset
overscroll-behavior
::marker

High-impact features (wait until stable):

Layout-critical things like @container, subgrid, or relational :has()

Rule of thumb:
If feature failure breaks the user’s workflow, it’s not ready yet.

🧩 Step 4: Using Fallbacks Like a Pro

Here’s where CSS’s biggest superpower kicks in — the cascade.

CSS fails silently.
If a property isn’t recognized, it’s skipped — no errors, no drama.

You can layer your fallbacks like a smooth DJ mix.

.card img {
  height: 200px; /* fallback */
}

@supports (aspect-ratio: 1) {
  .card img {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

Older browsers stick to the first rule.
Modern ones flex with the aspect-ratio magic.

Another example — handling logical viewport units:

height: 100vh; /* legacy */
block-size: 100dvb; /* modern */

🧰 Handling Prefixed Properties

Ah, the old -webkit- and -moz- days.
Some browsers still rely on prefixes for experimental features.

Use Autoprefixer — a PostCSS plugin — to handle that automatically.

.example {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

Autoprefixer will keep this list fresh based on browser data.
No manual labor required.

⚙️ Step 5: Build Tools & Polyfills

Now we move to automation — because no sane developer wants to manage compatibility manually.

🧱 Polyfills

A polyfill mimics unsupported CSS behavior using JS or older CSS hacks.
Example: container query polyfills that simulate @container for older browsers.

Use them only when:

The feature is critical, and
A fallback can’t achieve similar results.

Keep polyfills updated — outdated ones can break your styles silently.

🪄 Build Tools

PostCSS is your go-to:

Add postcss-preset-env to use future CSS today.
It auto-adds polyfills and prefixes.
Integrates with your browserslist config.

Example browserslist in package.json:

"browserslist": [
  "> 0.5%",
  "last 2 versions",
  "not dead"
]

LightningCSS is another rising star —
a single package that handles prefixing, minification, and future CSS transpiling.
Perfect for modern setups like Next.js or Vite.

🧠 Bonus: JS-Based Feature Detection

For more control, use the CSS.supports() API in JavaScript:

if (CSS.supports('width: 1cqi')) {
  document.body.classList.add('supports-cqi');
}

You can then use that class in your stylesheet for progressive enhancements.

Old-school devs may remember Modernizr — a JS library that did this automatically.
It’s now outdated, but a modern replacement called SupportsCSS offers similar functionality with lightweight customization.

🧩 The Big Picture

Modern CSS is not about memorizing everything — it’s about strategic adoption.
You test, observe, and evolve — just like the web itself.

✅ Quick Recap

Discover: Follow CSS news & release notes.
Test: Use @supports or CSS.supports().
Decide: Evaluate impact and audience support.
Fallback: Always layer old + new gracefully.
Automate: Use PostCSS, LightningCSS, and Autoprefixer.

✨ Final Thoughts

CSS isn’t just a language anymore — it’s a living ecosystem.
The devs who thrive aren’t the ones who know every property, but the ones who know how to adopt new ones safely.

So next time you find a shiny feature like :has() or @container, don’t just copy the demo — test it, guard it, and ship it responsibly.

That’s how you stay modern without breaking the web.

🧡 Author’s Note

I’m Er Raj Aryan, a Senior Software Engineer who builds scalable front-end systems and SaaS dashboards.
I write about modern CSS, React, performance, and real-world engineering — practical stuff, no fluff.
Follow me for more developer-first insights and real-world coding breakdowns.

🚀 Smarter Debouncing in React — Introducing `@er-raj-aryan/use-smart-debounce`

Raj Aryan — Tue, 14 Oct 2025 17:29:37 +0000

Tired of making a dozen API calls every time a user types three letters?
Meet @er-raj-aryan/use-smart-debounce — a lightweight React hook library that makes debouncing async-safe, TypeScript-ready, and smooth like butter 🧈

👉 NPM: @er-raj-aryan/use-smart-debounce
👉 GitHub: https://github.com/er-raj-aryan/use-smart-debounce

💡 Why I Built This

While building a Next.js dashboard, I ran into the same old issue — API calls firing on every keystroke during search input.
Existing solutions like lodash.debounce or use-debounce didn’t handle async calls, cancellation, or stale responses well.

So I decided to build something that does:

Cancels stale API requests
Handles async promises safely
Works with leading, trailing, and maxWait modes
Comes with full TypeScript support
Ships with zero dependencies

⚙️ Installation

npm i @er-raj-aryan/use-smart-debounce
# or
yarn add @er-raj-aryan/use-smart-debounce

🧩 What’s Inside

Hook	Use Case	Description
`useDebouncedValue`	Debounce values	Returns a delayed version of any state value
`useDebouncedCallback`	Debounce functions	Debounce any callback with leading/trailing control
`useDebouncedAsync`	Debounce async calls	Cancels in-flight requests & ignores stale responses

🧠 Basic Example — Debounce a Value

import { useDebouncedValue } from "@er-raj-aryan/use-smart-debounce";
import { useState, useEffect } from "react";

export default function SearchBox() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebouncedValue(query, 500);

  useEffect(() => {
    if (debouncedQuery.length >= 3) {
      console.log("Search:", debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Type to search…"
    />
  );
}

✅ Fires only after 500ms of inactivity
✅ Perfect for live search or filtering

⚡ Debounce Callbacks with Control

import { useDebouncedCallback } from "@er-raj-aryan/use-smart-debounce";

function ResizeTracker() {
  const debouncedResize = useDebouncedCallback(
    () => console.log("Window resized:", window.innerWidth),
    300,
    { leading: false, trailing: true }
  );

  useEffect(() => {
    window.addEventListener("resize", debouncedResize);
    return () => window.removeEventListener("resize", debouncedResize);
  }, []);

  return <p>Resize the window to see it in action</p>;
}

🪄 Async-Safe Debouncing

This is where most debounce hooks fail — multiple async calls return out of order, and the old response overwrites the new one.
useDebouncedAsync handles that for you:

import { useDebouncedAsync } from "@er-raj-aryan/use-smart-debounce";
import { useState, useEffect } from "react";

function LiveSearch() {
  const [query, setQuery] = useState("");

  const { run, status, data, error } = useDebouncedAsync(
    async (q: string) => {
      if (q.length < 3) return [];
      const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
      const json = await res.json();
      return json.results ?? [];
    },
    500
  );

  useEffect(() => {
    run(query);
  }, [query]);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      {status === "loading" && <p>Loading…</p>}
      {error && <p style={{ color: "red" }}>Error fetching</p>}
      <ul>
        {Array.isArray(data) &&
          data.map((r: any) => <li key={r.id}>{r.name}</li>)}
      </ul>
    </div>
  );
}

✨ Features:

Cancels the previous API call when user keeps typing
Prevents stale results from overwriting fresh ones
Tracks status, data, and error

🧮 Real Example — HS Code Lookup with Material UI

Here’s a practical example using MUI’s <Autocomplete> with your HS Code API (/db/hs_code_list/?search_key=):

import { Autocomplete, TextField } from "@mui/material";
import { useDebouncedAsync } from "@er-raj-aryan/use-smart-debounce";
import { useState, useEffect } from "react";

type HS = { hs_code: string; description: string };

export default function HSCodeSearch() {
  const [value, setValue] = useState<HS | null>(null);
  const [options, setOptions] = useState<HS[]>([]);

  const { run, status, data } = useDebouncedAsync(
    async (q: string) => {
      if (q.length < 3 || !/^\d+$/.test(q)) return [];
      const res = await fetch(`/db/hs_code_list/?search_key=${q}`);
      const json = await res.json();
      return json.results ?? [];
    },
    600
  );

  useEffect(() => {
    if (Array.isArray(data)) setOptions(data);
  }, [data]);

  return (
    <Autocomplete
      size="small"
      options={options}
      value={value}
      onChange={(_, v) => setValue(v)}
      getOptionLabel={(o) => o.hs_code}
      onInputChange={(_, v) => run(v)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="HS Code"
          helperText={
            value?.description ||
            (status === "loading" ? "Searching..." : "")
          }
        />
      )}
    />
  );
}

⚖️ Comparison Table

Feature	`@er-raj-aryan/use-smart-debounce`	`use-debounce`	`ahooks`	`lodash.debounce`
🧠 TypeScript support	✅ Native	✅	✅	❌
⚙️ Async-safe	✅ Cancels + ignores stale	❌	⚠️ Partial	❌
🔁 Leading/Trailing	✅	⚠️ Partial	✅	✅
🌀 Race protection	✅ Yes	❌	❌	❌
⚡ Bundle size	<3 KB	~4 KB	~200 KB	24 KB
🧩 Dependencies	0	0	20+	1
🧰 Designed for React	✅ Hooks	✅ Hooks	✅	❌

🚀 Why You’ll Love It

No dependencies → ultra-fast build
Tiny footprint → great for production apps
Async-safe → ideal for API-driven UIs
TypeScript-ready → works out of the box

🏁 Wrap Up

If you’re building React apps that rely on API queries, form inputs, or live filters —
@er-raj-aryan/use-smart-debounce will save you time, requests, and user frustration.

👉 Install now:

npm i @er-raj-aryan/use-smart-debounce

🔗 Links:

npm: @er-raj-aryan/use-smart-debounce
GitHub: https://github.com/er-raj-aryan/use-smart-debounce

🧑‍💻 Author: Er Raj Aryan
Frontend Engineer | React / Next.js Developer | Open Source Enthusiast

If you found this useful — ⭐️ the repo or drop a comment!
Let’s build smarter UIs together 💙

CSS Sizing Units: The Complete Guide to Numbers, Percentages, and Relative Lengths

Raj Aryan — Mon, 06 Oct 2025 02:33:02 +0000

Understanding how sizing works in CSS is one of the most powerful skills you can develop as a front-end developer. From controlling responsive layouts to crafting accessible typography, units are the foundation of modern design.

🌐 Why Sizing Units Matter

The web is inherently responsive — content must adapt to countless screen sizes and device types. Yet, sometimes, we need precise control over dimensions to enhance readability or maintain visual harmony.

For instance, limiting line length improves reading comfort. CSS gives us the ch unit for exactly this: it represents the width of the character “0” in the chosen font. Using max-width: 60ch; ensures your text never exceeds roughly 60 characters per line — the sweet spot for readability.

Let’s explore the different types of sizing units in CSS and how each affects layout, typography, and performance.

🧮 Numbers in CSS

Numbers are unitless values used in various contexts — such as opacity, line-height, or scaling.

p {
  font-size: 24px;
  line-height: 1.5; /* 150% of font size → 36px */
}

Here, 1.5 means 1.5 times the element’s computed font size.

Pro tip:
Use unitless line-height. It scales naturally with inherited font sizes, ensuring better accessibility and design consistency.

Other examples:

opacity: 0.5 → 50% transparency
filter: sepia(0.5) → 50% sepia effect
transform: scale(1.2) → enlarge element to 120%

Numbers are simple, but when you attach a unit, you unlock dimensions.

📏 Dimensions and Lengths

When a number gets a unit, it becomes a dimension.
Example: 1rem, 100px, 50%.

➤ Absolute Lengths

Absolute lengths are fixed and don’t change with viewport or font size. They’re best used for print styles or exact measurements.

Unit	Name	Equivalent
`cm`	Centimeter	1cm = 96px / 2.54
`mm`	Millimeter	1mm = 1/10th cm
`in`	Inch	1in = 96px
`pt`	Point	1pt = 1/72 in
`px`	Pixel	1px = 1/96 in

Example:

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

If you print this, it’s literally 10×5 cm. But on screens, pixel density varies, so use absolute units sparingly online.

⚖️ Percentages in CSS

Percentages are relative to a parent element’s size.

div {
  width: 300px;
  height: 100px;
}
div p {
  width: 50%; /* 150px */
}

Margins and paddings use the parent’s width as a reference — even for vertical directions:

div p {
  margin-top: 50%; /* 150px */
}

Transforms, however, are relative to the element itself:

div p {
  width: 50%;
  transform: translateX(10%); /* 10% of its own width */
}

Understanding this distinction prevents unpredictable layouts.

📚 Relative Length Units

Relative units scale according to other measurements — like font size or viewport dimensions. These are the heroes of responsive design.

🔤 Font-Size-Relative Units

Unit	Relative To	Use Case
`em`	Font size of the parent	Padding, text spacing
`rem`	Font size of the root (`html`)	Global typography
`ch`	Width of “0” character	Line length control
`ex`	x-height of font	Small typographic tweaks
`lh`	Line height	Vertical rhythm

Example:

p {
  font-size: 1.25rem; /* 20px if root is 16px */
  max-width: 60ch; /* readable line length */
}

Using em and rem ensures that if a user increases their system font size, your layout scales gracefully — a must for accessibility.

🖥️ Viewport-Relative Units

These depend on the browser window size, making them ideal for fluid layouts.

Unit	Meaning
`vw`	1% of viewport width
`vh`	1% of viewport height
`vmin`	1% of the smaller dimension
`vmax`	1% of the larger dimension

Example:

div {
  width: 50vw;
  height: 50vh;
}

✨ Dynamic Viewport Units (2023+)

Modern browsers introduced svh, lvh, and dvh units to account for mobile UI behavior (like hiding address bars).

Unit	Behavior
`svh`	Small viewport height (UI visible)
`lvh`	Large viewport height (UI hidden)
`dvh`	Dynamic viewport height (changes in real time)

📦 Container-Relative Units

The newest addition to CSS sizing: container queries.
They let components adapt to their container instead of the entire viewport.

Unit	Relative To
`cqw`	1% of container’s width
`cqh`	1% of container’s height
`cqmin`	1% of smaller dimension
`cqmax`	1% of larger dimension

These units make responsive components (not just layouts) possible — a massive leap forward in modular design.

🌀 Miscellaneous Units

🎯 Angles

Used for rotations or color hues:

transform: rotate(60deg);

Units include deg, rad, grad, and turn.

📸 Resolution

Used for print and high-DPI media queries:

@media (min-resolution: 192dpi) { ... }

💡 Key Takeaway

Absolute units → fixed and best for print.
Relative units → responsive and user-friendly.
Viewport and container units → modern tools for fluid design.
Use em, rem, ch, vw, and vh for flexible, scalable layouts.

🧠 Rule of Thumb

If it’s meant for screens — stay relative.
If it’s meant for print — go absolute.

📚 Further Reading

Author: Er Raj Aryan
Medium: Er Raj Aryan
*
*Frontend Engineer | Writing about CSS, design systems, and modern web craft.