DevGuide

مفهوم الـ Performance Test ⚡️ . . تخيل معايا إنك عملت Website أو Mobile App شكله تحفة، الـ UI مفيش بعد كده، والـ Features اللي فيه طلعت عينك وأنت بتعملها علشان تبقى حاجة محترمة. كل حاجة تمام لحد هنا... لكن فجأة، بعد ما تعمل Release، أول ما يجيلك 1000 مستخدم في نفس الوقت… الـ App يبدأ يهنج، الـ API ترد متأخر جدًا، والـ Pages تاخد وقت طويل عشان تفتح. وقتها مهما كان التصميم أو الـ Features قوية مش هيفرقوا مع المستخدم... وهنا ييجي دور الـ Performance Test... ——— ⚡️ يعني إيه Performance Test؟ ببساطة هو نوع من أنواع الـ Testing اللي بيركز على إنك تقيس أداء السيستم بتاعك تحت ظروف مختلفة. يعني بدل ما تشوف بس هل السيستم بيشتغل ولا لا (اللي هو Functional Testing)، هنا إحنا بنشوف: - السيستم هيقدر يتعامل مع عدد كبير من الـ Users في نفس الوقت ولا لا. - سرعة استجابة الـ API أو الـ Backend قد إيه. - الـ Database بتتعامل مع الـ Queries بشكل سلس ولا بيحصل Bottlenecks. - هل الموارد (CPU – Memory – Network) بيتم استهلاكها صح ولا لا. ——— 🚀 أنواع الـ Performance Testing: 1- الـ Load Testing بنقيس ازاي السيستم بيتصرف لما يكون عليه عدد Users كبير، مثلًا 10K User شغالين في نفس الوقت. الهدف إننا نشوف أقصى عدد Users يقدر السيستم يستحمله من غير ما يقع. 2- الـ Stress Testing بنزود الضغط لحد ما السيستم ينهار فعلًا. الهدف هنا نعرف الـ Breaking Point فين. 3- الـ Spike Testing بنختبر إيه اللي هيحصل لو فجأة حصل Increase ضخم في عدد الـ Users في وقت قصير جدًا، زي مثلاً Black Friday أو إعلان Viral. 4- الـ Endurance (Soak) Testing بنخلي السيستم شغال بضغط متوسط أو عالي لفترة طويلة (ساعات أو أيام) ونشوف هل هيبقى ثابت ولا هيبدأ يبطأ مع الوقت بسبب Memory Leaks أو مشاكل تانية. 5- الـ Scalability Testing بنقيس هل السيستم يقدر يتوسع (Scale Up أو Scale Out) عشان يتعامل مع الـ Growth ولا لا. ——— 🔍 أدوات بتستخدم في الـ Performance Testing: - الـ JMeter: من أشهر وأقوى الأدوات للـ Load Testing. - الـ Locust: أداة قوية مكتوبة بـ Python وبتديك Flexibility. - الـ k6: أداة كويسة وسهلة وسريعة جدًا وبتكتب الـ Scripts فيها بـ JavaScript. - الـ Gatling: بتستخدم Scala ومفيدة في الـ Continuous Testing. ——— وفقكم الله لكل خير 🌿

💯

إزاي الـ Code Splitting ممكن ينقذ مشروعك؟ 🤔 . . تخيل لو بتدخل على موقع ويب، وتلاقيه بياخد وقت طويل جدًا علشان يفتح، وكل اللي كنت محتاجه صفحة واحدة! الموقف ده بيخلّي المستخدمين يقفلوا الموقع من قبل ما يشوفوه. وهنا بييجي دور Code Splitting... ——— 📍 LinkedIn https://www.linkedin.com/posts/dev-alisamir_softwaredevelopment-softwaredeveloper-performance-activity-7286297075607113729-5Ioy 📍 Qabilah https://qabilah.com/posts/IFUQPPSlhag ——— وفقكم الله لكل خير ☘️

