المدونة

Optimistic UI في React: واجهة تكذب عن وعي

زرّ «إعجاب» يستجيب فورًا، القلب يمتلئ، العدّاد يرتفع – قبل أن يجيب الخادم أصلًا. هذا ليس وهم السرعة من مقال التفاعلات الدقيقة، بل شيء أبعد من ذلك: تُظهر الواجهة حالة لم توجد بعد، وتفترض أنها ستوجد قريبًا. أفحص كيف تُبنى هذه التقنية بأمان – مع تراجع حقيقي عن الكذبة حين لا يتحقّق الافتراض، ولماذا يُعدّ setState اليدوي مع catch نسخة أسوأ ممّا يقدّمه useOptimistic.

CSS @layer: كيف تُنهي طبقات الكاسكيد حرب الخصوصية

الصنف الأداتي .mt-4 يخسر أمام القاعدة .card .card__header .card__title، رغم أنه منطقيًّا ينبغي أن يفوز لأنه أُضيف لاحقًا. هذا ليس مصادفة – إنها الخصوصية (specificity) تعمل تمامًا كما صُمِّمت لتعمل. تُدخل @layer محورًا جديدًا كليًّا لفضّ النزاعات، يعمل قبل الخصوصية لا معها – وله فخّ واحد غير بديهي لدرجة أن حتى بعض التوثيق على الإنترنت يخطئ فيه.

Server Actions في Next.js: نموذج يعمل قبل أن تُحمَّل جافاسكريبت

تبدو „use server” وكأنها سكّر نحوي (syntactic sugar) فوق طلب fetch إلى مسار API – ولهذا بالضبط تتعامل معظم التطبيقات معها كأنها استدعاء دالة عادي. هذا خطأ له عواقب ملموسة: كلّ دالة موسومة بـ„use server” تصبح نقطة نهاية عامة على الشبكة، والنموذج المبني على هذه الآلية يعمل حتى قبل أن تتاح فرصة لجافاسكريبت أن تُحمَّل. أفحص ما يجري فعليًا خلف هذا التوجيه، وأين تكمن الفخاخ التي لا تظهر في التوثيق من النظرة الأولى.

CSS ‎:has() — العنصر الأب الذي يعرف ما يجري بالداخل

حقل النموذج ينبغي أن يُضاء بالأحمر حين يكون الإدخال بداخله غير صالح. أمر بسيط – إلا أن CSS ظلّ طوال 25 عامًا عاجزًا عن أن يسأل عنصرًا عمّا يجري في داخله، بل العكس فقط. أفحص كيف تعكس ‎:has() هذا الاتجاه، وكيف تختلف عن أدوات الربط (combinators) المعتادة، وأين تُكلِّف هذه القدرة الجديدة الأداء فعليًّا.

Container Queries: مكوّن يعرف حاويته، لا نافذة العرض

بطاقة المنتج نفسها تبدو رائعة في الشبكة الرئيسية وتنكسر في الشريط الجانبي الضيّق – رغم استعلامات وسائط مُختارة بعناية. المشكلة ليست في كودك، بل في السؤال الذي يطرحه استعلام الوسائط: عن عرض الشاشة، لا عن المساحة التي حصل عليها المكوّن فعليًا. أفحص كيف تنقل Container Queries هذا السؤال إلى حيث كان ينبغي أن يُطرح من البداية، وما الذي يحدث فعليًا تحت السطح حين يصبح العنصر «حاوية استعلام».

إنشاء مكونات متاحة لقارئات الشاشة

HTML الصحيح ليس سوى نقطة البداية. اكتشف كيف تعمل شجرة إتاحة الوصول فعليًا، ولماذا تضر ARIA أكثر مما تنفع في أحيان كثيرة، وابنِ معي أكورديون حقيقيًا، ومنطقة حية (live region)، وإدارة تركيز في Next.js.