#frontend

الصفحة ١ من ٣

• 

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

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

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

• 

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

  إنشاء 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: بيتوقف عن العمل.

• 

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

  React الـ ViewTransition مش شغال؟ كل الحلول (٢٠٢٦)

  React الخاص بـ <ViewTransition> لا يقوم بالتحريك؟ الأسباب الأربعة الحقيقية — sync setState و DOM placement والتوفر في نسخة canary-only ودعم المتصفح — والحل لكل منها.

• 

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

  Tailwind v4 + Vite من الصفر: CSS-First @theme (٢٠٢٦)

  إنشاء مشروع Vite + Tailwind CSS v4 في سنة ٢٠٢٦: توجيه @theme، وضع الـ dark mode باستخدام @custom-variant، مسارات @source، @utility مخصصة، وبدون ملف config.