11 GitHub Repositories to learn Node.js 🚀 - Node.js Best Practices https://github.com/goldbergyoni/nodebestpractices - Learn Node.js by Building 10 Projects https://github.com/MAshrafM/NodeJS_Projects - Node.js Design Patterns https://github.com/PacktPublishing/Node.js-Design-Patterns-Third-Edition - The Node.js Master Class https://github.com/pirple/The-Nodejs-Master-Class - TypeScript Node Starter https://github.com/microsoft/TypeScript-Node-Starter - Express.js Boilerplate https://github.com/hagopj13/node-express-boilerplate - Node.js API Starter Kit https://github.com/kriasoft/graphql-starter-kit - Learn You The Node.js for Much Win https://github.com/workshopper/learnyounode - Real World Example App (Node.js + Express) https://github.com/gothinkster/node-express-realworld-example-app - Node.js Starter Kit https://github.com/verekia/js-stack-from-scratch - Node.js Sample Application https://github.com/heroku/node-js-sample

دليل بسيط وسهل لفهم الـ Sitemaps 🔻 يعني إيه Sitemap؟ وليه وجودها مهم لموقعك؟ وإزاي تعملها بالطريقة الصح؟ ———

Understanding Sitemaps: The Simple Guide 💯

📍 Dev Community: https://dev.to/alisamir/understanding-sitemaps-the-simple-guide-4gmo 📍 Medium: https://medium.com/@dev.alisamir/understanding-sitemaps-the-simple-guide-143457c8decb

مفهوم الـ Edge Computing 🔻 . . لو سألتك: كل مرة بتفتح فيها أي تطبيق أو تعمل سيرش على جوجل، إيه اللي بيحصل عشان يوصلك النتيجة بسرعة؟ الإجابة ببساطة: البيانات بتتنقل من سيرفرات بعيدة (Cloud) لجهازك، وده بياخد وقت وممكن يحصل فيه مشاكل لو الشبكة ضعيفة. هنا بقى بييجي دور الـ Edge Computing 🔄 ——— 🧠 يعني إيه Edge Computing؟ ببساطة هو معالجة البيانات قرب مكان استخدامها بدل ما تتنقل لسيرفرات بعيدة. بمعنى تاني: بدل ما البيانات تروح لمركز بيانات (Data Center) في أمريكا مثلًا، تتم المعالجة على جهاز أو سيرفر قريب منك (زي الراوتر أو موبايلك نفسه). ——— 💡 طب ليه نستخدم الـ Edge Computing؟ 1- سرعة أعلى (Latency أقل): تخيل إنك بتلعب لعبة أونلاين والقرار بيستنى يوصل لسيرفر في بلد تانية وبعدين يرجع لجهازك. الـ Edge Computing بيقلل الزمن ده عشان كل العمليات بتحصل قريب منك. 2- توفير الـ Bandwidth: بدل ما تستهلك إنترنت في نقل بيانات كتير للسيرفرات، البيانات بتتعامل محليًا (Locally). 3- أمان أكتر: لأن البيانات مش بتخرج من حدود المكان اللي أنت فيه، ففرصة اختراقها بتقل. 4- حل لمشاكل الشبكات الضعيفة: في الأماكن اللي الشبكة فيها ضعيفة أو مش مستقرة، الـ Edge Computing بيكون حل مثالي عشان يقلل الاعتماد على الإنترنت السريع. ——— 🔍 أمثلة واقعية: - سيارات تسلا: العربية الذكية بتحتاج تتصرف في أقل من ثانية لو فيه أي خطر في الطريق، فمش هتعتمد على Cloud، كل الحسابات بتحصل على جهاز داخل العربية نفسها. - المستشفيات الذكية: أجهزة متابعة المرضى بتحتاج تعمل تحليل سريع لأي تغيرات، فبدل ما تبعت البيانات لسيرفر بعيد، بتتعامل على طول. - الكاميرات الذكية: زي كاميرات المراقبة اللي بتتعرف على الوجوه أو الحركات الغريبة مباشرة. ——— 🌐 إيه الفرق بين Edge Computing والـ Cloud؟ - الـ Cloud: بيعمل معالجة البيانات على سيرفرات بعيدة ومناسبة لتخزين كميات ضخمة من البيانات. - الـ Edge: بيعتمد على المعالجة السريعة والمباشرة جنب الأجهزة، مش مناسب لكل التطبيقات لكن ضروري للحاجات اللي بتحتاج رد فعل فوري. ——— وفقكم الله لكل خير 🌿

