Episodes
في الحلقة دي بتكلم عن الـ Drag and Drop API واستعملاته المتعددة الي بنشوفها كل يوم في اي سوفتوير بنستعمله ومكوناته الاساسية وامكانياته علي الويب. بنتطرق للـ Events والاختلافات ما بينهم وامتي وازاي تستعمل اياً منهم بكفاءة، واخيراً ليه انا بعتبر الـ API دا من اصعب الـ APIs وايه افضل المكتبات الحالية الي حتوفر عليك وقت ومجهود. لينكات مفيدة: Drag and Drop API | MDN File drag and drop | MDN DataTransfer | MDN Vue Draggable Plus Drag and Drop by Formkit DnD Kit Pragmatic Drag and Drop
Published 04/21/24
في الحلقة دي بتكلم عن الـ Functional Programming وبعض من مصطلحاتها الغريبة وبرمي امثلة عبيطة تفهمك الفكرة وبرمي امثلة تانية عملية اكثر وتوريك انك بالفعل بتستعمل الحاجات دي كل يوم من غير ما تاخد بالك. في نفس الوقت، بربط ما بين المصطلحات دي في صورتها ككود وازاي احنا بنطبقها في الـ Components. لينكات مفيدة: Functional Light JS Currying A very old presentation I did on functional JS Vue.js Scoped Slots Children Props Untyped episode on Immutability Untyped episode on Array Methods
Published 04/15/24
في حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم. هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة. سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي تجربة المستخدمين أسرع وأفضل. لينكات مفيدة: Responsive Images | MDN Largest Contentful...
Published 03/26/24
في الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS. بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا! وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له. لينكات مفيدة: TailwindCSS In defense of utility first CSS Adding Tailwind Variants TailwindCSS Intellisene for VSCode
Published 03/17/24
في الحلقة دي بناخد نبذة عن Astro Framework والافكار المميزة الي قدمها للـ Ecosystem وجعلته الافضل في استخدامات عديدة زي مواقع المحتوي. برضو بنبص ليه الـ Islands architecture ميزته من ناحية السرعة وليه هي حل عبقري لمشاكل الـFrameworks الي بنستعملها. لينكات مفيدة: Astro.js Astro Islands Sharing state with nanostores Zod Content collections View transitions API View transitions
Published 03/05/24
في الحلقة دي بنتكلم عن افضل طريقة لو عندك Request واخد وقت اكتر من اللازم وعايز تلغيه، او مجموعة مع بعض وعايز تلغيهم كلهم في نفس الوقت. كل دا مع استخدامات تانية غريبة للـ Abort Signals. لينكات مفيدة: XHR - MDN AbortController - MDN AbortSignal - MDN Aborting Fetch - JavaScript Info Event Target signal option - MDN Close Watcher API - Logaretm.com
Published 02/18/24
في هذه الحلقة بتناول ثقافة الـ Performance المتمركزة حول الـ Load speed وبالرغم من اهميتها الا انها لا تحكي تجربة المستخدم كاملة وبالتالي سعيك فيها بلا فهم قد يؤدي الي نتائج سلبية. لينكات مفيدة: Core Web Vitals Interaction to next paint Page speed insights
Published 02/12/24
في الحلقة دي بنتكلم عن مشاكل الـ Date في الجافاسكربت وليه مقترح الـ Temporals بيهدف لحل المشاكل دي عن طريق نظام سلس بيمثل اكثر من استخدام لعناصر التواريخ والتحويل ما بينهم بسهولة. لينكات مفيدة: Temporals Proposal GitHub Temporals docs Temporals cookbook Temporals polyfill implementation
Published 02/04/24
في هذه الحلقة باخدكم في لفة حول الـ GraphQL من كذا منظور وبنبص علي المشاكل الي بيحلها ومشاكله وازاي نحلها وشوية نصائح و Best practices. وليه في اعتقادي، مفيش سبب يمنعك من استعماله! لينكات مفيدة: Ahmad Elemam's Tech Podcast: GraphQL from Zero to Zero GraphQL org Authentication and Authorization in GraphQL My old internal presentation on Lessons learned from GraphQL
Published 01/28/24
كانت فكرتي عن الــPWAs غلط من ساعة ما اتعلمتهم واعتقادي ان دا مستقبل الويب، وبعد ما جربت اطبقهم علي شغلي اليومي حسيت ان ملهمش لازمة لان استخداماتهم قليلة ومش لكل انواع الويب سايتس. لكن دلوقتي الـ PWAs بيمثلوا مجموعة افكار وتقنيات تقدر تستعمل منهم ما ينفعك ويفيدك وتترك مالا يعنيك، في الحلقة دي بديك امثلة ويعني ايه PWA دلوقتي. لينكات مفيدة: Web.dev PWA articles PWA display modes PWA installation criteria PWA core checklist Offline UX design guidelines
Published 01/21/24
في هذه الحلقة بنتكلم عن الـ Immutability و الـ mutability وازاي بيأثروا علي علي الكود الي احنا بنكتبه وانهي منهم تعتبر خاصية مرغوبة اكثر من التانية ولا كل واحدة ليها نقاط قوة يجب استغلالها في مكانها. وبرضوا بنبص علي الـ Frameworks وازاي بعضهم بيفرض واحدة منهم عليك وليه. لينكات مفيدة: حلقة مقارنة الـ Frameworks مع احمد الأمام Immer Mutable - MDN Definition Mutability vs Immutability in JavaScript
Published 01/14/24
الـ JAMstack كان مصطلح بتسمعه كل يوم في حياتك كفرونت ايند وناس كتيرة كانت بتيجي تقولك تعالا نعمل ويبسايت باستعمال الطريقة دي. لكن دلوقتي الكلمة اختفت تقريباً واتضح انها لم يكن ليها معنى من البداية، ايه القصة؟ - Is Jamstack Officially Finished? - How to Blow Up a Category - Netlify's New Era and The JAMstack Endgame - JavaScript JAM Newsletter
Published 01/07/24
في الحلقة دي بنغطي الـ For loos والفروق ما بين For ... in و For ... of مع بعض التعمق في ازاي بيشتغلو. واكيد في سؤال مهم اجا علي بالك، امتي استعملهم خاصة وانا عندي طرق اسهل مع ال( Array methods زي forEach و map. وبختم بايه حكاية every وازاي ممكن تعملي مشاكل غير متوقعة! لينكات مفيدة: Enumerability and ownership of properties ES2023 New array methods JavaScript WTF: Why does every() return true for empty arrays? Antecedent Vacuous Truth
Published 12/25/23
في الحلقة دي حنتكلم عن الـ Code splitting واهدافه والغرض من اننا نـ Lazy Load الكود بتاعنا وازاي اعرف اد ايه من الكود بتاعي ممكن نعمله Split مع Chrome Devtools. وايه آثار ذلك علي الأداء وتجربة المستخدم وهل دا شئ كثرته كويسة ولا لأ؟ لينكات مفيدة: Dynamic imports - Vite.js Async components - Vue.js Lazy - React Astro Client Directives preloadComponent - Nuxt.js
Published 12/17/23
في هذه الحلقة بنتكلم عن اثرين جانبيين للأسلوب الـ Declarative في بناء الويب الي كلنا بنكتب به ونتيجة ذلك علي الـ HTTP Requests وازاي نقدر نحلهم بشوية فهم ولعب مع الـ Promises. لينكات مفيدة: - Request Deduplication - villus source - Request Batching - villus source
Published 12/11/23
في الحلقة دي بتكلم عن الـ Micro Frontends وايه الاسباب الي ادت لنشأة الفكرة وفي نفس الوقت بتكلم عن مشاكلها علي الصعيد التقني والإداري في الشركات. لو انت بتستعمل Micro Frontends في شركتك، شاركنا بتجربتك واسبابك وممكن نناقشها في حلقة اخري.
Published 12/03/23
في هذه الحلقة بنتكلم عن الـ Modules في الجافاسكربت الي بتسمحلنا نكتب كود ونستعمله في اكثر من مكان واكثر من مشروع. عالم الجافاسكربت بيتجه بشكل كبير الي ESM الي هي الستاندرد المتفق عليه، وبدأنا نسيب CommonJS ورانا الي كانت ومازالت عدد كبير من المكتبات بيستعملها. فأنا بقولك ايه المشاكل الي بتحصل وحتحصل بسبب الاتجاه دا والانقسام الكبير الناتج عنه وازاي نعدي الفترة دي باقل مشاكل ممكنة.
Published 11/26/23
في الحلقة دي بنتكلم مشكلة رئيسية بتواجهنا اثناء كتابة الكود سواء لوحدك او مع فريق، ازاي كلنا نكتب كود شبه بعضه في الشكل والجودة بالرغم من اختلاف خبرات وتجارب افراد الفريق. ودا يجيبنا للـ Formatting و الـ Linting ويفرقو ايه عن بعض وازاي ممكن تستعملهم في شغلك في شركتك علي اكثر من مستوي بحيث تضمن مفيش كود غير متناسق يندمج مع باقي الكود. روابط مفيدة: ESlint JSLint JS Standard Prettier TypeScript ESLint Husky lint-staged
Published 11/19/23
توبيك صعب شوية فهات قهوة او شاي معاك. في الحلقة دي بنتكلم عن الـ Debouncing وليه بنستعمله في حاجات كتيرة، وقد تعتقد انه دايماً بيعتمد علي Delay ثابت ولكن زي ما حتكتشف في الحلقة حتلاقي ان ممكن نخليه يعتمد علي اي حاجة احنا عايزنها وازاي دا بيفرق معاك في الكود الي بتكتبه. لينكات مفيدة: Debouncing and Throttling Explained Through Examples throttle-debounce npm library Leading vs Trailing edge debouncing debounceAsync implementation debounceNextTick implementation
Published 10/08/23
في الحلقة دي بنتكلم عن الـ Caching في الفرونت ايند وايه الطرق والادوات المتاحة لينا علشان نحسن الأداء وحاجات معينة في الويب ابليكيشنز بتاعتنا. حنتكلم برضو عن الاستراتجيات الي تقدر تستعملها في الـ Caching وازاي دا بيأثر علي تجربة المستخدم في النهاية وايه انسب استراتيجية بشكل عام. لينكات مفيدة: Cache API IndexedDB best practices Cache control headers (Browser cache) Udacity offline web apps course Service worker recipes (Cache strategies)
Published 10/01/23
في الحلقة دي حنتكلم عن الـ Testing وايه الهدف منه اصلاً. حنشوف ايه انواع الـ Tests المختلفة والي بقت من متطلبات شغلنا النهاردا. وكالعادة ليا اراء معينة قد تتفق او تختلف معها. لينكات مفيدة: MSW (API mocking framework) Testing RNGs Playwright Pact (Contract testing framework) Web Workers X (Twitter) Space EgyptJS
Published 09/24/23
انت دلوقتي عملت deploy للأبليكيشن بتاعك، وبعدين؟ هل هو شغال عند الناس التانيه ولا لا؟ هل في ايرورز بتطلع؟ ليه الناس بتقول عليه بطئ او مبيحملش؟ وليه الناس دي بتسأل علي feature انت عاملها بقالك شهور! في الحلقة دي بنتكلم عن موضوع يتم تجاهله كثيراً في الفرونت ايند. ازاي تراقب الابليكشن بتاعك علي اجهزة الناس التانيه وازاي تستفيد من دا انك تحسن من الابليكشن بتاعك وازاي دا نص الشغلانه التاني الي محدش بيجيب سيرته كتير.
Published 09/10/23
مؤخرا شفت ناس لسه بتستعمل XHR و Axios في ٢٠٢٣ وعلشان كدا في الحلقة دي بنتكلم عن Fetch وليه لازم تستعملها بدلاً من اي مكتبة تانيه. بناقش الاختلافات وميزات هذه الاختلافات وايه علاقتها بالStreaming والسبب الوحيد الي يخليك ترجع لXHR. لينكات مفيدة: Fetch API You may not need axios Fetch download progress workaround Abort controller
Published 09/03/23
بنتكلم عن الHeadless components وايه الفروق بينها وبين حاجات مشابهة زي Renderless components وامتي استعملهم واعتقاداتي الشخصية عن مدي قدرتهم علي حل المشكلة الازلية بتاعة Buy vs. Build. Radix UI React-aria
Published 08/27/23
في الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي. لينكات مفيدة: Sharing Websocket connections Service workers lifecycle Partytown Concurrency worker scaling example Web workers API | MDN Transferable objects | MDN
Published 08/20/23