قعدة مبرمجين

فرص #شغل في SmartTech خبرة سنتين في React و javascript قدم هنا: mai.awaad@smarttechsys.com للمزيد من الفرص تابع @dibo_talks

فرص #شغل في FlairsTech - Senior Java Developer - Senior SQL Developer - Senior Business Analyst apply: menna.sayed@flairstech.com للمزيد من الفرص تابع @dibo_talks

فرص #شغل في

فرص #شغل في فوري Senior Bigdata Engineer Senior BI Engineer Senior Data Engineer apply: Bassem.moghram@fawry.com

في فرصة شغل في #Apple محتاجين devOps engineer مش شرط خبرة الشغل في الهند join @dibo_talks Qualifications: - Experience deploying and managing CI/CD pipelines. - Experience managing applications on any leading cloud platforms eg. AWS - Working knowledge of databases and SQL apply👇 https://jobs.apple.com/en-us/details/200375434/devops-engineer

الموقع دة كنز لاي حد بيحب يطور نفسه باستمرار.. اديله اي مجال يعجبك وهو هيجمعلك الكورسات المجانية من مواقع كتير زي كورسيرا ويوديمي datakwery.com follow @dibo_talks

لو انت جديد في #unit_testing شوية المفاهيم دي هتنفعك جدا follow @dibo_talks عملية الـ #testing متقسمة ل 4 أجزاء كل جزء فيهم هتلاقي مكتبة معينة متخصصة فيه - Test runner ودة مسؤل عن تشغيل الاختبارات وبيقرر انه تيست هيشتغل وانهو لأ, ومين هيشتغل قبل مين - Assertion ودي بنستخدمها أثناء الاختبار عشان نقرر اذا كان الاختبار ناجح ولا لأ وبصفة اساسية عشان نتأكد ان النتايج المتوقعة مطابقة للنتايج المتوقعة - test doubles ودي بتوفرلنا طرق لعمل mocking و spies أهم المكتبات المستخدمة في التيستنج - #Jasmine ودي من اهم مميزاتها انها مكتبة شاملة, يعني فيها runner و assertionو doubles جاهزة للاستخدام المباشر من غير اي اعدادات كتير - #jest من انتاج #فيسبوك, تشبه jasmone من حيث انها مكتبة شاملة وكمان جاهزة للاستخدام من غير اي اعدادات ميزتها انها سريعة جدا وبتنفذ الاختبارات ع التوازي فبتنجز الموقضوع في وقت اقل من اي مكتبة تانية - #mocha عارف مشروب الموكا؟ المكتبة دي بتديلك الحد الادني لاجراء الاختبارات, مش مكتبة شاملة زي jasmine و jest ودة معناه انها محتاجة test runner يشغل الاختبارات بما انها موكا فغالبا بنستخدم معاها شاي .. او مكتبة Chai تحسهم كدة بيعلوا الألش علي بعض وبرضو هنحتاج مكتبة نعمل بيها doubles اللي هي mocks و spies لو تفتكر ممكن مثلا نستخدم حاجة زي Sinson واكيد طبعا هنحتاج مكتبة للـ assertion عشان نعمل الاختبار نفسه ممكن نستخدم حاجة زي Better-assert, shouldjs, unexpected - #Nodejs ودي حاجة واقعة من ناس كتير, Nodejs نفسها فيها assert library ممتازة جدا لغاية وقت قريب كانت للاستخدام الداخلي بس, لكن فتحوها وخلوها متاحة للجميع في الاصدارات الجديدة من Node عملوا test runners من غير اي مكتبة خارجية - Karma كارما مختلفة عن اي مكتبة تانية لانها بتشغل الاختبارات في browsers حقيقية وأخيرا لو تحب ارشحلك افضل مكتبة تستخدمها في ال testing الاختيار هيكون بناء علي تجاربي الشخصية وخبراتي الشخصية بصفة عامة اول حاجة بفكر فيها هي Jest لانها سريعة جدا وشاملة وفي نفس الوقت جاهزة للاستخدام فورا ومش محتاجة تستخدم معاها مكتبات تانية في حالات معينة بحتاج اشغل الاختبارات في browsers حقيقية فبلجأ في الحالة دي ل Karma لو بتتعلم تيتنج سيب كومنت عشان ابعتلك مواعيد الكورس المجاني

