ال #Agile هو طريقة في ادارة المشروعات بتعتمد علي تقسيم المشروع لاجزاء مستقلة والتعامل مع كل جزء بشكل مستقل

وكل مجموعة في فريق العمل بتركز علي الجزء اللي يخصها وبس

كل جزء بيخلص بتعرضه علي العميل ولو فيه ملاحظات بيبأة سهل تحلها بعكس لو بتسلم المشروع علي بعضه وظهرلك مشاكل وعاوز تحلها علي مستوي المشروع كله مرة واحدة

تخيل كدة السيناريو الشهير والرخم دة واللي مفيش صاحب شغل مابيشتكيش منه والسبب الرئيسي في الخلافات بين العميل واصحاب العمل

جالك عميل طلب منك تعمله شغل وانت بذلت مجهود جبار عشان تنجز المشروع المطلوب منك وبعد تعب ومصاريف جامدة رايح توري العميل الشغل قالك بس مش دة التصور اللي انا كنت عاوزه

هتختلفوا علي تفاصيل كتير, الحل الوحيد اللي قدامك انك تعيد المشروع كله من جديد وبرضو هتدخل في نفس الدوامة دي تاني وتالت

شوفت المشكلة مكلفة أد اية .. مجهود ووقت وفلوس وبتخسر عملاء

أجايل بأة بتحل المشكلة العويصة دي 

بكل بساطة هتقسم المشروع لأجزاء صغيرة وهتشتغل علي كل جزء بشكل مستقل

كل جزء بيخلص بتوريه للعميل ولو حصل مشاكل بينكم هتلاقي ان تكلفة اعادة تصميم الجزء الصغير دة ارخص بكتير من اعادة تصميم المشروع كله

كتير هتشوف مصطلح #backlog في شغلك وبالذات لو بتشتغل في مجال #software_development

ابسط شرح للمصطلح دة هو لستة المهام اللي عاوزين ننجزها

وبتشمل معلومات عن كل مهمة زي وصف المهمة ودور كل واحد فيها

واحدة من اكتر الحاجات اللي كتير #developers بيتلغبطوا فيها هي Array.reduce في #javascript
فانا جاي ابسطلك الدنيا واشرحهالك بأبسط مايمكن
الفنكشن دي باختصار شديد بتعمل loop علي عناصر ال array زيها زي
Array.forEach بالظبط بس في كل لفة بتجيبلك العنصر الحالي والقيمة التراكمية

خد المثال دة يفهمك الدنيا اكتر
لو عاوز اجيب مجموع عناصر ال array دي [1,2,3]
تعالي الاول ننفذها ب forEach

```
let arr = [1, 2, 3]
let total = 0;

arr.forEach(el => total+=e

l)
```

كود بسيط جدا وشارح نفسه
عرفنا القيمة التراكمية اللي هي total واديناها قيمة مبدئية = صفر
عملنا loop علي arr في كل لفة بيدينا القيمة الحالية بناخدها ونزودها علي total
اهي Array.reduce بتعمل كدة بالظبط بس مش بنضطر نعرف متغير خارجي اللي هو t

otal

```
let arr = [1, 2, 3]
let total = arr.reduce((el, total)=> total

+=el, 0)
```

اختبر نفسك
لو عندنا o

bject زي دة
```
let obj = {
   men: 240,
    women: 170,

other: 50
}
```
المطلوب تحسب اجمالي عدد الحضور في سطر واحد
واكتب الحل في كومنت

اعمل متابعة للهاشتاج دة عشان تلاقي كل المحاضرات بسهولة
linkedin.com/search/results/all/?keywords=%23DiboCourses


قناة التليجرام اللي هينزل عليها كل المحاضرات
t.me/developers_talks

كورس انجولار من الصفر خااااالص
المحاضرة الاولي


اعمل متابعة للهاشتاج دة عشان تلاقي كل المحاضرات بسهولة
linkedin.com/search/results/all/?keywords=%23DiboCourses

فولو linkedin.com/in/dibo


قناة التليجرام اللي هينزل عليها كل المحاضرات
t.me/developers_talks


لينك المحاضرة الاولي للي حابب يشيرها https://t.me/developers_talks/22

حاول تعمل ابليكيشن زي اللي اتعمل في المحاضرة وارفعه علي github وابعتلي اللينك

لو وقفت في اي اي خطوة اسأل

