في هذه الفئة

تطوير واجهة المستخدم

React, Next.js, Vue, TypeScript, UI/UX, أطر عمل JavaScript الحديثة، وأفضل الممارسات في تطوير الواجهة الأمامية

55 منشورات

Vite 8 Build Fails After Upgrade: Causes and Fixes (2026)

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

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

#vite 8 #rolldown

React Hydration Mismatch: Every Cause and Fix (2026)

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

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

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

#react hydration #hydration mismatch

React Compiler Not Memoizing Your Component? Fix It (2026)

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

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

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

#react compiler #react 19

Build an Accessible React Combobox with React Aria (2026)

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

تطوير واجهة المستخدم٢ يوليو ٢٠٢٦

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

#react #accessibility

How to Cancel a Fetch Request in JavaScript (2026)

كيفية إلغاء طلب Fetch في JavaScript (2026)

تطوير واجهة المستخدم٢٩ يونيو ٢٠٢٦

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

#abortcontroller #fetch api

React Hook Form + Zod: Type-Safe Forms Tutorial (2026)

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

تطوير واجهة المستخدم٢٦ يونيو ٢٠٢٦

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

#react hook form #zod

TanStack Query Optimistic Updates: Rollback in 2026

TanStack Query Optimistic Updates: Rollback في

تطوير واجهة المستخدم٢٤ يونيو ٢٠٢٦

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

#tanstack query #react query

TanStack Form + Zod Validation in React (2026)

TanStack Form + Zod Validation في React (2026)

تطوير واجهة المستخدم٢٢ يونيو ٢٠٢٦

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

#tanstack form #zod

Svelte 5 Runes Explained: $state, $derived, $effect (2026)

شرح Svelte 5 Runes: $state, $derived, $effect (2026)

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

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

#Svelte #Svelte 5

CSS Anchor Positioning Fallbacks: Auto-Flip Guide (2026)

بدائل CSS Anchor Positioning: دليل التبديل التلقائي (2026)

تطوير واجهة المستخدم١٨ يونيو ٢٠٢٦

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

#css anchor positioning #position-try-fallbacks

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

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

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

#tanstack query #react query

Tailwind v4 Dark Mode: Setup, Toggle & Fixes (2026)

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

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

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

#tailwind css #tailwind v4

Tailwind v4 + Vite from Scratch: CSS-First @theme (2026)

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

تطوير واجهة المستخدم٢٦ مايو ٢٠٢٦

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

#tailwind css #tailwind v4

Astro Actions Tutorial: Type-Safe Forms in 2026

شرح Astro Actions: نماذج Type-Safe في ٢٠٢٦

تطوير واجهة المستخدم٢٣ مايو ٢٠٢٦

ابنِ نموذج ملاحظات type-safe باستخدام Astro Actions و Zod: التحقق من الصحة من جهة الخادم، وأخطاء محددة النوع لكل حقل، والتحسين التدريجي، و server islands.

#astro #astro actions

Next.js 16 Optimistic UI Tutorial: Server Actions 2026

Next.js 16 شرح Optimistic UI: Server Actions

تطوير واجهة المستخدم١٨ مايو ٢٠٢٦

دليل عملي للإنتاج: إطلاق optimistic UI في Next.js 16.2 مع React 19.2 باستخدام useOptimistic و useActionState و useFormStatus و rate limits و revalidatePath.

#nextjs #react

Next.js 16 Streaming Tutorial: Suspense + use cache 2026

Next.js 16 شرح Streaming: Suspense + use cache

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

شرح عملي لـ Next.js 16.2: بث Server Components باستخدام Suspense و loading.tsx، ثم تخزينهم مؤقتاً باستخدام use cache و cacheLife و updateTag في 2026.

#nextjs #react

Next.js Pages Router to App Router: A 2026 Migration Tutorial

Next.js من Pages Router إلى App Router: دليل انتقال لعام

تطوير واجهة المستخدم٦ مايو ٢٠٢٦

دليل عملي لعام 2026: نقل تطبيق Next.js 16 من Pages Router إلى App Router — الـ codemods، والـ async params، والـ route handlers، وفخ الـ legacyBehavior.

