DevGuide

مقال سهل وبسيط عن الـ 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

مفهوم الـ 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 من إنه يتسرق. ——— وفقكم الله لكل خير 🌿

افتتاح التسجيل في برنامج “كالقابض على الجمر” — الدفعة الثالثة تم فتح باب التسجيل للالتحاق بالدفعة الثالثة من برنامج “كالقابض على الجمر”. تنبيه مهم: قبل التسجيل، تأكد جيداً أن البرنامج مناسب لك من حيث الشروط والمحتوى. أجب على الأسئلة بدقة وتركيز، لأنك قد تأخذ مكان شخص آخر هو أحق منك بالفرصة. مدة التسجيل: سيتاح التسجيل لمدة يوم أو يومين فقط. رابط التسجيل: https://forms.gle/81nvcRrmGGVRf1XdA

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

CSS Practices to avoid as Developer 💡

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

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

Code Review Etiquette – Hard-earned Lessons 💯

As a Reviewer

✅ Do’s: - Review the code within 24 hours – blocking teammates kills productivity. - Start with “What problem is this code solving?” - Look for security vulnerabilities first, then architecture, then style. - Ask questions instead of making accusations (“What’s the reason for...?” vs “This is wrong”). - Suggest alternatives with code examples when possible. - Acknowledge good patterns and clever solutions. ❌ Don’ts: - Don’t nitpick about style if there’s an automated linter. - Don’t rewrite the code in your preferred style. - Never make it personal – critique the code, not the coder. - Don’t approve without actually reviewing. - Don’t block PRs for minor issues. ———

As a Code Author

✅ Do’s: - Keep PRs small (under 400 lines when possible). - Add context in PR description (screenshots for UI changes). - Self-review before requesting others (Tools like CodeRabbit help here). - Respond to comments within one business day. - Add tests for new code. - Document non-obvious decisions. ❌ Don’ts: - Don’t take feedback personally. - Don’t push back without explanation. - Don’t mark conversations resolved without addressing them. - Don’t submit PRs without testing locally. - Don’t expect instant reviews for massive changes.

Reach Thousands of Devs with DevGuide! 🚀 Are you looking to promote your tech-related products, services, or job openings? 📢 Now you can advertise directly on DevGuide and reach a highly engaged community of developers through Telega.io! 🎯 Why advertise with us? ✅ Targeted audience of developers and tech enthusiasts ✅ High engagement and interaction rates ✅ Affordable and flexible advertising options Start your campaign today and boost your visibility! 📈 🔗 Book your Ad NOW

TanStack Router: Type-Safe Routing for Modern Apps 🚀

إزاي أداء الموقع بيأثر على الـ SEO؟ 🤔 . . تخيل إنك دخلت على موقع علشان تدور على معلومة أو تشتري منتج أو تشوف شغل حد… ولقيت الموقع بيحمل ببطء… ثانية ورا التانية ولسه الصفحة مظهرتش! إيه أول حاجة هتعملها؟ هتقفل الموقع وتدور على موقع تاني أسرع. صح؟ بالضبط كده، ودي نفس الطريقة اللي جوجل بتفكر بها، لكن بمقاييس أخرى. ———

📍 LinkedIn

https://www.linkedin.com/posts/dev-alisamir_webperformance-webdevelopment-seo-activity-7324743503513579529-SCFP

📍 Qabilah:

https://qabilah.com/posts/obgo7UnCKfY

Building AI Browser Agents 🚀

What you'll learn: - Learn the fundamentals of autonomous web agents, what they are, how they work, their limitations, and the decision-making strategies taken to optimize their performance. - Build autonomous web agents that can perform tasks such as finding, scraping, and summarizing a webpage, filling out forms, and signing up for newsletters. - Explore the AgentQ framework, which uses a combination of Monte Carlo Tree Search (MCTS), self-critique mechanism, and Direct Preference Optimization (DPO) to teach agents to self-correct. ——— https://www.deeplearning.ai/short-courses/building-ai-browser-agents

أفضل (4) ساعات نُشرت حديثًا لتعلم بناء وبيع وكلاء الذكاء الإصطناعي للمبتدئين 🚀 يتناول الفيديو الركائز الأساسية لبناء وكيل ذكي قادر على التفاعل والتعلّم: ✴️ النماذج اللغوية الكبيرة LLMs (العقل المحرك وراء كل وكيل ذكي.) ✴️ التوجيهات الذكية Prompts (صياغة الأوامر لبناء سلوكيات تفاعلية.) ✴️ الذاكرة (تمكين الوكلاء من تذكّر التفاعلات السابقة وتحسين الأداء.) ✴️ المعرفة الخارجية (دمج مصادر معلومات خارجية عبر الإنترنت لتوسيع الفهم.) ✴️ الأدوات والتكاملات APIs (ربط الوكلاء بخدمات وأدوات خارجية لتحسين قدراتهم.) كما يستعرض الفيديو مجموعة من المنصات الـ (No-Code) التي تساعدك على بناء وكيلك وبيعه بسهولة: ✴️ Relevance AI ✴️ N8N ✴️ Voiceflow ——— 📌 رابط الفيديو https://youtu.be/w0H1-b044KY

مليون خبير لأوامر الذكاء الاصطناعي كن أحد الخبراء في هندسة الأوامر https://dub.ai/en/omp

🔰 HTML File Paths Explanation

