DEV Community: swhabitation

Why CSS Transitions Slow Down Your Website and How to Fix It ?

swhabitation — Mon, 01 Sep 2025 09:15:31 +0000

We all love a smooth transition. A button that fades in gracefully, a card that slides up just right, or a modal that feels buttery when it appears it’s these little details that make an interface feel modern and polished.

Sometimes CSS transitions don’t work the way we expect. Instead of being smooth, they stutter. Instead of improving UX, they make it worse. And instead of making our UI feel fast, they slow everything down.

So what’s happening behind the scenes? Why do CSS transitions goes wrong? And more importantly how do we fix them?

1. Transitioning the Wrong Properties

Not all CSS properties are created equal when it comes to transitions.

Good properties to animate: opacity, transform like translate, scale, rotate.
Bad properties to animate: width, height, top, left, margin.

Wait why? Because properties like opacity and transform can be handled by the GPU, which is fast and efficient. But properties like width or top force the browser to recalculate layouts and repaint the screen super expensive operations.

Quick Fix: Stick to transform and opacity whenever possible. If you need to resize something, try scaling instead of changing width/height directly.

2. Too Many Elements Transitioning at Once

A single element fading in ? its smooth. A hundred elements all sliding and fading at the same time?

The more elements the browser has to animate, the more work it has to do per frame. On slower devices, this often results in choppy motion.

Quick Fix: Does every single element really need a transition? Sometimes just animating a parent container instead of each child achieves the same effect with less cost.

3. Long or Awkward Timing Functions

Ever seen a transition that technically works but just feels “off”? That’s usually because of the easing curve.

ease-in and ease-out can feel too slow in the wrong context.
A poorly chosen cubic-bezier can make your UI feel unnatural.
Long durations like 2s for a button hover make things feel sluggish.

Quick Fix: For UI interactions, keep transitions short (150–300ms). Use ease or ease-in-out for natural feel. Reserve fancy cubic-bezier curves for special effects.

4. Mixing CSS with JavaScript Animations

Sometimes developers mix CSS transitions with JavaScript-based animations (like setTimeout or requestAnimationFrame logic). If not handled carefully, this can cause jank stuttering due to the browser trying to sync two different animation systems.

Quick Fix: Stick to one system for a specific animation. If it’s just a fade/slide, pure CSS is usually best. Use JS animations (e.g., with libraries like Framer Motion or GSAP) when you need complex choreography.

5. Forgetting About "Reduced Motion"

Not all users love animations. For some, too much motion causes discomfort. If you don’t account for this, your transitions might break UX for a whole group of users.

Quick Fix: Use the prefers-reduced-motion media query to offer a minimal or no-transition experience for those who opt out.

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

Conclusion

CSS transitions are supposed to enhance user experience, not harm it. If your UI feels sluggish or "heavy" chances are,

You’re animating expensive properties.
Too many elements are animating at once.
Your timing/duration isn’t suited for the interaction.
You’re mixing CSS and JS animations poorly.
You forgot accessibility (reduced motion).

A few small tweaks like switching to transform, shortening durations, or reducing the number of animated elements can instantly make your UI feel smoother and more professional.

What is Blitz.js? Features, Pros, Cons, Installation & FAQs

swhabitation — Fri, 22 Aug 2025 13:13:36 +0000

If you’ve ever wished for a full-stack React framework that feels like Ruby on Rails but works in the modern JavaScript world, Blitz.js might be your new best friend. Think of it as Next.js on steroids – it keeps all the good parts of Next.js while adding powerful tools for building full-fledged apps faster.

Let’s explore what Blitz.js is, what makes it special, how to install it step by step, and answer some beginner FAQs.

What is Blitz.js?

Blitz.js is a full-stack framework for React that’s built on top of Next.js. It’s designed to give developers everything they need in one package—frontend, backend, database, authentication, and even code scaffolding.

If you’ve used Next.js, you already know the basics. But Blitz takes it further by removing a lot of the repetitive tasks and giving you a “batteries-included” experience.

Key Features of Blitz.js

Below are some features that make Blitz.js shine,

Full-stack in one place: No need to separately set up frontend and backend projects.
Zero-API Data Layer: You don’t have to manually write API routes. Your functions can be called directly from the frontend.
Authentication out of the box: User signup, login, and sessions are already baked in.
Code scaffolding: Quickly generate pages, forms, and CRUD with simple commands.
Prisma integration: Works beautifully with Prisma ORM for database management.
Next.js compatible: You still have SSR (Server-Side Rendering), SSG (Static Site Generation), and all the Next.js features you love.

Advantages of Blitz.js

Saves tons of setup time for full-stack apps.
Great developer experience with code generation tools.
Built-in auth and session management.
Perfect for startups and MVPs (Minimum Viable Products).
Uses popular tools like Next.js and Prisma.

Disadvantages of Blitz.js

Community is still small compared to Next.js.
Might feel opinionated for some developers.

Updates are not as frequent as bigger frameworks.
Overkill if you just need a static site or simple frontend.

Step-by-Step Installation Guide for Blitz.js

Let’s go from scratch and install Blitz.js together.

Step 1: Install Node.js
Make sure you have Node.js v16 or later installed. You can check with:

node -v

If not installed, download from nodejs.org.

Step 2: Create a New Blitz.js App

Run the following command in your terminal:

npx blitz create my-blitz-app

It will ask you a few setup questions. Choose the options you prefer (default is fine for beginners).

Step 3: Navigate to Your Project

cd my-blitz-app

Step 4: Install Dependencies
Blitz will install dependencies automatically, but if needed:

npm install
or
yarn install

Step 5: Run the Development Server

npm run dev

Now visit http://localhost:3000 in your browser, and boom, your Blitz app is running.

Step 6: Explore Authentication

Blitz comes with user login and signup flows out of the box. You’ll already see the auth pages in your project.

FAQ's

Q: Is Blitz.js the same as Next.js?
A: No. Blitz.js is built on top of Next.js. You can think of it as Next.js + full-stack features + batteries included.

Q: Can I use my existing Next.js knowledge?
A: Yes! Most Next.js concepts (pages, routing, SSR, etc.) work the same in Blitz.

Q: Do I need a backend if I use Blitz.js?
A: Not really. Blitz has a zero-API layer, so your frontend can directly call backend functions without writing REST or GraphQL manually.