#nextjs #app-router

Mastering Flexbox Layout: The Complete 2026 Guide

إتقان تخطيط Flexbox: الدليل الكامل لعام

تطوير واجهة المستخدم٢٤ يناير ٢٠٢٦

غوص عميق في إتقان CSS Flexbox — من الأساسيات إلى الأنماط المتقدمة، والأداء، وسير العمل الجاهزة للإنتاج

#CSS #Flexbox

Mastering JavaScript ES6: The Modern Features That Changed Everything

إتقان JavaScript ES6: المميزات الحديثة التي غيرت كل شيء

تطوير واجهة المستخدم١٦ يناير ٢٠٢٦

JavaScript مميزات ES6: let/const، arrow functions، classes، modules، Promises، destructuring، spread — الأساس اللي بتقوم عليه JS الحديثة النهاردة.

#JavaScript #ES6

Mastering Media Query Strategies for Responsive Design

إتقان استراتيجيات Media Query لـ Responsive Design

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

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

#CSS #responsive design

Color Contrast in Design: Accessibility, Performance, and Practical Implementation

التباين اللوني في التصميم: الإتاحة، الأداء، والتطبيق العملي

تطوير واجهة المستخدم٥ يناير ٢٠٢٦

غوص عميق في تباين الألوان — لماذا يهم، وكيفية قياسه، وكيفية تنفيذ أنظمة ألوان قابلة للوصول وعالية الأداء عبر واجهات الويب والتطبيقات المحمولة.

#color contrast #accessibility

Mastering iOS Development Fundamentals in 2025

إتقان أساسيات تطوير iOS في

تطوير واجهة المستخدم٣ يناير ٢٠٢٦

غوص عميق في أساسيات تطوير iOS — من أساسيات Swift و Xcode إلى هندسة التطبيقات، والأمان، والاختبار، وتحسين الأداء — مع رؤى واقعية وأمثلة عملية

#iOS #Swift

Mastering UI Design Principles: A Practical Guide for 2025

إتقان مبادئ تصميم UI: دليل عملي لعام

تطوير واجهة المستخدم٢٩ ديسمبر ٢٠٢٥

استكشاف عميق وتطبيقي لمبادئ تصميم UI الحديثة — من سهولة الاستخدام والإتاحة إلى الأداء والاختبار وقابلية التوسع — بأمثلة واقعية وتقنيات عملية

#UI design #UX

The Complete WCAG Compliance Guide for 2025

الدليل الكامل للامتثال لـ WCAG لعام

تطوير واجهة المستخدم٢٨ ديسمبر ٢٠٢٥

دليل عملي خطوة بخطوة لفهم وتنفيذ الامتثال لـ WCAG — بما في ذلك استراتيجيات اختبار، الأمثلة الواقعية، والأخطاء الشائعة التي يجب تجنبها

#WCAG #accessibility

Python Tricks for Modern Frontend and Fog Computing Transitions

حيل بايثون ل فرونت إند حديث و تحولات الحوسبة الضبابية

تطوير واجهة المستخدم٢٧ ديسمبر ٢٠٢٥

اكتشف حيل Python المتقدمة التي تربط بين تطوير frontend وfog computing التحولات — بما في ذلك performance tuning، async patterns، ورؤى النشر الواقعي.

#Python #Frontend Development

Mastering the CSS Interview: Core to Advanced

إتقان تحضير مقابلات CSS: من الأساسيات إلى الأنماط المتقدمة

تطوير واجهة المستخدم٢٦ ديسمبر ٢٠٢٥

دليل عملي كامل للتفوق في مقابلات CSS — من المفاهيم الأساسية والأسئلة الصعبة إلى performance optimization، debugging، ودراسات حالة واقعية.

#CSS #frontend

Designing Mobile‑First Progressive Web Apps That Feel Native

تصميم تطبيقات الويب التقدمية الموجهة للجوال أولاً التي تبدو أصلية

تطوير واجهة المستخدم١٨ ديسمبر ٢٠٢٥

