रिस्पॉन्सिव डिज़ाइन और परफॉर्मेंस के लिए डेवलपर टिप्स

<!-- ❌ खराब: इमेज लोड होने तक ब्राउज़र साइज़ नहीं जानता -->
<img src="hero.jpg" alt="हीरो इमेज">

<!-- ✅ अच्छा: स्थान तुरंत आरक्षित -->
<img src="hero.jpg"
     alt="हीरो इमेज"
     width="1200"
     height="630"
     loading="lazy">

<h1>पेज का शीर्षक (प्रति पेज एक)</h1>
  <h2>मुख्य अनुभाग</h2>
    <h3>उप-अनुभाग</h3>
    <h3>दूसरा उप-अनुभाग</h3>
  <h2>दूसरा मुख्य अनुभाग</h2>

<!-- ❌ भेद्य -->
<a href="https://example.com" target="_blank">विज़िट करें</a>

<!-- ✅ सुरक्षित -->
<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">विज़िट करें</a>

<input type="text"    autocomplete="given-name">
<input type="email"   autocomplete="email">
<input type="tel"     autocomplete="tel">
<input type="password" autocomplete="current-password">
<input type="text"    autocomplete="postal-code">

<meta property="og:title"       content="पेज का शीर्षक">
<meta property="og:description"  content="संक्षिप्त विवरण">
<meta property="og:image"       content="https://yourdomain.com/og.jpg">
<meta property="og:url"         content="https://yourdomain.com/page">
<meta property="og:type"        content="website">
<!-- Twitter/X -->
<meta name="twitter:card"      content="summary_large_image">

.center-everything {
  display: grid;
  place-items: center;
}

/* फ़ुल-पेज सेंटरिंग के लिए भी काम करता है */
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

:root {
  --color-primary: #6366f1;
  --color-bg: #ffffff;
  --radius-md: 12px;
  --spacing-md: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1117;
  }
}

.btn {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

/* clamp(न्यूनतम, पसंदीदा, अधिकतम) */
h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  line-height: 1.7;
  max-width: 65ch; /* इष्टतम पठन चौड़ाई */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* स्टिकी हेडर के लिए ऑफ़सेट (जैसे 70px लंबा) */
[id] {
  scroll-margin-top: 90px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(280px, 1fr)
  );
  gap: 24px;
}
/* मोबाइल पर 1 कॉलम → 2 → 3 → 4 स्वचालित रूप से */

/* ❌ ऐसा कभी न करें */
* { outline: none; }

/* ✅ माउस के लिए छुपाएँ, कीबोर्ड के लिए दिखाएँ */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
  border-radius: 4px;
}

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target); // देखना बंद करें
      }
    });
  },
  { rootMargin: '0px 0px -50px 0px' }
);

document.querySelectorAll('.animate-on-scroll')
  .forEach(el => observer.observe(el));

function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// उपयोग
window.addEventListener('resize',
  debounce(() => {
    recalculateLayout();
  }, 200)
);

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showToast('कॉपी हो गया!');
  } catch (err) {
    console.error('कॉपी विफल:', err);
  }
}

// उपयोग
document.querySelector('.copy-btn')
  .addEventListener('click', () =>
    copyToClipboard('कॉपी करने के लिए टेक्स्ट')
  );

const storage = {
  get(key, fallback = null) {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : fallback;
    } catch { return fallback; }
  },
  set(key, value) {
    try {
      localStorage.setItem(key, JSON.stringify(value));
      return true;
    } catch { return false; }
  }
};

storage.set('theme', 'dark');
const theme = storage.get('theme', 'light');

const prefersReduced = window
  .matchMedia('(prefers-reduced-motion: reduce)')
  .matches;

if (!prefersReduced) {
  startAnimations();
} else {
  showStaticFallback();
}

<!-- चरण 1: preconnect -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- चरण 2: URL में &display=swap जोड़ें -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
      rel="stylesheet">

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg"
       alt="हीरो इमेज"
       width="1200" height="630"
       loading="lazy">
</picture>