Q: What database works best with Blitz.js?
A: Blitz is designed to work seamlessly with Prisma, which supports databases like PostgreSQL, MySQL, and SQLite.

Q: Is Blitz.js good for beginners?
A: Yes, if you want to build full-stack apps quickly. But if you only need a static site, stick with Next.js.

Conclusion

Blitz.js is like the fast track to building React full-stack apps. Instead of setting up frontend, backend, and authentication separately, Blitz gives it all to you in one package.

If you’re a startup founder, indie hacker, or beginner developer who wants to build real apps quickly, Blitz.js can save you weeks of setup time.

Alpine.js Introduction: Features, Pros & Cons, Install Guide

swhabitation — Fri, 22 Aug 2025 04:30:14 +0000

JavaScript frameworks are scary sometimes right ? You hear names like React, Vue, Angular, Svelte and you think: “Do I really need to install 100 dependencies just to make a button toggle?”

That’s where Alpine.js comes in. Think of Alpine like the “mini” version of Vue. It gives your HTML some superpowers without eating your brain cells. You can literally drop in a script tag and start using it. No complex setup, no bundlers, no headache.

It’s perfect when you just need to sprinkle some interactivity into your website like dropdown menus, modals, tabs, accordions, form validation, counters all the small things.

What Exactly is Alpine.js?

Alpine.js is a lightweight JavaScript framework which is around 7KB gzipped, yup that small which makes your HTML reactive. Instead of writing long document.querySelector() scripts, you just write little attributes directly in your HTML like x-show, x-data, x-model etc.

It feels almost like Vue, but way smaller and simpler.

Example? Here’s a tiny counter app in Alpine:

<div x-data="{ count: 0 }">
  <button @click="count++">Increment</button>
  <p>You clicked <span x-text="count"></span> times.</p>
</div>

That’s it. No big setup. No imports. Just HTML with a sprinkle of Alpine.

Key Features of Alpine.js

Here are some of the cool things it can do:

x-data → Store your state.
x-model → Two-way data binding (like React’s useState).
x-show / x-if → Conditional rendering.
x-for → Loops (like rendering a list).
x-transition → Add animations super easily.
Magic helpers like $refs, $el, $dispatch, $watch.

Basically, all the "good parts" of Vue/React but in mini size.

Advantages of Alpine.js

Very beginner friendly: You can learn it in a day.
Easy to maintain for small components: Clean and declarative.
Works well with server-rendered apps: If you use Laravel, Django, or PHP – Alpine is gold.
Great for small projects: Don’t use react to create a simple dropdown.
Super lightweight: Only ~7KB. Your users won’t even notice the extra load.
No setup needed: Just add a script tag and done.

Disadvantages of Alpine.js

Not for big apps: No routing, no built-in state management.
Small ecosystem: Not many third-party plugins compared to React or Vue.
Messy if overused: Putting too much JS inside HTML can make it hard to read.
Performance hit in very big DOM updates: Because it directly touches the DOM (no virtual DOM like React).

So basically, Alpine is not trying to be React or Vue. It’s more like “jQuery’s modern replacement.

How to install Alpine.js ?

There are two ways:

1. The easy way using CDN : Just add this in your

<html>
    <head>
        ...
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    ...
</html>

Done, Now you can start writing Alpine code in your HTML.

2. The modern way using npm:

npm install alpinejs

Then import it in your project:

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

This is good if you’re working with modern bundlers or frameworks.

When Alpine.js is a Perfect Choice

You’re a beginner and want to learn how frameworks work in a fun way.
You just need a quick prototype, no time for React or Vue setup.
You’re making a static site but want dropdowns, modals, or tabs.
You use Laravel / PHP / Django and need some JS sprinkles.
You want to replace jQuery with something modern.

Why Not Just Use Vanilla JS?

Good question. Yes, you can do all of this with plain JavaScript. But,

Alpine makes it short and sweet.
You’ll write more code.
You’ll repeat yourself again and again.

FAQ's

Q: Is Alpine.js like React?
A: Not really. React is for building big single-page apps. Alpine is for small stuff.

Q: Can I use it with Tailwind CSS?
A: Yes! In fact, Alpine and Tailwind are best friends. Many people use them together.

Q: Is it SEO friendly?
A: Yes, because Alpine works on top of your HTML. Your content is already there.

Q: Can I use it in WordPress?
A: Of course! Just enqueue the script or drop the CDN link and you’re ready.

Q: Should I use Alpine for big projects?
A: Nope. Use Vue, React, or Angular for large apps.

Conclusion

Alpine.js is like the pocket knife of JavaScript frameworks. It’s small, sharp, and super handy. If you just need to add interactivity without going full React mode, Alpine is the way to go.

It’s not a React killer. It’s not a Vue competitor. It’s just a nice little tool to make your life easier.

Next time you need a dropdown or a simple modal don’t install 50 packages. Just drop Alpine.js and relax.

What is Qwik.js? Features, Pros & Cons, Install Guide & FAQs

swhabitation — Thu, 21 Aug 2025 13:02:48 +0000

So you know how most JavaScript frameworks like React, Vue, Angular need to load big bundles before your site feels alive? Yup, that’s painful.

Qwik.js comes with a crazy idea, what if the page is interactive instantly, without waiting for hydration or loading tons of JS? That’s Qwik. It’s built for speed. They call it resumable apps.

In short, Qwik.js is a modern front-end framework that focuses on instant loading, lazy loading everything, and crazy fast performance.

What is Qwik.js?

Qwik.js is a next-gen front-end framework created by the team behind Builder.io. Its goal is to deliver the fastest possible websites by:

Loading almost no JavaScript at first,
Then resuming interactivity only when needed,
And lazy-loading everything else on demand.

Think of it as: React + magic, but faster.

It’s not just another framework, it’s trying to solve the main problem with modern web, slow sites because of too much JS.

Key Features of Qwik.js

Developer Experience: JSX support (like React), and fast dev environment.
Resumability: Instead of rehydrating like React/Vue, Qwik resumes from the server-rendered state. No JS boot-up.
Lazy Loading Everything: Components, listeners, even code you don’t need right now – all lazy loaded.
Built-in SSR & Edge Ready: Works with modern hosting like Vercel, Netlify, Cloudflare.
Small Initial JS: Loads almost zero JS at first.
SEO Friendly: Since it’s server-first, search engines love it.

