قعدة مبرمجين

لو بتبني واجهة موقع ب 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

The fronf-end roadmap (pdf) follow @dibo_talks

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

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

الموقع دة بيخليك تعمل div باشكال والوان علي كيفك والاخر بيديلك كود html وكود الاستايل جاهز 9elements.github.io/fancy-border-radius follow @dibo_talks

شغل remotely لشركة Cura في مصر مطلوب product design company.cura.healthcare/en/careers/senior-product-designer-remoteegypt/

عاوز تبأة جامد في 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

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

حاول تعمل ابليكيشن زي اللي اتعمل في المحاضرة وارفعه علي github وابعتلي اللينك لو وقفت في اي اي خطوة اسأل

كورس انجولار من الصفر خااااالص المحاضرة الاولي اعمل متابعة للهاشتاج دة عشان تلاقي كل المحاضرات بسهولة linkedin.com/search/results/all/?keywords=%23DiboCourses فولو linkedin.com/in/dibo قناة التليجرام اللي هينزل عليها كل المحاضرات t.me/developers_talks لينك المحاضرة الاولي للي حابب يشيرها https://t.me/developers_talks/22

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

واحدة من اكتر الحاجات اللي كتير #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 } ``` المطلوب تحسب اجمالي عدد الحضور في سطر واحد واكتب الحل في كومنت

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

ال #Agile هو طريقة في ادارة المشروعات بتعتمد علي تقسيم المشروع لاجزاء مستقلة والتعامل مع كل جزء بشكل مستقل وكل مجموعة في فريق العمل بتركز علي الجزء اللي يخصها وبس كل جزء بيخلص بتعرضه علي العميل ولو فيه ملاحظات بيبأة سهل تحلها بعكس لو بتسلم المشروع علي بعضه وظهرلك مشاكل وعاوز تحلها علي مستوي المشروع كله مرة واحدة تخيل كدة السيناريو الشهير والرخم دة واللي مفيش صاحب شغل مابيشتكيش منه والسبب الرئيسي في الخلافات بين العميل واصحاب العمل جالك عميل طلب منك تعمله شغل وانت بذلت مجهود جبار عشان تنجز المشروع المطلوب منك وبعد تعب ومصاريف جامدة رايح توري العميل الشغل قالك بس مش دة التصور اللي انا كنت عاوزه هتختلفوا علي تفاصيل كتير, الحل الوحيد اللي قدامك انك تعيد المشروع كله من جديد وبرضو هتدخل في نفس الدوامة دي تاني وتالت شوفت المشكلة مكلفة أد اية .. مجهود ووقت وفلوس وبتخسر عملاء أجايل بأة بتحل المشكلة العويصة دي  بكل بساطة هتقسم المشروع لأجزاء صغيرة وهتشتغل علي كل جزء بشكل مستقل كل جزء بيخلص بتوريه للعميل ولو حصل مشاكل بينكم هتلاقي ان تكلفة اعادة تصميم الجزء الصغير دة ارخص بكتير من اعادة تصميم المشروع كله

#css fiters

👉 join developers talks community and invite your friends jobs & free courses linkedin.com/in/dibo newsletter linkedin.com/newsletters/developers-talks-6969599226271928320 Whatsapp http://chat.whatsapp.com/H4nSKueDUb8GkpoL0xvhKd telegram channel: t.me/developers_talks group: t.me/developers_chat facebook facebook.com/groups/1977379819068174 Linkedin linkedin.com/groups/9043816

التعامل مع العمليات البرمجية الطويلة بطريقة async

whatsapp group http://chat.whatsapp.com/H4nSKueDUb8GkpoL0xvhKd