DevGuide

Optimizing Streams in JavaScript 💯

Streams improve performance for large data processing, but require careful optimization.

الفرق بين الـ Monorepo والـ Multirepo 🔻 . . تخيل أنك شغال على مشروع ضخم، عندك أكتر من فريق، وكل فريق بيشتغل على جزء مختلف. فجأة، تبدأ المشاكل تظهر: كود مكرر، صعوبة في التعديلات، تعارض بين الفرق، وأوقات ضايعة على الـ builds والـ pipelines. المشكلة هنا ممكن تكون في الطريقة اللي بتنظم بها الكود بتاعك. 💡 هنا تبدأ تسأل نفسك: تختار Monorepo ولا Multirepo؟ تعال نوضح الفرق بينهم وإمتى تختار الطريقة المناسبة... ——— 📌 أولًا: يعني إيه Monorepo؟ الـ Monorepo ببساطة هي إنك تحط كل الكود الخاص بالمشروع بتاعك، بكل الـ components أو الـ modules اللي فيه، داخل Repository واحد. يعني حتى لو عندك أكتر من خدمة (microservices) أو أكتر من مكتبة أو أكتر من تطبيق مرتبطين ببعض، كله بيكون في مكان واحد. ——— 📍 مميزات الـ Monorepo: - سهولة إدارة الكود: كل حاجة في مكان واحد، فلو عايز تعمل تغييرات على أكتر من جزء، هتبقى شايف الصورة الكبيرة بسهولة. - إعادة استخدام الكود (Code Reusability): لو فيه مكتبة أو جزء معين من الكود محتاج تستخدمه في أكتر من module، تقدر تعمله بسهولة من غير duplication. - تنسيق أفضل بين الفرق: كل فريق شايف الكود بتاع باقي الفرق، فده بيسهل التعاون بينهم وبيقلل تعارض التعديلات (conflicts). - تكامل أفضل بين الأدوات: زي الـ CI/CD (Continuous Integration/Continuous Deployment) اللي بيشتغل بسهولة على مشروع واحد بدل ما يتقسم على أكتر من repository. ——— 📍 عيوب الـ Monorepo: - الحجم الكبير للـ repo: مع مرور الوقت وعدد المساهمين الكبير، حجم الـ repo بيكبر وده ممكن يبطّأ العمليات زي cloning أو حتى الـ builds. - التعقيد في إدارة الصلاحيات: صعب تقول إن فلان يقدر يشتغل على جزء معين بس من غير ما يشوف الباقي. - مشاكل مع الـ Tools: لو مش عندك أدوات قوية لإدارة الـ monorepo، ممكن تواجه مشاكل في التنظيم وعملية الـ build. ——— 📌 ثانيًا: يعني إيه Multirepo؟ على العكس تمامًا، الـ Multirepo معناها إن كل جزء أو module من المشروع يكون في Repository خاص به. يعني كل module بيبقى مستقل بذاته وكأنه مشروع لوحده. ——— 📍 مميزات الـ Multirepo: - كل module له حياته الخاصة، وده بيخلي إدارة كل جزء مستقلة وأسهل لبعض الفرق. - تقدر تحدد مين يشتغل على إيه بناءً على الـ repo اللي عندهم أكسس عليه. - لو فيه module أو خدمة مش مرتبط بشكل مباشر، مش محتاج تبني كل المشروع، بس تبني الجزء اللي محتاجه. - كل جزء بيكون صغير ومستقل، فده بيخلي العمليات زي cloning أسرع وأسهل. ——— 📍 عيوب الـ Multirepo: - تكرار الكود: لو فيه أكتر من module بيحتاج نفس الكود، ممكن تضطر تكرره أو تحط مكتبة منفصلة ليه. - تعقيد في التنسيق بين الفرق: التعاون بين الفرق بيبقى أصعب، وخصوصًا لما يكون فيه dependencies كتير بين الـ modules - تكامل معقد للـ CI/CD: عشان كل جزء في Repository مختلف، هتحتاج إعدادات أكتر للـ pipelines عشان كل حاجة تشتغل مع بعض. - لو عندك تغيير ضخم بيأثر على أكتر من module، هتحتاج تدخل على كذا repo وتعدل في كل واحد لوحده.

Stop React apps from crashing with Error Boundaries. 💯 Catch errors like a pro and show friendly fallbacks instead of broken screens.

Linux File Permissions Overview 💯