Why You Should Use Qwik.js?

Instant loading websites: No hydration delay. Site feels interactive right away.
Great for SEO: Because it sends real HTML from server, not empty divs.
Super scalable: Even big apps can stay fast because everything is lazy. Modern
Edge support: Works with edge functions and modern infra.
Familiar syntax: Looks like React, so easy if you already know JSX.

Downsides of Qwik.js

Early adoption risk: Since it’s still evolving, APIs may change.
New framework: Still young, ecosystem is not very big.
Learning curve: Ideas like "resumability" are new, so takes time to understand.
Smaller community: Not as many tutorials or libraries compared to React or Vue.

Installation – How to Start with Qwik.js ?

You can create a new Qwik app easily with their CLI.

npm create qwik@latest

Then follow prompts to set up your app.

Or if you want Qwik City (for routing + full stack features):

npm create qwik@latest my-app
cd my-app
npm install
npm start

Boom, you have a Qwik project running locally.

When Qwik.js is a Perfect Choice

You want future-ready tech, not legacy heavy frameworks.
You want blazing fast websites where performance is #1.
You’re tired of hydration problems in React/Vue apps.
You care about SEO and Core Web Vitals.
You’re building sites for global users (where internet may be slow).

Why Not Just Use React or Vue?

React and Vue are amazing, but they rely on hydration → meaning they re-download and re-run code in the browser to “wake up” the page. This can slow things down.

Qwik skips hydration completely. It “resumes” from server state and then loads only what’s needed. That’s the magic.

So yeah, if speed is your main goal → Qwik wins.

FAQ's

Q: Is Qwik.js production ready?
A: Yes, many companies are already using it, but it’s still evolving.

Q:Does it feel like React?
A: Yes, syntax is JSX-based, so React devs feel at home.

Q:Can I use it with Tailwind CSS?
A: Totally. Works great with Tailwind.

Q: Is Qwik.js free?
A: Yes, it’s open-source under MIT license.

Q: Should I replace React with Qwik?
A: Not always. If your app is already big in React, keep it. But for new projects where performance is important, Qwik is a strong choice.

Conclusion

Qwik.js is not just another framework, it’s a fresh idea. It’s made for a world where users expect sites to load instantly.

If you want speed, SEO, and future-proof performance → try Qwik. It may feel new, but it’s worth experimenting with.

Next time you build a site, instead of fighting hydration or adding 50 performance hacks, just go with Qwik.

Why position: absolute Doesn’t Work Inside Flexbox ?

swhabitation — Mon, 11 Aug 2025 04:36:38 +0000

Flexbox is amazing for arranging elements on a page. position: absolute is great for taking an element out of the normal flow and placing it exactly where you want.

So naturally, combining them should be awesome right?

Well… sometimes it is. Sometimes it completely breaks your layout, Yess.

In this blog, we’ll cover why using position: absolute inside Flexbox can cause unexpected behavior and the right way to fix it.

Why Does It Break?

When you put an absolutely positioned element inside a flex container:

The element is removed from the flex flow, meaning the flex container won’t consider it in its sizing or alignment.
It will be positioned *relative to the nearest positioned ancestor *(the closest parent with position: relative, absolute, or fixed).
Flex alignment properties (align-items, justify-content) won’t affect it.

1. It Ignores Flex Sizing

If your flex item is position: absolute, Flexbox no longer controls its width or height.

Fix: Use position: relative if you still want Flexbox sizing to apply, or manually set dimensions for the absolute item.

2. It Can Escape the Container

If the flex parent doesn’t have position: relative, the absolute element may align to the body instead of your intended container.

Fix: Always set the flex container to position: relative if you need absolute children to stay inside it.

.flex-container {
  display: flex;
  position: relative; /* Important */
}

3. Alignment Stops Working

align-items: center won’t work on an absolute item.

Fix: Manually center it using transforms:

.absolute-item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Example:

<div class="flex-container">
  <div class="flex-item">Normal Flex Item</div>
  <div class="absolute-item">Absolute Item</div>
</div>

.flex-container {
  display: flex;
  position: relative; /* Keeps absolute child inside */
  height: 200px;
  background: #f2f2f2;
}

.flex-item {
  background: lightblue;
  flex: 1;
}

.absolute-item {
  position: absolute;
  top: 10px;
  right: 10px;
  background: pink;
  padding: 10px;
}

Key Takeaways

Absolute items are removed from Flexbox flow → Flex sizing & alignment won’t apply.
Always set position: relative on the flex container.
Manually position & size absolute elements.
For responsive layouts, avoid absolute positioning unless necessary.

Conclusion

Absolute positioning can be useful inside Flexbox for overlays, badges, or tooltips but if you’re not careful, it can cause unexpected breakage.

Remember:

=> Keep the container position: relative.

=> Size absolute elements manually.

=> Use Flexbox alignment only for non-absolute items.

With these fixes, you can combine Flexbox + absolute positioning without layout headaches.

z-index Not Working? Fix CSS Stacking Issues Easily

swhabitation — Tue, 05 Aug 2025 05:53:04 +0000

If you’re a beginner trying to build a popup, dropdown, modal, or tooltip and it's hiding behind something you've likely yelled at your screen:

But I gave it z-index: 9999 then WHY isn’t it on top?

Same here. I thought z-index was just about giving a higher number to an element to make it appear in front. But in practice? It felt like black magic. Things didn’t layer right, overlays disappeared, and sometimes… absolutely nothing worked.

Turns out, it’s not the number. It’s the context.

You’ve done it too:

What is z-index?

In the simplest way: z-index controls what comes on top and what stays behind.

But there's a catch, z-index only works if your element is in the right stacking context.

Let’s decode that word...

What is Stacking Context?

Imagine you’re placing stickers on transparent sheets. Some sheets are above others, and each sheet has stickers with their own order.

In CSS, those transparent sheets are stacking contexts. If your element is inside a lower sheet, it’ll never appear on top, no matter the z-index.

Common ways stacking contexts are created:

Any element with position: relative, absolute, fixed, or sticky & z-index
Using transform, filter, perspective, opacity < 1, etc. Even if you give something z-index: 99999, if it’s inside a stacking context that’s lower than another, it won't rise above.

