01

مواقع ويب، مكتوبة باليد

الويب هو المكان الذي يلتقي فيه التصميم والبرمجة على نحو مباشر بالنسبة لي. أستعمل مشاريع مفاهيمية كاملة لاستكشاف البنية والحروف والسلوك المتجاوب وسهولة الوصول والتفاعل كنظام واحد.

تخطيط متجاوب معروض بثلاثة عروض: الصفحة نفسها مؤلَّفة من جديد، لا منكمشة.
الحجم
صفحة واحدة، أو خمسة إلى ثمانية أقسام. الطريقة واحدة في الحالتين.
المنهج
محدَّد قبل أن يبدأ، مُراجَع أثناء سيره، مُنجَز لا متروك.
المراجعات
مُراجَع في جولات حقيقية، لأنّ المسوّدة الأولى نادرًا ما تكون الكلمة الأخيرة.
سهولة الوصول
مبنيّ وفق ممارسة WCAG 2.1 AA منذ أول commit، لا كجولة فحص في النهاية.
المصدر
كل عمل ثلاثة ملفات مقروءة — افتح أيًّا منها وشغّله وافحصه.

ما هذا

موقع ويب — وما تشمله هذه الكلمة هنا

موقع مكتمل من تصميمي، مكتوب باليد. لا قالب مشترى من سوق، ولا أداة بناء صفحات — كلٌّ من العشرة مشروع وضعته لنفسي وأنجزته من أوّله إلى آخره.

معظم الأعمال العشرة على هذا الموقع بدأت من السؤال نفسه: كيف سيبدو هذا لو أُنجز كما ينبغي؟ مطعم، وعيادة، ومنتج SaaS — كلٌّ منها فرصة للعمل على مشكلة حقيقية من أوّلها إلى آخرها، موضوعة ذاتيًا لا مُسنَدة.

البنية

HTML دلالي، يُقرأ قبل أن يُرى

تسلسل للمعلومات ومحتوى يبقى مفهومًا من دون تأثيرات بصرية. البنية ثم التصميم ثم السلوك، بهذا الترتيب في الأهمية.

التخطيط

تأليف يتكيّف، لا ينكمش فحسب

CSS Grid وFlexbox وحروف مرنة. الأعمدة تنطوي بترتيب قرّرته أنا، وأضيق نسخة مُصمَّمة لا منجاة بالكاد.

الأداء

الصفحة صالحة للاستعمال قبل وصول الإضافات

إبقاء الاعتماديات غير الضرورية خارجًا، وتحميل الوسائط بعناية، وفهم ما يفعله المتصفّح فعلًا.

سهولة الوصول

كل عنصر يمكن بلوغه بلا فأرة

سلوك التركيز، والتباين، والوسوم الدلالية، وARIA عند الحاجة — واجهات لا تعتمد على الحركة. مقطوعة باليد، مفتاحًا بعد مفتاح.

التفاعل

تنقّل ونماذج وحركة تبقى صالحة للاستعمال

قوائم مطوية ومعارض ونماذج مصمَّمة لتبقى قابلة للتشغيل بلوحة المفاتيح ومع احترام تفضيل تقليل الحركة.

الأدوات

جافاسكربت خام — وإطار عمل حيث يستحقّ مكانه

معظم العشرة HTML وCSS وجافاسكربت مكتوبة باليد. وإلى جانب ذلك أعمل أيضًا بـ React وNext.js وVue — الأداة تتبع السؤال، لا العكس.

ممّ يتألّف العمل

ثلاثة ملفات. هذه هي التسليمة كلّها.