دردشة سريعة عن مفهوم الـ ACID في الـ Database ⚡️ . . تخيل إنك شغال على system ضخم زي تطبيق بنكي أو موقع بيع أونلاين… في اللحظة اللي المستخدم بيحوّل فيها فلوس أو بيأكد عملية شراء، لازم تكون متأكد إن البيانات دي محفوظة صح، ومفيش أي احتمال يحصل فيها خلل أو تضارب، حتى لو السيرفر وقع أو الكهرباء قطعت. ⚠️ وهنا ييجي دور الـ ACID وهو ده العمود الفقري اللي بيخلي الـ Database تكون ثابتة، موثوقة، ومتوقعة السلوك في كل الحالات، سواء كان عندك عملية واحدة بسيطة أو آلاف الـ transactions في نفس الثانية. الـ ACID بيحط أربع قواعد أساسية بتخلي أي Database system يعرف يتصرف وقت المشاكل ويحافظ على البيانات من غير ما يحصل chaos أو data corruption. ———

📌 أولًا: Atomicity

يعني لو عندك transaction بتنقل فلوس من حساب لحساب: - تسحب 1000 جنيه من حساب A - وتضيف 1000 لحساب B لو أول خطوة نجحت والتانية فشلت لأي سبب (مثلًا السيرفر وقع)، المفروض الـ Database ترجع كل حاجة زي الأول، كأن العملية محصلتش. ———

📌 ثانيًا: Consistency

الـ Consistency معناها إن الـ Database تفضل دايمًا في state صحيحة ومظبوطة. يعني كل القواعد (constraints, rules, triggers) اللي أنت محددها لازم تفضل متطبقة بعد أي عملية. مثلًا: لو عندك rule بيقول إن الرصيد مينفعش يكون بالسالب، فـ بعد أي transaction لازم الـ DB تفضل محافظة على القاعدة دي. لو حصل violation للقواعد دي، العملية كلها تتلغي. ———

ثالثًا: Isolation

تخيل معايا كذا transaction شغالين في نفس الوقت... واحد بيضيف بيانات، والتاني بيعدّل، والتالت بيقرأ. لو مفيش Isolation، الدنيا هتبقى فوضى، وكل transaction هيشوف الـ data وهي لسه بتتغير! لكن مع وجود الـ Isolation، كل transaction بتتعامل كأنها العملية الوحيدة اللي بتتنفذ. يعني حتى لو كذا transaction شغالين في نفس اللحظة، النتائج اللي بيشوفوها مضمونة ومفيهاش تداخل أو corruption. وطبعًا فيه مستويات مختلفة للـ Isolation (زي Read Uncommitted, Read Committed, Repeatable Read, Serializable)، وكل واحدة لها trade-offs بين الأداء والدقة. ———

رابعًا: Durability

الـ Durability معناها إن بمجرد ما الـ Database تقولك "تمت العملية بنجاح"، يبقى خلاص الـ data دي محفوظة ومش هتضيع حتى لو السيرفر وقع أو الكهرباء قطعت. إزاي؟ لأن الـ DB بتكتب التغييرات على الـ disk (أو الـ log files) قبل ما تقولك العملية نجحت، علشان تقدر تسترجعها لو حصل أي failure. ——— وفقكم الله لكل خير 🌿

Optimizing Streams in JavaScript 🚀

