DevGuide

React Design Patterns and Best Practices for 2025

Let’s see React design patterns and best practices for 2025 so you can build more robust and maintainable applications. 🔗 https://www.telerik.com/blogs/react-design-patterns-best-practices

أكيد تعرف npm install أو npm i . . لكن هل تعرف npm ci؟ لما تكتب npm install، هو بيبص على الـ package.json ويشوف إيه الـ packages المطلوبة، وبعدين: - لو فيه package-lock.json بيحاول يطابقه. - ولو مش موجود، بيبدأ يركّب اللي محتاجه ويعمل واحد جديد. - وكمان ممكن يحدث بعض الـ packages لو شاف إن فيه إصدار أحدث متوافق مع الشروط. وطبعًا ده كويس لكن ممكن يحصل اختلافات من جهاز للتاني... ——— الـ ci معناها "clean install"، والأمر ده معمول مخصوص عشان الـ automation وبيشتغل بشكل أسرع وأسهل. - بيمسح فولدر node_modules تمامًا. - وبعدين يركّب الـ packages بالضبط زي ما هي مكتوبة في package-lock.json. - لو فيه فرق بين package.json و package-lock.json بيقف ويعمل Error. ✅ ده معناه إن npm ci: - أسرع من install. - بيعمل نفس النتائج كل مرة. - ممتاز في الـ CI/CD pipelines أو في الشركات الكبيرة. ——— لو شغال لوحدك ولسه بتضيف/تحدث packages: استخدم npm install. لو بتشتغل في تيم أو بتعمل Deploy على سيرفر: استخدم npm ci عشان تضمن ثبات البيئة. ——— وفقكم الله لكل خير 🌿

🎯 ليه لازم تكون فاهم الـ Business Goal قبل ما تبدأ تشتغل على أي Feature؟ . . إنك تكون بتعرف تكتب clean code ده مهم، وإنك تبقى سريع في تنفيذ الـ tasks كمان حاجة حلوة، بس ده كله لوحده مش كفاية. اللي فعلًا بيفرق بين مبرمج عادي… ومهندس برمجيات تقيل، هو قد إيه فاهم البزنس اللي بيشتغل عليه. يعني إيه؟ يعني قبل ما تفتح VS Code وتبدأ تكتب أي سطر كود، لازم تسأل نفسك سؤال بسيط: "هو ليه بنعمل الـ feature دي أصلاً؟" لأنك لو مش فاهم الـ “ليه”، ممكن تشتغل كتير وتبذل مجهود كبير… وفي الآخر تطلع النتيجة مش هي اللي الـ business محتاجها! ——— 💡 يعني إيه Business Goal؟ الـ business goal هو السبب الحقيقي إن الشركة قررت تضيف الـ feature دي. مش بس إزاي نعملها، لكن ليه بنعملها؟ بنحاول نحل مشكلة لمين؟ وإيه اللي هنستفاده لما نحلها؟ يعني مثلًا: - ممكن نكون بنعمل filter عشان نزود الـ conversion rate. - أو بنضيف notification جديدة عشان نقلل الـ churn. - أو بنعمل redesign لجزء معين عشان نخلي الـ onboarding أسرع. كل واحدة من دول محتاجة تفكير وتنفيذ مختلف، رغم إن ممكن يكون شكل الـ features شبه بعض. ——— 📌 إيه اللي هيحصل لما تشتغل من غير ما تفهم البزنس؟ 1- بتكتب كود حلو… بس غلط. بتبذل مجهود كبير في حاجات مش مطلوبة أو مش مفيدة حاليًا. 2- بتفوّت فرصة إنك تضيف value. ممكن تكون عندك اقتراحات تحسّن الفكرة لو كنت فاهم الهدف الحقيقي، بس لأنك مش عارف الـ context، بتنفّذ وخلاص. 3- بتزود الـ tech debt من غير قصد. لأنك ممكن تختار حل تقني مش مناسب للهدف الأساسي، وبعد شوية الشركة تضطر ترجع تغير الحل ده. 4- بتكون reactive مش proactive. بتنفّذ اللي مكتوب وخلاص، بدل ما تكون شريك حقيقي في الحل. ——— لو المبرمج سأل أول ما استلم الـ task: "إحنا ليه عايزين نضيف الفلتر ده؟" وكان الرد: "عشان عندنا data بتقول إن المستخدمين بيخرجوا من الصفحة لما مش بيلاقوا المنتج اللي عاوزينه بسرعة" ساعتها كان ممكن: - يركّز على تحسين تجربة البحث أكتر من شكل الفلتر. - يقترح autocomplete. - يضيف ranking based on popularity. - يحلل الـ analytics أكتر ويشتغل مع الـ designer على UI/UX أحسن. يعني كان هيفكّر زي ما الـ product owner بيفكر، ويبقى مش بس مبرمج بيكتب كود، لكن شريك في الحل. ——— ✅ تعمل إيه عشان تبقى فاهم البزنس كويس؟ 1- اسأل دايمًا "ليه؟" قبل ما تبدأ في أي task. 2- افهم الـ KPIs اللي الفريق بيشتغل عليها. إيه اللي بيقيسوا به النجاح؟ Traffic؟ Conversion؟ Retention؟ 3- احضر meetings مع الـ product/marketing لما تقدر. هتشوف الدنيا من زاويتهم، وده هيفرق في طريقة تفكيرك. 4- اربط الـ code اللي بتكتبه بالـ impact اللي بيعمله. "الـ PR ده لما دخل، زوّد الـ signup rate 10%". ده أفضل بكتير من "عملت login form بالـ clean code". ——— وفقكم الله لكل خير 🌿

