Episodes

31 min

Ship Faster with Feature Flags

في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags. بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code. بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية.
/ Show Notes
39 min

Mobile Apps with JavaScript

في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار. بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app".
/ Show Notes
54 min

Building Multilingual Apps

في الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ Styling والـ State وازاي حتى بنكتب HTML وايه الادوات المتاحة لينا علشان نعرف نعمل ويب ابليكشن متعدد اللغات. بناخد الموضوع من اول الـ CSS والـ HTML لغاية ازاي نتعامل مع الـ API بشكل سليم.
/ Show Notes
42 min

Questioning the RSC Model

في الحلقة دي بتكلم عن الـ RSC او React Server Components كـ Model يهدف لحل مشكلة الـ Network وتحديداً ايه المشاكل الي شايفها فيه وهل هذا الحل يستحق المشاكل الاخرى ولا لا؟
/ Show Notes
37 min

Debugging JS with logs and breakpoints

كل سنة وانتم طيبين، في الحلقة دي بتكلم عن الـ Debugging عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة. وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة.
/ Show Notes
46 min

SEO Best Practices

في الحلقة دي بتكلم عن الـ Search Engine Optimization، ازاي بيشتغل، وازاي بيفرق معانا في نوع الادوات والـ Frameworks الي بنستعملها وايه اهم الـ Best Practices والـ Meta tags الي محتاجين ناخد بالنا منها.
/ Show Notes
47 min

Promises Unwrapped

الـ Promises احد اهم الحاجات الي بنتعامل معاها في الجافاسكربت وغيرت طريقة كتابتنا من 2015 وقبلها كمان. في الحلقة دي بتكلم عن اهم خواص الـ Promise كـ value وازاي كل خاصية منهم يمكن استخدامها بشكل عملي ومفيد في شغلك النهاردا وبعض النصائح مع async/await.
/ Show Notes
37 min

Scroll Driven Animations

في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS حتغير من طريقة تعامنا مع الـ Animations المربوطة بالـ scrolling والتي كانت من ابرز التحديثات للويب الي تم الإعلان عنها في Google I/O 2024. في الحلقة امثلة عملية لحاجات بنعملها كتير بالجافاسكربت والي حتتغير تماماً مع الـ scroll timeline الجديدة وليه انا كشخص مش ضليع بالـ CSS متحمس ليها!
/ Show Notes
43 min

Lying with Optimistic UI

في الحلقة دي بتكلم عن الـ Optimistic Responses كـ Pattern مهم لازم تتعلمه وتعرف تطبقه بسبب اثره علي الـ Performance والـ UX. بناقش ايه الشروط المناسبة ليه، وبدي امثلة عملية عن حاجات انت بتستعملها كل يوم بتطبق الاسلوب دا بشكل ناجح وازاي بيأثر عليك كمستخدم للحاجات دي وكمان امتي مستعملهوش!
/ Show Notes
39 min

Just Enough DevOps

في الحلقة دي بتكلم عن مقدار المعلومات في الـ DevOps و الـ CI/CD الي لازم تكون عندك وتكتسبها كـ Frontend علشان تكون فعال في سوق العمل. بتكلم عن ادوات مختلفة محتاج تتعلمها علشان تقدر تـ Deploy شغلك للناس. فبعدي علي ازاي ترفع بروجكت بسيط علي سيرفر بدائي وبعدين ازاي تبدأ تستعمل Docker و Nginx وغيرهم من الادوات الي بنستعملها يومياً ولا غنى عنهم في شغلنا.
/ Show Notes
48 min

Popovers and Floating UIs

في الحلقة دي بنتكلم عن احد اهم عناصر الويب UI وهي اي حاجة طايرة عندك في الشاشة بنعملها ازاي وايه الصعوبات الي بنواجهها في النوع دا من الـ Components. بتكلم برضو عن ادوات الـ Positioning المتاحة لينا وازاي بنستعملها في سيناريوهات مختلفة. وايه الضوء في اخر النفق الي ممكن يحللنا كل مشاكلنا.
/ Show Notes
43 min

App versioning

في الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه. ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.
/ Show Notes
42 min

The problem with Drag and Drop API

في الحلقة دي بتكلم عن الـ Drag and Drop API واستعملاته المتعددة الي بنشوفها كل يوم في اي سوفتوير بنستعمله ومكوناته الاساسية وامكانياته علي الويب. بنتطرق للـ Events والاختلافات ما بينهم وامتي وازاي تستعمل اياً منهم بكفاءة، واخيراً ليه انا بعتبر الـ API دا من اصعب الـ APIs وايه افضل المكتبات الحالية الي حتوفر عليك وقت ومجهود.
/ Show Notes
49 min