دردشة سريعة عن الـ API Gateway ⚡️ . . لو بتشتغل على مشروع كبير أو على بيئة Microservices معقدة، أكيد هتحتاج تتعامل مع الـ API Gateway، لأنه ببساطة بيعمل كـ "بوابة" أو وسيط بين المستخدمين (أو الـ Clients) وبين مجموعة الخدمات اللي بيقدمها التطبيق. ——— 📌 يعني إيه API Gateway؟ خلينا نقول إنك بتشتغل على مشروع كبير زي موقع بيع منتجات، وفيه خدمات كتير مستقلة، زي خدمة للمشتريات، خدمة للدفع، خدمة للمخزون، وخدمة للملف الشخصي. الـ API Gateway هو الجزء اللي بيستلم الطلبات من الـ Clients (زي تطبيق الموبايل أو الويب) ويوجهها للـ Microservice الصحيحة. يعني بدل ما التطبيق يبعت طلب مباشر لكل خدمة ويضيع وقت في فهم مسارات كتير، الـ API Gateway بيستقبل الطلب وينفذه ويبعت البيانات للي عاوزها. ——— 📌 وظائف الـ API Gateway؟ ✅ توجيه الطلبات: لما ييجي طلب من العميل، الـ API Gateway بيختار الخدمة المناسبة اللي هتقدر تستجيب للطلب ده ويبعته لها. ✅ توحيد البيانات: لو عندك خدمات مختلفة والعميل محتاج بيانات من أكتر من خدمة، الـ API Gateway بيجمع البيانات دي كلها ويرجعها للعميل في رد واحد. ✅ التحكم في الأمان: بيسمح لك تعمل قواعد الأمان زي التحقق من الهويات (Authentication) والترخيص (Authorization)، عشان تضمن إن الطلبات اللي جايه كلها من مصادر موثوق فيها. ✅ التحكم في المعدل (Rate Limiting): تقدر من خلاله تحدد عدد الطلبات اللي ممكن يجريها العميل في وقت معين، بحيث تحمي خدماتك من أي ضغط غير طبيعي أو هجمات زي DDoS. ✅ التوجيه الديناميكي (Dynamic Routing): لو عندك إصدارات مختلفة من نفس الخدمة، تقدر تحدد أي إصدار يستخدمه الـ Client أو تغير التوجيه حسب الوقت أو حسب الـ Load. ✅ التحسين والأداء (Caching): ممكن كمان يقوم بعمل Cache للطلبات اللي بيتكرر استخدامها، وده بيساعد في تخفيف الحمل على الخدمات. ——— 📌 ليه مهم نستخدم الـ API Gateway؟ لما بيكون عندك تطبيق بيدير أكتر من خدمة، التعامل المباشر بين العميل وكل خدمة على حدة ممكن يبقى معقد ويتطلب وقت طويل، وده بيأثر على أداء التطبيق. هنا بقى بييجي دور الـ API Gateway اللي بيسهل التعامل ويوفر طريقة منظمة وبسيطة للتفاعل مع الخدمات. كمان، لو محتاج تطبق سياسات الأمان بشكل موحد، أو محتاج تعمل Analytics للطلبات اللي بتيجي، يبقى الـ API Gateway هو المكان الصح اللي تعمل فيه كل ده، لأنه نقطة التحكم الرئيسية اللي بتشوف وتتحكم في كل الطلبات اللي جاية ورايحة بين العميل والخدمات. ——— فيه أدوات كتير تقدر تستخدمها كـ API Gateway، زي: ⚙️ Kong ⚙️ NGINX ⚙️ AWS API Gateway ⚙️ Zuul كل أداة من دول بتقدم مزايا مختلفة حسب احتياجات المشروع، وعادةً بنختار حسب حجم المشروع، الأمان المطلوب، وسرعة الاستجابة اللي محتاجينها. ——— وفقكم الله لكل خير 🌿

Your Journey to DevOps Mastery 💯

Follow this comprehensive roadmap to become a skilled DevOps engineer. Each stage includes interactive skills with curated resources and hands-on learning paths. https://devops-daily.com/roadmap

🔰 JavaScript Decorators & Annotations

Decorators enable metaprogramming by extending classes/methods at design time.

أفـكـار مشـاريـع 🔻 . . لو بتدور على أفكار مشاريع جديدة تطور بها مستواك في البرمجة، سواء كنت مبتدئ أو قطعت شوط كويس في المجال، المقال ده فيه 200 فكرة مشروع مختلفة تقدر تطبق المشاريع المناسبة لمستواك وتضيفهم في الـ CV والـ Portfolio... ——— معظم المشاريع لو بحثت عنها على يوتيوب أو GitHub هتلاقي الـكود تبعها، لكن بلاش تعمل كده وابدأ في المشروع بنفسك وحدد المميزات والتكنولوجي اللي هتشتغل بها وابدأ خبط يمين وشمال وشوف قدراتك هتوصلك لحد فين في المشروع... علشان كده لازم تختار المشروع المناسب لمستواك...الرحلة هتكون ممتعة وهتتعلم شوية حاجات حلوة لو اعتمدت على نفسك وعلى عملية البحث وهتعرف إيه المهارات الناقصة عندك أو المهارات الضعيفة اللي محتاج تقويها... ——— 200 Project Ideas from Beginner to Advanced with Open Source Contributions 🚀 https://dev.to/kishansheth/200-project-ideas-from-beginner-to-advanced-with-open-source-contributions-3g6a ——— وفقكم الله لكل خير 🌿

