Frontend Machine Coding Interview Questions
1.0.0
إنشاء صفحة HTML أساسية : قم بإنشاء صفحة HTML أساسية تتضمن رأسًا وقائمة تنقل وقسم محتوى رئيسيًا وتذييلًا.
قائمة التنقل سريعة الاستجابة : قم بتنفيذ قائمة تنقل سريعة الاستجابة يمكن طيها في قائمة همبرغر على شاشات أصغر باستخدام HTML وCSS وJavaScript/jQuery.
حاسبة JavaScript : أنشئ آلة حاسبة بسيطة باستخدام HTML وCSS وJavaScript يمكنها إجراء العمليات الحسابية الأساسية (الجمع والطرح والضرب والقسمة).
Image Carousel : قم بإنشاء دائري/شريط تمرير للصور باستخدام HTML وCSS وJavaScript/jQuery الذي يسمح للمستخدمين بالتنقل عبر مجموعة من الصور باستخدام الأزرار التالية والسابقة.
تطبيق قائمة المهام : قم بتطوير تطبيق ويب لقائمة المهام باستخدام HTML وCSS وJavaScript. يجب أن يكون المستخدمون قادرين على إضافة المهام وتحريرها وحذفها.
التصميم سريع الاستجابة : خذ صفحة ويب موجودة واجعلها تستجيب لأحجام الشاشات المختلفة (على سبيل المثال، سطح المكتب، الجهاز اللوحي، الهاتف المحمول) باستخدام استعلامات الوسائط وCSS.
Fetch API : استخدم Fetch API لاسترداد البيانات من نقطة نهاية JSON وعرضها على صفحة ويب باستخدام JavaScript.
تطبيق صفحة واحدة (SPA) : أنشئ تطبيقًا بسيطًا من صفحة واحدة (SPA) باستخدام إطار عمل الواجهة الأمامية من اختيارك (على سبيل المثال، React، Angular، Vue.js). إنشاء طرق عرض متعددة والتنقل بينها.
التحقق من صحة النموذج : تنفيذ التحقق من صحة النموذج من جانب العميل لنموذج التسجيل باستخدام HTML5 وJavaScript. التحقق من صحة الحقول مثل البريد الإلكتروني وقوة كلمة المرور والحقول المطلوبة.
تنفيذ ميزة السحب والإفلات : قم بإنشاء صفحة ويب بواجهة السحب والإفلات باستخدام HTML وCSS وJavaScript. السماح للمستخدمين بسحب العناصر وإفلاتها في مناطق محددة.
التمرير اللانهائي : تنفيذ ميزة التمرير اللانهائي على صفحة الويب. قم بتحميل محتوى إضافي أثناء قيام المستخدم بالتمرير إلى أسفل الصفحة باستخدام JavaScript وAJAX.
خريطة تفاعلية : أنشئ خريطة تفاعلية باستخدام مكتبة الخرائط (على سبيل المثال Leaflet وGoogle Maps API) واسمح للمستخدمين بالبحث عن المواقع وإضافة علامات وعرض معلومات إضافية عند النقر على العلامات.
إمكانية الوصول إلى الويب : تأكد من أن صفحة الويب تتوافق مع معايير إمكانية الوصول إلى الويب (WCAG). قم بإجراء تعديلات HTML وCSS اللازمة لتحسين إمكانية الوصول للمستخدمين ذوي الإعاقة.
الرسوم المتحركة لـ CSS : قم بإنشاء رسوم متحركة لـ CSS، مثل أداة التحميل الدوارة أو تأثير التلاشي، لتحسين تجربة المستخدم على صفحة الويب.
قالب البريد الإلكتروني سريع الاستجابة : قم بتصميم وترميز قالب بريد إلكتروني سريع الاستجابة يبدو جيدًا على عملاء البريد الإلكتروني على سطح المكتب والجوال.
تصفية المحتوى الديناميكي : قم بإنشاء صفحة ويب تتيح للمستخدمين تصفية المحتوى ديناميكيًا بناءً على الفئات أو العلامات باستخدام JavaScript.
أزرار مشاركة الوسائط الاجتماعية : قم بتنفيذ أزرار مشاركة الوسائط الاجتماعية (مثل Facebook وTwitter) على صفحة الويب. عندما ينقر المستخدم على زر، يجب أن يظهر مربع حوار المشاركة.
تحميل الصورة البطيء : قم بتنفيذ التحميل البطيء للصورة لتحسين أداء الصفحة. يجب أن يتم تحميل الصور فقط عندما تكون في إطار العرض.
الإكمال التلقائي للنموذج : أضف وظيفة الإكمال التلقائي إلى حقل إدخال البحث باستخدام JavaScript. تقديم الاقتراحات حسب أنواع المستخدم.
تنفيذ العرض المبسط : قم بإنشاء مربع مبسط/نافذة مشروطة تعرض الصور أو المحتوى عندما ينقر المستخدم على صورة مصغرة أو زر.
تطبيق الدردشة في الوقت الفعلي : أنشئ تطبيق دردشة في الوقت الفعلي باستخدام إطار عمل الواجهة الأمامية (على سبيل المثال، React، Vue.js) وتقنية الواجهة الخلفية مثل WebSocket أو Firebase.
الجداول المستجيبة : جعل جداول HTML سريعة الاستجابة. تأكد من أن الجداول تتكيف مع أحجام الشاشات المختلفة دون التمرير الأفقي.
تصور البيانات : قم بإنشاء مخطط مرئي للبيانات (على سبيل المثال، مخطط شريطي، مخطط دائري) باستخدام مكتبة JavaScript مثل D3.js أو Chart.js.
التنقل الثابت : قم بتنفيذ شريط تنقل ثابت يلتصق بأعلى الصفحة عند التمرير لأسفل ويعود إلى موضعه الأصلي عند التمرير لأعلى.
تحسين أداء الويب : تحسين أداء صفحة الويب بطيئة التحميل. تحديد الاختناقات وتطبيق التحسينات لتقليل أوقات التحميل.
تطبيق الويب التقدمي (PWA) : تحويل تطبيق الويب إلى تطبيق ويب تقدمي. أضف ميزات مثل الوصول دون اتصال بالإنترنت ودفع الإشعارات.
اختبار الوحدة : اكتب اختبارات الوحدة لوظيفة أو مكون JavaScript باستخدام إطار اختبار مثل Jest.
التوافق عبر المتصفحات : تأكد من أن صفحة الويب تعمل بشكل صحيح وتبدو متسقة عبر متصفحات الويب المختلفة (مثل Chrome وFirefox وEdge).
أمان الويب : تحديد الثغرات الأمنية في تطبيق الويب وإصلاحها، مثل البرمجة النصية عبر المواقع (XSS) أو تزوير الطلبات عبر المواقع (CSRF).
توقيع البريد الإلكتروني المستجيب : قم بتصميم وترميز توقيع بريد إلكتروني سريع الاستجابة يمكن استخدامه في عملاء البريد الإلكتروني.
Carousel اللانهائي : قم بإنشاء دائري/شريط تمرير لا نهائي يتم تشغيله تلقائيًا عبر مجموعة من الصور أو المحتوى، مما يوفر عناصر تحكم في التنقل للمستخدم.
معرض الصور : قم بإنشاء معرض صور حيث يمكن للمستخدمين عرض مجموعة من الصور، والنقر للتكبير، والتنقل عبرها باستخدام الأزرار السابقة والتالية.
مكون تلميح الأدوات : تصميم وتنفيذ مكون تلميح أدوات قابل لإعادة الاستخدام في HTML وCSS وJavaScript/jQuery والذي يظهر عند المرور فوق عناصر محددة.
جلب البيانات وعرضها : جلب البيانات من واجهة برمجة التطبيقات العامة (على سبيل المثال، GitHub API وOpenWeatherMap API) وعرضها على صفحة ويب باستخدام JavaScript. تنسيق البيانات وتصميمها بشكل مناسب.
القائمة المنسدلة المتحركة : قم بإنشاء قائمة منسدلة تتوسع وتطوى باستخدام رسوم متحركة سلسة عندما يقوم المستخدم بالتمرير فوق عنصر التشغيل.
النماذج التفاعلية : قم بتحسين نموذج الويب بميزات تفاعلية مثل الاقتراحات التلقائية والتحقق من صحة الإدخال وحقول النماذج الشرطية باستخدام JavaScript.
انتقالات الصفحة : تنفيذ انتقالات سلسة للصفحة بين الأقسام أو الصفحات المختلفة لموقع الويب باستخدام انتقالات CSS وJavaScript.
اختصارات لوحة المفاتيح : أضف اختصارات لوحة المفاتيح إلى تطبيق ويب لتحسين إمكانية وصول المستخدم والتنقل.
تبديل الوضع الداكن : قم بإنشاء زر تبديل الوضع الداكن الذي يقوم بتبديل نظام ألوان موقع الويب بين الوضع الفاتح والداكن.
تجربة WebGL : قم بتطوير مشروع WebGL تفاعلي، مثل التصور ثلاثي الأبعاد أو الرسوم المتحركة، وقم بتضمينه في صفحة ويب.
مشغل فيديو مخصص : أنشئ مشغل فيديو HTML5 مخصصًا مزودًا بعناصر تحكم مخصصة، مثل التشغيل والإيقاف المؤقت ومستوى الصوت وشريط التقدم.
أنماط طباعة الصفحة : تحديد أنماط CSS لطباعة صفحة ويب بحيث تبدو منسقة بشكل جيد عند طباعتها على الورق.
تنفيذ معرض الصور : قم بإنشاء معرض صور يحتوي على ألبومات وصور مصغرة وإمكانية عرض الصور بحجم أكبر.
مشغل الصوت عبر الويب : أنشئ مشغل صوت على الويب مزودًا بميزات مثل التشغيل والإيقاف المؤقت والتحكم في مستوى الصوت ودعم قائمة التشغيل.
الرسوم المتحركة SVG : قم بتحريك رسومات SVG باستخدام CSS أو JavaScript لإنشاء تأثيرات مرئية ملفتة للنظر.
إطار عمل CSS مخصص : قم بتطوير إطار عمل CSS مخصص بمكونات وأنماط مصممة مسبقًا للتطوير السريع للواجهة الأمامية.
إطار عمل الرسوم المتحركة على الويب : قم بإنشاء إطار عمل JavaScript للرسوم المتحركة الذي يبسط عملية تحريك العناصر على صفحة الويب.
تطبيق ويب الواقع المعزز : تطوير تطبيق ويب للواقع المعزز (AR) يقوم بتراكب المحتوى الرقمي على عرض المستخدم الواقعي باستخدام WebXR أو تقنية مشابهة.
العنصر النائب للتحميل التدريجي للصور : قم بتطبيق تقنية التحميل التدريجي للصور التي تعرض صورة غير واضحة أو منخفضة الجودة كعنصر نائب أثناء تحميل الصورة عالية الجودة.
اختبار الويب الآلي : اكتب اختبارات آلية لتطبيق ويب باستخدام أطر الاختبار مثل السيلينيوم أو السرو.
مكتبة الويب المتحركة المخصصة : قم بإنشاء مكتبة JavaScript صغيرة لتحريك العناصر على صفحة الويب، بما في ذلك دعم وظائف التخفيف المختلفة.
مكونات واجهة المستخدم المخصصة : قم بإنشاء مكونات واجهة مستخدم مخصصة، مثل مربع حوار مشروط أو منتقي التاريخ أو الإكمال التلقائي، من البداية باستخدام HTML وCSS وJavaScript.
تطوير الهاتف المحمول أولاً : قم بتطوير صفحة ويب تتبع نهج الهاتف المحمول أولاً، مع التأكد من أنها تبدو وتعمل بشكل جيد على الأجهزة المحمولة وتتسع لتشمل الشاشات الأكبر حجمًا.
تكامل واجهة برمجة التطبيقات لجهة خارجية : يمكنك التكامل مع واجهة برمجة تطبيقات تابعة لجهة خارجية (مثل خرائط Google وTwitter وYouTube) وعرض البيانات أو المحتوى من واجهة برمجة التطبيقات تلك على صفحة الويب الخاصة بك.
الدعم دون اتصال : تنفيذ الدعم دون اتصال لتطبيق ويب، مما يسمح للمستخدمين بالوصول إلى المحتوى حتى عندما لا يكون لديهم اتصال بالإنترنت.
واجهة برمجة تطبيقات سجل المتصفح : استخدم واجهة برمجة تطبيقات سجل المتصفح لتنفيذ التوجيه من جانب العميل في تطبيق من صفحة واحدة (SPA).
التمرير اللانهائي مع ترقيم الصفحات : اجمع بين التمرير اللانهائي مع ترقيم الصفحات لتحميل المحتوى وعرضه بكفاءة مع السماح للمستخدمين بالتنقل عبر صفحات البيانات.
مشغل الصوت عبر الويب : أنشئ مشغل صوت على الويب مزودًا بميزات مثل التشغيل والإيقاف المؤقت والتحكم في مستوى الصوت ودعم قائمة التشغيل.
تجربة WebGL : قم بتطوير مشروع WebGL تفاعلي، مثل التصور ثلاثي الأبعاد أو الرسوم المتحركة، وقم بتضمينه في صفحة ويب.
الوحدات المحملة البطيئة : تنفيذ التحميل البطيء للوحدات النمطية في إطار عمل الواجهة الأمامية (على سبيل المثال، React، Angular، Vue.js) لتقليل حجم الحزمة الأولي.
مكتبة أيقونات SVG : قم بإنشاء مكتبة أيقونات SVG قابلة لإعادة الاستخدام مع ميزة البحث والاستخدام لسهولة التكامل في مشاريع الويب.
مشهد WebGL 3D : قم بتطوير مشهد ثلاثي الأبعاد باستخدام WebGL، بما في ذلك النماذج والأنسجة والعناصر التفاعلية ثلاثية الأبعاد.
الصور المحملة البطيئة : قم بتنفيذ الصور المحملة البطيئة التي يتم تحميلها فقط عند وصولها إلى إطار العرض الخاص بالمستخدم، مما يؤدي إلى تحسين أداء تحميل الصفحة.
مراقبة أداء الويب : تنفيذ مراقبة أداء الويب والتحليلات لتتبع أداء موقع الويب وتحليله بمرور الوقت.
تدقيق أمان الويب : إجراء تدقيق أمني على تطبيق ويب وتحديد نقاط الضعف مثل حقن SQL وXSS وCSRF. اقتراح وتنفيذ الإصلاحات.
العرض من جانب الخادم (SSR) مع React : إعداد العرض من جانب الخادم (SSR) لتطبيق React.
تأثيرات تظليل WebGL : إنشاء تأثير تظليل يعتمد على WebGL، مثل تأثير تموج الماء أو نظام الجسيمات الديناميكي.
الصور المحملة البطيئة : قم بتنفيذ الصور المحملة البطيئة التي يتم تحميلها فقط عند وصولها إلى إطار العرض الخاص بالمستخدم، مما يؤدي إلى تحسين أداء تحميل الصفحة.
مراقبة أداء الويب : تنفيذ مراقبة أداء الويب والتحليلات لتتبع أداء موقع الويب وتحليله بمرور الوقت.
تدقيق أمان الويب : إجراء تدقيق أمني على تطبيق ويب وتحديد نقاط الضعف مثل حقن SQL وXSS وCSRF. اقتراح وتنفيذ الإصلاحات.
العرض من جانب الخادم (SSR) : تنفيذ العرض من جانب الخادم لإطار عمل الواجهة الأمامية (على سبيل المثال، React وAngular) لتحسين أداء تحميل الصفحة الأولي.
تأثيرات تظليل WebGL : إنشاء تأثير تظليل يعتمد على WebGL، مثل تأثير تموج الماء أو نظام الجسيمات الديناميكي.
تنفيذ DOM الافتراضي : تنفيذ DOM افتراضي مبسط (مشابه لـ DOM الافتراضي الخاص بـ React) في JavaScript.
التحميل التدريجي للصور : تطوير تقنية تحميل الصور التي تقوم بتحميل الصور تدريجيًا، بدءًا من العناصر النائبة منخفضة الجودة وتحسينها إلى صور عالية الجودة.
أحداث اللمس والإيماءات : تنفيذ أحداث اللمس والإيماءات في تطبيق ويب لتوفير تفاعلات تعتمد على اللمس على الأجهزة المحمولة.
إدارة تخزين المتصفح : إنشاء أداة مساعدة لإدارة تخزين المتصفح (التخزين المحلي، تخزين الجلسة) وتوفير طرق لإعداد البيانات والحصول عليها وإزالتها.
عامل الويب : استخدم عامل الويب لإلغاء تحميل المهام الحسابية المكثفة من الموضوع الرئيسي، مما يؤدي إلى تحسين الأداء.
مكونات واجهة المستخدم المخصصة : قم بإنشاء مكونات واجهة مستخدم مخصصة، مثل مربع حوار مشروط أو منتقي التاريخ أو الإكمال التلقائي، من البداية باستخدام HTML وCSS وJavaScript/jQuery.
تطوير الهاتف المحمول أولاً : قم بتطوير صفحة ويب تتبع نهج الهاتف المحمول أولاً، مع التأكد من أنها تبدو وتعمل بشكل جيد على الأجهزة المحمولة وتتسع لتشمل الشاشات الأكبر حجمًا.
تكامل واجهة برمجة التطبيقات لجهة خارجية : يمكنك التكامل مع واجهة برمجة تطبيقات تابعة لجهة خارجية (مثل خرائط Google وTwitter وYouTube) وعرض البيانات أو المحتوى من واجهة برمجة التطبيقات تلك على صفحة الويب الخاصة بك.
الدعم دون اتصال : تنفيذ الدعم دون اتصال لتطبيق ويب، مما يسمح للمستخدمين بالوصول إلى المحتوى حتى عندما لا يكون لديهم اتصال بالإنترنت.
تشفير تخزين المتصفح : تنفيذ التشفير للبيانات المخزنة في تخزين المتصفح (على سبيل المثال، localStorage) لتعزيز الأمان.
WebGL Particle Animation : قم بإنشاء رسوم متحركة للجسيمات باستخدام WebGL، ومحاكاة التأثيرات مثل النار أو المطر أو الألعاب النارية.
تصور بيانات WebGL : قم بتطوير تصور البيانات باستخدام WebGL لتمثيل مجموعات البيانات المعقدة بتنسيق ثلاثي الأبعاد تفاعلي.
السحب والإفلات المخصص : قم بإنشاء وظيفة السحب والإفلات المخصصة للعناصر الموجودة على صفحة الويب دون الاعتماد على المكتبات الخارجية.
العرض من جانب الخادم (SSR) : تنفيذ العرض من جانب الخادم لإطار عمل الواجهة الأمامية (على سبيل المثال، React وAngular) لتحسين أداء تحميل الصفحة الأولي.
تأثيرات تظليل WebGL : إنشاء تأثير تظليل يعتمد على WebGL، مثل تأثير تموج الماء أو نظام الجسيمات الديناميكي.
تنفيذ DOM الافتراضي : تنفيذ DOM افتراضي مبسط (مشابه لـ DOM الافتراضي الخاص بـ React) في JavaScript.
التحميل التدريجي للصور : تطوير تقنية تحميل الصور التي تقوم بتحميل الصور تدريجيًا، بدءًا من العناصر النائبة منخفضة الجودة وتحسينها إلى صور عالية الجودة.
أحداث اللمس والإيماءات : تنفيذ أحداث اللمس والإيماءات في تطبيق ويب لتوفير تفاعلات قائمة على اللمس على الأجهزة المحمولة.
إدارة تخزين المتصفح : إنشاء أداة مساعدة لإدارة تخزين المتصفح (التخزين المحلي، تخزين الجلسة) وتوفير طرق لإعداد البيانات والحصول عليها وإزالتها.
عامل الويب : استخدم عامل الويب لإلغاء تحميل المهام الحسابية المكثفة من الموضوع الرئيسي، مما يؤدي إلى تحسين الأداء.
تشفير تخزين المتصفح : تنفيذ التشفير للبيانات المخزنة في تخزين المتصفح (على سبيل المثال، localStorage) لتعزيز الأمان.
WebGL Particle Animation : قم بإنشاء رسوم متحركة للجسيمات باستخدام WebGL، ومحاكاة التأثيرات مثل النار أو المطر أو الألعاب النارية.
تصور بيانات WebGL : قم بتطوير تصور البيانات باستخدام WebGL لتمثيل مجموعات البيانات المعقدة بتنسيق ثلاثي الأبعاد تفاعلي.
السحب والإفلات المخصص : قم بإنشاء وظيفة السحب والإفلات المخصصة للعناصر الموجودة على صفحة الويب دون الاعتماد على المكتبات الخارجية.
React Component : قم بإنشاء مكون React بسيط (على سبيل المثال، زر أو بطاقة) واعرضه على صفحة ويب.
إدارة الحالة : قم ببناء مكون React الذي يدير الحالة ويعرضها، مثل العداد الذي يزيد عند النقر فوق الزر.
Props وPropTypes : قم بإنشاء مكون React الذي يقبل الخاصيات ويستخدم PropTypes لتعريف الخاصيات المتوقعة والتحقق من صحتها.
العرض الشرطي : تنفيذ العرض الشرطي في مكون React بناءً على شرط مثل مصادقة المستخدم.
معالجة الأحداث : أضف معالجات الأحداث إلى مكونات React (على سبيل المثال، onClick، onChange) لجعلها تفاعلية.
دورة حياة المكون : استخدم أساليب دورة حياة المكون (على سبيل المثال، ComponentDidMount وcomponentDidUpdate) في مكون React.
النماذج في React : قم بإنشاء نموذج في مكون React وإدارة حالته عندما يقوم المستخدمون بإدخال البيانات.
React Router : قم بإعداد التوجيه في تطبيق React باستخدام React Router، مع مسارات وتنقلات متعددة.
جلب بيانات واجهة برمجة التطبيقات : جلب البيانات من واجهة برمجة التطبيقات في مكون React وعرضها.
واجهة برمجة تطبيقات السياق : استخدم واجهة برمجة تطبيقات سياق React لإدارة ومشاركة الحالة أو البيانات عبر مكونات متعددة.
إعداد Redux : قم بإعداد متجر Redux وإجراءاته ومخفضاته في تطبيق React.
Redux State Management : تنفيذ إدارة الحالة باستخدام Redux، وربط مكونات React بمتجر Redux.
Redux Middleware : استخدم Redux الوسيطة (على سبيل المثال، Thunk) للتعامل مع الإجراءات غير المتزامنة في تطبيق React الذي يعمل بنظام Redux.
تدفق المصادقة : تنفيذ مصادقة المستخدم وتفويضه في تطبيق React، بما في ذلك تسجيل الدخول والمسارات المحمية.
React Hooks : إعادة كتابة مكونات React المستندة إلى الفصل إلى مكونات وظيفية باستخدام خطافات مثل useState وuseEffect.
Redux Saga : دمج Redux Saga للتعامل مع الآثار الجانبية (على سبيل المثال، استدعاءات API) في تطبيق React المستند إلى Redux.
مكونات React ذات الترتيب العالي (HOCs) : قم بإنشاء مكون ذو ترتيب أعلى (HOC) لإضافة وظائف إلى مكونات React الموجودة.
معالجة الأخطاء : تنفيذ معالجة الأخطاء وعرض رسائل الخطأ في تطبيق React.
تحسين الأداء : قم بتحسين أداء تطبيق React عن طريق تقليل العروض غير الضرورية واستخدام الحفظ.
اختبار الوحدة باستخدام مكتبة اختبار React : اكتب اختبارات الوحدة لمكونات React باستخدام مكتبة اختبار React وJest.
العرض من جانب الخادم (SSR) مع React : إعداد العرض من جانب الخادم (SSR) لتطبيق React.
تطبيق الويب التقدمي (PWA) مع React : تحويل تطبيق React إلى تطبيق ويب تقدمي مع دعم دون اتصال بالإنترنت.
التدويل (i18n) : تنفيذ التدويل والتعريب في تطبيق React.
React Animation : أضف رسومًا متحركة وانتقالات إلى مكونات React باستخدام مكتبات مثل React Spring أو Framer Motion.
ترقيم الصفحات للبيانات : تنفيذ ترقيم الصفحات للبيانات في تطبيق React، وجلب البيانات وعرضها في أجزاء.
التحديثات في الوقت الفعلي : تمكين التحديثات في الوقت الفعلي في تطبيق React باستخدام WebSocket أو تقنية مشابهة.
المصادقة باستخدام OAuth : تنفيذ المصادقة المستندة إلى OAuth (على سبيل المثال، OAuth 2.0) في تطبيق React.
اختبار خطافات React : اكتب اختبارات الوحدة لخطافات React المخصصة باستخدام مكتبة اختبار React وJest.
جهاز توجيه React مخصص : قم ببناء جهاز توجيه مخصص باستخدام واجهات برمجة التطبيقات منخفضة المستوى الخاصة بـ React Router للحصول على فهم أعمق للتوجيه.
متجر Redux : قم بإنشاء متجر Redux وحدد الإجراءات والمخفضات لإدارة الحالة.
إجراءات ومخفضات Redux : تنفيذ إجراءات ومخفضات Redux للتعامل مع ميزات أو بيانات محددة في متجر Redux.
Redux Middleware : أضف برمجيات وسيطة مخصصة إلى متجر Redux لاعتراض الإجراءات وتعديلها.
Redux Thunk : استخدم برنامج Redux Thunk الوسيط للتعامل مع الإجراءات غير المتزامنة في متجر Redux.
Redux Saga : قم بإعداد Redux Saga لإدارة التأثيرات الجانبية، مثل مكالمات API، في تطبيق يعمل بنظام Redux.
تطبيع حالة Redux : تطبيع شكل مخزن Redux لإدارة البيانات العلائقية بكفاءة.
وظائف Redux Selector : قم بإنشاء وظائف محدد في تطبيق Redux لاسترداد الحالة المشتقة وحسابها بكفاءة.
Redux Immutable State : تأكد من أن حالة مخزن Redux تظل غير قابلة للتغيير لمنع حدوث طفرات غير مقصودة.
Redux Persistence : تنفيذ ثبات الحالة في تطبيق Redux، مما يسمح بحفظ الحالة واستعادتها عبر الجلسات.
اختبار Redux : اكتب اختبارات الوحدة لإجراءات Redux والمخفضات والمحددات باستخدام مكتبات الاختبار مثل Jest.
اختبار البرامج الوسيطة لـ Redux : اختبر البرامج الوسيطة لـ Redux، مثل Thunk أو Saga، لضمان السلوك الصحيح.
Redux DevTools : دمج واستخدام Redux DevTools لفحص وتصحيح متجر Redux.
تكامل Redux مع React : قم بتوصيل تطبيق React بمتجر Redux، وإرسال الإجراءات، وتعيين الحالة إلى الدعائم.
تكامل Redux مع Angular : تكامل Redux مع تطبيق Angular باستخدام مكتبات مثل NgRx.
تكامل Redux مع Vue.js : دمج Redux مع تطبيق Vue.js باستخدام مكتبات مثل Vuex.
Angular Component : قم بإنشاء مكون Angular بسيط وعرضه في قالب.
بناء جملة القالب الزاوي : استخدم بناء جملة قالب Angular لعرض المحتوى والبيانات الديناميكية.
Angular Two-Way Binding : تنفيذ ربط البيانات ثنائي الاتجاه في Angular لمزامنة البيانات بين المكون والقالب الخاص به.
التوجيهات الزاوية : استخدم التوجيهات المدمجة والمخصصة للتعامل مع DOM والتحكم في العرض.
الخدمات الزاويّة : إنشاء واستخدام الخدمات الزاويّة لمشاركة البيانات والمنطق عبر المكونات.
حقن التبعية الزاوي : قم بتطبيق حقن التبعية في Angular لحقن الخدمات في المكونات.
التوجيه الزاوي : قم بإعداد التوجيه في تطبيق Angular مع طرق عرض وملاحة متعددة.
Angular Forms : قم ببناء النماذج في Angular، بما في ذلك النماذج التفاعلية والقائمة على القوالب.
طلبات HTTP في Angular : قم بإجراء طلبات HTTP لاسترداد البيانات من واجهة برمجة التطبيقات في تطبيق Angular.
Angular Observables : استخدم Observables ومكتبة RxJS للعمل مع البيانات غير المتزامنة في Angular.
Angular Pipes : قم بإنشاء أنابيب مخصصة في Angular لتحويل البيانات وتنسيقها في القوالب.
التوجيهات الزاويّة : قم بتطوير توجيهات Angular مخصصة لإضافة السلوك والتفاعل إلى العناصر.
الوحدات الزاويّة : قم بتنظيم تطبيق Angular في وحدات ميزات لتحسين إمكانية الصيانة.
Angular Animation : تنفيذ الرسوم المتحركة والانتقالات في مكونات Angular باستخدام ميزات الرسوم المتحركة في Angular.
اختبار الوحدة في Angular : اكتب اختبارات الوحدة للمكونات والخدمات والأنابيب Angular باستخدام أطر الاختبار مثل Jasmine وKarma.
الاختبار الشامل في Angular : إجراء اختبار شامل (E2E) لتطبيق Angular باستخدام أدوات مثل Protractor.
Angular Routing Guards : قم بإنشاء حراس توجيه في Angular للتحكم في الوصول إلى المسارات بناءً على شروط مثل المصادقة.
Angular Interceptors : تنفيذ اعتراضات في Angular لإضافة معالجة الأخطاء العامة أو التسجيل أو المصادقة لطلبات HTTP.
العرض من جانب الخادم (SSR) مع Angular : إعداد العرض من جانب الخادم (SSR) لتطبيق Angular.
التدويل الزاوي (i18n) : تنفيذ التدويل والتعريب في تطبيق Angular.
Angular Lazy Loading : قم بتحسين تطبيق Angular من خلال وحدات ميزات التحميل البطيء.
Angular Custom Forms : قم بإنشاء عناصر تحكم نموذجية مخصصة وأدوات التحقق من الصحة في Angular لسيناريوهات النماذج المعقدة.
أفضل ممارسات اختبار Angular : تطبيق أفضل الممارسات لاختبار تطبيقات Angular، بما في ذلك اختبار المكونات والتبعيات الساخرة.
Angular Material : دمج واستخدام مكونات وأنماط المادة Angular في تطبيق Angular.
Angular State Management : تنفيذ إدارة الحالة في تطبيق Angular باستخدام مكتبات مثل NgRx.
مثيل Vue.js : قم بإنشاء مثيل Vue.js وعرض البيانات في قالب.
ربط بيانات Vue.js : تنفيذ ربط البيانات في Vue.js لتحديث واجهة المستخدم بناءً على التغييرات في البيانات.
توجيهات Vue.js : استخدم توجيهات Vue.js لمعالجة DOM وإضافة سلوك إلى القوالب.
مكونات Vue.js : قم بإنشاء مكونات Vue.js وتمرير البيانات بين المكونات الأصلية والفرعية.
معالجة أحداث Vue.js : التعامل مع أحداث المستخدم في مكونات Vue.js وتشغيل الإجراءات.
نماذج Vue.js : قم ببناء النماذج في Vue.js وإدارة بيانات النموذج باستخدام التوجيهات والأساليب.
توجيه Vue.js : قم بإعداد التوجيه في تطبيق Vue.js مع طرق عرض وملاحة متعددة.
إدارة حالة Vue.js : إدارة حالة التطبيق في Vue.js باستخدام Vuex.
طلبات HTTP Vue.js : قم بإجراء طلبات HTTP لجلب البيانات من واجهة برمجة التطبيقات في تطبيق Vue.js.
خطافات دورة حياة Vue.js : استخدم خطافات دورة حياة Vue.js لتنفيذ إجراءات في مراحل مختلفة من دورة حياة المكون.
توجيهات Vue.js المخصصة : قم بإنشاء توجيهات مخصصة في Vue.js لتوسيع الوظائف.
مرشحات Vue.js : تحديد واستخدام عوامل التصفية المخصصة في Vue.js لتنسيق البيانات وتحويلها في القوالب.
انتقالات ورسوم متحركة Vue.js : أضف انتقالات ورسوم متحركة إلى مكونات Vue.js للحصول على تأثيرات سلسة لواجهة المستخدم.
اختبار وحدة Vue.js : اكتب اختبارات الوحدة لمكونات Vue.js باستخدام مكتبات الاختبار مثل Jest.
اختبار Vue.js الشامل : إجراء اختبار شامل (E2E) لتطبيق Vue.js باستخدام أدوات مثل Cypress.
Vue.js Routing Guards : قم بإنشاء حراس التوجيه في Vue.js للتحكم في الوصول إلى المسارات بناءً على شروط مثل المصادقة.
عرض جانب الخادم Vue.js (SSR) : إعداد العرض من جانب الخادم (SSR) لتطبيق Vue.js.
تدويل Vue.js (i18n) : تنفيذ التدويل والتعريب في تطبيق Vue.js.
Vue.js Lazy Loading : قم بتحسين تطبيق Vue.js من خلال المكونات والمسارات ذات التحميل البطيء.
Vue.js Composition API : قم بتطوير المكونات باستخدام Vue.js Composition API للحصول على تعليمات برمجية أكثر مرونة وقابلة لإعادة الاستخدام.
توجيهات Vue.js المخصصة : قم بإنشاء توجيهات مخصصة في Vue.js لتوسيع الوظائف.
مرشحات Vue.js : تحديد واستخدام عوامل التصفية المخصصة في Vue.js لتنسيق البيانات وتحويلها في القوالب.
انتقالات ورسوم متحركة Vue.js : أضف انتقالات ورسوم متحركة إلى مكونات Vue.js للحصول على تأثيرات سلسة لواجهة المستخدم.
اختبار وحدة Vue.js : اكتب اختبارات الوحدة لمكونات Vue.js باستخدام مكتبات الاختبار مثل Jest.
اختبار Vue.js الشامل : إجراء اختبار شامل (E2E) لتطبيق Vue.js باستخدام أدوات مثل Cypress.
Vue.js Routing Guards : قم بإنشاء حراس التوجيه في Vue.js للتحكم في الوصول إلى المسارات بناءً على شروط مثل المصادقة.
عرض جانب الخادم Vue.js (SSR) : إعداد العرض من جانب الخادم (SSR) لتطبيق Vue.js.
تدويل Vue.js (i18n) : تنفيذ التدويل والتعريب في تطبيق Vue.js.
Vue.js Lazy Loading : قم بتحسين تطبيق Vue.js من خلال المكونات والمسارات ذات التحميل البطيء.
Vue.js Composition API : قم بتطوير المكونات باستخدام Vue.js Composition API للحصول على تعليمات برمجية أكثر مرونة وقابلة لإعادة الاستخدام.
