Full-Stack Blueprint
من الفكرة إلى منصة ويب متكاملة

المجلد الأول قال: الحاسوب ما يخمّن. هذي العينة تقول: المتصفح ما يشتكي. نفس لهجة الكتاب، نفس صناديق السر، فهرس مختلف. تفهم جزئية كاملة: الصمت، الصندوق، الطبقات، ورحلة الطلب. مشروع اللوحة والـ 66 صفحة يبقى للشراء.

C++ يصرخ برسالة. الويب يبتسم لك بصفحة ناقصة. أغلب الطلبة يحسبون إن «ظهرت الشاشة» تعني انتهيت. الحقيقة إن مهارتك مو الوسم — مهارتك أدوات المطوّر: الشبكة، الصندوق، والحدث. لما تفهم وين تفتش، راح توقف التخمين.

إذا شفت 200 لملف CSS وما انطبق، المشكلة غالباً مسار غلط أو نوع MIME أو خصوصية — مو «الكود شغال». المتصفح طبّق ملفاً ثانياً أو ما طبّق شيئاً، وأنت تلوّن عنصراً غير موجود.

كل عنصر بالمتصفح صندوق بأربع طبقات. إذا رسمتها صح، صار التصميم قراراً لا تخميناً بالماوس. العرض النهائي = الأربعة معاً — إلا إذا أعلنت border-box فتصير الحشوة والحد داخل الرقم اللي كتبته.

.chip{
  box-sizing: border-box; /* ◀ الأربعة الداخلية داخل 160px */
  width: 160px;
  padding: 12px;          /* حشوة — داخل العرض هسة */
  border: 1px solid cyan; /* حد — داخل العرض هسة */
  margin: 8px;            /* خارج الصندوق — ما يدخل بـ width */
}

الهامش دائماً برا الصندوق: يبعد الجيران وما يكبر العرض المحسوب. إذا نسيت border-box وكتبت width 160 مع padding 12 وحد 1، العرض الحقيقي يكبر وأنت تحسب إن العمود انكسر «بدون سبب».

إذا بدأت من اللون، راح تعيد الهيكل مرتين. إذا بدأت من المعنى، يركب الجلد فوق عظم صحيح. الحالة تُكتب بالعصب — بالـ DOM — مو بالزينة. هذي قاعدة الكتاب: ليش قبل شلون.

const status = document.querySelector("[data-status]");
button.addEventListener("click", function () {
  status.dataset.mode = "armed";  // ◀ الحالة الآلية في الـ DOM
  status.textContent = "armed";   // ◀ المعنى للإنسان وقارئ الشاشة
});

الصفحة مو جزيرة. الطلب يسافر، الخادم قد ينجح بـ 200، والمتصفح قد يرفض الرد بسبب CORS. لذلك يظن المبتدئ إن الـ API «معطّل» وهو يشتغل بالطرفية. افتح Network: هل الرد وصل؟ هل المتصفح أكله؟

fetch("/api/health")
  .then(function (r) {
    if (!r.ok) throw new Error("HTTP " + r.status); // ◀ 404 مو JSON
    return r.json();
  })
  .then(function (d) { console.log("ok=", d.ok); })
  .catch(function (e) { console.error("probe", e); });

r.ok تفحص رمز الحالة قبل ما تفسّر الجسم. لو فسّرت 500 كـ JSON راح تحصل خطأ ثاني يخفي الأول. CORS يظهر بالمتصفح لا بطرفية الخادم: الخادم نجح، السياسة منعت الصفحة من قراءة الرد.

طبّق الطبقات الثلاث على مثال واحد. HTML: صندوق فيه عنوان Gateway ونص idle. CSS: حد متوهج وصندوق مفهوم بلا JS. JS: زر يقلب النص إلى live ويكتب الحالة بـ data-mode.

<article class="card" data-mode="idle">
  <h2>Gateway</h2>
  <p data-status>idle</p>
  <button type="button">arm</button>
</article>

بعد الضغط: data-mode="live" والنص live. إذا تغيّر اللون وبقي data-mode=idle، أنت زيّنت وما بنيت حالة. هذا نفس معيار الكتاب: المعنى في الـ DOM.

إذا فهمت الصمت والصندوق والرحلة، فأنت جاهز للكتاب لا للتوقف. Full-Stack Blueprint بـ 8$ أو السلسلة بـ 20$.