Functional Jargon

في الحلقة دي بتكلم عن الـ Functional Programming وبعض من مصطلحاتها الغريبة وبرمي امثلة عبيطة تفهمك الفكرة وبرمي امثلة تانية عملية اكثر وتوريك انك بالفعل بتستعمل الحاجات دي كل يوم من غير ما تاخد بالك. في نفس الوقت، بربط ما بين المصطلحات دي في صورتها ككود وازاي احنا بنطبقها في الـ Components.
/ Show Notes
43 min

Optimizing Images

في حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم. هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة. سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي تجربة المستخدمين أسرع وأفضل.
/ Show Notes
41 min

TailwindCSS Overview

في الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS. بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا! وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له.
/ Show Notes
39 min

Zero JS with Astro

في الحلقة دي بناخد نبذة عن Astro Framework والافكار المميزة الي قدمها للـ Ecosystem وجعلته الافضل في استخدامات عديدة زي مواقع المحتوي. برضو بنبص ليه الـ Islands architecture ميزته من ناحية السرعة وليه هي حل عبقري لمشاكل الـFrameworks الي بنستعملها.
/ Show Notes
28 min

Abort Signals

في الحلقة دي بنتكلم عن افضل طريقة لو عندك Request واخد وقت اكتر من اللازم وعايز تلغيه، او مجموعة مع بعض وعايز تلغيهم كلهم في نفس الوقت. كل دا مع استخدامات تانية غريبة للـ Abort Signals.
/ Show Notes
40 min

Slow Down, Serve Better

في هذه الحلقة بتناول ثقافة الـ Performance المتمركزة حول الـ Load speed وبالرغم من اهميتها الا انها لا تحكي تجربة المستخدم كاملة وبالتالي سعيك فيها بلا فهم قد يؤدي الي نتائج سلبية.
/ Show Notes
33 min

Time keeping with Temporals

في الحلقة دي بنتكلم عن مشاكل الـ Date في الجافاسكربت وليه مقترح الـ Temporals بيهدف لحل المشاكل دي عن طريق نظام سلس بيمثل اكثر من استخدام لعناصر التواريخ والتحويل ما بينهم بسهولة.
/ Show Notes
54 min

A Tale of Two Queries

في هذه الحلقة باخدكم في لفة حول الـ GraphQL من كذا منظور وبنبص علي المشاكل الي بيحلها ومشاكله وازاي نحلها وشوية نصائح و Best practices. وليه في اعتقادي، مفيش سبب يمنعك من استعماله!
/ Show Notes
35 min

Being practical about PWAs

كانت فكرتي عن الــPWAs غلط من ساعة ما اتعلمتهم واعتقادي ان دا مستقبل الويب، وبعد ما جربت اطبقهم علي شغلي اليومي حسيت ان ملهمش لازمة لان استخداماتهم قليلة ومش لكل انواع الويب سايتس. لكن دلوقتي الـ PWAs بيمثلوا مجموعة افكار وتقنيات تقدر تستعمل منهم ما ينفعك ويفيدك وتترك مالا يعنيك، في الحلقة دي بديك امثلة ويعني ايه PWA دلوقتي.
/ Show Notes
45 min

Immutability

في هذه الحلقة بنتكلم عن الـ Immutability و الـ mutability وازاي بيأثروا علي علي الكود الي احنا بنكتبه وانهي منهم تعتبر خاصية مرغوبة اكثر من التانية ولا كل واحدة ليها نقاط قوة يجب استغلالها في مكانها. وبرضوا بنبص علي الـ Frameworks وازاي بعضهم بيفرض واحدة منهم عليك وليه.
/ Show Notes
22 min

Where did the JAMstack go?

الـ JAMstack كان مصطلح بتسمعه كل يوم في حياتك كفرونت ايند وناس كتيرة كانت بتيجي تقولك تعالا نعمل ويبسايت باستعمال الطريقة دي. لكن دلوقتي الكلمة اختفت تقريباً واتضح انها لم يكن ليها معنى من البداية، ايه القصة؟ - Is Jamstack Officially Finished? - How to Blow Up a Category - Netlify's New Era and The JAMstack Endgame - JavaScript JAM Newsletter
/ Show Notes
39 min

The hoops of array loops

