لو انت فرونت إند .. الأسئلة دي لازم تكون عارفها

لو إنت شغال فرونت إند ديفيلوبر وبتعتبر نفسك شاطر، الأسئلة دي هتكون مقياس لمستواك الحقيقي!
لازم تكون عارف الإجابات دي، لأنها الأساس اللي لازم أي ديفيلوبر فرونت إند متمكن يعرفها... جاوب عليها وشوف هتعرفهم كلهم ولا لأ!

1- إزاي بتقلل وقت الـ First Contentful Paint (FCP) في صفحة ويب معقدة؟
2- الفرق بين Context API وطرق تانية زي الـ Render Props أو Higher-Order Components في React؟
3- في Next.js، إيه الفروق الأساسية بين الـ SSR (Server-Side Rendering) وClient-Side Rendering؟
4- إمتى تفضل تستخدم Debouncing بدلاً من Throttling في Event Listeners؟
5- إزاي بتتجنب Race Conditions لما تستخدم Promises في JavaScript؟
6- السيناريوهات اللي بتستفيد فيها أكتر من CSS Variables مقارنة بـ SASS Variables؟
7- إزاي بتدير الذاكرة في تطبيق React مع Large Data Sets وتعمل Pagination أو Infinite Scroll؟
8- إيه ميزة Hydration في Next.js، وإمتى تفضل تستخدمها؟
9- إزاي بتعمل Lazy Loading للـ JavaScript Bundles مش بس للصور؟
10- إزاي بتصلح مشاكل زي Layout Shifts اللي بتأثر على الـ CLS (Cumulative Layout Shift)؟
11- في React، إزاي بتتجنب Memory Leaks لما تستخدم useEffect مع async functions؟
12- إزاي بتكتب Custom Hooks بشكل فعال بدون كسر Hooks Rules؟
13- إزاي بتعمل استايلات مخصصة للـ Web Components باستخدام Shadow DOM بدون كسر العزل؟
14- الفرق بين Reflow و Repaint في المتصفح، وإزاي بتقللهم لتحسين الأداء؟
15- إزاي بتحسن الـ Accessibility باستخدام الـ ARIA attributes بشكل صحيح؟
16- إزاي بتتحكم في الـ Rendering Phases لما تستخدم React Concurrent Mode؟
17- إزاي بتبني Progressive Web Apps (PWA) وتستفيد من الـ Service Workers لتحسين التجربة؟
18- إزاي بتتعامل مع الـ Middleware زي Redux Thunk أو Redux Saga لإدارة الـ Side Effects في Redux؟
19- أفضل استراتيجيات لتحسين الـ Critical Path Rendering في التطبيقات اللي بتستخدم heavy JavaScript frameworks؟
20- إزاي بتتعامل مع مشاكل الـ CORS (Cross-Origin Resource Sharing) في تطبيقات الـ SPA (Single Page Applications)؟

لو عرفت تجاوب على الأسئلة دي يبقى مستواك في الفرونت إند جامد ولو لسه في حاجات مش واضحة ولا يهمك احنا كل يوم بنتعلم حاجة جديدة. (اجابات الاسئله في الكومنتات)

 

إمتى تفضل تستخدم Debouncing بدلاً من Throttling في Event Listeners؟​

Debouncing يستخدم في الحالات اللي تحتاج فيها انتظار حتى يتوقف المستخدم عن القيام بفعل معين، مثل إدخال نص في مربع بحث. Throttling يستخدم عندما ترغب في تقييد عدد المرات التي يتم فيها استدعاء الدالة في فترة زمنية معينة، مثل عند متابعة التمرير.

 

إزاي بتتعامل مع مشاكل الـ CORS (Cross-Origin Resource Sharing) في تطبيقات الـ SPA (Single Page Applications)؟​

باستخدام CORS headers في السيرفر للسماح بالطلبات من مصادر خارجية. يمكن أيضًا استخدام proxy servers أو تهيئة الـ API Gateway للتعامل مع القيود الأمنية المتعلقة بالـ CORS.

 

في React، إزاي بتتجنب Memory Leaks لما تستخدم useEffect مع async functions؟​

من خلال إلغاء العمليات غير المكتملة عند إلغاء التثبيت (unmounting) باستخدام دالة تنظيف cleanup داخل useEffect، أو باستخدام إشارات abortion في الـ fetch requests.

 

إزاي بتدير الذاكرة في تطبيق React مع Large Data Sets وتعمل Pagination أو Infinite Scroll؟​

عن طريق pagination أو infinite scroll لتقليل كمية البيانات المحملة مرة واحدة. يمكن استخدام مكتبات مثل react-window أو react-virtualized لتحميل وعرض البيانات بفاعلية.

 

ازاي بتعمل Lazy Loading للـ JavaScript Bundles مش بس للصور؟​

باستخدام dynamic import() مع React.lazy لتحميل أجزاء من الـ JavaScript عند الحاجة فقط (code-splitting)، وتقليل حجم الـ bundle الرئيسي.

 

إزاي بتتجنب Race Conditions لما تستخدم Promises في JavaScript؟​