Real-Life Dev Mistake (aka What I Did)

I had this:

<div class="parent">
  <div class="modal">I’m a modal</div>
</div>

And in CSS:
.parent {
  position: relative;
  z-index: 1;
}

.modal {
  position: absolute;
  z-index: 9999;
}

Still... the modal was hidden behind a navbar.

The reason? The navbar was in another stacking context, one that had a higher position + z-index combo.

Fix: Bring the Right Parent Up

The solution isn’t just to give your element a higher z-index. You often need to check its parent container too. That’s the real culprit in 90% of cases.

How to fix:

Find the stacking context your element lives in
Make sure that context itself can go on top
Adjust the parent’s z-index accordingly

Example:

.modal-wrapper {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

Or just take it out of other containers that limit its stacking.

Common Situations Where `z-index` Breaks

Use Case	What Goes Wrong	Fix It Like This
Tooltip hidden	Tooltip is inside a lower stacking context	Move it outside / raise parent’s `z-index`
Modal below overlay	Modal lives inside a positioned container	Use `position: fixed` and give high `z-index`
Dropdown under navbar	Navbar has higher `z-index` + stacking context	Adjust navbar or dropdown stacking context

Quick Debug Checklist

Is your element positioned (relative, absolute, fixed)?
Is there a parent creating a stacking context?
Are other elements using high z-index + position?
Are you using transform, opacity, filter on parents?

If yes => these might be making your life harder.

Use browser dev tools => right-click => Inspect => check z-index and stacking context in Styles tab.

One more, When you don’t give a z-index, it defaults to auto.

And here’s the deal: auto means "I’ll stay in line with my stacking context." So your element might not get layered properly — even if you think it should.

Be explicit. Don’t just trust the browser.

FAQ's

Q: I gave z-index: 99999 but it’s still not showing?
A: Check the parent stacking context. Your element can’t break free of it unless you move it or raise the parent too.

Q: My tooltip is inside a card and stays behind. Why?
A: That card probably has overflow: hidden or is positioned. Try moving the tooltip outside the card or adjusting its z-index and positioning.

Q: Do SVGs or images affect stacking context?
A: Only if you add transform, opacity, or other properties that create stacking context.

Conclusion

z-index is not broken, it’s just misunderstood.

Once you get how stacking context works, z-index will feel way more predictable. It’s not about the biggest number, it’s about being in the right layer first.

So the next time something "refuses" to come on top, you’ll know:

Don’t blame the z-index. Blame the parent.

Why HD Images Look Blurry on Mobile and How to Fix It ?

swhabitation — Tue, 05 Aug 2025 05:39:28 +0000

Your image is HD, but still looks bad on mobile? You’re not alone.

You upload a 1920×1080 image which is clean, high-quality, looks great on your desktop. But when you open it on your iPhone or a good Android phone, The image looks blurry plus The text isn’t sharp plus The colors feel faded

You double-check your file. It’s big in size, it’s in HD. So what’s wrong?

Simple answer here, Today's phones use high-resolution (Retina) screens. They need images that are even sharper than basic HD.

This guide explains why HD images often look bad on mobile, and how you can fix them easily using HTML, Tailwind CSS, Next.js, or Astro — with real examples and simple tips.

Let’s get started.

1. Retina Screens Need 2x or 3x Image Sizes

Modern phones don’t just show pixels instead they show 2x or even 3x the detail in the same space. That’s why a normal HD image can look blurry.

So if your image is 300px wide, the screen is looking for 600–900px worth of detail. If you give it only 300px, it stretches and becomes blurry.

How to Fix ?

Use srcset to serve different versions based on screen density:

<img
  src="logo@1x.png"
  srcset="logo@2x.png 2x, logo@3x.png 3x"
  alt="Logo"
/>

Tailwind Tip:
For logos or icons, use SVG whenever possible, it's always sharp:

<img class="w-24 h-auto" src="logo.svg" />

2. You’re Scaling Up a Small Image in CSS

Sometimes, the image file is too small, but you’re forcing it to fill a large area using CSS. That makes it jagged or blurry.

Example: you upload a 400px image, but the layout stretches it to 1000px. Boom — blur!

How to Fix ?
Make sure your image is big enough for the space it fills. And use proper CSS:

<img class="w-full max-w-screen-lg object-cover" />

Also, check your layout and container sizes.

3. Compression Gone Wrong

Yes, you should compress images. But too much compression can destroy quality.

Common Issues:

JPEGs look patchy or lose detail
PNG edges look soft
WebP looks weird if exported wrong

How to Fix ?

Use WebP or AVIF for modern image formats
Don’t reduce quality below 80–85%
Always preview before uploading

4. Missing width/height in image Tag

This is a small mistake that causes big problems. If you don’t set width and height, the browser guesses — and that can make images blurry or jumpy.

<img
src="hero.webp"
width="1200"
height="600"
alt="Landing page banner"
/>

This also improves Core Web Vitals (LCP score).

5. Not Using Framework Tools (Next.js / Astro)

Using plain image tags in frameworks like Next.js is a missed opportunity. These tools give you better control and built-in optimization.

Next.js Example:

import Image from 'next/image'
<Image
  src="/banner.jpg"
  width={1200}
  height={600}
  alt="Banner"
  quality={90}
  priority
/>

Why this helps,

Responsive image sizes
Lazy loading
Retina support
CDN-based optimization
Better page speed

6. Safari Rendering Issues (Especially on iPhones)

Safari (especially iOS) is known for weird image behavior,

Not scaling images properly
Over-compressing in low-power mode
Bugs with tag

How to Fix ?

Always use pixel-based width/height
Use object-fit: cover
Test your site on real iPhones, not just emulators
Preload important images

7. Lazy Loading Isn’t Working Right

Sometimes, lazy loading causes images to look blurry, especially when placeholders don’t swap correctly.

How to Fix ?

Use priority for above-the-fold images
Only use blur placeholders for small images
Check if IntersectionObserver is triggering properly

AVIF vs WebP — Which One’s Better?

WebP: Great support, sharp, good for all images
AVIF: Newer, smaller size, but sometimes softer edges

Suggestion:

Use WebP for now (safe choice)
Try AVIF if your app targets mostly Chrome/Android users

Quick Recap Table

Problem	Fix
Retina blur	Use 2x/3x images via `srcset`
CSS scaling	Use correct size + `object-cover`
Safari bugs	Use pixel `width`/`height` + real device testing
Compression	Don’t go below 80% quality
Missing attrs	Always set `width` and `height`
Frameworks	Use `<Image />` in Next.js or Astro
Lazy loading	Preload key images, avoid blur placeholders

FAQs

Q: Is srcset still useful in 2025?
A: Yes — it helps load the right size image for the right screen.

Q: JPEG or WebP — which is better?
A: WebP. Smaller, cleaner, and supported by all major browsers.

Q: Should I use SVGs for logos?
A: Absolutely. They stay sharp on every screen size.

Q: Is Safari still a problem?
A: Sadly, yes. Always test important visuals separately on Safari.

Conclusion:

Just because an image is HD doesn’t mean it will look good on every device.

Most of the time, blurry images on mobile are caused by:

=> Not preparing for retina screens

=> Wrong size or layout settings

=> Over-compression

=> Skipping helpful framework features

But now you know what to check and how to fix it with just a few simple tweaks, you can make your site images look clear, clean, and professional on any screen.

A sharp image === a better first impression === a better user experience.

Why Your CSS Grid Is Overflowing and How to Fix It ?

swhabitation — Tue, 05 Aug 2025 05:14:54 +0000

You’ve spent hours building a clean, responsive grid layout. Everything looks perfect in your browser. You deploy it and feel proud.

Then QA or your client or even your own phone drops the bomb:

Why’s the layout scrolling sideways?
One box is out of place.
It’s breaking on my screen.

And just like that, you're deep in DevTools trying to figure out what went wrong with your beautiful CSS grid.

Sound this things familiar right ? Yeah, it happens to literally every day.

Let's get checked out what is the common reasons your CSS Grid is overflowing and how to fix ?

1. Content Inside Grid Is Too Damn Wide

Ever put a long URL, image, or heading inside a grid item and it just... refuses to wrap? That’s prob it.

What happens: Looks fine in your code or DevTools, Breaks only with real content.

✅ Try this:

min-width: 0;
word-break: break-word;

Oh using Tailwind? Easy:

<div class="min-w-0 break-words">LoooooooooongTextThatBreaksGrid</div>

2. You Used grid-template-columns: auto

Yeah… auto seems innocent, but it literally tells the grid: please expand based on content size😬

✅ Use fr units instead:

grid-template-columns: 1fr 1fr 1fr;

Tailwind version:

<div class="grid grid-cols-3">...</div>

3. Images/Videos Are Not Constrained

You drop in an image and forget to set proper sizing. Next thing you know, it’s sticking out of the grid like it owns the place.

✅Always set:

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

Tailwind:

<img class="w-full h-auto block" />

4. No Gap or Padding Between Items

When there’s no gap in your grid, stuff just crashes into each other or bleeds outside the container.

✅ Use gap:

<div class="grid grid-cols-2 gap-4">...</div>

Even small spacing can prevent layout chaos.

5. The Container Is the Real Villain

You might’ve set width: 100vw on the container or ignored scrollbars. That tiny miscalculation? Causes layout overflow even if your grid is fine.

✅Set this:

box-sizing: border-box;
overflow-x: hidden;

Tailwind:

<div class="w-full overflow-x-hidden box-border">...</div>

Quick Debug Checklist

Please check everything before blaming the grid.

Any long words, URLs, or text with nowrap?
Are images/videos wrapped properly with w-full and max-w-full?
Still using auto instead of fr?
Did you add box-sizing: border-box?
Forgot min-w-0 inside a flex or grid child?
Testing with lorem ipsum or real user data?

FAQ

Q: One long word broke my layout. Why?
A: Because it didn't wrap. Use break-word or overflow-hidden.
Q. Should I always use min-w-0 in grid items?
A: Yup. Especially with 1fr columns. Without it, child content can force the grid to stretch.
Q: Looks perfect in DevTools but broken on mobile?
A: Real data behaves differently than placeholder text. Always test with real content.

Conclusion

CSS Grid is one of the coolest layout tools we’ve got clean, flexible, and powerful. But..It doesn’t forgive carelessness. One bad width and it’ll throw scrollbars at you like confetti 😵‍💫

If your layout feels broken:

=> Use fr instead of auto

=> Force images to behave

=> Make sure text can break

=> Add borders to debug fast

And never ever trust placeholder text when testing layout.

How to Fix Mobile Form Inputs Breaking Layout on Sites?

swhabitation — Wed, 09 Jul 2025 16:15:44 +0000

Are you getting tired of the OG things like "Mobile Form Inputs Wrecking Your Layout?" then you’re not alone friend.

Have you ever built a form that looks perfect on desktop right…and even in the mobile emulator…Only to watch it fall apart the moment someone types on a real phone?

Buttons vanish behind the keyboard
The page jumps around unexpectedly
Your carefully crafted layout turns into a mess
Yes, mobile form confusion is real. And it’s especially painful on iOS and Safari.

But Not to worry. In this guide, you’ll learn why this happens and how to fix it with ninja techniques.

Let’s dive in and make your forms mobile-proof.

🤯 Why Forms Break Layout on Mobile ?

1. Virtual keyboards push the viewport up

When a user focuses on an input, the mobile keyboard slides in right, but it doesn't just sit on top of the page. It often resizes the viewport or shifts the content upward. This can lead to weird scroll behavior or elements that vanish entirely.

2. position: fixed or absolute gets messed up

Elements with position: fixed that you thought were anchored to the bottom? Surprise....they’re suddenly floating mid screen when the keyboard is open. That's because the browser recalculates positions relative to the new (shrunk) viewport.

3. 100vh isn’t real on iOS (again 😤)

Do you know here iOS lies. When you use height: 100vh, Safari interprets that as the height of the full screen, not accounting for the browser UI or the keyboard. So when the keyboard appears, your full-screen modals, menus, or overlays can end up oversized and broken.

4. Android behaves differently from iOS

What works on Android might totally fall apart on iOS and vice versa. Android might resize the layout, while iOS just overlays the keyboard, leading to inconsistent behavior. Yes, Testing on both is essential, and painful.

5. Inputs near the bottom get covered

You tap a field near the bottom of the page and it hides behind the keyboard. Scrolls don’t always trigger automatically, so the user is left typing blindly. Some platforms just like iOS try to auto-scroll.

Real Fixes & Dev Survival Tips

1. Use scrollIntoView() for Focused Fields

Sometimes the page doesn’t scroll to the input, especially in modals.

inputElement.addEventListener('focus', () => {
inputElement.scrollIntoView({ behavior: "smooth", block: "center" });
});

Also helpful for multi-step forms or chat UIs.

2. Don’t Use 100vh on Form Pages

We’ll say it for the 100th time it lies. Use --vh or min-height: 100% and flex-grow layout structure instead:

html, body {
height: 100%;
}

body {
display: flex;
flex-direction: column;
}

main {
flex: 1;
}

This allows inputs and content to shift smoothly without breaking layout.

3. Detect Virtual Keyboard Events (iOS & Android)

You can hide footers or CTAs when input is focused:

window.addEventListener('focusin', () => {
document.body.classList.add('keyboard-open');
});

window.addEventListener('focusout', () => {
document.body.classList.remove('keyboard-open');
});

Then in CSS:

.keyboard-open .fixed-footer {
display: none;
}

Works across platforms and keeps inputs visible.

4. Avoid position: fixed for CTA Buttons in Forms

Use position: sticky or place buttons inline within the form instead. If you must use fixed, toggle its visibility during input focus events.

5. Watch Out for autofocus on Mobile

An input with autofocus on page load can:

Trigger the keyboard instantly
Shift layout upward
Hide other content

🛑 Avoid autofocus unless it’s 100% needed especially on mobile.

Tailwind Form UX Strategy

Here’s a basic safe layout:

<div class="min-h-screen flex flex-col">
<main class="flex-1 p-4 space-y-4">
<input class="w-full border p-2 rounded" />
<textarea class="w-full border p-2 rounded h-32" />
</main>
<footer class="sticky bottom-0 bg-white p-4 border-t">
<button class="w-full bg-blue-500 text-white p-2 rounded">Submit</button>
</footer>
</div>

Optional: Hide footer on focus with .keyboard-open.

FAQ's

1. Why does my input scroll out of view on iPhone?
Because iOS doesn’t always auto-scroll the page correctly. Use scrollIntoView() on focus.

2. Should I use fixed or sticky for mobile form buttons?
Prefer sticky. fixed breaks more often with keyboards.

3. Is the issue the same on Android?
Similar, but Android handles resizing better. iOS is trickier due to Safari and system UI behavior.

4.Why does my input get hidden behind the keyboard on iOS?
iOS doesn’t resize the viewport when the keyboard shows. Manually scroll or pad the bottom.

5. How can I detect if the keyboard is open on mobile?
There’s no reliable cross-browser event. Try watching window.innerHeight changes as a workaround.

6. Why is 100vh not working properly on iOS Safari?
iOS includes the address bar in 100vh, which collapses when scrolling. Use JS to calculate height instead.

Conclusion

Yup, creating smooth and user-friendly mobile forms can be challenging due to issues like inconsistent browser behavior, unpredictable virtual keyboards, and layout shifts. However, by using techniques like scrollIntoView(), implementing dynamic height layouts, and managing keyboard focus intelligently, you can greatly enhance the user experience. These strategies help create a seamless, stable form interface that works smoothly across different devices, ensuring both the layout and users stay comfortable throughout the process.

Best SEO plugin for astro.js - Astro SEO Plugin.

swhabitation — Thu, 22 May 2025 13:16:53 +0000

If you’ve just started creating your website with Astro and have no clue how to improve your SEO, you’re not alone here.

In this blog, we’ll walk you through a beginner-friendly way to add SEO to your Astro project using a powerful tool called astro-seo-plugin. We’ll explain what Astro is, why SEO matters, and give you a copy-paste setup to make your website ready for Google, social media, and more.

What is Astro?

Astro is a fast and modern web framework that helps you build websites with minimal javaScript. It's great for blogs, portfolios, and content-heavy sites.

Why developers love Astro:

You can write components in your favorite framework
Perfect for SEO and static sites
It delivers lightning-fast page loads
Supports React, Vue, Svelte, Solid, and more

But even though Astro is SEO-friendly it still needs help with meta tags, Open Graph, Twitter Cards, and structured data, and that’s where astro-seo-plugin comes in.

What is astro-seo-plugin?

The astro-seo-plugin is a helpful plugin for adding all the important SEO meta tags to your Astro pages.

Instead of writing a dozen tags by hand, you use a single component: . It handles things like:

Page titles & descriptions
Open Graph tags (for Facebook, LinkedIn)
Twitter card tags
JSON-LD structured data
Robots settings (to tell Google what to do)
Extra meta and link tags

Installation & Setup

Step 1: Install the Plugin

Open your terminal and run,

npm install astro-seo-plugin

In your .astro layout or any page, import and use it like this below,

---
import { AstroSEO } from 'astro-seo-plugin';
---

<AstroSEO
  title="My Page Title"
  description="A short and catchy description for your page"
  openGraph={{
    title: "Social Title",
    description: "Shown on Facebook & LinkedIn",
    image: "https://example.com/image.jpg",
    type: "website"
  }}
  twitter={{
    card: "summary_large_image",
    site: "@yourhandle",
    creator: "@yourhandle"
  }}
  jsonLd={{
    "@type": "WebPage",
    name: "Page Name",
    description: "A brief description of your page"
  }}
  robots={{
    index: true,
    follow: true,
    noarchive: false,
    nosnippet: false,
    maxSnippet: 150,
  }}
  additionalLinkTags={[
    { rel: "canonical", href: "#" },
    { rel: "prev", href: Astro.url },
    { rel: "next", href: Astro.url },
    { rel: "alternate", href: Astro.url }
  ]}
  additionalMetaTags={[
    {
      name: "keywords",
      content: "astro, seo, astro-seo-plugin, meta tags, beginner guide"
    }
  ]}
/>

Advantages of using astro-seo-plugin

Works with Any Astro Page: Use it globally or per page as needed.
Google-Friendly Structured Data: Helps Google understand your site better using JSON-LD.
SEO Made Easy: Add all your SEO tags with one simple component.
Social Media Ready: Your content looks great when shared on Twitter, Facebook, and LinkedIn.
Saves Time: Forget manually writing meta tags for every page.

FAQ's

Q. What is SEO, and why should I care?
A. SEO helps your website appear in search engines like Google. More SEO = more visitors = more success.

Q. Do I need to use astro-seo-plugin on every page?
A. Nope! You can put it in your main layout to apply it site-wide or use it on individual pages for custom SEO.

Q. What’s the difference between title and openGraph.title?
A. title is for Google search & openGraph.title is for social sharing (like Facebook)

Q. What is JSON-LD?
A. JSON-LD is structured data that tells search engines what your page is about in a clear way.

Q. Can I add custom meta tags too?
A. Yes, use additionalMetaTags and additionalLinkTags for full flexibility.

Conclusion

SEO doesn’t have to be confusing. With Astro and astro-seo-plugin, you can add all the important tags to your pages in a clean, easy, and beginner-friendly way. Just install the plugin, use the component, and customize it for each page or layout.

Whether you're building a blog, portfolio, or full website this plugin helps your site stand out on Google and social media.

So go ahead, give your site the SEO boost it deserves and let the search engines do the rest.

Capri.build: Fast Static Site Generator with Islands

swhabitation — Wed, 12 Mar 2025 11:12:55 +0000

If you’re very beginners to web development and looking for an easy way to build fast, lightweight websites, you might have come across Capri.build. But what exactly is the Capri term ?

Capri is a static site generator (SSG) that lets you build websites using popular frontend frameworks like React, Vue, Svelte, Preact, or SolidJS — without sending unnecessary javascript to the browser.

Unlike the traditional SSGs that we have worked with, Capri follows an "Islands Architecture".

That means your site is static by default but allows selective interactivity only where needed.

By using capri, you can build a static website as if it was a single page app. If you already know how to build an SPA in your choice of frameworks you know everything it takes. You can see which frameworks capri is supported by here.

What is Capri?

Capri is a modern static site generator that build static sites with interactive islands.

Uses React, Vue, Svelte, Preact, or SolidJS -Its your choice
Generates fully static pages - zero JavaScript by default
Supports interactive components called islands without making the entire page dynamic
Integrates with Vite for a smooth developer experience
Works with headless CMSs for easy content management

If you’ve used Next.js, Astro, or 11ty, Capri feels similar but forwards less JavaScript by default, that makes your site even faster.

Why use Capri ?

Blazing Fast: Capri doesn’t load unnecessary JavaScript, your website loads super quickly.
Eco-Friendly: Less JavaScript === Lower energy consumption, making Capri a great choice for sustainable web development.
Easy to Use: You can write components in React, Vue, Svelte, Preact, or SolidJS, so no need to learn a new framework.
Efficient Interactivity: Instead of making the whole page dynamic, you only add JavaScript where it's needed.
SEO-Friendly: The pages are fully static, search engines can easily index them, improving your Google ranking and make your webiste seo in good state.

How to Install Capri ? A step-by-step guide

1. Install Capri

Open your terminal and run below command,

npm create capri my-project

Replace my-project with your favourite project name. This sets up a new Capri project.

2. Choose Your Framework

Capri supports multiple frameworks. You can select one during setup, like:

npm create capri my-project -- -e react

npm create capri my-project -- -e vue

3. Install Dependencies

cd my-project  
npm install

4. Run the Development Server

npm run dev

This starts a local server where you can preview your site.

How Capri Uses "Islands Architecture" for Interactivity ?

What is the "Islands" term?

Most static site generators either,

Keep everything static means no interactivity

Make everything dynamic (slow performance)

Capri solves this problem by letting you selectively add interactivity only where you need it. These interactive sections are called "Islands"

If you want a static site but need some interactivity, just name your component with .island.

For example: components/

Header.tsx # Static component
Counter*.island.tsx* # Interactive component
Footer.tsx # Static component

Here, only Counter.island.tsx will have javaScript, while the rest of the page remains pure HTML/CSS.

Capri with Vite

Capri works flowlessly with Vite. Just add this to your vite.config.ts,

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import capri from '@capri-js/react';

export default defineConfig({
  plugins: [react(), capri()],
});

This ensures Capri integrates smoothly with Vite.

Who should use capri?

Absolute Beginners: If you're new to web development and want to build a fast site without much complexity.
Eco-Conscious Developers: If you care about sustainable web development, Capri is a great choice.
Bloggers & Content Creators: Capri is great for blogs, portfolios, and documentation sites because of its SEO benefits.
Frontend Developers: If you love React, Vue, or Svelte and want a simpler alternative to Next.js.

Conclusion

Capri is a turning point for static site generation[SSG]

It’s fast, lightweight, SEO-friendly, and lets you build interactive websites without unnecessary JavaScript.

If you're looking for an alternative to Next.js, Astro, or 11ty, Capri is worthy for all.

It’s simple enough for beginners yet powerful enough for advanced developers.

So, go ahead and give capri a shot today to build your first super fast website now.

How to Fix Hydration Errors in Next.js ? A Complete Guide

swhabitation — Wed, 12 Mar 2025 06:31:44 +0000

Have you ever seen this error in your Next.js app?

Hydration failed because the server-rendered HTML did not match the client....

What is Hydration ?

Hydration is the process where static HTML becomes interactive by adding javascript to it.

When a web page is rendered on the server it loses its interactivity and event handles before getting to the client.

Now react come into the picture. React adds the interactivity and event handlers that were lost when the HTML was server-side rendered.

Lets understand in some simple terms, This is a hydration error, and it happens when the server renders one version of your page, but the browser (client) renders something different.

It’s one of the most common issues in Next.js, especially if you're using dynamic content, third-party scripts, or certain hooks like useEffect.

In this blog, we’ll cover,

What is Hydration in Next.js?
What causes hydration errors in Next.js ?
How to debug and fix ?
Best practices to avoid.

What is Hydration in Next.js?

Hydration is the process where react attaches interactivity to a pre-rendered HTML page.

Server-side rendering (SSR): The server sends fully rendered HTML to the browser.
Client-side hydration: React reuses this HTML but adds event listeners and dynamic content.

In short, If what the server rendered doesn’t match what the client renders, you get a hydration error.

Common Causes of Hydration Errors & Fixes

1. Mismatched Content Between Server & Client

Problem: If the server and client render different content, React will throw a hydration error. Example:

export default function Home() {
  return <h1>{new Date().toLocaleTimeString()}</h1>;
}

The server renders a fixed timestamp when it builds the page.

The client re-renders with the current time, causing a mismatch.

✅ Fix: Wrap dynamic content inside useEffect()

import { useEffect, useState } from "react";

export default function Home() {
  const [time, setTime] = useState("");

  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);

  return <h1>{time}</h1>;
}