في الحلقة دي بنغطي الـ For loos والفروق ما بين For ... in و For ... of مع بعض التعمق في ازاي بيشتغلو. واكيد في سؤال مهم اجا علي بالك، امتي استعملهم خاصة وانا عندي طرق اسهل مع ال( Array methods زي forEach و map. وبختم بايه حكاية every وازاي ممكن تعملي مشاكل غير متوقعة!
/ Show Notes
31 min

Code splitting and lazy loading

في الحلقة دي حنتكلم عن الـ Code splitting واهدافه والغرض من اننا نـ Lazy Load الكود بتاعنا وازاي اعرف اد ايه من الكود بتاعي ممكن نعمله Split مع Chrome Devtools. وايه آثار ذلك علي الأداء وتجربة المستخدم وهل دا شئ كثرته كويسة ولا لأ؟
/ Show Notes
37 min

Deduping and Batching HTTP Requests

في هذه الحلقة بنتكلم عن اثرين جانبيين للأسلوب الـ Declarative في بناء الويب الي كلنا بنكتب به ونتيجة ذلك علي الـ HTTP Requests وازاي نقدر نحلهم بشوية فهم ولعب مع الـ Promises.
/ Show Notes
27 min

Micro Frontends

في الحلقة دي بتكلم عن الـ Micro Frontends وايه الاسباب الي ادت لنشأة الفكرة وفي نفس الوقت بتكلم عن مشاكلها علي الصعيد التقني والإداري في الشركات. لو انت بتستعمل Micro Frontends في شركتك، شاركنا بتجربتك واسبابك وممكن نناقشها في حلقة اخري.
/ Show Notes
31 min

ESM vs. CommonJS

في هذه الحلقة بنتكلم عن الـ Modules في الجافاسكربت الي بتسمحلنا نكتب كود ونستعمله في اكثر من مكان واكثر من مشروع. عالم الجافاسكربت بيتجه بشكل كبير الي ESM الي هي الستاندرد المتفق عليه، وبدأنا نسيب CommonJS ورانا الي كانت ومازالت عدد كبير من المكتبات بيستعملها. فأنا بقولك ايه المشاكل الي بتحصل وحتحصل بسبب الاتجاه دا والانقسام الكبير الناتج عنه وازاي نعدي الفترة دي باقل مشاكل ممكنة.
/ Show Notes
37 min

Linting and Formatting

في الحلقة دي بنتكلم مشكلة رئيسية بتواجهنا اثناء كتابة الكود سواء لوحدك او مع فريق، ازاي كلنا نكتب كود شبه بعضه في الشكل والجودة بالرغم من اختلاف خبرات وتجارب افراد الفريق. ودا يجيبنا للـ Formatting و الـ Linting ويفرقو ايه عن بعض وازاي ممكن تستعملهم في شغلك في شركتك علي اكثر من مستوي بحيث تضمن مفيش كود غير متناسق يندمج مع باقي الكود. روابط مفيدة: ESlint JSLint JS Standard Prettier TypeScript ESLint Husky lint-staged
/ Show Notes
37 min

Debouncing Madness

توبيك صعب شوية فهات قهوة او شاي معاك. في الحلقة دي بنتكلم عن الـ Debouncing وليه بنستعمله في حاجات كتيرة، وقد تعتقد انه دايماً بيعتمد علي Delay ثابت ولكن زي ما حتكتشف في الحلقة حتلاقي ان ممكن نخليه يعتمد علي اي حاجة احنا عايزنها وازاي دا بيفرق معاك في الكود الي بتكتبه.
/ Show Notes
41 min

Caching

في الحلقة دي بنتكلم عن الـ Caching في الفرونت ايند وايه الطرق والادوات المتاحة لينا علشان نحسن الأداء وحاجات معينة في الويب ابليكيشنز بتاعتنا. حنتكلم برضو عن الاستراتجيات الي تقدر تستعملها في الـ Caching وازاي دا بيأثر علي تجربة المستخدم في النهاية وايه انسب استراتيجية بشكل عام.
/ Show Notes
43 min

Confidence by Testing

في الحلقة دي حنتكلم عن الـ Testing وايه الهدف منه اصلاً. حنشوف ايه انواع الـ Tests المختلفة والي بقت من متطلبات شغلنا النهاردا. وكالعادة ليا اراء معينة قد تتفق او تختلف معها.
/ Show Notes
26 min

Monitoring and Observability

انت دلوقتي عملت deploy للأبليكيشن بتاعك، وبعدين؟ هل هو شغال عند الناس التانيه ولا لا؟ هل في ايرورز بتطلع؟ ليه الناس بتقول عليه بطئ او مبيحملش؟ وليه الناس دي بتسأل علي feature انت عاملها بقالك شهور! في الحلقة دي بنتكلم عن موضوع يتم تجاهله كثيراً في الفرونت ايند. ازاي تراقب الابليكشن بتاعك علي اجهزة الناس التانيه وازاي تستفيد من دا انك تحسن من الابليكشن بتاعك وازاي دا نص الشغلانه التاني الي محدش بيجيب سيرته كتير.
/ Show Notes
35 min

Fetch!

مؤخرا شفت ناس لسه بتستعمل XHR و Axios في ٢٠٢٣ وعلشان كدا في الحلقة دي بنتكلم عن Fetch وليه لازم تستعملها بدلاً من اي مكتبة تانيه. بناقش الاختلافات وميزات هذه الاختلافات وايه علاقتها بالStreaming والسبب الوحيد الي يخليك ترجع لXHR.
/ Show Notes
32 min

Headless Components

بنتكلم عن الHeadless components وايه الفروق بينها وبين حاجات مشابهة زي Renderless components وامتي استعملهم واعتقاداتي الشخصية عن مدي قدرتهم علي حل المشكلة الازلية بتاعة Buy vs. Build. Radix UI React-aria
/ Show Notes
46 min

Web Workers Overview

في الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي.
/ Show Notes
43 min

UI Libraries: When to Avoid

في الحلقة دي بنتكلم عن الUI Libraries والمشاكل الي بيحلوها والمشاكل الي بيقدموها ليك كدين حتدفعه بعدين وايه محاولات الEcosystem بتاعنا في حل كل هذه المشاكل وليه مفيش حل واحد سحري.
/ Show Notes
40 min

State management

محاولة جريئة لتلخيص ال state management في اربعين دقيقة مروراً بتفاصيل كثيرة زي ال persistence وال async state وغيرهم من الحفر الي حفرناها لنفسنا في الفرونت ايند. يعني ايه اصلاً state وليه لازم نديرها؟ ايه الحلول الي بنستعملها في شغلنا النهاردا وايه احدث ما توصله العقل البشري للنقاشين الي زينا في هذا الموضوع.
/ Show Notes
39 min

Bundlers overview

في الحلقة دي بنتكلم عن تاريخ الBundling في الويب ورحلة تطور الTooling فيما يتعلق بتلزيق ملفات الجافاسكربت مع بعضها حتي يومنا هذا. بنتكلم عن Vite, Webpack, Rollup وغيرهم من الادوات الضرورية في شغلنا في الفرونت ايند والمستقبل شكله عامل ازاي.
/ Show Notes
29 min

SSR vs. SSG vs. SPA

غالبا قد سمعت مؤخراً عن مصطلحات زي SSR او SSG او SPA او حتي Meta-framework وعلاقتهم في ازاي بنوصل الكود بتاعنا للمستهلك. في الحلقة دي بنحاول نفك طلاسم المصطلحات المختلفة وايه المشاكل الموجودة وحلولها.
/ Show Notes
32 min

Type safety

حنتكلم عن الTypes وليه محتاجينها في شغلنا اكثر من قبل كدا و ليه الTypeScript هي افضل حاجة ممكن تضيفها لمشاريعك القادمة والحالية. برضو حنتكلم عن ازاي تحول مشروعك من JavaScript لTypeScriptبشكل آمن وسريع وحنختم بشوية نصائح عن ايه الي تاخد بالك منه وتركز عليه وانت بتتعلم TypeScript.
/ Show Notes
31 min

Expecting errors

مفيش حاجة بتمشي عدل ابداً في شغلنا، وبالتالي لازم نتعلم ازاي نتوقع المشاكل الي ممكن تحصل وازاي نتعامل معها ونكتشفها. بتكلم عن الحالات الي ممكن انت تشوفها كأيرور التي يجب معاملتها انها جزء لا يتجزئ من الابليكشن بتاعك. هي الايرورز الي غالبا مش بتجيلك في ديزاين او بتتقالك في ميتنج وازاي هي Business logic اكتر منها Errors. من وجهة نظري، انت كفرونت ايند اكتر شخص مؤهل لاكتشاف الحالات دي والتعامل معها. الحلقة دي قد تكون مفيدة لناس كتير ومش بالضرورة الفرونت ايند بس.
/ Show Notes
38 min

Signals and reactivity

قد تكون سمعت عن السيجنالز مؤخرا وجاء علي بالك بعض الاسئلة مثل جت منين وليه كل فريمورك عايز منها حته. وليه بتوع فيو مقموصين منها. في الحلقة دي بحاول اجيب الشريط من اوله وبنشوف الافكار المختفلة عن الرياكتيفتي وما يميز السيجنالز تحديداً عن غيرها. بعض المصادر: حلقة تيك بودكاست مع احمد الامام Angular Signals Solid reactive primitives Vue primitives and connection to signals
/ Show Notes
4 min

Intro - ايه دا

هو بودكاست عبارة عن تفريغ افكار في مجال الجافاسكربت والبرمجة عموما بالعربي بشكل اسبوعي.
/ Show Notes