Understanding Observer Pattern in React: A Complete Guide 💯

If you've been building React applications for a while, you've likely encountered moments where components need to stay in sync — like when a sidebar needs to update when a user changes a setting in the main content area. This is where the Observer Pattern can shine. In this guide, we'll break down what the Observer Pattern is, how it works, and how to implement it in React with TypeScript. ——— https://dev.to/alisamir/understanding-observer-pattern-in-react-a-complete-guide-omf

الـ HTTPS Certificate 💯 . . قبل ما ندخل في التفاصيل، تعال نعرف يعني إيه HTTPS؟ الـ HTTPS دي اختصار لـ HyperText Transfer Protocol Secure، وده البروتوكول اللي بيخلي التصفح بينك وبين الموقع "مُشَفَّر" وآمن 🔐. ——— في الطبيعي، لما بتدخل على موقع، بتبعت وتستقبل بيانات بين جهازك وبين السيرفر بتاع الموقع ده. لو الموقع شغّال بـ HTTP العادي، أي حد قاعد في النص – زي Wi-Fi غير آمن أو هاكر – ممكن يتجسس على البيانات اللي رايحة جاية، زي كلمات المرور، الإيميلات، أو حتى رقم الكريدت كارد بتاعك. لكن لما الموقع يبقى شغّال بـ HTTPS، البيانات اللي رايحة جاية بتكون مشفرة، ومفيش حد يقدر يفهمها حتى لو قدر يشوفها. ———

📌 إزاي ده بيحصل؟

هنا بقى بييجي دور HTTPS Certificate، أو زي ما بنسميه SSL Certificate (مع إن الاسم الأدق دلوقتي TLS Certificate بس مش مشكلة). الـ Certificate ده عبارة عن ملف إلكتروني بيكون متسجل فيه شوية معلومات عن الموقع: - اسم الموقع (الدومين) - الشركة أو الجهة اللي عندها الموقع - توقيع من جهة اسمها Certificate Authority (CA)، ودي جهة موثوقة بتقولك "إن الموقع ده حقيقي وموثوق". يعني تقدر تعتبر الـ HTTPS Certificate هي بطاقة التعريف والضمان للموقع. ——— لما تدخل على موقع بيستخدم HTTPS، المتصفح بيروح يسأل: "هل أنت معاك شهادة موثوقة تثبت إنك الموقع الصح؟" لو الإجابة نعم، المتصفح بيكمّل الاتصال ويبدأ التشفير. ولو الموقع مفيهوش شهادة أو الشهادة منتهية؟ المتصفح هيطلع لك رسالة تحذير تقولك: "الموقع ده مش آمن، أنت متأكد إنك عاوز تكمل؟" ——— الـ HTTPS Certificate هي اللي بتأمن الاتصال بينك وبين أي موقع، بتحمي بياناتك من السرقة، وبتطمن المتصفح إن الموقع موثوق. #دقيقة_برمجة

الـ HTTPS Certificate 💯 . . قبل ما ندخل في التفاصيل، تعال نعرف يعني إيه HTTPS؟ الـ HTTPS دي اختصار لـ HyperText Transfer Protocol Secure، وده البروتوكول اللي بيخلي التصفح بينك وبين الموقع "مُشَفَّر" وآمن 🔐. ——— في الطبيعي، لما بتدخل على موقع، بتبعت وتستقبل بيانات بين جهازك وبين السيرفر بتاع الموقع ده. لو الموقع شغّال بـ HTTP العادي، أي حد قاعد في النص – زي Wi-Fi غير آمن أو هاكر – ممكن يتجسس على البيانات اللي رايحة جاية، زي كلمات المرور، الإيميلات، أو حتى رقم الكريدت كارد بتاعك. لكن لما الموقع يبقى شغّال بـ HTTPS، البيانات اللي رايحة جاية بتكون مشفرة، ومفيش حد يقدر يفهمها حتى لو قدر يشوفها. ———

📌 إزاي ده بيحصل؟

هنا بقى بييجي دور HTTPS Certificate، أو زي ما بنسميه SSL Certificate (مع إن الاسم الأدق دلوقتي TLS Certificate بس مش مشكلة). الـ Certificate ده عبارة عن ملف إلكتروني بيكون متسجل فيه شوية معلومات عن الموقع: - اسم الموقع (الدومين) - الشركة أو الجهة اللي عندها الموقع - توقيع من جهة اسمها Certificate Authority (CA)، ودي جهة موثوقة بتقولك "إن الموقع ده حقيقي وموثوق". يعني تقدر تعتبر الـ HTTPS Certificate هي بطاقة التعريف والضمان للموقع. ——— لما تدخل على موقع بيستخدم HTTPS، المتصفح بيروح يسأل: "هل أنت معاك شهادة موثوقة تثبت إنك الموقع الصح؟" لو الإجابة نعم، المتصفح بيكمّل الاتصال ويبدأ التشفير. ولو الموقع مفيهوش شهادة أو الشهادة منتهية؟ المتصفح هيطلع لك رسالة تحذير تقولك: "الموقع ده مش آمن، أنت متأكد إنك عاوز تكمل؟" ——— الـ HTTPS Certificate هي اللي بتأمن الاتصال بينك وبين أي موقع، بتحمي بياناتك من السرقة، وبتطمن المتصفح إن الموقع موثوق. #دقيقة_برمجة