فكّ شيفرة جولة برمجة الواجهة الأمامية — تشريح إجابة بناءٍ قوية (وضّح، وابنِ السلوك، وعالِج التحميل/الفراغ/الخطأ، وأضِف سهولة الوصول، واسرد طوال الوقت)، ثم ثلاثة بناءات React مُنفّذة يعشقها المُقابِلون: إكمالٌ تلقائيّ قابل للوصول بـ debounce وإلغاء طلبات، ومكوّن تبويباتٍ قابل للتنقّل بلوحة المفاتيح وفق نمط ARIA، وجدول بياناتٍ بالفرز والترشيح والترقيم. مع الحالات الحدّيّة وسهولة الوصول التي تفصل النجاح عن النجاح القويّ.
خريطةٌ جولةً بجولة لحلقة هندسة الواجهة الأمامية في Airbnb — فرز المُوظِّف، والتقييم الإلكترونيّ، وبرمجة الواجهة، وتصميم أنظمة الواجهة الأمامية، ومراجعة الكود، والجولة السلوكية — مع ما تختبره كل جولة فعليًّا، وكيف تستعدّ، والمواضيع المحوريّة، والأخطاء الشائعة. البرمجة جولةٌ من ستّ؛ وهذه التدوينة تُريك أين تذهب النقاط الخمس الأخرى وكيف توزّع استعدادك عبر مدّةٍ من 4–6 أسابيع.
مقدّمة عملية لتصميم أنظمة الواجهة الأمامية للمقابلات والعمل الحقيقيّ — إطارٌ قابل للتكرار (المتطلّبات، والبنية عالية المستوى، ونموذج البيانات، وواجهة API وتدفّق البيانات، والغوص العميق، والمقايضات)، والمجالات الأساسية المتوقّع أن تفكّر فيها (استراتيجية العرض، وبنية المكوّنات والحالة، وجلب البيانات والتخزين، والأداء، وسهولة الوصول، والوقت الفعليّ)، ومثالٌ تطبيقيّ لتصميم بحثٍ بإكمالٍ تلقائيّ — مع أخطاء شائعة وتمارين.
بنك منسّق لأسئلة مقابلات الواجهة الأمامية مع إجاباتٍ قويّة موجزة — JavaScript واللغة، وHTML/CSS وسهولة الوصول، والمتصفّح والشبكة، والأداء ومؤشّرات الويب الأساسية، وReact (الخطّافات، العرض، الحالة)، وNext.js (مكوّنات الخادم، العرض، التخزين)، وأسئلة سلوكية وتصميمية — كلٌّ بـ'اعرض الإجابة' تختبر نفسك عليها، إضافةً إلى كيفية التعامل مع المقابلة نفسها.
مقدّمة عملية لـ Next.js وموجّه التطبيق (App Router) مع TypeScript — ما الذي يضيفه إطار React فوق React، والتوجيه القائم على الملفّات بالمجلّدات وpage.tsx، والتخطيطات والمسارات المتداخلة، ومكوّنات الخادم مقابل العميل، وجلب البيانات على الخادم، واستراتيجيات العرض (SSG/SSR/ISR)، والتنقّل بـ next/link وuseRouter، والملفّات الخاصّة (loading وerror وnot-found)، وواجهة Metadata لتحسين محرّكات البحث، ونظرة أولى على أفعال الخادم وnext/image — مع أخطاء شائعة وتمارين عملية.
دليل عملي لجلب البيانات في React مع TypeScript — حالات التحميل/الخطأ/النجاح التي يمرّ بها كل طلب، والجلب في useEffect مع التنظيف وAbortController، وتجنّب تسابق الطلبات، وتنميط الاستجابات، ومعالجة أخطاء HTTP كما يجب، واستخلاص خطّاف useFetch، والتعديلات وإعادة الجلب، ولماذا وُجدت مكتبة مثل TanStack Query (تخزين، إزالة تكرار، إعادة تحقّق) — مع أخطاء شائعة وتمارين عملية.
دليل عملي للتوجيه على جانب العميل في React مع React Router وTypeScript — ما الذي يفعله موجّه SPA، وإعداد المسارات، والتنقّل بـ Link وNavLink، والمسارات المتداخلة والتخطيطات بـ Outlet، ومعاملات المسار الديناميكية بـ useParams، وقراءة وكتابة سلاسل الاستعلام بـ useSearchParams، والتنقّل البرمجيّ بـ useNavigate، وإعادة التوجيه والمسارات المحميّة، ومعالجة 404، والتحميل الكسول للمسارات — مع أخطاء شائعة وتمارين عملية.
دليل عميق وعملي لخطّافات React مع TypeScript — قواعد الخطّافات، وuseState بعمق (التهيئة الكسولة، والتحديثات الدالّية، والحالة كلقطة)، وuseEffect ومصفوفة الاعتماديات (المزامنة مع الأنظمة الخارجية، والتنظيف، ومتى لا تحتاج أثرًا)، وuseRef للقيم وعُقد DOM، وuseMemo وuseCallback، وuseContext للحالة المشتركة، وuseReducer للحالة المعقّدة، وبناء خطّافاتك المخصّصة، والأخطاء الشائعة، مع تمارين عملية وحلولها.
دليل عميق وعملي لتصميم مكوّنات React وتنميط خصائصها بـ TypeScript — الخصائص كعقدٍ للقراءة فقط، وتنميطها بـ type مقابل interface، والقيم الاختيارية والافتراضية، وchildren وReact.ReactNode، وأنماط التركيب (الأغلفة والفتحات والمكوّنات المتخصّصة)، وتمرير الخصائص إلى DOM عبر rest وReact.ComponentProps، وخصائص الأنماط باتحادات مُميَّزة، وتنقيط الخصائص ولماذا يتفوّق التركيب على الضبط، والأخطاء الشائعة، مع تمارين عملية وحلولها.
دليل عملي شامل للنموذج الذهني الذي يحتاجه كل مطوّر واجهات أمامية في React — لماذا وُجدت React، والتفكير التصريحي (الواجهة = دالّة الحالة)، والمكوّنات وJSX، والخصائص المُنمَّطة بـ TypeScript وتدفّق البيانات باتجاه واحد، وعرض القوائم والمفاتيح، والعرض الشرطي، ومعالجة الأحداث، والحالة عبر useState، والتحديثات الثابتة، ونموذج إعادة العرض، والنقاء والتركيب، والأخطاء الشائعة، مع تمارين عملية وحلولها.
دليل عملي كامل للوعود (Promises) — ما هي وحالاتها الثلاث، وإنشاؤها واستهلاكها، والتسلسل بـ then/catch/finally، والمجمّعات (all وallSettled وrace وany)، وانتشار الأخطاء، وتوقيت المهام الدقيقة، والأخطاء الشائعة — مع تمارين عملية وحلولها.
دليل عملي كامل لحركة CSS — الانتقالات وأجزاؤها الأربعة، وما يمكن تحريكه وما لا يمكن، وtransform ولماذا هي الخاصية الأعلى أداءً، والتيسير وcubic-bezier، وحركات الإطارات المفتاحية وكل خصائص animation-*، والأداء (المُركِّب مقابل الخيط الرئيسي)، وprefers-reduced-motion، مع الأخطاء الشائعة وتمارين عملية مع حلولها.
دليل عملي لوحدات JavaScript وسلسلة أدوات البناء — التصديرات المسمّاة والافتراضية، وصياغة import، ولماذا للوحدات نطاقها الخاص، والاستيراد الساكن مقابل الديناميكي، ورسم الوحدات البياني، وnpm وpackage.json، والمُجمِّعات مثل Vite، وكيف يعمل البناء الحديث — مع تمارين عملية وحلولها.
دليل عملي كامل لتنسيق النصّ على الويب — مجموعة الخطوط وخطوط النظام، و@font-face وخطوط الويب، وfont-display وأداء التحميل، والخطوط المتغيّرة، والتحجيم بـ rem وclamp() السائل، وارتفاع السطر وعرض السطر، وتباعد الأحرف، والتفاف النصّ واقتطاعه، وtext-wrap balance/pretty، والإيقاع الرأسي، والوصولية، والأخطاء الشائعة، وتمارين عملية مع حلولها.
دليل عملي كامل لنموذج كائن المستند (DOM) — ما هو DOM حقًّا، واختيار العقد والتنقّل بينها، وقراءة المحتوى وتغييره، والسمات مقابل الخصائص، والأصناف والأنماط، وإنشاء العناصر وإدراجها وحذفها، ونموذج الأحداث (الفقاعة، والتفويض، وpreventDefault)، والنماذج، والأداء (إعادة التدفّق/الرسم، والأجزاء، وdebounce)، والأخطاء الشائعة، وتمارين عملية مع حلولها.
دليل عملي كامل للتصميم المتجاوب — وسم viewport وmedia queries بنهج mobile-first وmin/max-width والنطاقات ونقاط التوقف التي تتبع المحتوى والخطوط السائلة بـ clamp() والصور المتجاوبة واستعلامات prefers-* واستعلامات الحاوية — مع تمارين عملية.
الأساس الذي تقوم عليه CSS كلها — كل نوع محدّد ومُركِّب، والأصناف الزائفة والعناصر الزائفة، وكيف يُحسَب التخصيص فعلًا، وترتيب حلّ التتالي الكامل، والوراثة، وكلمات inherit/initial/unset/revert، والهروب من !important، وتمارين عملية مع حلولها.
دليل بصري كامل لـ CSS Grid — حاوية الشبكة والمسارات ووحدة fr ودالتا repeat() وminmax() ومناطق القوالب والتوضيع بالأسطر والمناطق وauto-fit مقابل auto-fill وgap والمحاذاة والشبكة الضمنية، مع تمارين عملية وحلولها.
دليل عملي كامل للون على الويب — hex وrgb وhsl، وفضاء oklch الحديث، والشفافية وقيمة alpha، وcurrentColor، وcolor-mix، والتدرّجات الخطّية/الشعاعية/المخروطية، ومحطّات اللون والمحطّات الحادّة، والخلفيات المتعدّدة وbackground-clip، والوضع الداكن بـ prefers-color-scheme، والتباين والوصولية، والأخطاء الشائعة، وتمارين عملية مع حلولها.
دليل عملي كامل لتموضع CSS — قيم position وكيف يحرّك كلٌّ منها العنصر، وخصائص الإزاحة، والكتل الحاوية، والتموضع اللاصق، وz-index وسياقات التكديس (ولماذا لا يفعل z-index شيئًا أحيانًا)، مع الأخطاء الشائعة وتمارين عملية مع حلولها.
شرح عملي شامل لـ semantic HTML، landmarks، document structure، accessibility، SEO، forms، media، tables، والأخطاء الشائعة.
دليل عملي كامل لنماذج الويب — عنصر form والإرسال، وأنواع الإدخال، والتسميات والوصولية، وسمة name، وتحقّق HTML5، وواجهة التحقّق من القيود، ومعالجة الإرسال بـ JavaScript وFormData، وselect/textarea/fieldset، والأخطاء الشائعة — مع تمارين عملية وحلولها.
دليل بصري كامل لـ CSS Flexbox — المحوران، flex-direction والالتفاف وjustify-content وalign-items وgap وgrow/shrink/basis واختصار flex والهوامش التلقائية وفخ min-width:0 وسلوك RTL، مع تمارين عملية وحلولها.
دليل عملي كامل لـ async/await — كيف يبني على الوعود، وكلمة await، ومعالجة الأخطاء بـ try/catch، وتشغيل المهام بالتوازي مقابل التتابع، ودوال async التي تُرجِع وعدًا دائمًا، وtop-level await، والحلقات وعدم التزامن، والأخطاء الشائعة — مع تمارين عملية وحلولها.
دليل عملي كامل لكل ما يحتاجه المطوّر في JavaScript — كيف تعمل، والمتغيّرات والنطاق، والأنواع والتحويل، والدوال والإغلاقات، وthis، والكائنات والمصفوفات، والتفكيك، وحلقة الأحداث، والوعود وasync/await، والوحدات، وDOM، ومعالجة الأخطاء، والأخطاء الشائعة، وتمارين عملية مع حلولها.
دليل بصري كامل لـ CSS box model — content وpadding وborder وmargin وbox-sizing وانهيار الـ margins والخصائص المنطقية، مع الأخطاء التي تظهر في التخطيطات الحقيقية.
جولة في ميزات CSS الحديثة المتوفرة الآن في المتصفحات — استعلامات الحاوية و:has() والتداخل وطبقات التتالي وsubgrid والخصائص المخصّصة وcolor-mix() واللون الحديث والخصائص المنطقية وclamp() وaspect-ratio والحركات المدفوعة بالتمرير وانتقالات العرض و:is()/:where() — مع تمارين عملية.