باستخدام async/await بشكل صحيح، أو عن طريق Promise.all للتأكد من أن كل الـ Promises قد اكتملت قبل المتابعة. يمكن أيضاً استخدام locks أو flags للتحكم في ترتيب الأحداث.

 

إزاي بتحسن الـ Accessibility باستخدام الـ ARIA attributes بشكل صحيح؟​

استخدام خصائص ARIA مثل aria-label وaria-hidden لتوفير معلومات إضافية لقارئات الشاشة، والتأكد من استخدام الأدوار الصحيحة (roles) لتسهيل التنقل والوصول.

 

إزاي بتكتب Custom Hooks بشكل فعال بدون كسر Hooks Rules؟​

التأكد من أن الـ Hook يبدأ بحرف use، والتأكد من عدم استدعاء الـ Hook داخل دالة شرطية أو تكرارية لضمان الالتزام بقواعد React hooks.

 

إزاي بتصلح مشاكل زي Layout Shifts اللي بتأثر على الـ CLS (Cumulative Layout Shift)؟​

عن طريق تحديد أبعاد العناصر (مثل الصور والفيديوهات) قبل تحميلها، واستخدام font-display: swap لتجنب تغيير الخطوط المفاجئ.

 

أفضل استراتيجيات لتحسين الـ Critical Path Rendering في التطبيقات اللي بتستخدم heavy JavaScript frameworks؟​

تقليل حجم الـ JavaScript واستخدام code-splitting، تحميل الملفات الضرورية فقط في البداية، وتأجيل الملفات الأخرى باستخدام defer أو async، وتحميل الـ CSS المطلوب فقط.

 

إزاي بتتعامل مع الـ Middleware زي Redux Thunk أو Redux Saga لإدارة الـ Side Effects في Redux؟​

Redux Thunk يستخدم لتشغيل الأكشنز بشكل غير متزامن (async). Redux Saga يستخدم في التطبيقات الكبيرة لإدارة العمليات المعقدة باستخدام generator functions، مما يسمح بكتابة أكثر وضوحًا وتعامل أفضل مع الأخطاء.

 

إزاي بتتحكم في الـ Rendering Phases لما تستخدم React Concurrent Mode؟​

باستخدام تقنيات زي Suspense وuseTransition لتأجيل التحديثات غير الضرورية وتقديم تجربة سلسة للمستخدم عن طريق إعطاء الأولوية للتفاعلات السريعة.

 

إيه ميزة Hydration في Next.js، وإمتى تفضل تستخدمها؟​

Hydration هي عملية إعادة ربط التفاعلات بين الـ HTML المتولدة من السيرفر وجافا سكريبت في المتصفح. تستخدم في SSR عندما تحتاج لتحويل صفحة static إلى صفحة تفاعلية بعد تحميلها.

 

إزاي بتقلل وقت الـ First Contentful Paint (FCP) في صفحة ويب معقدة؟​

تقليل حجم الملفات (minification) وضغط الصور والـ CSS، واستخدام تقنيات مثل lazy loading للصور والمحتوى غير الضروري. كما يمكن تحميل الـ CSS الحيوي بشكل غير متزامن وتأجيل تحميل الـ JavaScript غير الأساسي باستخدام async وdefer.

 

الفرق بين Context API وطرق تانية زي Render Props أو Higher-Order Components في React؟​

Context API يوفر طريقة مدمجة لإدارة الحالة على مستوى التطبيق بدون Prop Drilling. Render Props تسمح بمشاركة الكود بين المكونات باستخدام طريقة تمرير دالة كـ prop. Higher-Order Components (HOCs) توفر إعادة استخدام المكونات بلفها داخل مكون آخر. Context API أسهل وأكثر مرونة في التطبيقات الكبيرة.

 

السيناريوهات اللي بتستفيد فيها أكتر من CSS Variables مقارنة بـ SASS Variables؟​

CSS Variables يمكن استخدامها في الـ runtime وتغييرها بناءً على JavaScript أو media queries، بينما SASS Variables ثابتة في وقت الترجمة ولا يمكن تعديلها ديناميكيًا.

 

إزاي بتبني Progressive Web Apps (PWA) وتستفيد من الـ Service Workers لتحسين التجربة؟​

بناء PWA يتطلب إضافة Service Workers لإدارة الكاش والطلبات، مما يتيح تحميل الصفحات بدون اتصال إنترنت (offline) وتحسين سرعة التحميل بشكل كبير.

 

إزاي بتعمل استايلات مخصصة للـ Web Components باستخدام Shadow DOM بدون كسر العزل؟​

باستخدام pa لاستهداف عناصر محددة داخل الـ Shadow DOM، مما يسمح بتطبيق استايلات مخصصة بدون التأثير على المكونات الأخرى.

 

الفرق بين Reflow و Repaint في المتصفح، وإزاي بتقللهم لتحسين الأداء؟​

Reflow هو إعادة حساب الـ layout للشاشة، بينما Repaint هو إعادة رسم الألوان فقط. تقليل Reflow عن طريق تجنب تغيير عناصر الـ DOM بشكل متكرر، واستخدام تقنيات مثل requestAnimationFrame أو CSS Transforms بدلاً من تغيير الـ layout.