إيه اللي بيخلي بعض تطبيقات React أسرع من غيرها؟ 🤔 . . في الغالب جزء كبير من مشاكل تطبيقات React بتكون بسبب الأداء، خصوصًا مع المشاريع اللي بتكبر تدريجيًا. المقال ده يعتبر دليل عملي بيشرح أهم طرق Profiling وOptimization في React، باستخدام React Profiler و Chrome DevTools خطوة بخطوة، عشان تكتشف نقاط الخلل وتحسن الأداء بسهولة. ———

A Practical Guide to Profiling & Optimizing React Applications for Peak Performance 🚀

——— Read Full Article 👇🏻 📌 Medium: https://medium.com/gitconnected/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-20f05f2ccd58 📌 DEV Community: https://dev.to/alisamir/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-273i ——— لو حابب تتعمق في الموضوع، أرشحلك كتاب Web Performance Fundamentals، الكتاب ممتاز جدًا عن تجربة... https://www.getwebperf.com ——— وفقكم الله لكل خير 🌿

يعني إيه Micro Frontends؟ . . تعال ندردش شوية عن Micro Frontends ونعرف قصته وإزاي بيشتغل بشكل مبسط... ——— ممكن تكون سمعت عن مصطلح الـ Microservices اللي موجود في الباك إند... الفكرة هي نفسها بس للفرونت إند. يعني بدل ما تبني تطبيق كبير كتلة واحدة (Monolithic)، بتقسم التطبيق لقطع أصغر، كل قطعة منهم بتتعامل كأنها تطبيق مستقل بذاته بس في نفس الوقت بيتكاملوا مع بعض عشان يشتغلوا كجزء واحد. لو شغال في مشروع ضخم، أكيد هتلاقي نفسك بتواجه مشاكل في التنظيم، وصعوبة في التوسع، وتداخل بين الفرق  (Teams) اللي بتشتغل على التطبيق. هنا بقى بييجي دور الـ Micro Frontends. ——— 📍 إزاي الـ Micro Frontends بتشتغل؟ الفكرة إنك بتقسم واجهة التطبيق لقطع مستقلة أو وحدات، وكل وحدة منهم ممكن تبقى شغالة بالتقنية الخاصة بها. مثلًا: - الفريق الأول شغال على جزء التسجيل والدخول باستخدام React. - الفريق التاني شغال على جزء الداشبورد بتقنية Angular. - الفريق التالت شغال على قسم المنتجات بـ Vue.js. كل جزء بيتم تطويره وصيانته بمعزل عن الأجزاء التانية، وكل فريق عنده حرية اختيار التقنيات والأدوات اللي تناسبه، وده بيخلي عملية التطوير أسرع وأسهل. ——— 📍 إيه فائدة الـ Micro Frontends؟ ✅ لما التطبيق يكون مقسم لوحدات صغيرة، بيبقى أسهل توسع في كل وحدة بدون ما تأثر على بقية التطبيق. ✅ كل فريق ممكن يشتغل بمفرده، يختار التقنية المناسبة له، ويحسن الجزء بتاعه بدون ما ينتظر الفرق التانية. ✅ لو فيه مشكلة في جزء معين من التطبيق، تقدر تصلحها بسرعة من غير ما تتعب في البحث في الكود الكبير كله. ✅ تحسين تجربة المستخدم وده لأنك ممكن تعمل تحسينات تدريجية على أجزاء معينة من التطبيق، وبالتالي المستخدم مش هيحس بأي مشاكل. ——— ⚠ لكن خد بالك… رغم كل المزايا دي، لكن فيه تحديات في تطبيق Micro Frontends: ⚡️ لازم يكون فيه تواصل وتنظيم كويس بين الفرق اللي شغاله على المشروع عشان مفيش جزء يتضارب مع جزء تاني. ⚡️ الفكرة لو مش محسوبة صح، ممكن تلاقي نفسك بتواجه مشاكل في سرعة تحميل التطبيق، خصوصًا لو كل وحدة محتاجة تحميل المكتبات بتاعتها. ⚡️ لازم تضمن إن واجهة المستخدم تكون متناسقة، حتى لو الوحدات مبنية بتقنيات مختلفة. ——— 📍 إمتى تستخدم الـ Micro Frontends؟ - لما يكون عندك تطبيق ضخم وعايز توسع فيه بسرعة. - لو فرق التطوير بتاعتك كبيرة وبتشتغل على مشاريع متفرقة. - لو بتحتاج تدعم تقنيات متعددة في نفس المشروع. ——— الـ Micro Frontends حل عبقري عشان تتجنب مشاكل التطبيقات الكبيرة، بس محتاج تكون جاهز بتخطيط كويس وتتأكد إنك بتطبقها صح. ——— وفقكم الله لكل خير 🌿

