What Is the Virtual DOM, and Why Does It Make React So Fast? 🚀

If you’re diving into React or curious why it’s known for its speed, you’ve probably heard the term “Virtual DOM” thrown around. But what exactly is it, and why does it matter?

Let’s examine it and see why the Virtual DOM is one of the secret ingredients that make React so powerful.

https://medium.com/p/420fdc24a13b

Node.js 24 is here and it's looking good 😎🚀

Featuring updates to V8 v13.6, npm v11, improved Permission Model and more new features in the blog.

Check it out: https://hubs.ly/Q03lfLDC0

محرر CLion من Jerbrains أصبح مجاني للاستخدام غير التجاري لكل المستخدمين.

المحرر بيئة كاملة للتطوير والبرمجة باستخدام لغتي C و ++C.

مفهوم الـ OAuth 2.0 💡
.
.
تخيل إنك داخل تسجّل في تطبيق جديد علشان تتابع كورسات، ولما جيت تسجّل، التطبيق قالك:
"تقدر تسجّل بحساب Google أو GitHub بدل ما تعمل أكونت جديد"

ضغطت على زرار "Continue with Google"، وGoogle طلبت منك تختار الإيميل وتوافق على شوية صلاحيات.
بعدها التطبيق فتح واشتغل وكأنك عملت sign up فعلًا...

إيه اللي حصل هنا؟ 🤔
اللي حصل بالضبط هو إن Google استخدمت حاجة اسمها OAuth 2.0.

———

📌 يعني إيه OAuth 2.0؟

ببساطة، الـ OAuth 2.0 هو بروتوكول authorization (مش authentication)، بيخلّي التطبيقات تقدر تاخد إذن من المستخدم عشان تدخل على جزء من معلوماته في service تانية (زي Google, Facebook, GitHub) من غير ما يعرفوا الباسورد بتاعتك.

يعني التطبيق اللي بتستخدمه مش بيشوف الباسورد بتاعتك، بس بياخد توكن مؤقت يقدر يستخدمه يدخل على الـ APIs اللي أنت وافقت عليها.

وده بيخلي العملية آمنة، وبيحافظ على الخصوصية بتاعتك.

———

📌 إزاي الـ OAuth 2.0 بيشتغل؟

تعال نمشي خطوة بخطوة في الـ flow المشهور بتاع Authorization Code Grant Flow، واللي بيستخدم في web apps

1- الـ User Requests Login
التطبيق (Client) يقولك: "سجّل بحساب Google مثلًا"، والمستخدم يضغط على الزرار، ويتم توجيهه على authorization server (زي Google).


2- الـ User Grants Permission
جوجل يطلب منك تسجّل دخول وتوافق على الـ permissions اللي التطبيق طالبها (زي الإيميل، الاسم، إلخ).


3- الـ Authorization Code
لو وافقت، Google هيبعت authorization code للتطبيق (أو تحديدًا للـ redirect URL اللي التطبيق حدده قبل كده).


4- الـ Token Exchange
التطبيق ياخد الـ authorization code ده ويبعت request لـ token endpoint علشان يبدله بـ access token (وساعات كمان refresh token).


5- الـ Access Protected APIs
بمجرد ما التطبيق ياخد الـ access token، يقدر يستخدمه يطلب بيانات من Google APIs، بس في حدود الـ scope اللي وافقت عليه.

———

إزاي بيأمن الـ APIs؟ 🔐

لو عندك API وعايز تأمنها، ممكن تستخدم OAuth 2.0 بحيث:

- أي Client مش هيقدر يوصل لـ API غير لما يقدّم Access Token صالح.
- الـ Backend بتاعك يقدر يتحقّق من التوكن (مثلًا JWT أو عن طريق introspection endpoint).
- تقدر تتحكّم في الصلاحيات عن طريق الـ scope (يعني مثلًا توكن معين يقدر يقرأ بس، وتوكن تاني يقدر يكتب ويعدّل).
- تقدر تسحب صلاحيات التوكن في أي وقت (Revoke).


بالتالي، OAuth 2.0 بيأمّن الـ APIs عن طريق إنه:

✅ بيقلل الاعتماد على كلمات المرور
✅ بيسمح بالـ delegation (تطبيق ياخد إذن من مستخدم يوصل لحاجة مش بتاعته)
✅ بيخلي الـ tokens مؤقتة، وممكن تتحكم في صلاحياتها ومدّتها

———

📌 أنواع الـGrant Types المشهورة:

- الـ Authorization Code (with PKCE): للموبايل والويب.
- الـ Client Credentials: للـ machine-to-machine apps.
- الـ Password (deprecated): كان بيستخدم لما المستخدم يكتب الـ username والباسورد في نفس التطبيق (غير آمن).
- الـ Implicit (deprecated): زمان كان بيتستخدم للـ SPA apps لكنه غير موصى به.

———

لو كنت بتستخدم OAuth 2.0 في موبايل أو SPA app، لازم تستخدم حاجة اسمها PKCE (Proof Key for Code Exchange) علشان تمنع الـ authorization code من إنه يتسرق.

———

وفقكم الله لكل خير 🌿

مقال سهل وبسيط عن الـ SOLID Principles 💡

Understanding SOLID Principles (Without Falling Asleep) 💯

Ever read about SOLID and felt your eyelids droop halfway through the “S”? Let’s fix that.

Whether you're debugging spaghetti code at 2 AM or trying to prevent future you from rage-quitting, SOLID principles are here to help. But let's be honest—they’re often taught in the driest way possible.

In this article, I’ll walk you through the SOLID principles using TypeScript, real-world analogies, and some much-needed humor. No jargon. No hand-waving. Just clean, readable code examples you’ll understand and remember.

———

📍 DEV:
https://dev.to/alisamir/understanding-solid-principles-without-falling-asleep-17ai

📍 Medium:
https://medium.com/@dev.alisamir/understanding-solid-principles-without-falling-asleep-2375d4471944

إزاي Node.js بتستخدم الـ Event Loop؟ 💡
.
.
تخيل معايا إن عندك كافيه، وفيه جرسون واحد بس بيخدم كل الزباين. الجرسون ده بيعرف يخلص طلبات كتير جدًا في نفس الوقت، من غير ما أي زبون يحس إنه مستني كتير.

وده بالضبط اللي بيحصل داخل الـ Node.js. والسر في حاجة اسمها Event Loop...

خلال رحلتك في عالم الـ Node.js، أكيد سمعت عن الـ Event Loop… وسمعت الجملة الشهيرة زي:

"Node.js single-threaded but non-blocking and asynchronous"

———

📍 LinkedIn:

https://www.linkedin.com/posts/mentoor-io_nodejs-nodejsdeveloper-javascript-activity-7327286056658059265-2Ovz

📍 Facebook:

https://www.facebook.com/share/p/18UMkAYLpY

ليه React بتستخدم Keys في الـ Lists؟ 🤔
.
.
عمرك سألت نفسك ليه React دايمًا بتطلب منك تضيف Key لكل عنصر في List؟
وليه لازم نهتم به وإيه اللي ممكن يحصل لو ما ضفنا الـ key؟

السؤال ده منتشر بشكل كبير في أي مقابلة عمل تخص ريأكت، والسؤال بسيط لكن هو في الحقيقة موضوع مهم جدًا وبيفرق في الأداء بشكل كبير...

———

📍 LinkedIn:
https://www.linkedin.com/posts/dev-alisamir_react-reactdeveloper-reactjs-activity-7327749421134200834-XYVc

📍 Qabilah:
https://qabilah.com/posts/XW04VJqYFz4