تطوير الواجهة الأمامية

الصفحة ١ من ٥

• 

  تطوير الواجهة الأمامية٣ سبتمبر ٢٠٢٦٤٥ دقيقة

  فشل بناء Vite 8 بعد التحديث: الأسباب والحلول (٢٠٢٦)

  استبدل Vite 8 كل من Rollup و esbuild بـ Rolldown و Oxc. إليك سبب فشل عملية البناء (build) بعد التحديث، وما الذي تم حذفه بالفعل، وكيفية إصلاح كل خطأ.

• 

  تطوير الواجهة الأمامية١٠ أغسطس ٢٠٢٦٢٦ دقيقة

  React عدم تطابق الترطيب (Hydration Mismatch): كل الأسباب والحلول (٢٠٢٦)

  هناك قائمة قصيرة وموثقة لأسباب حدوث React hydration mismatch. إليك كل سبب منها، وكيفية العثور على المكون المسؤول، والحلول التي تعمل بالفعل.

• 

  تطوير الواجهة الأمامية١٣ يوليو ٢٠٢٦١٣ دقيقة

  React Compiler مش بيعمل Memoizing للمكون بتاعك؟ صلح المشكلة (٢٠٢٦)

  الـ Compiler بتاع React مش بيعمل memoizing للـ component بتاعك؟ اعمل Debug للـ bailout باستخدام الـ Memo badge والـ Playground، وبعدين صلح الـ ESLint، و Next.js 16، وإعدادات Vite بشكل صحيح.

• 

  تطوير الواجهة الأمامية٢ يوليو ٢٠٢٦١٤ دقيقة

  إنشاء Combobox سهل الوصول إليه باستخدام React Aria (٢٠٢٦)

  قم ببناء combobox متاح بالكامل باستخدام React و React-aria-components 1.19: مع ربط ARIA صحيح، وتصفح بلوحة المفاتيح، ومجموعة اختبارات حقيقية باستخدام jest-axe و Testing Library.

• 

  تطوير الواجهة الأمامية٢٩ يونيو ٢٠٢٦١٢ دقيقة

  كيفية إلغاء طلب Fetch في JavaScript (٢٠٢٦)

  إلغاء طلب fetch في JavaScript و React باستخدام AbortController: الإلغاء عند unmount، وإضافة مهلة زمنية باستخدام AbortSignal.timeout، والتعامل مع AbortError بأمان.

• 

  تطوير الواجهة الأمامية٢٦ يونيو ٢٠٢٦١٠ دقائق

  React Hook Form + Zod: شرح عمل نماذج Type-Safe (٢٠٢٦)

  ابنِ نماذج React بنظام type-safe باستخدام React Hook Form 7 و Zod 4: إعداد zodResolver، و register مقابل Controller، وإصلاح type-error باستخدام z.coerce. كل الأكواد قابلة للتشغيل.

• 

  تطوير الواجهة الأمامية٢٤ يونيو ٢٠٢٦١١ دقيقة

  TanStack Query Optimistic Updates: Rollback في

  التحديثات المتفائلة في TanStack Query (React Query) باستخدام useMutation: وcancelQueries، وsnapshot، وsetQueryData، والتراجع التلقائي عند فشل الطلب.

• 

  تطوير الواجهة الأمامية٢٢ يونيو ٢٠٢٦٨ دقائق

  TanStack Form + Zod Validation في React (٢٠٢٦)

  ابني نماذج React type-safe باستخدام TanStack Form v1 و Zod: التحقق من صحة النموذج والحقول، فحوصات async، حقول array، وحالة submit. بدون adapter، كل شيء قابل للتشغيل.

• 

  تطوير الواجهة الأمامية١٩ يونيو ٢٠٢٦١١ دقيقة

  شرح Svelte 5 Runes: $state, $derived, $effect (٢٠٢٦)

  شرح الـ runes في Svelte 5 مع أمثلة قابلة للتشغيل: متى تستخدم $state و $derived و $effect، ومتى لا تستخدم $effect، وكيفية الانتقال من الـ stores في Svelte 4.

• 

  تطوير الواجهة الأمامية١٨ يونيو ٢٠٢٦١٠ دقائق

  بدائل CSS Anchor Positioning: دليل التبديل التلقائي (٢٠٢٦)

  خلي القوائم المنسدلة (dropdowns) والتلميحات (tooltips) المربوطة بـ CSS تتقلب وتختفي لما تخرج بره الحدود باستخدام position-try-fallbacks و @position-try. دليل ٢٠٢٦ عملي وشغال على كل المتصفحات.

• 

  تطوير الواجهة الأمامية١٧ يونيو ٢٠٢٦١٢ دقيقة

  TanStack Query + Next.js 16 App Router Prefetch (2026)

  قم بعمل Prefetch لـ TanStack Query v5 على السيرفر في Next.js 16 App Router، ثم قم بعمل hydrate باستخدام HydrationBoundary: بدون مؤشرات تحميل (spinners)، وبدون جلب بيانات مزدوج. دليل قابل للتنفيذ لعام ٢٠٢٦.

• 

  تطوير الواجهة الأمامية١٥ يونيو ٢٠٢٦١١ دقيقة

  Tailwind v4 الوضع الليلي: إعداد، تبديل وإصلاحات (٢٠٢٦)

  تفعيل الوضع المظلم في Tailwind CSS v4: كود الـ @custom-variant dark، وتبديل الـ class بدون وميض، ودعم ثيم النظام، وليه dark: بيتوقف عن العمل.