Lesson 14 / الدرس 14
Checking what actually shipped / فحص ما شُحن فعلًا
The gap between a design and the built version is where systems quietly die. Reviewing the real thing — in a browser, with a keyboard, at three widths — is the last step of designing it, not a courtesy afterwards.
الفجوة بين التصميم والنسخة المبنيّة هي حيث تموت الأنظمة بهدوء. وفحص الشيء الحقيقي — في متصفح، وبلوحة مفاتيح، عند ثلاثة أعراض — هو آخر خطوة في تصميمه لا مجاملةً بعده.
A design is a proposal. What ships is the product. If you never look at the built version, you do not know what you designed — you know what you intended. Every difference between the two is either a mistake worth fixing or a constraint you did not know about, and both are worth an hour of your time.
What to check, in order
-
Tokens, not pixels. Open the inspector and check the colour is the token rather than a hard-coded value that happens to match. This is the check that keeps the system alive. الرموز لا البكسلات. افتح الفاحص وتحقق أن اللون هو الرمز لا قيمةً مثبّتة صادف أنها تطابق. وهذا الفحص هو ما يُبقي النظام حيًّا.
-
The states. Hover, focus, press, disabled, loading — the ones you drew. Focus especially, and by pressing Tab rather than by looking. الحالات. تحت المؤشر، ومحدَّدًا، ومضغوطًا، ومعطَّلًا، وقيد التحميل — التي رسمتها. والتحديد خاصة، وبضغط Tab لا بالنظر.
-
Three widths and both directions. 320, something middling, wide — and with
dir="rtl"if the product is bilingual.ثلاثة أعراض واتجاهان. 320، وشيء متوسط، وعريض — ومعdir="rtl"إن كان المنتج ثنائي اللغة. -
Real content. The longest name in the database, the empty list, the number with four digits. Not the content you wrote for the mockup. محتوى حقيقي. أطول اسم في قاعدة البيانات، والقائمة الفارغة، والرقم ذو الأربع خانات. لا المحتوى الذي كتبته للنموذج.
Separate what is wrong from what is different
Not every difference is a defect. A developer who changed your spacing may have hit a real constraint — a component that could not stretch, a value the system did not have. Ask before filing: "the padding here is 12 rather than 16, was that deliberate?" is a question that gets you an answer, where a list of twenty deviations gets you a defensive conversation and nothing fixed.
<div style="font-family:system-ui; max-width:440px; font-size:14px; line-height:1.7">
<h3 style="margin:0 0 8px">Review — Course card, build 4.12</h3>
<p style="margin:0"><strong>Tokens</strong><br>
Border is #d9dde5 hard-coded — should be color-border.<br>
Everything else uses tokens.</p>
<p style="margin:12px 0 0"><strong>States</strong><br>
Focus ring missing on the card — Tab passes straight through.</p>
<p style="margin:12px 0 0"><strong>Widths</strong><br>
320: title clips at two lines instead of ellipsis.<br>
RTL: chips stay left-aligned.</p>
<p style="margin:12px 0 0"><strong>Different, asked about</strong><br>
Padding is 12 not 16 — was that a constraint?</p>
</div>Try it live / جرّب بنفسك
Check yourself / اختبر نفسك
1. Why must a design review happen in a browser rather than on screenshots?
A screenshot shows one state, at one width, with the content someone chose. Focus behaviour, overflow with real data and RTL are invisible in it — and those are where the serious problems live.
2. The built version uses 12px padding where you specified 16. What is the first move?
Some differences are decisions made against constraints you could not see from a design file. Asking gets you the reason; a list of deviations gets you a defensive conversation and nothing fixed.
3. Why does one hard-coded value matter?
Systems fail by accumulation, not by decision. Each exemption looks harmless and each one lowers the bar for the next, which is exactly the drift the first lesson described.
Score / النتيجة: 0 / 3
Your task / مهمتك
Review one built component against its design: check tokens in the inspector, tab through its states, look at three widths and both directions, and try it with the longest real content you can find.
راجع مكوّنًا مبنيًّا واحدًا في مقابل تصميمه: افحص الرموز في الفاحص، وانتقل في حالاته بـTab، وانظر إلى ثلاثة أعراض واتجاهين، وجرّبه بأطول محتوى حقيقي تجده.
- Token check done in the inspector, with any hard-coded values named فحص الرموز مُجرًى في الفاحص، وكل قيمة مثبّتة مسمّاة
- A keyboard pass, with the focus state confirmed or reported missing جولة لوحة مفاتيح، وحالة التحديد مؤكَّدة أو مبلَّغ عن غيابها
- Three widths and both directions checked ثلاثة أعراض واتجاهان مفحوصة
- Differences separated into defects and questions الفروق مفصولة إلى عيوب وأسئلة