Shipment NW-4471
\n \nIn transit
\n \nقبل أن تصمّم token واحدًا، تحتاج أن تعرف ما هو موجود بالفعل. تتخطّى الفرق هذه الخطوة عادةً لأنها تشعر أنها تعرف أصلًا أن المنتج غير متّسق. لكن الشعور لا يكفي. تحتاج إلى أرقام يقبلها مدير المنتج وقائد الهندسة ونائب الرئيس جميعًا، وتحتاج إليها لتقرّر ما الذي يملكه النظام أولًا.
\nجرد الواجهة (interface inventory) سهل الوصف ومملّ التنفيذ: تلتقط صورة لكل نسخة من كل عنصر في واجهات منتجاتك، وتجمعها حسب النوع. كل الأزرار على لوحة، وكل حقول الإدخال على لوحة ثانية، وكل النوافذ المنبثقة على ثالثة.
\nفي Northwind أجريته مع مصمّمَي منتجات خلال أربعة أيام، على تطبيق الـ dispatch والموقع التسويقي. استخدمنا ملف Figma مشتركًا بصفحة لكل فئة: الأزرار، حقول الإدخال، القوائم المنسدلة، الأيقونات، الألوان، الطباعة، البطاقات، النوافذ المنبثقة، الجداول، الحالات الفارغة، و«أخرى». وحملت كل لقطة رابط مصدرها حتى يتحقّق منها أيّ أحد.
\nكانت النتيجة أكثر شيء مقنع صنعته في حياتي. أحد عشر شكلًا للأزرار جنبًا إلى جنب تُنهي أي نقاش حول وجود مشكلة اتّساق. لا أحد يجادل أمام جدار من الأزرار بدرجات أزرق تكاد تكون متطابقة.
\n\nتفوت لقطات الشاشة ما لا يراه المستخدم على الشاشة التي أمامك: حالات الـ hover، وحالات الخطأ، وصفحات الإدارة التي لا يعرضها أحد في العروض التوضيحية. الكود يلتقط كل ذلك. وأسرع تدقيق عالي القيمة هو إحصاء قيم الألوان الخام في ملفات الأنماط.
\nالفخّ الأول هو الصيغة. #FFF و#ffffff و#FfFfFf لون واحد. وحّد الصيغة قبل العدّ، وإلا ستكون أرقامك خاطئة وسيلاحظ أحدهم ذلك.
// A slice of Northwind's CSS, pulled from three repos.\nconst css = `\n .btn { background: #1F5AE0; color: #FFF; }\n .btn:hover { background: #1b50c9; }\n .card { border: 1px solid #DADFE4; color: #1f2933; }\n .meta { color: #5f6b7a; }\n .footer { color: #66737F; border-top: 1px solid #dde1e6; }\n .title { color: #222B35; }\n .banner { background: #ffffff; color: #1F2933; }\n .link { color: #1f5ae0; }\n`;\n\nfunction expand(hex) {\n const h = hex.slice(1).toLowerCase();\n return h.length === 3 ? '#' + [...h].map((c) => c + c).join('') : '#' + h;\n}\n\nconst counts = new Map();\nfor (const match of css.match(/#[0-9a-fA-F]{3,6}\\b/g)) {\n const value = expand(match);\n counts.set(value, (counts.get(value) ?? 0) + 1);\n}\n\nconst ranked = [...counts].sort((a, b) => b[1] - a[1]);\nconsole.log(`${ranked.length} distinct colors`);\nfor (const [value, n] of ranked) console.log(value, n);شغّله وستحصل على تسع قيم مختلفة من ثماني قواعد قصيرة. لاحظ #1f2933 و#222b35: لونا نص لن يفرّق بينهما أحد. ولاحظ #dadfe4 و#dde1e6: رماديّان للحدود. هذه القيم شبه المكرّرة هي الاكتشاف الحقيقي. لم يختر أحد تسعة ألوان؛ بل اختار عدّة أشخاص لونًا واحدًا كلٌّ على حدة.
في كود حقيقي تطبّق الفكرة نفسها على كل ملف .css و.scss وكل styled-component، وتضيف تحليل rgb() وhsl(). وتذهب النتيجة إلى جدول بيانات: القيمة، وعدد مرّاتها، والملفات، وإلى أيّ مجموعة من القيم شبه المتطابقة تنتمي.
الأرقام الخام لا تخبرك بما تفعل. ما يخبرك رقمان لكل عنصر:
\n| العنصر | \nعدد الشاشات التي تستخدمه | \nعدد النسخ المختلفة | \n
|---|---|---|
| الزر | \n140 | \n11 | \n
| حقل النص | \n96 | \n6 | \n
| الرمادي (بأي استخدام) | \nفي كل مكان | \n64 | \n
| منتقي التاريخ | \n3 | \n2 | \n
| جدول البيانات | \n31 | \n5 | \n
يجب أن يملك النظام أولًا ما هو شائع وغير متّسق. الأزرار وحقول الإدخال والرماديات تفوز؛ ومنتقي التاريخ يمكنه الانتظار، رغم أنه الأكثر إيلامًا في البناء. المكوّن المستخدم في ثلاث شاشات مشكلة محلية. أما الرمادي المستخدم في كل شاشة فمشكلة الجميع.
\nثم أضف التكلفة. لكل عنصر عالي الأولوية، اسأل فريق الهندسة كم تنفيذًا منفصلًا يصونون. كان في كود Northwind أحد عشر مكوّن زر، لكلٍّ منها خلل خاص في نمط التركيز (focus). جملة «نحن نصلح الخطأ نفسه إحدى عشرة مرة» هي التي جعلت الإدارة توافق على التوظيف. كثيرًا ما يقدّم المصمّمون الجرد كحجّة عن الجودة؛ أما القادة فيموّلونه كحجّة عن التكلفة.
\n\nالجرد الجيد ينتهي بثلاثة مخرجات: لوحات Figma، وجدول بيانات تدقيق الكود، وصفحة واحدة بقائمة مرتّبة لما سيملكه النظام في أول ربعين من السنة. احتفظ باللوحات؛ ستعيد استخدامها لعرض التقدّم. في التمرين التالي تنفّذ أول عملية توحيد بنفسك: تحوّل سبع درجات رمادي شبه متطابقة إلى ثلاث قيم لها أسماء. وبعدها تحدّد المبادئ وشكل الفريق اللذين يمنعان هذه القرارات من الانحراف مرة أخرى.
\n","toc":[{"id":"sec-1","text":"جرد لقطات الشاشة","level":2},{"id":"sec-2","text":"تدقيق الكود","level":2},{"id":"sec-3","text":"من الأرقام إلى الأولويات","level":2},{"id":"sec-4","text":"ما الذي تسلّمه","level":2}],"takeaways":["جرد الواجهة يجمع كل نسخة من كل عنصر في الواجهة جنبًا إلى جنب، فيصبح التكرار حقيقة لا يمكن الجدال فيها.","دقّق الكود كما تدقّق الشاشات؛ فالسكربت الذي يحصي قيم الألوان يكشف انحرافًا تخفيه لقطات الشاشة.","وحّد صيغة القيم قبل العدّ، وإلا ظهر#FFF و#ffffff كأنهما قراران مختلفان.","ابدأ بالعناصر الشائعة وغير المتّسقة في آن واحد؛ فهي التي تعطي أكبر عائد حين يملكها النظام."],"further":[{"title":"CSS color values (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"Using CSS custom properties (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties"}],"quiz":[{"q":"يُظهر سكربت الألوان #FFF و#ffffff وrgb(255, 255, 255) كثلاث قيم منفصلة. ماذا تفعل قبل عرض الأرقام؟
rgb() من الكود أولًا.","why":"تعديل الكود قبل انتهاء التدقيق يخلط التنظيف بالقياس؛ وحّد الصيغة داخل السكربت بدلًا من ذلك."}],"answer":0},{"q":"يُظهر الجرد منتقيَي تاريخ مستخدمَين في 3 شاشات، و11 شكلًا للأزرار مستخدمة في 140 شاشة. من أين يجب أن يبدأ Northwind UI؟
","options":[{"text":"من منتقيات التاريخ، لأنها أصعب مكوّن في البناء.","why":"الصعوبة لا تجعل الشيء عاجلًا؛ ثلاث شاشات مساحة صغيرة وتكلفتها المشتركة قليلة."},{"text":"من الأزرار، لأنها شائعة وغير متّسقة معًا.","why":"صحيح. حيث يجتمع الاستخدام الكثير مع التباين الكبير، يوفّر التوحيد أكبر قدر من الوقت ويصلح أوضح تناقض."},{"text":"من الاثنين معًا، ليُطلَق النظام مكتملًا.","why":"توزيع فريق صغير على كل شيء يؤخّر المكسب الأعلى قيمة؛ النظام يكسب الثقة حين يعالج الألم الشائع أولًا."},{"text":"من لا شيء منهما؛ يجب أن يبدأ النظام بالتوثيق.","why":"توثيق بلا شيء يوثّقه لا يعطي الفرق شيئًا تتبنّاه."}],"answer":1},{"q":"يقول مدير منتج إن لقطات الجرد «مجرّد تدقيق مبالغ فيه من المصمّمين». أيّ إضافة تجعل رفض التدقيق أصعب ما يمكن؟
","options":[{"text":"لوحة إلهام (mood board) تُظهر شكل المنتج بعد إعادة التصميم.","why":"الرؤية مفيدة لاحقًا، لكنها تُقرأ كذوق شخصي، وهو بالضبط الاعتراض الذي تردّ عليه."},{"text":"قائمة أطول بكل تناقض وجدته.","why":"مزيد من الأمثلة من النوع نفسه نادرًا ما يغيّر رأي المتشكّك؛ التكلفة هي التي تغيّره."},{"text":"وقت الهندسة المصروف على صيانة كل نسخة مكرّرة، مثل 11 تنفيذًا للأزرار لكلٍّ منها إصلاحات أخطاء منفصلة.","why":"صحيح. تحويل التكرار إلى ساعات وأخطاء يجعل الشكوى الجمالية تكلفةً تدفعها الشركة أصلًا."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"In transit
\n \nIn transit
\n \nبطاقة الشحنة هذه شريحة من تدقيق Northwind: سبع درجات رمادي مكتوبة يدويًا هي في الحقيقة ثلاثة قرارات. عرّف ثلاث خصائص مخصّصة رمادية على الأقل (custom properties) على :root (مثل --nw-gray-900 و--nw-gray-600 و--nw-gray-200)، ثم أعد كتابة كل قواعد .card لتستخدمها عبر var()، دون أن تبقى فيها أي قيمة hex أو rgb() أو hsl(). حافظ على التدرّج: العنوان والحالة بأغمق رمادي، ونص التفاصيل والتذييل برمادي متوسط، وكل الحدود بأفتح رمادي.
:root { … }.","استبدل كل لون في قواعد .card بـ var(--nw-gray-900) أو var(--nw-gray-600) أو var(--nw-gray-200)."],"explanation":"تنكمش القيم السبع إلى ثلاث لأنها لم تعبّر يومًا إلا عن ثلاث نوايا: نص أساسي، ونص ثانوي، وفواصل. وتعريفها مرة واحدة على :root يحوّلها إلى primitives يستطيع باقي النظام الإشارة إليها. في المرة القادمة التي يحتاج فيها أحد رماديًا للحدود سيختار اسمًا بدل أن يلتقط قيمة hex بأداة القطّارة، وهكذا بالضبط ظهرت الدرجات الأربع والستون أصلًا. في القسم التالي تضيف طبقة semantic فوق هذه الـ primitives.
:root ثلاث خصائص مخصّصة على الأقل","no-raw-colors":"لا تحتوي قواعد .card على ألوان مكتوبة يدويًا بصيغة hex أو rgb() أو hsl()","three-greys":"تستخدم البطاقة ثلاث درجات رمادي على الأكثر للنصوص والحدود","hierarchy":"العنوان أغمق من نص التفاصيل والتذييل، وهما أغمق من الحدود"}},"words":650,"readMinutes":4}