دة كورس react كامل وبالعربي
https://youtube.com/playlist?list=PLtFbQRDJ11kHq9fxQpHNjO2GAmR9yUJco

ودة كورس تاني مركز علي React hooks تحديدا
https://youtube.com/playlist?list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h

follow @dibo_talks

عاوز تبأة جامد في Javascript؟ شوف خطة التعليم دي وكل خطوة معاها كورس بالعربي

follow @dibo_talks

أساسيات جافاسكريبت
youtube.com/playlist?list=PLtFbQRDJ11kFSI83AC5yfPVHKDe_7upv8

بعد ما فهمنا الاساسيات لازم نطبق عملي ودة مشروع ecommerce
youtube.com/playlist?list=PLtFbQRDJ11kHCgyFid3khHdOk0VEHiJ3e

نتعمق بأة شوية ونفهم الـ OOP
youtube.com/playlist?list=PLtFbQRDJ11kHgwumBSYiYdA7MknejHAj6

ودة تطبيق علي الـ OOP عبارة عن quiz app
youtube.com/playlist?list=PLtFbQRDJ11kFWrCTwrjYGlV-R3btA1ijT

فهمنا كل حاجة؟ دي شوية مشاريع بالجافاسكريبت عشان تدرب نفسك اكتر
youtube.com/playlist?list=PLtFbQRDJ11kGlRWp8MFhqlbO3ZmxIa3RE

نخش بأة في ليفل اللوحش ونتعلم problem solving في الجافاسكريبت
youtube.com/playlist?list=PLtFbQRDJ11kEZczEgH0Zt-fif_bO-yUBB

واخيرا best practices
youtube.com/playlist?list=PLtFbQRDJ11kGjlpPm1YzIOlTWwUwQ1ufN

شغل remotely لشركة Cura في مصر
مطلوب product design

company.cura.healthcare/en/careers/senior-product-designer-remoteegypt/

الموقع دة بيخليك تعمل div باشكال والوان علي كيفك والاخر بيديلك كود html وكود الاستايل جاهز

9elements.github.io/fancy-border-radius

follow @dibo_talks

لو بتحب تعمل اشكال احترافية في ال web pages بتاعتك زي ال devider اللي انت شايفه قدامك دة بين ال sections وبعضها فالموقع دة بيخليك ترسم خطوط مموجة بأي شكل يعجبك ويديلك الكود النهائي جاهز

shapedivider.app

follow @dibo_talks

مكتبة ايقونات متحركة في منتهي العظمة
https://lordicon.com/icons

follow @dibo_talks

The fronf-end roadmap (pdf)
follow @dibo_talks

لو بتبني واجهة موقع ب React او Angular ومهتم ان موقعك يظهر في نتايج بحث جوجل لازم تعرف ان عندك مشكلة كبيرة
follow @dibo_talks

الـ frameworks دي بتـ render الموقع بتاعك في الـ client side
واقصد بكلمة بتـ render انها بتحول اكواد javascript اللي هي مثلا ال components والاجزاء التانية لكود html عادي

محرك البحث لما بيدخل الصفحة بيلاقيها صحرا .. فاضية تماما ومافيهاش غير كود جافاسكريبت فبيتعامل معاها علي انها مجرد صفحة فاضية ومش بياخدها في اعتباره
لما ال framework بيخلص ال rendering بتاعته وبي generate اكواد html اللي بعدها البراوزير بيحولها ل views فبتشوف الموقع قدامك .. بيكون ال crowler بتاع محرك البحث أخد بعضه ومشي

الحل هنا اننا بنـ render الكود في السيرفر ولما الصفحة بتتطلب بنبعتلها كود html جاهز بدل اكواد js وهنا بأة لما محرك البحث بيدخل بيشوف المحتوي
والعملية دي بنسميها SSR يعني server side rendering

طب نعمل حوار الـ SSR دة ازاي؟

لو بتستخدم Angular فالموضوع بسيط خالص كل اللي محتاج تعمله انك تضيف الـ scematics دي
ng add @nguniversal/express-engine

ودة بيشرحلك الموضوع بتفاصيل اكتر وبيعرفك الـ scematics دي بتعمل اية بالظبط
angular.io/guide/universal

اما لو بتستخدم React فعملوا framework مبنية علي React ولكن بتـ render في السيرفر بدل البراوزر اسمها Nextjs