Generative AI Bootcamp – Complete 65-Hour Course

https://youtu.be/DOXJ7s1D6iE

دورة حياة الريكوست من المتصفح للسيرفر 🚀💻

From Click to Code: The Lifecycle of a Backend Request Explained Like You’re Ordering Dinner 🚀

——— 🔗 https://levelup.gitconnected.com/from-click-to-code-the-lifecycle-of-a-backend-request-explained-like-youre-ordering-dinner-9d487718e9ba

إزاي تعرض شغلك كـ Backend Developer؟ . . بتقعد ساعات تكتب في code، تبني APIs، تظبط الـ Auth، تتعامل مع Databases و Logging و Queues، وكمان ممكن تكون بتشتغل على Microservices و Event-driven architecture… بس لما تيجي تقدم على شغل أو تعرض شغلك لحد، بتقف ومش عارف تقول إيه... المشكلة مش إن شغلك قليل، المشكلة إنك مش عارف "تعرضه" بشكل يخلي اللي قدامك يعرف خبرتك والمعلومات اللي عندك. الـ Backend أصعب شوية في النقطة دي عن الـ Frontend، لأن الناس مش بتشوف شغلك بعنيهم، فأنت اللي لازم "تخليهم يشوفوه". تعال أقولك إزاي تعرض شغلك كـ Backend Developer بطريقة محترمة... ——— ✨ أول حاجة: أنت بتشتغل على إيه؟ اكتب الكلام ده في شكل نقاط واضحة، وبلغة بسيطة. حاول تجاوب على الأسئلة دي: - إيه نوع الـ systems اللي اشتغلت عليها؟ (E-commerce, CMS, Booking system…) - كان فيها كام user؟ أو traffic عامل إزاي؟ - هل كانت Monolith ولا Microservices؟ - هل اشتغلت على حاجات زي Authentication, Payments, Notifications؟ - هل فيه Challenges معينة حليتها؟ (scalability, performance, data integrity…) ✅ مثال: اشتغلت على نظام E-commerce بيخدم 200K user شهريًا، بنيت فيه REST APIs بـ Node.js وExpress، وعملت Integration مع Stripe للـ payments. ساهمت في refactor من Monolith لـ Microservices، واشتغلت على Service خاصة بالـ Orders باستخدام MongoDB وRabbitMQ. ——— ✨ ثاني حاجة: تكلم عن قراراتك التقنية بلاش تقول "اشتغلت بـ Node.js وخلاص"، ولكن احكي ليه استخدمتها؟ إزاي اختارت Database معينة؟ ليه استخدمت Redis أو Kafka؟ اللي بيفرق أي حد شاطر مش بس إنه بيعرف يستخدم tools…إنما بيعرف إمتى يستخدم إيه، وليه، وإيه البدائل اللي كانت متاحة؟ ✅ مثال: استخدمنا Redis علشان نعمل caching لبيانات المنتجات عشان نحل مشكلة الـ latency العالية في الـ product listing. ده قلل الـ response time بنسبة 60%. ——— ✨ ثالث حاجة: تكلم بلغة الـ Impact بلاش تقول "اشتغلت على كذا…"، الناس بتحب تسمع التأثير - "بسبب شغلي، حصل كذا وكذا…" تتكلم عن النتائج: - الـ API response time قل بنسبة كام؟ - كم bug اتصلحت؟ - الـ revenue زاد؟ retention اتحسن؟ - الـ system بقى يستحمل كام request في الثانية؟ ✅ مثال: عملت تحسين للـ queries في MySQL خلّى الـ checkout process أسرع بنسبة 40%، وقلل الـ cart abandonment بنسبة ملحوظة. ——— ✨ رابع حاجة: الـ Showcase الحقيقي - اعمل repos على GitHub فيها مشاريع حقيقية (مش مشاريع الـ Hello World) - اعرض Postman Collection أو OpenAPI Spec - لو اشتغلت على حاجات Open Source أو عندك Blog بيشرح اللي بتعمله ممكن تضيفه. ——— ✨ خامس حاجة: خلي شغلك "مفهوم" للناس اللي مش في نفس التخصص خلي دايمًا الطريقة اللي بتتكلم بها سهلة، وفيها أرقام. بدل ما تقول: “Built scalable APIs using Node.js.” ممكن تقول: “Built RESTful APIs using Node.js to handle 20K+ daily requests, with response time under 200ms.” تكلم عن الفائدة، مش بس التفاصيل التقنية. بدل ما تقول: “اشتغلت على تحسين الـ indexing strategy في MongoDB باستخدام compound indexes.” ممكن تقول: “قللت وقت تحميل صفحة المنتجات من 5 ثواني لأقل من ثانية بعد تحسين الـ indexing في MongoDB.” ——— وفقكم الله لكل خير 🌿

