Sync External State with React ✅
Integrate external state managers into React the right way using useSyncExternalStore.
❤2
to-learn-in-react.pdf
372 KB
دليل شامل هيساعدك تتعلم React.js وتعرف كل الأدوات والمفاهيم اللي هتفيدك خلال رحلة التعلم 💯
𝐓𝐨 𝐋𝐞𝐚𝐫𝐧 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭: 𝐀 𝐂𝐨𝐦𝐩𝐫𝐞𝐡𝐞𝐧𝐬𝐢𝐯𝐞 𝐆𝐮𝐢𝐝𝐞 ✅
𝐓𝐨 𝐋𝐞𝐚𝐫𝐧 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭: 𝐀 𝐂𝐨𝐦𝐩𝐫𝐞𝐡𝐞𝐧𝐬𝐢𝐯𝐞 𝐆𝐮𝐢𝐝𝐞 ✅
❤3👍2
أداة Chrome DevTools MCP هدفها أنها تساعد الـ AI Agent يختبر الموقع على المتصفح.
It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
———
https://github.com/ChromeDevTools/chrome-devtools-mcp
Chrome DevTools MCP 🚀
chrome-devtools-mcp lets your coding agent (such as Gemini, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
———
https://github.com/ChromeDevTools/chrome-devtools-mcp
❤1🤩1
أدوات_الذكاء_الإصطناعي_مرتبة_حسب_الإستخدام.pdf
9.6 MB
ملف رائع من سدايا .. كل أدوات الذكاء الإصطناعي مرتبة حسب الإستخدام باللغة العربية 💯
❤3👍1
البرمجة الوظيفية (Functional Programming)
.
.
البرمجة الوظيفية (Functional Programming) هي واحدة من الأنماط البرمجية اللي بتختلف عن النمط التقليدي اللي بنسميه الـ Imperative Programming.
الفكرة الأساسية في البرمجة الوظيفية إنها بتركز على استخدام الدوال (functions) كعنصر أساسي في كتابة الكود، وبتعتمد على فكرة إن الكود يكون واضح وسهل التتبع، بدون ما نغير الـ state أو البيانات بشكل مباشر.
———
📌 إيه اللي بيميز البرمجة الوظيفية؟
في البرمجة الوظيفية، بنستخدم حاجة اسمها pure functions، ودي دوال بتستقبل مدخلات (inputs) وتطلع مخرجات (outputs) من غير ما تأثر على أي حاجة خارج الدالة نفسها.
يعني الدالة اللي بتشتغل بالطريقة دي، كل مرة تستخدمها بنفس المدخلات، هتطلع نفس النتيجة. ده بيسهل جدًا اختبار الكود والتأكد إنه شغال صح.
كمان في البرمجة الوظيفية بنبعد تمامًا عن فكرة side effects، اللي هي تغيير في البيانات أو الـ state خارج الدالة. وده بيدي الكود ميزة إنه يبقى قابل للتوقع (predictable) وسهل الصيانة.
———
📌 الـ Higher-Order Functions
البرمجة الوظيفية بتعتمد بشكل كبير على نوع خاص من الدوال اسمه Higher-Order Functions. الدوال دي بتستقبل دوال تانية كمدخلات أو بتطلع دوال كمخرجات.
مثلًا في JavaScript عندنا دوال زي map, filter, reduce، ودي أمثلة ممتازة على الـ Higher-Order Functions.
الدوال دي بتخليك تقدر تعمل عمليات معقدة على البيانات بطريقة مختصرة ومنظمة، وبدون ما تكتب كود كتير. مثلًا لو عاوز تعدل قيم معينة في Array، بدل ما تستخدم for loop، ممكن تستخدم map واللي بتخليك تقدر تعيد بناء الـ Array بطريقة أسرع وأسهل.
———
📌 الـ Immutable Data
واحدة من المفاهيم الأساسية كمان في البرمجة الوظيفية هي immutable data، يعني البيانات مبتتغيرش. بدل ما نعدل على نفس الـ Array أو الـ Object، بنرجع نسخة جديدة من البيانات بعد التعديل.
ده بيدي الكود أمان أكتر، وبيمنع الأخطاء اللي ممكن تحصل لما البيانات تتغير بطريقة غير متوقعة.
البرمجة الوظيفية بتتطبق في لغات زي Haskell وElm بشكل كبير، لكن الأفكار دي كمان ممكن تتطبق في لغات زي JavaScript, Python وحتى Java و#C.
———
📌 ليه تستخدم البرمجة الوظيفية؟
- الكود بيكون واضح جدًا وسهل التتبع.
- التقليل من الأخطاء بفضل استخدام الـ pure functions.
- سهولة اختبار الكود.
- دعم الـ parallelism والـ concurrency بشكل أفضل.
———
وفقكم الله لكل خير ☘️
.
.
البرمجة الوظيفية (Functional Programming) هي واحدة من الأنماط البرمجية اللي بتختلف عن النمط التقليدي اللي بنسميه الـ Imperative Programming.
الفكرة الأساسية في البرمجة الوظيفية إنها بتركز على استخدام الدوال (functions) كعنصر أساسي في كتابة الكود، وبتعتمد على فكرة إن الكود يكون واضح وسهل التتبع، بدون ما نغير الـ state أو البيانات بشكل مباشر.
———
📌 إيه اللي بيميز البرمجة الوظيفية؟
في البرمجة الوظيفية، بنستخدم حاجة اسمها pure functions، ودي دوال بتستقبل مدخلات (inputs) وتطلع مخرجات (outputs) من غير ما تأثر على أي حاجة خارج الدالة نفسها.
يعني الدالة اللي بتشتغل بالطريقة دي، كل مرة تستخدمها بنفس المدخلات، هتطلع نفس النتيجة. ده بيسهل جدًا اختبار الكود والتأكد إنه شغال صح.
كمان في البرمجة الوظيفية بنبعد تمامًا عن فكرة side effects، اللي هي تغيير في البيانات أو الـ state خارج الدالة. وده بيدي الكود ميزة إنه يبقى قابل للتوقع (predictable) وسهل الصيانة.
———
📌 الـ Higher-Order Functions
البرمجة الوظيفية بتعتمد بشكل كبير على نوع خاص من الدوال اسمه Higher-Order Functions. الدوال دي بتستقبل دوال تانية كمدخلات أو بتطلع دوال كمخرجات.
مثلًا في JavaScript عندنا دوال زي map, filter, reduce، ودي أمثلة ممتازة على الـ Higher-Order Functions.
الدوال دي بتخليك تقدر تعمل عمليات معقدة على البيانات بطريقة مختصرة ومنظمة، وبدون ما تكتب كود كتير. مثلًا لو عاوز تعدل قيم معينة في Array، بدل ما تستخدم for loop، ممكن تستخدم map واللي بتخليك تقدر تعيد بناء الـ Array بطريقة أسرع وأسهل.
———
📌 الـ Immutable Data
واحدة من المفاهيم الأساسية كمان في البرمجة الوظيفية هي immutable data، يعني البيانات مبتتغيرش. بدل ما نعدل على نفس الـ Array أو الـ Object، بنرجع نسخة جديدة من البيانات بعد التعديل.
ده بيدي الكود أمان أكتر، وبيمنع الأخطاء اللي ممكن تحصل لما البيانات تتغير بطريقة غير متوقعة.
البرمجة الوظيفية بتتطبق في لغات زي Haskell وElm بشكل كبير، لكن الأفكار دي كمان ممكن تتطبق في لغات زي JavaScript, Python وحتى Java و#C.
———
📌 ليه تستخدم البرمجة الوظيفية؟
- الكود بيكون واضح جدًا وسهل التتبع.
- التقليل من الأخطاء بفضل استخدام الـ pure functions.
- سهولة اختبار الكود.
- دعم الـ parallelism والـ concurrency بشكل أفضل.
———
وفقكم الله لكل خير ☘️
❤10👍1
مفهوم الـ Optimistic UI 💯
.
.
إزاي تخلي المستخدم يشوف التطبيق بتاعك سريع حتى لو هو سلحفاة؟
تخيل معايا السيناريو ده: أنت فاتح تطبيق طلبات الأكل، ضغطت على زرار "تأكيد الطلب" أو "Confirm Order"، وفورًا ظهر لك إن الطلب اتبعت واتسجل، وبعدها بثانية كده جالك إشعار إن المطعم بدأ يحضّر الأكل. إحساسك إيه؟ التطبيق سريع، ومفيش أي تأخير.
بس الحقيقة إن الطلب ممكن يكون لسه بيتبعت للسيرفر، ولسه فيه احتمال إنه يفشل، صح؟
هنا بقى بييجي دور الـ Optimistic UI ... تعال ندردش شوية ونفهم إزاي بيشتغل وأهم الاستخدامات.
———
📌 إزاي الـ Optimistic UI بيشتغل؟
بدل ما تستنى الـ API Response، التطبيق بيعمل تحديث فوري للـ UI بافتراض إن العملية هتنجح، وبعدها بيتأكد من السيرفر. لو الـ API رجعت success، مفيش حاجة تتغير لأن المستخدم أصلًا شاف النتيجة المتوقعة. لكن لو حصل فشل، ساعتها بتعمل Rollback وترجع الـ UI للحالة الأصلية، أو تعرض رسالة خطأ.
———
🎯 مثال عملي بسيط
خلينا نقول عندنا تطبيق To-Do List، لما المستخدم يضيف Task جديدة:
- بدل ما تستنى Response من السيرفر، بتضيف الـ Task مباشرة في الـ UI.
- في الخلفية، التطبيق بيبعت الـ Request للسيرفر لحفظ الـ Task في قواعد البيانات (Database).
- لو كل حاجة مشيت تمام، مفيش حاجة هتتغير.
- لو حصل Error، بتعمل Rollback وتشيل الـ Task من الواجهة، أو تعرض رسالة خطأ.
———
📌 أهم استخدامات الـ Optimistic UI:
- الـ Like و Follow في السوشيال ميديا (أكيد لاحظت في بعض المنشورات على لينكدإن لما بتتفاعل معها وتعمل سكرول شوية تظهر رسالة إنه حدث خطأ في التفاعل مع المنشور).
- إضافة منتجات لعربة التسوق في المتاجر الإلكترونية.
- التعديلات الفورية على البيانات بدون Reload.
———
⚠️ إمتى تستخدم الـ Optimistic UI وإمتى تبعد عنه؟
✅ استخدمه لو العملية بنسبة كبيرة جدًا هتنجح، زي إضافة لايك، حفظ تعليق، أو تعديل بيانات المستخدم.
❌ بلاش تستخدمه لو العملية فيها احتمالية فشل كبيرة أو ممكن تسبب مشاكل لو حصل Rollback، زي عمليات الدفع المالية أو مسح بيانات حساسة.
———
🛠 تطبيق عملي باستخدام React
لو بتستخدم الـ React Query، فالموضوع سهل وبسيط، عندك useMutation بتوفر خاصية onMutate عشان تحدث الـ UI قبل ما العملية تحصل، ولو فشلت، بتستخدم onError تعمل Rollback.
———
خلاصة القول
الـ Optimistic UI بيحسّن تجربة المستخدم بشكل كبير، وبيخلي التطبيقات سريعة من وجهة نظر المستخدم. بس لازم تخلي بالك من كل حالات الفشل.
———
وفقكم الله لكل خير 🌿
.
.
إزاي تخلي المستخدم يشوف التطبيق بتاعك سريع حتى لو هو سلحفاة؟
تخيل معايا السيناريو ده: أنت فاتح تطبيق طلبات الأكل، ضغطت على زرار "تأكيد الطلب" أو "Confirm Order"، وفورًا ظهر لك إن الطلب اتبعت واتسجل، وبعدها بثانية كده جالك إشعار إن المطعم بدأ يحضّر الأكل. إحساسك إيه؟ التطبيق سريع، ومفيش أي تأخير.
بس الحقيقة إن الطلب ممكن يكون لسه بيتبعت للسيرفر، ولسه فيه احتمال إنه يفشل، صح؟
هنا بقى بييجي دور الـ Optimistic UI ... تعال ندردش شوية ونفهم إزاي بيشتغل وأهم الاستخدامات.
———
📌 إزاي الـ Optimistic UI بيشتغل؟
بدل ما تستنى الـ API Response، التطبيق بيعمل تحديث فوري للـ UI بافتراض إن العملية هتنجح، وبعدها بيتأكد من السيرفر. لو الـ API رجعت success، مفيش حاجة تتغير لأن المستخدم أصلًا شاف النتيجة المتوقعة. لكن لو حصل فشل، ساعتها بتعمل Rollback وترجع الـ UI للحالة الأصلية، أو تعرض رسالة خطأ.
———
🎯 مثال عملي بسيط
خلينا نقول عندنا تطبيق To-Do List، لما المستخدم يضيف Task جديدة:
- بدل ما تستنى Response من السيرفر، بتضيف الـ Task مباشرة في الـ UI.
- في الخلفية، التطبيق بيبعت الـ Request للسيرفر لحفظ الـ Task في قواعد البيانات (Database).
- لو كل حاجة مشيت تمام، مفيش حاجة هتتغير.
- لو حصل Error، بتعمل Rollback وتشيل الـ Task من الواجهة، أو تعرض رسالة خطأ.
———
📌 أهم استخدامات الـ Optimistic UI:
- الـ Like و Follow في السوشيال ميديا (أكيد لاحظت في بعض المنشورات على لينكدإن لما بتتفاعل معها وتعمل سكرول شوية تظهر رسالة إنه حدث خطأ في التفاعل مع المنشور).
- إضافة منتجات لعربة التسوق في المتاجر الإلكترونية.
- التعديلات الفورية على البيانات بدون Reload.
———
⚠️ إمتى تستخدم الـ Optimistic UI وإمتى تبعد عنه؟
✅ استخدمه لو العملية بنسبة كبيرة جدًا هتنجح، زي إضافة لايك، حفظ تعليق، أو تعديل بيانات المستخدم.
❌ بلاش تستخدمه لو العملية فيها احتمالية فشل كبيرة أو ممكن تسبب مشاكل لو حصل Rollback، زي عمليات الدفع المالية أو مسح بيانات حساسة.
———
🛠 تطبيق عملي باستخدام React
لو بتستخدم الـ React Query، فالموضوع سهل وبسيط، عندك useMutation بتوفر خاصية onMutate عشان تحدث الـ UI قبل ما العملية تحصل، ولو فشلت، بتستخدم onError تعمل Rollback.
———
خلاصة القول
الـ Optimistic UI بيحسّن تجربة المستخدم بشكل كبير، وبيخلي التطبيقات سريعة من وجهة نظر المستخدم. بس لازم تخلي بالك من كل حالات الفشل.
———
وفقكم الله لكل خير 🌿
❤12
الموقع ده هيساعدك تقوي مهاراتك في عالم الـ System Design 💯
.
.
Practice High-Level Design (HLD) with our interactive whiteboard and get AI-powered feedback.
———
https://www.scalemock.com/hld
.
.
System Design Problems 💯
Practice High-Level Design (HLD) with our interactive whiteboard and get AI-powered feedback.
———
https://www.scalemock.com/hld
❤3
الفرق بين gRPC و REST – أيهما أقوى وليه ممكن تحتاج الـ gRPC؟ 🤔
.
.
لفترة طويلة، الـ REST كان كفاية جدًا علشان الـ APIs تتعامل مع بعضها. بس مع الوقت، ظهرت تحديات جديدة، وبدأنا نحتاج حلول أسرع، أخف، وأكتر كفاءة.
هنا ظهر الـ gRPC، بس هل ده معناه إن REST انتهى؟ لا طبعًا، كل واحد له مكانه واستخدامه. تعال نشوف الفرق بينهم وإمتى تستخدم كل واحد منهم...
———
1. طريقة الاتصال
- الـ REST: بيعتمد على HTTP 1.1، وكل Request بيبقى مستقل تمامًا عن اللي قبله. يعني كل مرة بتطلب حاجة، السيرفر بيحتاج يفتح Connection جديد ويرد عليك، وبعدها الـ Connection بيتقفل – لكن لو السيرفر بيدعم Keep-Alive (وهي ميزة في HTTP 1.1)، الـ Connection ممكن يفضل مفتوح لفترة، وده بيقلل المشكلة شوية. بس برضو، HTTP 1.1 مش بيدعم Multiplexing.
- الـ gRPC: بيستخدم HTTP/2، وده بيسمح بأنه يعمل Multiplexing، يعني يقدر يبعت أكتر من طلب في نفس الـ Connection بدون ما يستنى كل طلب يخلص الأول. النتيجة؟ أداء أسرع واستهلاك أقل للـ Resources
———
2. نقل البيانات
- الـ REST: بيعتمد على JSON في أغلب الحالات، وده فورمات سهل القراءة بس مش الأمثل من حيث السرعة أو حجم البيانات. لكن REST مش مقتصر على JSON؛ ممكن تستخدم XML أو حتى Plain Text لو عايز، بس JSON هو الأكثر شيوعًا.
- الـ gRPC: بيعتمد على Protocol Buffers (Protobuf)، وهو Binary Format مضغوط جدًا، وأسرع بكتير في الـ Serialization/Deserialization من JSON
———
3. الأداء
- الـ REST: بيستهلك Bandwidth أعلى بسبب الـ JSON (أو أي Text Format) والـ Headers الكبيرة اللي في كل Request.
- الـ gRPC: أخف وأسرع لأنه بيستخدم Binary Encoding وبيحافظ على Connection مفتوح طول الجلسة.
———
4. الـ Code Generation
- الـ REST: لو عايز تكتب Client، لازم تبنيه يدويًا وتتعامل مع الـ HTTP Requests بنفسك.
- الـ gRPC: بيديك Code Generation جاهز بلغات كتير (JavaScript, Python, Go, etc.)، يعني تقدر تكتب الـ API مرة واحدة بس والـ Clients في لغات مختلفة تستهلكها بسهولة.
———
5. دعم الـ Streaming
- الـ REST: مش بيدعم الـ Streaming بشكل Native، ولو عايز تعمل حاجة شبه كده هتحتاج حلول زي WebSockets. لكن لو بتستخدم HTTP/2 مع REST، ممكن تستفيد من Server-Sent Events كحل جزئي، بس ده مش شائع.
- الـ gRPC: بيدعم Bi-directional Streaming، يعني الكلاينت والسيرفر يقدروا يبعتوا بيانات لبعض بشكل متزامن من غير ما يستنوا بعض.
———
6. التوافقية مع الـ Browsers
- الـ REST: بيشتغل في أي مكان، أي متصفح، وأي بيئة بدون مشاكل.
- الـ gRPC: ما بيشتغل مباشرة في المتصفح لأنه بيعتمد على HTTP/2 و Protobuf، لكن ممكن تدمجه مع gRPC-Web علشان تتعامل مع المتصفحات.
———
📌 إمتى تستخدم REST؟
✅ لو الـ API بتاعك هيشتغل مع المتصفحات مباشرة.
✅ لو عايز حل سهل، موثق كويس، ومعروف عند أغلب المطورين.
✅ لو بتتعامل مع سيرفرات مش بتدعم gRPC أو مش عايز تبني حاجة معقدة.
———
📌 إمتى تستخدم gRPC؟
🚀 لو عندك Microservices Architecture وعايز أداء سريع واستهلاك قليل.
🚀 لو بتتعامل مع Mobile Apps أو IoT Devices وعايز تقلل الـ Bandwidth.
🚀 لو عايز تعمل Real-time Communication بين الـ Services.
———
الـ REST مش رايح في أي حتة، ولسه مناسب لمعظم الاستخدامات. لكن لو بتبني سيستم معقد، وعايز كفاءة أعلى، وخصوصًا لو عندك Microservices أو High-performance Systems، الـ gRPC ممكن يكون الحل الأمثل لك.
.
.
لفترة طويلة، الـ REST كان كفاية جدًا علشان الـ APIs تتعامل مع بعضها. بس مع الوقت، ظهرت تحديات جديدة، وبدأنا نحتاج حلول أسرع، أخف، وأكتر كفاءة.
هنا ظهر الـ gRPC، بس هل ده معناه إن REST انتهى؟ لا طبعًا، كل واحد له مكانه واستخدامه. تعال نشوف الفرق بينهم وإمتى تستخدم كل واحد منهم...
———
1. طريقة الاتصال
- الـ REST: بيعتمد على HTTP 1.1، وكل Request بيبقى مستقل تمامًا عن اللي قبله. يعني كل مرة بتطلب حاجة، السيرفر بيحتاج يفتح Connection جديد ويرد عليك، وبعدها الـ Connection بيتقفل – لكن لو السيرفر بيدعم Keep-Alive (وهي ميزة في HTTP 1.1)، الـ Connection ممكن يفضل مفتوح لفترة، وده بيقلل المشكلة شوية. بس برضو، HTTP 1.1 مش بيدعم Multiplexing.
- الـ gRPC: بيستخدم HTTP/2، وده بيسمح بأنه يعمل Multiplexing، يعني يقدر يبعت أكتر من طلب في نفس الـ Connection بدون ما يستنى كل طلب يخلص الأول. النتيجة؟ أداء أسرع واستهلاك أقل للـ Resources
———
2. نقل البيانات
- الـ REST: بيعتمد على JSON في أغلب الحالات، وده فورمات سهل القراءة بس مش الأمثل من حيث السرعة أو حجم البيانات. لكن REST مش مقتصر على JSON؛ ممكن تستخدم XML أو حتى Plain Text لو عايز، بس JSON هو الأكثر شيوعًا.
- الـ gRPC: بيعتمد على Protocol Buffers (Protobuf)، وهو Binary Format مضغوط جدًا، وأسرع بكتير في الـ Serialization/Deserialization من JSON
———
3. الأداء
- الـ REST: بيستهلك Bandwidth أعلى بسبب الـ JSON (أو أي Text Format) والـ Headers الكبيرة اللي في كل Request.
- الـ gRPC: أخف وأسرع لأنه بيستخدم Binary Encoding وبيحافظ على Connection مفتوح طول الجلسة.
———
4. الـ Code Generation
- الـ REST: لو عايز تكتب Client، لازم تبنيه يدويًا وتتعامل مع الـ HTTP Requests بنفسك.
- الـ gRPC: بيديك Code Generation جاهز بلغات كتير (JavaScript, Python, Go, etc.)، يعني تقدر تكتب الـ API مرة واحدة بس والـ Clients في لغات مختلفة تستهلكها بسهولة.
———
5. دعم الـ Streaming
- الـ REST: مش بيدعم الـ Streaming بشكل Native، ولو عايز تعمل حاجة شبه كده هتحتاج حلول زي WebSockets. لكن لو بتستخدم HTTP/2 مع REST، ممكن تستفيد من Server-Sent Events كحل جزئي، بس ده مش شائع.
- الـ gRPC: بيدعم Bi-directional Streaming، يعني الكلاينت والسيرفر يقدروا يبعتوا بيانات لبعض بشكل متزامن من غير ما يستنوا بعض.
———
6. التوافقية مع الـ Browsers
- الـ REST: بيشتغل في أي مكان، أي متصفح، وأي بيئة بدون مشاكل.
- الـ gRPC: ما بيشتغل مباشرة في المتصفح لأنه بيعتمد على HTTP/2 و Protobuf، لكن ممكن تدمجه مع gRPC-Web علشان تتعامل مع المتصفحات.
———
📌 إمتى تستخدم REST؟
✅ لو الـ API بتاعك هيشتغل مع المتصفحات مباشرة.
✅ لو عايز حل سهل، موثق كويس، ومعروف عند أغلب المطورين.
✅ لو بتتعامل مع سيرفرات مش بتدعم gRPC أو مش عايز تبني حاجة معقدة.
———
📌 إمتى تستخدم gRPC؟
🚀 لو عندك Microservices Architecture وعايز أداء سريع واستهلاك قليل.
🚀 لو بتتعامل مع Mobile Apps أو IoT Devices وعايز تقلل الـ Bandwidth.
🚀 لو عايز تعمل Real-time Communication بين الـ Services.
———
الـ REST مش رايح في أي حتة، ولسه مناسب لمعظم الاستخدامات. لكن لو بتبني سيستم معقد، وعايز كفاءة أعلى، وخصوصًا لو عندك Microservices أو High-performance Systems، الـ gRPC ممكن يكون الحل الأمثل لك.
❤9