ليست استعارة ولا تبسيطًا. كلٌّ من الأعمال العشرة في المجموعة هو هذه الملفات الثلاثة مع خطوطه المستضافة ذاتيًا — افتح أيًّا منها واقرأ المصدر، وهذا هو السبب الوحيد الذي يجعل لهذه الفقرة قيمة.

  1. 01

    index.html — المحتوى وترتيبه

    عناوين تنزل مستوًى واحدًا في كل مرّة، ومَعالم تعني ما تُسمّى به، وكل عنصر تحكّم زرٌّ حقيقي أو رابط حقيقي. هذا هو الملف الذي يقرأه قارئ الشاشة وتفهرسه محرّكات البحث، ولهذا لا يُسمح لأي شيء زخرفي بأن يسكنه.

  2. 02

    styles.css — اللون والحرف والتباعد والتخفيف

    مُعلَنة مرّة واحدة في الأعلى كقيم مسمّاة، ثم تُستعمل في كل مكان. غيّر ثمانيًا منها يتغيّر مزاج الموقع كلّه. وحيث يكون اقتران التباين على الحافّة، تُكتب النسبة المقيسة في التعليق المجاور.

  3. 03

    script.js — سلوك يمكن إزالته

    مكتوب بحيث يكون العنصر الغائب لا-عمليةً لا خطأً مرميًّا، وبحيث تسأل كل حركة أوّلًا إن كنت قد أخبرت جهازك أنك تريد أقلّ منها. الصفحة تعمل مع إزالة أي جزء من هذا الملف.

هذا هو مغزى الرقم ثلاثة: الشخص التالي الذي يلمسه لا يحتاج إلى أن يكون قد قابلني، ولا إلى معرفة إطار عمل اخترته أنا مصادفةً.

ما أفحصه

ما هو جزء من العمل، وما أتركه لمشروع آخر

العمودان بالحجم نفسه عن قصد. معرفة أين تقع حدود العمل قرار تصميمي بقدر أي شيء داخلها.

جزء من العمل

  • إخراج فني مصنوع للمشروع، لا مُختار من بين خمسة جاهزة.
  • نصّ مكتوب ليلائم التصميم، لا مُلقًى فيه لاحقًا كحشو.
  • كل صفحة قابلة للتشغيل بلوحة المفاتيح وحدها، ومُختبَرة كذلك يدويًا.
  • حركة تتوقّف حين يقول جهاز الزائر إنها ينبغي أن تتوقّف.
  • ميزانية أداء تُوضَع في البداية وتُقاس ثانيةً في النهاية.
  • نماذج بتسميات حقيقية، وأخطاء تُعلَن لا تُلوَّن بالأحمر فحسب.
  • بنية جاهزة للغة ثانية، حتى حيث لا توجد بعد.
  • مصدر كامل، مقروء من أوّله إلى آخره.
  • تكرار حقيقي، لا مسوّدة أولى تُسمّى نهائية.

خارج هذا الاستكشاف

  • تصوير فوتوغرافي أصلي — وحيث يحتاجه العمل يُوفَّر أو يُرخَّص على حدة.
  • كتابة المحتوى من الصفر، بخلاف هيكلة نصٍّ موجود وملاءمته.
  • الترجمة إلى لغة أخرى.
  • التكاملات مع أطراف ثالثة — نظام حجز، أو CRM، أو مزوّد دفع — كلٌّ منها استكشاف قائم بذاته.
  • التغييرات المحتوائية المستمرّة بعد اكتمال العمل.
  • تحسين محرّكات البحث بوصفه تخصّصًا مستقلًّا.
  • تكاليف النطاق والاستضافة، وأي خطّ أو واجهة برمجية مدفوعة.
  • أي ادّعاء بشأن الترتيب أو الزيارات أو التحويل. هذه أعمال مفاهيمية، لا حملات مقيسة.

الأسئلة

مُجابٌ عنها لا متهرَّبٌ منها

هل يمكن تحرير موقع كهذا من دون لمس الشيفرة؟

ليس افتراضيًا، وأفضّل قول ذلك بوضوح على المراوغة. الموقع المبنيّ باليد يُسلَّم ملفاتٍ، وتغيير جملة يعني تحرير ملف.