لو شغال على أي مشروع TypeScript/JavaScript، وعايز الـ VS Code يشيل الـ imports غير المستخدمة تلقائيًا أول ما تعمل Save، كل اللي عليك تضيف الجزء ده في إعدادات VS Code 👆

إزاي نضمن إن المشروع شغّال زي ما العميل متوقع؟ . . الـ Testing مش مجرد خطوة بنعملها في الآخر "علشان نطمن"، ولا هي بس كام Test Case بنكتبهم والسلام. الموضوع أعمق من كده بكتير... واللي بيحدد شكله وتوقيته وطريقته هو نوع الـ Software Development Methodology اللي المشروع شغال بها. ——— 🎯 أولًا.. يعني إيه Software Testing؟ باختصار، الـ Testing هو الطريقة اللي بنكتشف بها الـ bugs قبل ما توصل للمستخدم. وكمان بنقيس هل الـ software بيحقق الـ requirements ولا لا؟ هل قابل للاستخدام؟ هل بيشتغل كويس تحت الضغط؟ هل الـ UI سهل وواضح؟ كل دي أنواع مختلفة من الـ Testing... ——— 🧭 إزاي الـ Methodology بتأثر على الـ Testing؟ تعال نعرف الفرق... 1. الـ Waterfall Model: في الـ Waterfall، الـ Testing بييجي في الآخر بعد ما كل حاجة تخلص. يعني: Requirements ➡️ Design ➡️ Development ➡️ Testing 📌 ده معناه إنك مش هتبدأ تختبر غير لما المشروع كله يكون جاهز. وده بيخلي الـ Testing عبارة عن Quality Gate: لو الكود فيه مشاكل، بنرجع خطوة ورا، ونصلح. ⚠️ العيب هنا؟ لو فيه bug في البداية، هتكتشفه متأخر جدًا، وهتكلفك كتير. ——— 2. الـ Agile Methodology: موجود في معظم الشركات دلوقتي. هنا بنشتغل في Sprints قصيرة (أسبوعين غالبًا)، والـ Testing بيكون جزء من كل Sprint. 📌 الـ Testing بيحصل مع كل ميزة جديدة. والـ QA بقى جزء من التيم من أول يوم. 🎯 النتيجة؟ - بتقدر تكتشف الـ Bugs بدري - كمان تقدر تاخد Feedback من العميل بشكل مستمر علشان لو فيه تعديل - وطبعًا التكلفة هتكون أقل ——— 3. الـ DevOps / Continuous Integration: لما الـ testing يتحول لجزء من الـ pipeline نفسها. 📌 هنا بنستخدم Tools زي Jest أو Cypress أو Selenium، وغيرها، نكتب بها Automated Tests وأول ما الـ developer يعمل Push، الـ Tests بتشتغل أوتوماتيك. 🔥 ده بيخلي الـ Testing جزء من حياة الكود، مش خطوة منفصلة. ——— ✅ لازم تبقى فاهم نوع الـ methodology اللي المشروع ماشي بها، علشان تعرف إمتى وإزاي تختبر. ✅ بلاش تعتمد بس على الـ QA، أنت كـ Developer مسؤول عن كتابة Unit Tests على الأقل. ✅ كل ما تكتب Tests أكتر، كل ما الكود بتاعك هيبقى أسهل في الـ Refactor، وأقل Bugs. ——— أنت شايف إن الـ Testing مسؤولية الـ Developer؟ ولا لازم يكون فيه QA Team دايمًا؟ ——— وفقكم الله لكل خير 🌿