<!-- रेंडरिंग ब्लॉक करता है ❌ -->
<script src="app.js"></script>

<!-- DOM के बाद क्रम में चलता है ✅ (अधिकांश स्क्रिप्ट के लिए उपयोग करें) -->
<script src="app.js" defer></script>

<!-- तैयार होते ही तुरंत चलता है ✅ (एनालिटिक्स, विज्ञापन) -->
<script src="analytics.js" async></script>

/* ❌ लेआउट ट्रिगर करता है (महंगा) */
.bad { transition: width 0.3s, top 0.3s; }

/* ✅ GPU-कंपोजिटेड (सस्ता) */
.good { transition: transform 0.3s, opacity 0.3s; }

/* संयम से उपयोग करें, केवल जटिल एनिमेशन से पहले */
.modal-enter { will-change: transform; }
.modal-entered { will-change: auto; } /* बाद में रीसेट करें */

<!-- हीरो इमेज प्रीलोड करें (LCP एलिमेंट) -->
<link rel="preload" as="image"
      href="hero.webp" fetchpriority="high">

<!-- क्रिटिकल फ़ॉन्ट प्रीलोड करें -->
<link rel="preload" as="font"
      href="font.woff2" type="font/woff2"
      crossorigin>

<!-- ❌ स्क्रीन रीडर कहता है "बटन" -->
<button><i class="fa-solid fa-times"></i></button>

<!-- ✅ स्क्रीन रीडर कहता है "डायलॉग बंद करें" -->
<button aria-label="डायलॉग बंद करें">
  <i class="fa-solid fa-times" aria-hidden="true"></i>
</button>

<!-- अंग्रेज़ी -->
<html lang="en">

<!-- अरबी (RTL) -->
<html lang="ar" dir="rtl">

<!-- फ़्रेंच -->
<html lang="fr">

/* ❌ #6b7280 on #fff = 4.48:1 (छोटे टेक्स्ट के लिए AA विफल) */
.muted { color: #6b7280; background: #fff; }

/* ✅ #4b5563 on #fff = 7.0:1 (AA और AAA पास) */
.muted { color: #4b5563; background: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

<!-- स्किप लिंक उदाहरण -->
<a href="#main" class="sr-only">सामग्री पर जाएँ</a>

function trapFocus(modal) {
  const focusable = modal.querySelectorAll(
    'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  modal.addEventListener('keydown', e => {
    if (e.key !== 'Tab') return;
    if (e.shiftKey ? document.activeElement === first
                   : document.activeElement === last) {
      e.preventDefault();
      (e.shiftKey ? last : first).focus();
    }
  });
  first.focus();
}

<!-- ❌ उपयोगकर्ता ज़ूम अक्षम करता है (एक्सेसिबिलिटी उल्लंघन) -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no">

<!-- ✅ सही: 5× तक स्केलिंग की अनुमति देता है -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5">

/* दृश्य परिवर्तन के बिना टैप क्षेत्र का विस्तार करें */
.icon-btn {
  position: relative;
  width: 24px; height: 24px;
}
.icon-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px;
}

/* भौतिक (RTL के लिए फ़्लिप नहीं होता) */
.icon { margin-right: 8px; }

/* लॉजिकल (RTL में स्वचालित रूप से फ़्लिप होता है) */
.icon { margin-inline-end: 8px; }

/* अधिक लॉजिकल प्रॉपर्टी उदाहरण */
.card {
  padding-inline: 16px;      /* बाएँ + दाएँ */
  padding-block: 12px;       /* ऊपर + नीचे */
  border-start-start-radius: 12px; /* LTR में ऊपर-बाएँ */
}

/* ❌ ब्राउज़र क्रोम दिखाई देने पर मोबाइल पर ओवरफ़्लो होता है */
.hero { height: 100vh; }

/* ✅ पुराने ब्राउज़रों के लिए फ़ॉलबैक के साथ */
.hero {
  height: 100vh;          /* फ़ॉलबैक */
  height: 100dvh;         /* डायनामिक व्यूपोर्ट हाइट */
}