المبرمج الحسيني مؤسسة المبرمج الحسيني English

عن بناء الموقع

كيف بُني هذا الموقع

الشفافية واحدة من قيمنا الخمس، ومن الغريب أن ندّعيها ثم ننشر موقعاً مبهماً. فهذا ما صُنعت منه هذه الصفحة.

وهو أيضاً، بصراحة، نموذج عمل. إن كنت تفكّر في العمل مع مبرمجينا، فهذا هو المعيار الذي نلزم به أنفسنا حين يكون العميل هو نحن.

الهندسة

كلّ نقش في الموقع يخرج من وحدة TypeScript واحدة، بلا اعتماديات وبلا وصول إلى الـ DOM. تبني تبليطاً متلاصق الأضلاع من مضلّعات منتظمة، ثم تطبّق إنشاء هانكِن للمضلّعات المتماسّة: خطّان من منتصف كلّ ضلع بزاوية تماس ثابتة، يمضي كلّ منهما حتى يلتقي خطاً آخر.

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

نقش بملء الشاشة يبلغ بضعة آلاف من الخطوط، ويستغرق توليده نحو عشرة أجزاء من الألف من الثانية.

ثلاثة عارضين، مصدر واحد

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

وإن لم تصل الشيفرة، أو لم يتوفّر WebGL2، أو طلب الزائر تقليل الحركة، فالجزيرة ببساطة لا تُحمَّل ويبقى الـ SVG. لا شيء يتراجع إلى لا شيء.

العرض

طبقة WebGL2 مكتوبة يدوياً بلا أيّ مكتبة ثلاثية الأبعاد. تُرسَم القطع المستقيمة مربّعاتٍ مكرّرة، ويُنعَّم حرفها في مظلِّل الأجزاء اعتماداً على بُعد كلّ بكسل عن مركز الخط، فيبقى حادّاً عند أيّ كثافة بكسلات دون الحاجة إلى تنعيم متعدّد العيّنات.

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

الخطوط

خطّ Amiri يحمل العناوين في العربية، وNewsreader في الإنجليزية. ويحمل المتنَ خطّا IBM Plex Sans Arabic وIBM Plex Sans، وهما مرسومان على هيكل مشترك، فتتّحد نسب نسختَي الموقع بدل أن تتشابها فحسب. أمّا الشيفرة فعلى IBM Plex Mono.

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

العربية

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

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

الأدوات

Astro مع TypeScript. وCSS مكتوبة يدوياً في طبقات تتالٍ صريحة، بخصائص مخصّصة وخصائص منطقية واستعلامات حاويات — بلا أيّ إطار أدوات. والأجزاء التفاعلية هي الشيفرة الوحيدة في الصفحة، ولا يُحمَّل أيّ منها إلا حين يدخل مجال الرؤية.

وللمولّد أداة معاينة تُخرِج صفحات تجريبية بصيغة PNG، وبها فُحصت الهندسة أثناء كتابتها.

ما ليس هنا بعد

بُني الموقع من ملفّنا التعريفي. وهذه أمور تركناها عمداً بدل أن نختلقها، وتُضاف حين تصير واقعاً.

  • صور من الجلسات التدريبية والأعضاء واللقاءات
  • الشعار والصيغة الخطّية لاسم المؤسسة
  • أعداد الدفعات، والمشاريع المسلَّمة، وأسماء الجهات الشريكة
  • أعضاء المجلس القيادي واللجان بالأسماء
  • روابط فعّالة للتقديم، ولوحة الوظائف، وأرشيف المقالات

العودة إلى الموقع