Popular Backend Tech Stack. 💯

دردشة سريعة عن الـ End-to-End Encryption ——— 1️⃣ البداية لما تبعت رسالة لأي حد، سواء نص أو صورة أو فيديو، الرسالة دي مش بتروح للطرف التاني على طول. بالعكس، الأول بتسافر في رحلة طويلة عبر شبكة الإنترنت، وتمر على سيرفرات كتير قبل ما توصل. هنا يبدأ دور التشفير. التشفير بيعمل شفرة سرية للرسالة، بحيث لو أي حد حاول يتجسس أو يشوف الرسالة (زي الهاكرز، أو حتى الشركة نفسها)، ميعرفش يفهمها. ——— 2️⃣ إيه اللي بيميز الـ End-to-End Encryption؟ في أنظمة التشفير العادية، السيرفرات اللي بتعدي عليها الرسالة ممكن تفك الشفرة وتعرف المحتوى. 🛑 لكن في End-to-End Encryption الموضوع بيكون مختلف تمامًا: - الرسالة بتتشفّر على جهازك باستخدام مفتاح تشفير. - المفتاح ده موجود بس عندك أنت وعند الشخص اللي بتكلمه. - حتى الشركة اللي بتقدّم الخدمة (زي واتساب) ما عندها المفتاح ده، وده معناه إنهم ما يعرفوا يفكّوا الشفرة. يعني الرسالة بتفضل مشفرة طول رحلتها من جهازك لحد ما توصل للطرف التاني. ——— 3️⃣ ليه الـ End-to-End Encryption مهم؟ الخصوصية حق مش رفاهية، والـ End-to-End Encryption بيوفرلك ده: 🕵️‍♂️ محدش هيعرف يقرأ رسالتك غيرك أنت والطرف التاني. 🔒 بيحميك من التتبع والتجسس. لو حد حاول يعترض الرسالة وهي ماشية، هيلاقيها مشفرة تمامًا. ✅ ثقة أكبر في التطبيقات. لما تطبيق يوفّر النوع ده من التشفير، ده معناه إنه بيحترم خصوصيتك فعلًا. ——— 4️⃣ أمثلة على التطبيقات اللي بتستخدم الـ End-to-End Encryption: 📍 واتساب: كل الرسائل والمكالمات مشفرة. 📍 سيجنال: بيعتبر من أكتر التطبيقات أمانًا لأنه مبني بالكامل حول الـ End-to-End Encryption. 📍 تليجرام: بس لازم تفعّل الـ Secret Chats، لأنها مش شغالة تلقائيًا في الشات العادي. ——— 5️⃣ هل ده معناه إن كل حاجة آمنة 100%؟ للأسف، لا... الـ End-to-End Encryption بيحمي الرسائل أثناء نقلها، بس لو جهازك نفسه أو جهاز الطرف التاني فيه برامج تجسس أو فيه حد حصل على الرسائل بعد فك التشفير (زي لما تبعت لقطة شاشة)، يبقى كده مفيش فايدة. ——— 💯 خلاصة القول: الـ End-to-End Encryption زي خزنة سرية للرسائل بتاعتك، محدش يقدر يفتحها غيرك أنت والطرف التاني. خلي بالك إن الأمان مش بس في التشفير، حافظ على جهازك وكلمات السر بتاعتك لأنها ثغرات محترمة ممكن أي حد يستغلها ضدك. ——— وفقكم الله لكل خير 🌿

Microservices Best Practices 💯

JavaScript Shorthands 💯

إصدار PHP 8.5 هينزل يوم 20 نوفمبر 2025 وجايب معاه شوية تحديثات رايقة 💯 ——— 📌 LinkedIn: https://www.linkedin.com/posts/mentoor-io_php-backend-backenddevelopment-activity-7396215941098962944-xUd8 📌 Facebook: https://www.facebook.com/share/p/1AsjVju9F1

Custom Scrollbar in CSS 💫