غوص عميق في تصميم PWA محمول-أولًا — من التخطيطات الاستجابة وتحسين الأداء إلى المرونة في وضع عدم الاتصال والاختبار واستراتيجيات النشر في العالم الحقيقي.

#PWA #mobile-first

Mastering Next.js App Router Patterns for Scalable Web Apps

إتقان Next.js أنماط App Router لتطبيقات ويب قابلة للتوسع

تطوير واجهة المستخدم١٨ ديسمبر ٢٠٢٥

غوص عميق في أنماط Next.js App Router الحديثة — من التخطيطات ومكونات الخادم إلى جلب البيانات، وحدود الأخطاء، وضبط الأداء للتطبيقات الجاهزة للإنتاج.

#Next.js #React

React Server Components: The Future of Seamless Rendering

React Server Components: مستقبل الـ Rendering السلس

تطوير واجهة المستخدم١٧ ديسمبر ٢٠٢٥

نظرة عميقة على React Server Components—كيف تعمل، ولماذا هي مهمة، وكيفية استخدامها بفعالية لتطبيقات ويب أسرع وأكثر قابلية للتوسع.

#React #Server Components

Flutter: A Complete Developer’s Handbook (2025 Edition)

Flutter: دليل المطور الشامل (إصدار 2025)

تطوير واجهة المستخدم٣٠ نوفمبر ٢٠٢٥

دليل Flutter لعام 2025: أنماط المعمارية، وإدارة الحالة، وتحسين الأداء، والاختبار، وإطلاق تطبيقات iOS + Android + web من قاعدة كود Dart واحدة.

#Flutter #Mobile Development

Learn Svelte: The Modern Guide to Building Lightning‑Fast Web Apps

تعلم Svelte: الدليل الحديث لبناء تطبيقات ويب فائقة السرعة

تطوير واجهة المستخدم٢٤ نوفمبر ٢٠٢٥

دليل عميق وعملي ومبسط لإتقان Svelte — يغطي الأساسيات، والأداء، وحالات الاستخدام الواقعية، والأنماط الجاهزة للإنتاج.

#Svelte #JavaScript

Mastering Vue.js: The Modern JavaScript Framework Explained

إتقان Vue.js: شرح الإطار الحديث لـ JavaScript

تطوير واجهة المستخدم٢٤ نوفمبر ٢٠٢٥

- دليل عملي شامل لتعلم Vue.js — من الأساسيات إلى التطبيقات الإنتاجية، مع أمثلة واقعية، نصائح الأداء وأفضل الممارسات.

#Vue.js #JavaScript

Advanced JavaScript: Building Real Games and Smarter Apps

جافا سكريبت متقدمة: بناء ألعاب وتطبيقات أكثر ذكاءً

تطوير واجهة المستخدم١١ نوفمبر ٢٠٢٥

- انغمس في بنية جافا سكريبت الحديثة، من محركات الألعاب القائمة على MVC مع Kaplay إلى روبوتات الدردشة المدعومة بالذكاء الاصطناعي باستخدام LangChain.js و OpenAI. تعلم كيفية هيكلة وتوسيع وتأمين أنظمة جافا سكريبت للإنتاج.

#JavaScript #Game Development

Advanced JavaScript: Patterns & Performance

إتقان JavaScript المتقدم: مفاهيم عميقة، أنماط حقيقية وأداء متميز

تطوير واجهة المستخدم١١ نوفمبر ٢٠٢٥

- غوص شامل في الأساسيات الداخلية لـ JavaScript الحديثة — الإغلاقات، النماذج الأولية، الأنماط غير المتزامنة، وضبط الأداء — مع أمثلة من العالم الحقيقي ورؤى جاهزة للإنتاج.

#JavaScript #Performance

Mastering JavaScript Functions: From Basics to Game Dev Powerhouse

إتقان دوال JavaScript: من الأساسيات إلى قوة تطوير الألعاب

تطوير واجهة المستخدم٢٤ سبتمبر ٢٠٢٥

- غوص عميق في دوال JavaScript، كيفية عملها من الداخل، وكيفية استخدامها بفعالية في المشاريع الواقعية مثل الألعاب والتطبيقات.