إزاي تنفذ الـ Caching في Node.js؟ 🤔 . . لو أنت شغال بـ Node.js، فـ أكيد قابلت في يوم مشكلة إن الـ API عندك بيبقى بطيء بسبب requests كتير أو عمليات تقيلة زي queries على database، وبدأت تفكر: "ليه كل مرة أجيب نفس الداتا؟ طب مفيش حل أسرع؟" الإجابة هي: Caching. وده اللي هنتكلم عنه اليوم بالتفصيل.... ——— 📍 LinkedIn: https://www.linkedin.com/posts/mentoor-io_node-nodedeveloper-nodejs-activity-7334639130842128385-NThv 📍 Facebook: https://www.facebook.com/share/p/1WNtVnqmVy

فرصة ذهبية لتعلم تقنيات Red Hat مجانًا! هل ترغب في تعزيز مهاراتك في Linux، الحوسبة السحابية، أو الذكاء الاصطناعي؟ منصة Red Hat تُقدم لك اشتراكًا تجريبيًا مجانيًا لمدة 90 يومًا في منصتها التعليمية الرائدة! 🎯 ما الذي ستحصل عليه؟ - دورات تعليمية شاملة في: ✅ Red Hat Enterprise Linux ✅ OpenShift ✅ Ansible Automation - الذكاء الاصطناعي والحوسبة السحابية - مختبرات عملية سحابية لتطبيق ما تعلمته - فرصة لتعلم مهارات مطلوبة في سوق العمل - إمكانية التحضير لشهادات معتمدة من Red Hat - تجربة تعليمية مرنة تناسب جدولك https://www.redhat.com/en/blog/introducing-90-day-red-hat-learning-subscription-trial

كورس شرح بPHP متكامل في 6 ساعات | PHP Full Course in 6 Hours (Arabic) https://youtu.be/qmvjwRbtNww

Freelance Web Developer Roadmap

https://youtu.be/PoFkd42WvQA

🚨🔥 BREAKING: Angular v20 is HERE! 🔥🚨 🎉 Angular just dropped v20, and it's PACKED with updates that'll make your dev life smoother, faster, and more reactive than ever! ⚡️🧠💻

Relational DBMS Course – Database Concepts, Design & Querying Tutorial

https://youtu.be/NdeeSEknp58

Every Vue.js Concept Explained ( Complete Course )

https://youtu.be/ymXJlPeM-qI

مفهوم الـ Concurrent Rendering في React 💡 . . لو بتشتغل بـ React، أكيد لاحظت إن أحيانًا التطبيقات بتبقى بطيئة أو بتتجمد لما المستخدم بيبدأ يتفاعل معاها، زي لما يكتب في فورم أو يعمل scroll. المشكلة دي بتحصل لأن React في الأساس بتعالج كل حاجة مرة واحدة وبشكل متسلسل، وده بيخلي الـ UI يهنج أو يعلق. علشان كده React قدمت حاجة جديدة اسمها Concurrent Rendering واللي بتتحكم في إزاي React بتتعامل مع تحديثات الشاشة. الفكرة ببساطة إنها بتخلي التطبيق يقدر يعطي أولوية للحاجات المهمة ويخلي تجربة المستخدم سلسة وسريعة حتى لو في عمليات كتير بتشتغل في الخلفية. تعال ندردش شوية عن الـ Concurrent Rendering... ——— 📍 LinkedIn: https://www.linkedin.com/posts/dev-alisamir_react-reactdeveloper-reactjs-activity-7333204185569476608-tb-5 📍 Qabilah: https://qabilah.com/posts/va9J6gDEwqU

يعني إيه Buffer في Node.js؟ 🤔 . . أغلب الوقت وإحنا بنكتب كود في Node.js، بنتعامل مع البيانات اللي راجعه من الـ APIs أو من الـ Database أو من الـ Files على هيئة Strings أو JSON. تمام كده؟ لكن، لو هنتعامل مع حاجات زي الصور، الملفات الصوتية، الفيديو، أو أي Data غير نصيّة (non-text)، وقتها الـ JavaScript ما تعرف تتعامل مع النوع ده بشكل مباشر. وهنا ييجي دور الـ Buffer. ——— 📍 LinkedIn: https://www.linkedin.com/posts/mentoor-io_nodejs-nodejsdeveloper-backend-activity-7333185574079479808-MTLZ 📍 Facebook: https://www.facebook.com/share/p/18xr3AkpWk 📍 Qabilah: https://qabilah.com/posts/CPSnhdZfJqU