برنامج ممتاز بستخدمه بشكل يومي 💯

لو بتواجه مشكلة في الأداء بسبب الرامات المخزنة مؤقتًا "Cached" على جهازك، فيه حل عبقري من Microsoft. البرنامج اسمه RAMMap وبيساعدك في حذف الرامات المؤقتة بكل سهولة. تقدر تحمّل البرنامج من هنا 🔻 https://learn.microsoft.com/en-us/sysinternals/downloads/rammap طريقة الاستخدام بسيطة جدًا: 1- افتح البرنامج واضغط على زر Empty. 2- هتظهر لك قائمة، اختار منها Empty Standby List. ——— وفقكم الله لكل خير 🌿

بعض المواقع اللي هتساعدك في رحلة الـ Problem Solving 💯 → leetcode.com → codewars.com → topcoder.com → codingame.com → hackerrank.com → projecteuler.net → coderbyte.com → codechef.com → exercism.io → spoj.com → atcoder.jp → hackerearth.com → interviewbit.com → codesignal.com

The Modern Software Stack 💯

قنوات يوتيوب هتفيدك جدًا كـ مهندس برمجيات 🔻 لا تنسوا أهلنا المستضعفين من الدعاء. 🤍 15 YouTube Channels You Must Subscribe to as a Software Engineer: 0. Tech With Tim ↳ Strong focus on JavaScript and Python and top-notch web dev tutorials ↳ youtube.com/@TechWithTim 1. Code Emporium ↳ AI educational content to turn enthusiasts into professionals ↳ youtube.com/@CodeEmporium 2. AI Explained ↳ Covering in depth the latest AI content/news ↳ youtube.com/@aiexplained-official 3. Fireship ↳ High-intensity code tutorials and tech news to help you ship your app faster ↳ youtube.com/@Fireship 4. Be a Better Dev ↳ Learn about AWS, cloud computing, and system design concepts ↳ youtube.com/@BeABetterDev 5. 3 Blue 1 Brown ↳ The best animations out there to understand math and physics ↳ youtube.com/@3blue1brown 6. AWS Events ↳ The official YouTube channel for AWS Events and Webinars ↳ youtube.com/@AWSEventsChannel 7. Arjan Codes ↳ Programming and software design with practical Python examples ↳ youtube.com/@ArjanCodes 8. Low Level Learning ↳ Low-level stories and learnings on computer software and engineering ↳ youtube.com/@LowLevelLearning 9. Stanford Online ↳ Official courses and conferences from Stanford online ↳ youtube.com/@stanfordonline 10. freeCodeCamp ↳ Super high density and variety of code tutorials! ↳ youtube.com/@freecodecamp 11. Two Minute Papers ↳ The latest papers explained with visuals ↳ youtube.com/@TwoMinutePapers 12. Code Aesthetic ↳ High quality code concepts taught with visuals ↳ youtube.com/@CodeAesthetic 13. The Roadmap ↳ Making you better through interactive roadmaps and concepts in system design, CS fundamentals, and web dev! ↳ youtube.com/@roadmapsh 14. ByteByteGo ↳ The best channel to learn system design with visuals ↳ youtube.com/@ByteByteGo

Event Bubbling in JavaScript 💯

🔰 Awesome Free APIs for Developers that you should know about

🔰 All CSS Functions

The Hidden Cost of Over-Engineering in Software Development 🤔

Over-engineering in software and systems development occurs when a solution is made more complex than necessary to meet its current requirements. ——— 🔗 Full Article: https://dev.to/alisamir/the-hidden-cost-of-over-engineering-in-software-development-4dnk

ليه الأول بـ true والثاني بـ false؟ 🤔 لو فاهم لغة JavaScript كويس هتجاوب صح 💯