#JavaScript #functions

تحسين محركات البحث في 2024: كسر القواعد، خدع Search Console، والنتائج الحقيقية

تطوير واجهة المستخدم١٩ سبتمبر ٢٠٢٥

- تعتقد أن تحسين محركات البحث يتعلق فقط بالصور المميزة والعناوين المثالية؟ فكر مجددًا. في هذا التحليل العميق، نستكشف تجارب مفاجئة، وخدع Google Search Console، واستراتيجيات قائمة على البيانات تحرك العجلة فعليًا في 2024.

#SEO #Google Search Console

Mastering Frontend Development: A Comprehensive Guide

إتقان تطوير الواجهة الأمامية: دليل شامل

تطوير واجهة المستخدم١٨ سبتمبر ٢٠٢٥

- استكشف عالم تطوير الواجهة الأمامية، من الأساسيات إلى التقنيات المتقدمة، وتعلم كيفية إنشاء تطبيقات ويب مذهلة.

#Frontend Development #Web Development

إتقان JavaScript: من الأساسيات للمبتدئين إلى التطوير المتقدم للويب

تطوير واجهة المستخدم١٨ سبتمبر ٢٠٢٥

- تعمق في JavaScript، اللغة التي تدعم الويب، واستكشف أساسياتها، المفاهيم المتقدمة، وتطبيقاتها العملية لبناء مواقع ويب ديناميكية وتفاعلية وما هو أبعد من ذلك.

#JavaScript #web development

Understanding React: A Comprehensive Guide to Building Modern Web Apps

فهم React: دليل شامل لبناء تطبيقات الويب الحديثة

تطوير واجهة المستخدم١٨ سبتمبر ٢٠٢٥

- انغمس بعمق في React، وهي مكتبة JavaScript الشهيرة لبناء واجهات المستخدم. تعرف على مفاهيمها الأساسية، وميزاتها، وكيفية إنشاء تطبيقات الويب الديناميكية.

#React #JavaScript

JSX and React: Learn How to Write Maintainable Code – CheatSheet

JSX و React: تعلم كيفية كتابة كود قابل للصيانة – دليل مختصر

تطوير واجهة المستخدم١٦ سبتمبر ٢٠٢٥

- دليل مختصر لـ JSX و React لعام 2025 يغطي المكونات، الخصائص، الحالة، الخطافات، الأحداث، العرض الشرطي، وممارسات البرمجة القابلة للصيانة.

#React #JSX

Understanding Conditional Rendering in React (2025 Guide)

فهم العرض الشرطي في React (دليل 2025)

تطوير واجهة المستخدم١٥ سبتمبر ٢٠٢٥

- تعلم كيفية تنفيذ العرض الشرطي في React باستخدام المعاملات المنطقية، والتعبيرات الشرطية، وأفضل الممارسات للقراءة وسهولة الصيانة.

#React #JavaScript

Why I Moved NerdLevelTech from WordPress to Next.js

لماذا انتقلت Nerd Level Tech من WordPress إلى Next.js

تطوير واجهة المستخدم١٢ سبتمبر ٢٠٢٥

- غوص عميق في سبب صعوبة WordPress وكيف تعتبر المدونات الثابتة بتنسيق Markdown أفضل.

#nextjs #tailwind

How to be Better in React Code Reusability - Part 1

كيفية التحسين في إعادة استخدام كود React - الجزء الأول

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

- تعلم كيفية تنفيذ إعادة استخدام الكود في React باستخدام المكونات الوظيفية، والمكونات الفئوية، والمكونات عالية الرتبة (HOCs)، وخصائص العرض للتطبيقات القابلة للتوسع والصيانة. coverImage: /images/react-code-reusability-part1.jpg

Ecmascript ES6 a Comprehensive Guide to Modern Javascript

Ecmascript ES6 دليل شامل لـ JavaScript الحديثة

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

ECMAScript من ES6 حتى ES2025: الـ classes، الـ arrow functions، الـ modules، الـ async/await، الـ destructuring — والميزات التي تحتاجها فعلياً في JavaScript الحديثة.