ثمّة إجابة حقيقية تستحقّ الاستكشاف: طبقة تحرير فوق العمل الساكن نفسه، بحيث تصير أجزاء مسمّاة من الموقع قابلة للتحرير في المتصفّح دون لمس الشيفرة. وهي نظام صغير قائم بذاته — محرّر، وتسجيل دخول، وخطوة نشر — ثلاثة أجزاء متحرّكة إضافية تستحقّ أن تُفهَم بشروطها.

لماذا كتابة ثلاثة ملفات باليد بدل استعمال إطار عمل؟

لأنّ القيد هو المقصود. HTML وCSS وجافاسكربت الخام تُجبر كل قرار على أن يكون مرئيًا — فلا تجريد يخفي ما تفعله الصفحة فعلًا.

كما يعني ذلك أنّ أي شخص، بمن فيهم نسخة لاحقة منّي، يستطيع فتح الملفات وقراءة ما تقوله بالضبط. لا اعتمادية تحتاج تحديثًا، ولا خطوة بناء قد تتعطّل، ولا شيء يقف بين المصدر والمتصفّح الذي يقرأه.

كيف تعرف أنّ عملًا ما سهل الوصول فعلًا؟

بالفحص، وهو يستغرق نحو تسعين ثانية ولا يحتاج أدوات خاصة. ضع الفأرة جانبًا، واضغط Tab، وراقب أين يذهب إطار التركيز.

المعيار هنا هو ممارسة WCAG 2.1 AA — وصف لكيفية إنجاز العمل، لا شارة، لأنّ الشارة ليست تدقيقًا. وما أستطيع تقديمه بدلًا من ذلك قياسٌ لموقع حقيقي بتاريخه وطريقته إلى جانبه، ليكون قابلًا للتحقّق لا مأخوذًا على الثقة.

والطريقة واحدة في كل مرّة: فحص آلي عبر كل مسار عند عرضَي شاشة، ثم جولة بلوحة المفاتيح بضغطات حقيقية يُقرأ فيها العنصر النشط بعد كل توقّف، ثم قياس التباين زوجًا زوجًا مع سرد الراسبين بدل تلخيصهم.

الأعمال

ثلاثة من عشرة، اختيرت لاتّساع المدى

العشرة كلّها بمبادرة ذاتية، وكلّها حيّة، ولكلٍّ منها تقرير يقول ما الذي سعى إليه وما الذي قاومه. وهذه الثلاثة هنا لأنّها لا تشبه بعضها في شيء. وإن صادف أن كان أحدها قطاعك، فتلك مصادفة لا سبب وجوده في هذه الصفحة.

وساطة عقارية معمارية، 2025

Arke Estates

أربع قيم لونية، وثلاثة أوزان حرفية، وقدر كبير من الفراغ المقصود. الانضباط أصعب الثلاثة تقليدًا.

مطعم، 2021

Ember & Oak

مجلّة مطبوعة تحريرية تصادف أنها تقدّم العشاء. تقودها الشبكة، دافئة، وعلى أبعد ما يمكن أن يصل إليه اليدان نفساهما عن صفحة SaaS.

SaaS لمراقبة الأنظمة، 2026

Signalform

دقّة داكنة، ولا صورة فوتوغرافية واحدة في العمل، ولوحة أوامر حقيقية — التركيز محتجَز، ومفاتيح الأسهم، وEscape.

شاهد الأعمال العشرة كلّها — كلٌّ منها يعمل في المتصفّح المفتوح أمامك الآن.

مواقع الويب

انظر إليه في الأعمال العشرة

كل مبدأ في هذه الصفحة أسهل أن يُرى من أن يُقرأ عنه. المشاريع العشرة تُظهر الانضباط نفسه مطبَّقًا بعشر طرق مختلفة — وإن كنت تفضّل أن تسأل عن أحدها بدل قراءة فقرة أخرى، فالرابط الثاني لذلك.

من فضلك أدر جهازك،
هذا الموقع مبني عموديًا.