إزاي الموقع بيشتغل من غير انترنت؟ 🌐 . . عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت فصل؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers. الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت. تعال نفهم الموضوع ببساطة... ——— 📌 يعني إيه Service Worker؟ ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية بين المتصفح والسيرفر. ومش زي الكود العادي بتاع الصفحة، ده بيشتغل في الخلفية وبيدي الموقع مميزات كبيرة زي: - الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف. - العمل أوفلاين: الموقع يشتغل حتى لو الإنترنت قاطع. - الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة. ——— 📌 إزاي الـ Service Workers بتشتغل؟ 1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة. 2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها. 3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر. ——— ✅ مميزات الـ Service Workers: - أداء أفضل: لأنه بيقلل الضغط على السيرفر. - تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت. - الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم. ——— 📌 ملحوظات مهمة 📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم. 📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك. ——— إزاي ممكن تضيف الـ Service Workers في مشروعك؟ 🤔 الكود الأساسي بسيط جدًا:

// Register Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js")
    .then(() => {
      console.log("Service Worker Registered!");
    });
}

——— أما في ملف sw.js:

self.addEventListener("install", (event) => {
  console.log("Service Worker Installed");
});

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

——— لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇 Service Worker API https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API Service workers https://web.dev/learn/pwa/service-workers ——— لو شايف إن البوست ده مفيد، ادعمه بـ Like أو Share عشان الكل يستفيد. 💡 وفقكم الله لكل خير 🌿

الفرق بين الـ Monorepo والـ Multirepo 💯 . . تخيل أنك شغال على مشروع ضخم، عندك أكتر من فريق، وكل فريق بيشتغل على جزء مختلف. فجأة، تبدأ المشاكل تظهر: كود مكرر، صعوبة في التعديلات، تعارض بين الفرق، وأوقات ضايعة على الـ builds والـ pipelines. المشكلة هنا ممكن تكون في الطريقة اللي بتنظم بها الكود بتاعك. 💡 هنا تبدأ تسأل نفسك: تختار Monorepo ولا Multirepo؟ كل طريقة لها ميزاتها وعيوبها، واختيارك ممكن يحسن شغلك بنسبة كبيرة أو يعقد حياتك لو اختارت الغلط. تعال نوضح الفرق بينهم وامتى تختار الطريقة المناسبة... ———

📌 أولًا: يعني إيه Monorepo؟

الـ Monorepo ببساطة هي إنك تحط كل الكود الخاص بالمشروع بتاعك، بكل الـ components أو الـ modules اللي فيه، داخل Repository واحد. يعني حتى لو عندك أكتر من خدمة (microservices) أو أكتر من مكتبة أو أكتر من تطبيق مرتبطين ببعض، كله بيكون في مكان واحد. ———

📍 مميزات الـ Monorepo:

- سهولة إدارة الكود: كل حاجة في مكان واحد، فلو عايز تعمل تغييرات على أكتر من جزء، هتبقى شايف الصورة الكبيرة بسهولة. - إعادة استخدام الكود (Code Reusability): لو في مكتبة أو جزء معين من الكود محتاج تستخدمه في أكتر من موديول، تقدر تعمله بسهولة من غير duplication. - تنسيق أفضل بين الفرق: كل فريق شايف الكود بتاع باقي الفرق، فده بيسهل التعاون بينهم وبيقلل تعارض التعديلات (conflicts). - تكامل أفضل بين الأدوات: زي الـ CI/CD (Continuous Integration/Continuous Deployment) اللي بيشتغل بسهولة على مشروع واحد بدل ما يتقسم على أكتر من repository. ———

📍 عيوب الـ Monorepo:

- الحجم الكبير للـ repo: مع مرور الوقت وعدد المساهمين الكبير، حجم الـ repo بيكبر وده ممكن يبطّأ العمليات زي cloning أو حتى الـ builds. - التعقيد في إدارة الصلاحيات: صعب تقول إن فلان يقدر يشتغل على جزء معين بس من غير ما يشوف الباقي. - مشاكل مع الـ Tools: لو مش عندك أدوات قوية لإدارة الـ monorepo، ممكن تواجه مشاكل في التنظيم وعملية الـ build. ———

📌 ثانيًا: يعني إيه Multirepo؟

على العكس تمامًا، الـ Multirepo معناها إن كل جزء أو موديول من المشروع يكون في Repository خاص به. يعني كل موديول بيبقى مستقل بذاته وكأنه مشروع لوحده. ———

📍 مميزات الـ Multirepo:

- كل موديول ليه حياته الخاصة، وده بيخلي إدارة كل جزء مستقلة وأسهل لبعض الفرق. - تقدر تحدد مين يشتغل على إيه بناءً على الـ repo اللي عندهم أكسس عليه. - لو فيه موديول أو خدمة مش مرتبط بشكل مباشر، مش محتاج تبني كل المشروع، بس تبني الجزء اللي محتاجه. - كل جزء بيكون صغير ومستقل، فده بيخلي العمليات زي cloning أسرع وأسهل. ———

📍 عيوب الـ Multirepo:

- تكرار الكود: لو فيه أكتر من موديول بيحتاج نفس الكود، ممكن تضطر تكرره أو تحط مكتبة منفصلة ليه. - تعقيد في التنسيق بين الفرق: التعاون بين الفرق بيبقى أصعب، وخصوصًا لما يكون فيه dependencies كتير بين الـ modules. - تكامل معقد للـ CI/CD: عشان كل جزء في Repository مختلف، هتحتاج إعدادات أكتر للـ pipelines عشان كل حاجة تشتغل مع بعض. - صعوبة في إدارة التغييرات الكبيرة: لو عندك تغيير ضخم بيأثر على أكتر من موديول، هتحتاج تدخل على كذا repo وتعدل في كل واحد لوحده. ———

📌 امتى تختار مين؟

✅ اختر Monorepo لو: 1- مشروعك عبارة عن مجموعة modules مرتبطة ببعضها. 2- عندك فريق صغير أو متوسط. 3- بتحتاج تعمل تغييرات بشكل متكرر على أكتر من موديول في نفس الوقت. 4- الأدوات اللي بتستخدمها بتدعم إدارة monorepos بشكل كويس. ✅ اختر Multirepo لو: 1- مشروعك كبير جدًا ومعقد، وكل جزء فيه مستقل تمامًا. 2- بتحتاج تتحكم في الصلاحيات على مستوى كل موديول. 3- عندك فرق مختلفة كل فريق شغال على موديول خاص به. 4- عايز تتجنب المشاكل اللي بتسببها أحجام الـ repos الكبيرة. ——— القرار في الآخر بيرجع لطبيعة مشروعك واحتياجات فريقك. مفيش طريقة "صح" وطريقة "غلط"، لكن فيه طريقة مناسبة أكتر حسب ظروفك. أهم حاجة إنك تكون فاهم كل طريقة بتقدم إيه وعيوبها إيه. 💡 ——— وفقكم الله لكل خير 🌿

سمعت قبل كده عن الـ Microservices بس مش فاهمها كويس؟ أو حاسس إنها موضوع معقد ومحتاج خبرة كبيرة؟ 🤯 الموضوع ببساطة إن بدل ما يكون عندك تطبيق ضخم (Monolith) كله متشابك مع بعضه، تقدر تقسّمه لعدة خدمات صغيرة (Microservices)، وكل خدمة بتشتغل لوحدها وتقدر تتحدث مع باقي الخدمات بطريقة منظمة. الفكرة دي بتساعد الشركات الكبيرة زي Netflix و Amazon إنها تقدر تطوّر وتحدّث الأنظمة بتاعتها بسهولة وسرعة. ——— 🎯 تخيل إن عندك تطبيق لمطعم أونلاين: - خدمة مسؤولة عن الطلبات 🛒 - خدمة مسؤولة عن الدفع 💳 - خدمة مسؤولة عن إدارة العملاء 👥 كل خدمة تشتغل لوحدها، ولو حصل مشكلة في الدفع، الطلبات تفضل شغالة عادي بدون ما تتأثر. ——— في المقال ده، هتفهم الفكرة بأسلوب بسيط، مع مثال عملي يوضح لك كل حاجة خطوة بخطوة ✅👇

Microservices Made Simple: A Beginner’s Guide with a Real Example 💯

Imagine you’re building a house. You could construct it as one giant, unchangeable block with everything fused or use a modular approach, with separate rooms you can tweak, replace, or upgrade without tearing the whole thing down. https://differ.blog/p/microservices-made-simple-a-beginner-s-guide-with-a-real-example-47c171

Writing tests that actually last?

Let’s go beyond “it renders” and explore how to write robust, maintainable tests with React Testing Library