#javascript #ecmascript

Here are Some new Features in Javascript

إليك بعض الميزات الجديدة في JavaScript

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

ميزات JavaScript الجديدة لعام 2024–2025: Promise.withResolvers()، و Object.groupBy / Map.groupBy، وعمليات Set، و Iterator Helpers، وملاحظات توافق المتصفحات.

#javascript #es2025

إزاي تكون أفضل في React إعادة استخدام الكود الجزء الأول

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

React إعادة استخدام الكود في 2026: custom hooks، و Server Components، و composition over inheritance، ومتى تتوقف تماماً عن اللجوء لـ HOCs و render props.

#react #code-reusability

How to Create an Exceptional UI UX Design

كيفية إنشاء تصميم UI UX استثنائي

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

تصميم واجهة وتجربة المستخدم (UI/UX) في عام 2026: الأدوات المدعومة بالذكاء الاصطناعي (Figma AI، Firefly)، ومعايير إمكانية الوصول WCAG 2.2، والتصميم للأجهزة القابلة للطي، والأجهزة القابلة للارتداء، والشاشات المتغيرة.

#ui-ux #design

How to Make a Better Responsive Web Design: Full Guide (2026)

كيفية عمل Responsive Web Design أفضل: الدليل الكامل (2026)

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

تصميم الويب المتجاوب في 2026: Container Queries، :has()، Subgrid، View Transitions، صور AVIF، و foldable-device CSS — مع حالة Baseline الحالية لكل منها.

#responsive-design #css

مقدمة في عرض CSS الجزء الأول

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

CSS الحديث من الصفر (الجزء الأول): selectors، و the box model، و Flexbox، و Grid، و Container Queries، و :has(). صمم أول صفحة حقيقية ليك بـ CSS النهاردة.

#css #beginners

JavaScript تصور مرئي لتنفيذ الـ Promise

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

نيرد ليفل تك تصور الـ Promises — الـ microtask queue، والـ task queue، وترتيب الـ event loop. شوف بالظبط إمتى كل .then() بتشتغل مع رسومات توضيحية خطوة بخطوة وكود.

#javascript #promises

Learn Essential Javascript Methods and Objects

تعلم أهم دوال وكائنات JavaScript

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

أهم ميثودز وكائنات JavaScript الأساسية — Array و String و Object و Map و Set مع أنواع TypeScript، وأمثلة قابلة للتشغيل، والأنماط اللي بيستخدمها الـ production code.

#javascript #methods

Mastering the React Interview top Questions and Best Practices

إتقان مقابلة عمل React: أهم الأسئلة وأفضل الممارسات

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

تحضير مقابلة React 19 لعام 2026: Server Components، و Actions، و useActionState، والـ use() API، و ref-as-prop، و React Compiler مع إجابات نموذجية وفخاخ.

#react #interview-prep

Async JavaScript: Callbacks, Promises, Await

افهم الـ Asynchronous JavaScript والـ Callbacks والـ Promises والـ Async Await

تطوير واجهة المستخدم١٥ يناير ٢٠٢٣

Asynchronous JavaScript من البداية للنهاية — الـ callbacks، والـ Promises، والـ async/await، ومعالجة الأخطاء، والـ event loop مع أمثلة قابلة للتنفيذ وأنماط من الواقع العملي.

#javascript #async

React Side Effects Explained with useEffect (2025 Guide)

آثار جانبية في React موضحة باستخدام useEffect (دليل 2025)

تطوير واجهة المستخدم١ أكتوبر ٢٠٢٢

- تعلم كيفية التعامل مع الآثار الجانبية في React باستخدام useEffect hook. يتضمن مصفوفات الاعتمادية، أمثلة وأفضل الممارسات لعام 2025.

#React #JavaScript

React Props and React State — A Complete Guide (2026)

React Props و React State - دليل شامل (2025)

تطوير واجهة المستخدم١٧ سبتمبر ٢٠٢٢

- دليل واضح حول React props مقابل state مع hooks والسياق والأمثلة وأفضل الممارسات لعام 2025.

#react #props