✔ Now, the server renders a placeholder (""), and the client updates the time after hydration.

2. Using window, document, or localStorage in SSR

Problem: Server-side rendering (SSR) happens before the browser loads, so window, document, and localStorage don’t exist.

Example (Incorrect Usage):

export default function Home() {
  return <h1>Screen Width: {window.innerWidth}</h1>;
}

❌ Error: window is not defined on the server

✅ Fix: Use useEffect() to access window on the client side.

import { useState, useEffect } from "react";

export default function Home() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  return <h1>Screen Width: {width}</h1>;
}

✔ Now, the server renders an empty value (0), and the client updates it after hydration.

3. Using Random or Time-Based Values in Server Components

Problem: Values like Math.random() or Date.now() generate different results on the server and client, causing a mismatch.

Example (Incorrect Usage):

export default function Home() {
  return <h1>Random Number: {Math.random()}</h1>;
}

✅ Fix: Generate the value only on the client side using useState & useEffect.

import { useState, useEffect } from "react";

export default function Home() {
  const [random, setRandom] = useState(null);

  useEffect(() => {
    setRandom(Math.random());
  }, []);

  return <h1>Random Number: {random}</h1>;
}

4. Conditional Rendering Based on Client Data

Problem: If a component renders differently on the server and client, React will throw a hydration error.