قبل Angular 15 لما بتحب تحقن dependencies كنت بتحطهم في الـ constructor زي كدة class MyComponent{   constructor(activatedRoute: ActivatedfRoute){} } دلوقت بأة ممكن تستخدم function جديدة اسمها inject() طب هنستفيد اية يعني؟!! اول ميزة تقدر تستخدمها جوة function ودي بتدينا ميزة rusability زي كدة function getParam( paramName: string){ let activatedRoute = inject(ActivatedRoute) return activatedRoute.snapshot.paramM.get(paramName) } ودلوقت نقدر نستخدمها ف اي كلاس من غير ما نحتاج نحقن ActivatedRoute في الكلاس class MyComponent{   id: string;   constructor(){     this.id = getParam("id") } }

بدل ما تستخدم console.log ممكن برضو تستخدم console.table عشان يعرضلك ال log علي هيئة جدول جميل زي دة كدة جرب بنفسك

let foods = [
  {
    name: '🍔',
    price: 30.89,
    group: 1,
  },
  {
    name: '🍨',
    price: 20.71,
    group: 1,
  },
  {
    name: '🍿',
    price: 10.31,
    group: 2,
  },
  {
    name: '🍵',
    price: 5.98,
    group: 2,
  },
]


console.table(foods)

تعرف انك تقدر تتحكم في ستايل console.log عن طريق اكواد css اللي انت عارفها جرب كدة الكود دة وهتنبهر console.log('%chello', 'color: red') console.log('%chello', 'color: green')

الموقع دة تديله اي كود بيوريلك الكومبايلر بينفذه ازاي خطوة بخطوة وبيشرحلك بيعمل اية بالظبط https://pythontutor.com/visualize.html follow @dibo_talk

javascript shortcuts

اية الجديد في Angular v15؟ = RIP NgModule = bye bye class-based guards = automatic directives = optimized images directive = we will miss the fucking messy Stack Trace = Material MDC = es-build support = typescript v4.9 linkedin.com/pulse/angular-v15-do-more-code-less-dibo-full-stack-

في typescript في خاصية اسمها Record تعالوا كدة نشوف بتعمل اية لو عندي مثلا object زي دة interface Role { admin: {name: string, age: number}, moderatoe: {name: string, age: number}, user: {name: string, age: number}, } لاحظت اية؟ كل الـ keys بتاعة الـ Interface لها نفس الخصائص أو ع الاقل في حاجات كتير متشابهة فبدل ما نكرر نفسنا كل شوية ممكن نستخدم Record type key = 'admin' | 'moderator' | 'user' type Role = Recode ولو افترضنا بأة اننا عاوزين نعمل key مختلف؟ عادي... type AnotherRole = Recode<'anotherKey', { tatus: string}> type AllRoles = Role & AnotherRole let roles: AllRoles = { admin: {name: 'Admin', age: 00}, moderator: {name: 'Mod', age: 00}, user: {name: 'User', age: 00}, anotherKey: {status: 'OK'} }

لو ماتعرفش, فيسبوك عملت سيستيم جديد بديل لـ Git اسمه Sapling هو في الحقيقة مش سيستيم جديد ولا حاجة, فيسبوك بتستخدمه من زمان .. بس الجديد انها خلته open source وأي حد بأة يقدر يستخدمه السيستيم الجديد Sapling متوافق مع Git عشان تقدر تبدل بينهم ف اي وقت بسهولة واتعمل عشان يحل شوية مشاكل موجودة في GIT وخصوصا مشاكل الـ monorepos لو انت زيي بتعتمد كتير علي monorepos فاكيد بتعاني من مشاكل كتير بتاخد مجهود ضخم عشان تحلها وغالبا احتكيب بحلول كتير زي Bit و Lerna و bazel وعشرات غيرها واكيد هيعجبك تجرب نظام Sapling اللي بتقدمه فيسبوك

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

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

مكملين في تحديثات #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 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'); }; } بأة ابسط بكتير صح؟