البنية
HTML دلالي، يُقرأ قبل أن يُرى
تسلسل للمعلومات ومحتوى يبقى مفهومًا من دون تأثيرات بصرية. البنية ثم التصميم ثم السلوك، بهذا الترتيب في الأهمية.
01
الويب هو المكان الذي يلتقي فيه التصميم والبرمجة على نحو مباشر بالنسبة لي. أستعمل مشاريع مفاهيمية كاملة لاستكشاف البنية والحروف والسلوك المتجاوب وسهولة الوصول والتفاعل كنظام واحد.
ما هذا
موقع مكتمل من تصميمي، مكتوب باليد. لا قالب مشترى من سوق، ولا أداة بناء صفحات — كلٌّ من العشرة مشروع وضعته لنفسي وأنجزته من أوّله إلى آخره.
معظم الأعمال العشرة على هذا الموقع بدأت من السؤال نفسه: كيف سيبدو هذا لو أُنجز كما ينبغي؟ مطعم، وعيادة، ومنتج SaaS — كلٌّ منها فرصة للعمل على مشكلة حقيقية من أوّلها إلى آخرها، موضوعة ذاتيًا لا مُسنَدة.
البنية
تسلسل للمعلومات ومحتوى يبقى مفهومًا من دون تأثيرات بصرية. البنية ثم التصميم ثم السلوك، بهذا الترتيب في الأهمية.
التخطيط
CSS Grid وFlexbox وحروف مرنة. الأعمدة تنطوي بترتيب قرّرته أنا، وأضيق نسخة مُصمَّمة لا منجاة بالكاد.
الأداء
إبقاء الاعتماديات غير الضرورية خارجًا، وتحميل الوسائط بعناية، وفهم ما يفعله المتصفّح فعلًا.
سهولة الوصول
سلوك التركيز، والتباين، والوسوم الدلالية، وARIA عند الحاجة — واجهات لا تعتمد على الحركة. مقطوعة باليد، مفتاحًا بعد مفتاح.
التفاعل
قوائم مطوية ومعارض ونماذج مصمَّمة لتبقى قابلة للتشغيل بلوحة المفاتيح ومع احترام تفضيل تقليل الحركة.
الأدوات
معظم العشرة HTML وCSS وجافاسكربت مكتوبة باليد. وإلى جانب ذلك أعمل أيضًا بـ React وNext.js وVue — الأداة تتبع السؤال، لا العكس.
ممّ يتألّف العمل
ليست استعارة ولا تبسيطًا. كلٌّ من الأعمال العشرة في المجموعة هو هذه الملفات الثلاثة مع خطوطه المستضافة ذاتيًا — افتح أيًّا منها واقرأ المصدر، وهذا هو السبب الوحيد الذي يجعل لهذه الفقرة قيمة.
عناوين تنزل مستوًى واحدًا في كل مرّة، ومَعالم تعني ما تُسمّى به، وكل عنصر تحكّم زرٌّ حقيقي أو رابط حقيقي. هذا هو الملف الذي يقرأه قارئ الشاشة وتفهرسه محرّكات البحث، ولهذا لا يُسمح لأي شيء زخرفي بأن يسكنه.
مُعلَنة مرّة واحدة في الأعلى كقيم مسمّاة، ثم تُستعمل في كل مكان. غيّر ثمانيًا منها يتغيّر مزاج الموقع كلّه. وحيث يكون اقتران التباين على الحافّة، تُكتب النسبة المقيسة في التعليق المجاور.
مكتوب بحيث يكون العنصر الغائب لا-عمليةً لا خطأً مرميًّا، وبحيث تسأل كل حركة أوّلًا إن كنت قد أخبرت جهازك أنك تريد أقلّ منها. الصفحة تعمل مع إزالة أي جزء من هذا الملف.
هذا هو مغزى الرقم ثلاثة: الشخص التالي الذي يلمسه لا يحتاج إلى أن يكون قد قابلني، ولا إلى معرفة إطار عمل اخترته أنا مصادفةً.
ما أفحصه
العمودان بالحجم نفسه عن قصد. معرفة أين تقع حدود العمل قرار تصميمي بقدر أي شيء داخلها.
الأسئلة
ليس افتراضيًا، وأفضّل قول ذلك بوضوح على المراوغة. الموقع المبنيّ باليد يُسلَّم ملفاتٍ، وتغيير جملة يعني تحرير ملف.
ثمّة إجابة حقيقية تستحقّ الاستكشاف: طبقة تحرير فوق العمل الساكن نفسه، بحيث تصير أجزاء مسمّاة من الموقع قابلة للتحرير في المتصفّح دون لمس الشيفرة. وهي نظام صغير قائم بذاته — محرّر، وتسجيل دخول، وخطوة نشر — ثلاثة أجزاء متحرّكة إضافية تستحقّ أن تُفهَم بشروطها.
لأنّ القيد هو المقصود. HTML وCSS وجافاسكربت الخام تُجبر كل قرار على أن يكون مرئيًا — فلا تجريد يخفي ما تفعله الصفحة فعلًا.
كما يعني ذلك أنّ أي شخص، بمن فيهم نسخة لاحقة منّي، يستطيع فتح الملفات وقراءة ما تقوله بالضبط. لا اعتمادية تحتاج تحديثًا، ولا خطوة بناء قد تتعطّل، ولا شيء يقف بين المصدر والمتصفّح الذي يقرأه.
بالفحص، وهو يستغرق نحو تسعين ثانية ولا يحتاج أدوات خاصة. ضع الفأرة جانبًا، واضغط Tab، وراقب أين يذهب إطار التركيز.
المعيار هنا هو ممارسة WCAG 2.1 AA — وصف لكيفية إنجاز العمل، لا شارة، لأنّ الشارة ليست تدقيقًا. وما أستطيع تقديمه بدلًا من ذلك قياسٌ لموقع حقيقي بتاريخه وطريقته إلى جانبه، ليكون قابلًا للتحقّق لا مأخوذًا على الثقة.
والطريقة واحدة في كل مرّة: فحص آلي عبر كل مسار عند عرضَي شاشة، ثم جولة بلوحة المفاتيح بضغطات حقيقية يُقرأ فيها العنصر النشط بعد كل توقّف، ثم قياس التباين زوجًا زوجًا مع سرد الراسبين بدل تلخيصهم.
الأعمال
العشرة كلّها بمبادرة ذاتية، وكلّها حيّة، ولكلٍّ منها تقرير يقول ما الذي سعى إليه وما الذي قاومه. وهذه الثلاثة هنا لأنّها لا تشبه بعضها في شيء. وإن صادف أن كان أحدها قطاعك، فتلك مصادفة لا سبب وجوده في هذه الصفحة.
وساطة عقارية معمارية، 2025
أربع قيم لونية، وثلاثة أوزان حرفية، وقدر كبير من الفراغ المقصود. الانضباط أصعب الثلاثة تقليدًا.
مطعم، 2021
مجلّة مطبوعة تحريرية تصادف أنها تقدّم العشاء. تقودها الشبكة، دافئة، وعلى أبعد ما يمكن أن يصل إليه اليدان نفساهما عن صفحة SaaS.
SaaS لمراقبة الأنظمة، 2026
دقّة داكنة، ولا صورة فوتوغرافية واحدة في العمل، ولوحة أوامر حقيقية — التركيز محتجَز، ومفاتيح الأسهم، وEscape.
شاهد الأعمال العشرة كلّها — كلٌّ منها يعمل في المتصفّح المفتوح أمامك الآن.
مواقع الويب
كل مبدأ في هذه الصفحة أسهل أن يُرى من أن يُقرأ عنه. المشاريع العشرة تُظهر الانضباط نفسه مطبَّقًا بعشر طرق مختلفة — وإن كنت تفضّل أن تسأل عن أحدها بدل قراءة فقرة أخرى، فالرابط الثاني لذلك.
من فضلك أدر جهازك،
هذا الموقع مبني عموديًا.