Example:

export default function Home() {
  return <h1>{navigator.userAgent}</h1>;
}

❌ Error: navigator is only available on the client

✅ Fix: Use useEffect() to update after hydration

import { useState, useEffect } from "react";

export default function Home() {
  const [userAgent, setUserAgent] = useState("");

  useEffect(() => {
    setUserAgent(navigator.userAgent);
  }, []);

  return <h1>{userAgent}</h1>;
}

5. Third-Party Scripts Running on the Server

Problem: Some third-party libraries (e.g., charts, ads, analytics) try to run on the server but rely on the browser.

✅ Fix: Use dynamic() with { ssr: false }

import dynamic from "next/dynamic";

const Chart = dynamic(() => import("chart.js"), { ssr: false });

export default function Home() {
  return <Chart />;
}

✔ Now, the component only loads in the browser, preventing hydration issues.

Best Practices to Avoid Hydration Errors

Always use useEffect() for client-specific code (e.g., window, document, localStorage)
Use placeholders or default values for SSR-rendered content
Wrap third-party libraries with dynamic() and ssr: false
Avoid using random values (Math.random(), Date.now()) directly in server-rendered components
Use useState() for dynamic values and update them in useEffect()

Conclusion

Hydration errors in Next.js happen when the server and client render different content. They can be frustrating, but fixing them is simple:

✅ Use useEffect() for client-only code
✅ Lazy load third-party libraries using dynamic()
✅ Avoid dynamic content in server-rendered components

Following these best practices will help you avoid hydration errors and build a smoother, faster Next.js app.

DEV Community: swhabitation

Why CSS Transitions Slow Down Your Website and How to Fix It ?

1. Transitioning the Wrong Properties

2. Too Many Elements Transitioning at Once

3. Long or Awkward Timing Functions

4. Mixing CSS with JavaScript Animations

5. Forgetting About "Reduced Motion"

Conclusion

What is Blitz.js? Features, Pros, Cons, Installation & FAQs

What is Blitz.js?

Key Features of Blitz.js

Advantages of Blitz.js

Disadvantages of Blitz.js

Step-by-Step Installation Guide for Blitz.js

FAQ's

Conclusion

Alpine.js Introduction: Features, Pros & Cons, Install Guide

What Exactly is Alpine.js?

Key Features of Alpine.js

Advantages of Alpine.js

Disadvantages of Alpine.js

How to install Alpine.js ?

When Alpine.js is a Perfect Choice

Why Not Just Use Vanilla JS?

FAQ's

Conclusion

What is Qwik.js? Features, Pros & Cons, Install Guide & FAQs

What is Qwik.js?

