كتير هتشوف مصطلح #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

هكمل معاكم كلامنا عن المميزات الجديدة في #Angular v15
follow @dibo_talks

كلنا طبعا عارفين الـ Guards وبنعرف نستخدمها كويس .. الجديد ان الموضوع بأة اسش
هل بكتير لدرجة انك مش محتاج تعمل كلاس اصلا, ولا محتاج حتي تمرر data لل router وتقراها بـ ActivatedRouteSnapshot
ومش محتاجين حتي نسجله في ال providers


تعالوا نخش في العملي علي طول
الاول عشان تعمل Guard كنت بتعمل كدة

{ path: '/home', component: HomeComponet, canActivate: [AuthStateGuard], data: { states: ['LOGGED_IN'] } }

لاحظ اني مررتله data هنا والطبيعي اني استخدم ActivatedRouteSnapshot عشان اقراها من جوة الـ Guard

الـ Guard نفسه عبارة عن كلاس

@Injectable({ providedIn: 'root' })
export class AuthStateGuard implements CanActivate {
constructor(
private readonly authService: AuthService,
private readonly router: Router
) {}

async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
if (
route.data.states.includes('LOGGED_IN') &&
await this.authService.isLoggedIn()
) {
return true;
}
return this.router.navigateByUrl('/login');
}
}


الجديد بأة ان الجارد بأة مجرد function عادية بنمررلها الداتا اللي احنا عاوزينها ونقدر نستغني عن ActivatedRouteSnapshot خالص

لو انت مبرمج شاطر فأكيد جه ف بالك سؤال مهم, طب والبارامترات اللي كنت بـ injectـها في الكلاس بالـ DI هعملها ازاي؟
بكل بساطة هتستخدم inject()

ودة شكل الكود الجديد

function authStatesGuard(states: string[]) {
return async function(): Promise<boolean> {
if (
states.includes('LOGGED_IN') &&
await inject(AuthService).isLoggedIn()
) {
return true;
}
return inject(Router).navigateByUrl('/login');
};
}

بأة ابسط بكتير صح؟

مكملين في تحديثات #Angular v15 الجديدة
follow @dibo_talks

تخيل كدة معايا انك عملت Directive اسمه roundCorners وواضح كدة من اسمه هو بيعمل اية .. لما بتضيفه لاي component بيخلي الحواف بتاعته مدورة سيكا

تخيل بأة انك عملت component وعاوز كل مرة تستخدمه تضيفله ال directive اللي اسمه roundCorners هتعمل اية؟
ما قدامكش اي حل غير انك تضيفه manually كل مرة

<my-comp roundCorners></my-comp>
<my-comp roundCorners></my-comp>
<my-comp roundCorners></my-comp>

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

@Component({
  selector: 'my-comp',
  standalone: true,
  imports: [RoundCornersDirective],
  // 👇👇👇👇👇👇👇 
  hostDirectives: [RoundCornersDirective],
  template: '<button>Hello World</button>';
})
export class MyComponent {}

شايف hostDirectives اللي انا معلملك عليها دي؟ انت كدة بتقوله كل اما استخدم الـ comp دي ضيقلها ال directives اللي انا محددهالك اوتوماتيك

مش بس كدة ...

لا وكمان دلوقت الـ Directive بأة يقدر يـدمج كذا دايريكتيف تانيين

@Directive({
  selector: '[applyStyles]',
  hostDirectives: [RoundCornersDirective, HighlightDirective, UnderlineDirective]
})
export class ApplyStyleDirective {}

وبكدة كل مرة اضيف applyStyles هيطبقلي كل ال directives دي مرة واحدة من غير ما اضطر اكتبهم بايدي كل مرة

مكملين في تحديثات #Angular v15 الجديدة

انجولار عملت directive جديد لتحسين الصور من حيث الاداء
كل اللي انت محتاج تعمله انك تبدل src بـ ngSrc .. بس كدة!!

@Component({
  standalone: true,
  // 👇👇👇 src -> ngSrc
  template: '<img [ngSrc]="src" [alt]="alt"/>'
  imports: [NgOptimizedImage],
})
class MyComp{}

لو ماتعرفش, فيسبوك عملت سيستيم جديد بديل لـ Git اسمه Sapling
هو في الحقيقة مش سيستيم جديد ولا حاجة, فيسبوك بتستخدمه من زمان .. بس الجديد انها خلته open source وأي حد بأة يقدر يستخدمه

السيستيم الجديد Sapling متوافق مع Git عشان تقدر تبدل بينهم ف اي وقت بسهولة
واتعمل عشان يحل شوية مشاكل موجودة في GIT وخصوصا مشاكل الـ monorepos

لو انت زيي بتعتمد كتير علي monorepos فاكيد بتعاني من مشاكل كتير بتاخد مجهود ضخم عشان تحلها وغالبا احتكيب بحلول كتير زي Bit و Lerna و bazel وعشرات غيرها واكيد هيعجبك تجرب نظام Sapling اللي بتقدمه فيسبوك