Key Features of Qwik.js

Why You Should Use Qwik.js?

Downsides of Qwik.js

Installation – How to Start with Qwik.js ?

When Qwik.js is a Perfect Choice

Why Not Just Use React or Vue?

FAQ's

Conclusion

Why position: absolute Doesn’t Work Inside Flexbox ?

Why Does It Break?

1. It Ignores Flex Sizing

2. It Can Escape the Container

3. Alignment Stops Working

Example:

Key Takeaways

Conclusion

z-index Not Working? Fix CSS Stacking Issues Easily

What is z-index?

What is Stacking Context?

Real-Life Dev Mistake (aka What I Did)

Fix: Bring the Right Parent Up

Common Situations Where z-index Breaks

Quick Debug Checklist

FAQ's

Conclusion

Why HD Images Look Blurry on Mobile and How to Fix It ?

1. Retina Screens Need 2x or 3x Image Sizes

2. You’re Scaling Up a Small Image in CSS

3. Compression Gone Wrong

4. Missing width/height in image Tag

5. Not Using Framework Tools (Next.js / Astro)

6. Safari Rendering Issues (Especially on iPhones)

7. Lazy Loading Isn’t Working Right

AVIF vs WebP — Which One’s Better?

Suggestion:

Quick Recap Table

FAQs

Conclusion:

Why Your CSS Grid Is Overflowing and How to Fix It ?

1. Content Inside Grid Is Too Damn Wide

2. You Used grid-template-columns: auto

3. Images/Videos Are Not Constrained

4. No Gap or Padding Between Items

5. The Container Is the Real Villain

Quick Debug Checklist

FAQ

Conclusion

How to Fix Mobile Form Inputs Breaking Layout on Sites?

🤯 Why Forms Break Layout on Mobile ?

Real Fixes & Dev Survival Tips

FAQ's

Conclusion

Common Situations Where `z-index` Breaks