Abdelrahman Awad - Podcast Details

Shows

Untyped Repacking the Webفي الحلقة دي هنشوف ليه منظومة الـ bundling بتتعاد كتابتها بالكامل دلوقتي.الأدوات الجديدة زي Rspack وRolldown وOxc وTurbopack مش مجرد “بدائل أسرع”، دي إعادة التفكير في طريقة البناء من الأساس.هنمشي على التغييرات الجوهرية: الاعتماد على Rust و parallelism، تقليل cost الـ plugins، ومعالجة مشاكل بقالها سنين في Webpack والجيل القديم.الفكرة هنا إن الانتقال للأدوات دي مش رفاهية ولا مجرد تحسين أداء… ده الاتجاه الطبيعي لقدام، خصوصًا مع تعقيد المشاريع الكبيرة وضغط السايز والسرعة.لو عايز تشوف ليه المستقبل مش هيستنى الأدوات القديمة، وإزاي الجيل الجديد بيبني أساس مختلف للويب، يبقى الحلقة دي هتفتحلك الصورة كاملة.لينكات مفيدة:RolldownesbuildViteRspackTurbopackOxcRolldown REPL

2025-12-2144 min

Untyped Peeranormal Activityفي الحلقة دي هنتكلم عن الجانب “المرعب” شوية في الـ Package Managers 👻 ليه أحيانًا تلاقي نسخة تانية من React مستخبية، أو dependecy في مكان غريب؟حنخش في رحلة تاريخية حوالين الـ Package Managers، ايه المشاكل الي بيحلوها، هنفهم يعني إيه peer dependencies، وإزاي الـ hoisting بيغيّر شكل الـ node_modules من غير ما تاخد بالك، وليه npm و Yarn ساعات بيسيبوا الدنيا تفلت وايه الي بيخلي pnpm مختلف.الحلقة كلها عن إيه اللي بيحصل “ورا الكواليس” لما تعمل install، وليه الاختيارات دي بتأثر على استقرار مشروعك من غير ما تحس.لينكات مفيدة:bowerpnpm Documentationnpm DocumentationYarn Classic (v1) DocsYarn Berry (v2+) DocsBehind The Scenes of Bun Install

2025-12-0847 min

Untyped The Compatibility Hunger Gamesالاعتقاد الشائع هو إن الجافاسكربت “بيشتغل في أي حتّة”، السيرفر والمتصفح، بس الحقيقة دلوقتي إنك لو شغّلت نفس السطر في مكانين مختلفين… في احتمال كويس إنه يبوظ في واحد منهم.في الحلقة دي، هنتكلم عن ليه بقى عندنا بيئات تشغيل كتير، وكل واحدة ليها مزاجها واولوياتها، وليه حاجات بسيطة زي fetch أو الـ File System ممكن تشتغل تمام هنا وتنهار هناك. وهنفهم إزاي شغل السيرفر بقى بيتقسم ما بين اللي بيقوم في جزء من الثانية واللي بيصحى يشرب قهوته الأول.لينكات مفيدة:Deno Web APIsBunDeno.jsonBehind the scenes of Bun install | BunEdge Runtime | VercelHow Workers Work | CloudflareCloudflare Compatability FlagsWinterTC

2025-11-2346 min

Untyped npm install backdoorفي الحلقة دي بنتكلم عن الهجمات اللي بقت بتحصل في الـ supply chain خصوصًا على مكتبات الـ npm. إزاي كود بسيط بيستخدمه ملايين المطورين ممكن يتقلب لفخ يسرّب بيانات أو يفتح باب لهجوم وانت مش واخد بالك. هنفتكر شوية من أشهر الوقائع اللي هزت الـEcosystem مؤخراً ونشوف الدروس المستفادة. كمان هنتكلم عمليًا: إيه دورك كمؤلف مكتبة علشان تحمي المشروع بتاعك وإيه اللي تقدر تعمله كمستهلك يخلي استخدامك آمن قدر الإمكان.لينكات مفيدة:Nx Postmortemnpmjs Docs: Trusted PublishersAnatomy of a Billion-Download NPM Supply-Chain AttackOops, No Victims: The Largest Supply Chain Attack Stole 5 CentsPrimeTime Video

2025-09-1453 min

Untyped Merge and Emergeعايز تبدأ تساهم في الـ open source ومش عارف منين؟ في الحلقة دي هنتكلم إزاي تعمل أول خطوة، وتدخل المجتمع، وتخلي الكود بتاعك يبان للناس كلها. من أول fork لحد أول pull request، هتتعلم إزاي ممكن الشغل ابو بلاش دا يفتح لنفسك أبواب جديدة في الكارير وازاي دا مرتبط بدوافعك انك بتعمله عن حب مش عن مقابل.لينكات مفيدة:The Developer Road to Open Source World بالعربيThe Developer Road to Open Source Part 2

2025-08-3136 min

Untyped Climbing the Pyramid Schemeفي سوق الـ Tech في مصر، كل الناس بقت "Senior" حتى لو لسه مكمّلينش سنة! العناوين بقت أكبر من الخبرة، والمرتبات ساعات تبقى أوهام زي السراب.في الحلقة دي هنتكلم عن الـ pyramid scheme بتاع الـ titles، ليه التعويضات مش ماشية مع المسميات، وإزاي السلم الوظيفي ساعات بيقفلك الطريق بدل ما يفتحلك. سواء ماشي في سكة الـ IC أو داخل على Management، هتلاقي إن مش كل هرم بيوصل للقمة.

2025-08-2455 min

Untyped Deployed and Forgottenزمان كنا بنعمل ديبولويمِنت للفرونت إند بكم أمر بسيط على Nginx أو سيرفر عادي وخلاص.دلوقتي مع كل الادوات والـ platforms الجديدة بقينا بنعتمد على أوتوميشن زيادة ونسينا الأساسيات. النسيان ده مش بس بيخلينا نفقد السيطرة، ده كمان بيكلفنا فلوس أكتر من اللازم.في الحلقة دي هنتكلم عن إزاي نرجع نفكر في الـ Deployment كمهارة أساسية، إزاي نستخدمها كـ cost optimization حقيقي للبزنس، وإزاي نقدر ندخل لوجيك ذكي بين الـ stacks.الحلقة دي هي حلقة عن النوستالجيا، التوفير، وفن Deployment اللي محتاجين نفتكره من جديد.

2025-08-1739 min

Untyped A Whirlwind Migrationفي الحلقة دي حتكلم عن TailwindCSS v4 وايه الجديد فيه ويفرقه عن الاصدارات الي فاتت.حغطي ازاي تحدث ليه وافضل الطرق لذلك وايه الي تاخد بالك منه في العملية دي. كمان بشارك معاكم ايه الي عجبني فيه وايه الي ضايقني منه ونصايحي لازاي تستعمله في المستقبل.لينكات مفيدة:Tailwind v4Lighting CSSWindiCSSUnoCSSUpgrade Guide`@apply` issue with scoped CSS

2025-07-3135 min

Untyped Setting Boundariesفي الحلقة دي هنتكلم عن موضوع بسيط في شكله لكن ليه تأثير ضخم.ليه مهم جدًا تبقى فاهم الـ boundaries بتاعة الداتا اللي بتتعامل معاها؟ وإزاي تجاهل الحدود دي ممكن يفتح عليك أبواب الـ edge cases والـ bugs اللي بتبوظ الدنيا!لينكات مفيدة:One Page at a Time | Untyped

2025-06-2929 min

Untyped Nothing to See Hereفي الحلقة دي من Untyped، بنتكلم عن null و undefined وكل القيم اللي بتعتبر فالصي في JavaScript. ليه وجودهم ساعات بيسبب مشاكل؟ وإزاي لغات تانية زي Rust و TypeScript بتتعامل مع الغياب ده بشكل أوضح من خلال أنواع زي Option و Result؟ كمان هنشوف إزاي المفاهيم دي بدأت تظهر في الجافاسكريبت برضه، سواء من خلال result objects أو أنماط بتفرض التعامل الصريح مع الغلطات.

2025-06-0940 min

Untyped Big Tech, Big Cuts, Small Contextفي الحلقة دي، بنتكلم عن تسريحات الموظفين في شركات زي مايكروسوفت، والربط السريع اللي ناس كتير بتعمله بينها وبين الذكاء الاصطناعي. هل فعلاً الـAI هو السبب؟ ولا في عوامل تانية زي التوظيف الزايد، والتغيرات الاقتصادية؟ بنحاول نفهم الصورة كاملة بعيد عن الهلع والتبسيط الزايد.

2025-05-1834 min

Untyped LLMaoفي الحلقة دي من Untyped، بنتكلم عن هل فعلاً الـ LLMs ممكن تاخد مكان مبرمجي الـ frontend؟ ولا كل الضجة دي أوفر؟هنحكي عن اللي فعلاً بتعمله الأدوات دي، وازاي ممكن تساعد، بس في نفس الوقت ليه لسه فيه حاجات مافيش AI بيعرف يتعامل معاها — من تجربة المستخدم لحد قرارات البزنس واكثر.

2025-05-1154 min

Untyped Query-ous Behaviorفي الحلقة دي، بنتكلم عن إزاي تقدر تحافظ على الـ context بتاع اليوزر في الويب أب من غير ما الدنيا تبوظ بعد ما يعمل refresh أو يبعَت اللينك لحد تاني.بنشرح إمتى تستخدمهم، إمتى لأ، وإزاي تربطهم بـ localStorage لو حبيت. كمان بنعدّي على شوية سيناريوهات زي forms، filters، وpagination.لينكات مفيدة:URLSearchParams - MDNHistory API - MDNLocation API - MDN

2025-05-0633 min

Untyped One Schema to Rule Them Allفي الحلقة دي، هنتكلم عن فكرة الـ Standard Schemas وإزاي تقدر تكتب تعريف واحد للـ Schema وتبدّل بين مكتبات زي Zod و Valibot من غير ما تغيّر سطر واحد في الكود بتاعك. هنعرف ليه الموضوع ده مهم، وإزاي بيسهّل عليك تفضّل مرن ومش مربوط بمكتبة معينة.لينكات مفيدة:Standard Schema | GitHubZod.devvalibot.devarktype.ioStandard schema implementationsStandard schema consumers

2025-04-2724 min

Untyped Rolling in the Deepفي الحلقة دي حنلف وندور حوالين Rolldown، وهو احد احدث الـ Bundlers الي ظهرت مؤخراً في ساحة الجافاسكربت.حتكلم عن ليه كنا محتاجينه، يقرب ايه لـ Rollup، وهل كلنا حنستعمله غصب عننا في Vite، وإزاي بيخلي الـ builds أخف وأسرع. وهل فعلاً يستاهل الهايب؟لينكات مفيدة:RolldownRollupBundlers overview | Untyped.fmESM vs. CommonJS | Untyped.fmShaking Things Up | Untyped.fm

2025-03-2338 min

Untyped First Rule of File Clubفي الحلقة دي بتكلم عن الـ Files في الجافاسكربت وازاي بنتعامل معها وايه الـ Limitations الكتيرة حواليها وحوالين الـ Input[type=file].حغطي الـ Best practices وايه الحاجات الي ممكن تقع فيها لو مش واخد بالك!لينكات مفيدة:Input[type=file] | MDNURL.createObjectURLFile | MDNBlob | MDNDropzone.devUploadThingFormwerk File FieldsThe problem with Drag and Drop API | Untyped.fm

2025-03-1633 min

Untyped The Scrollmill Workoutفي الحلقة دي بتكلم عن الـ Virtual Lists والـ Virtual Scrolling!حنغطي تفاصيل مبدأ الـ Windowing وازاي ممكن تعمله بنفسك، وايه العقبات الي حتواجهك والافتراضات الي لازم تضعها علشان تقدر تعملها.حنتكلم برضوا عن الـ Performance وازاي ممكن تحسنه او تضره، وايه عواقب التكنيك دا علي الـAccessibility وازاي ممكن تتحل.لينكات مفيدة:Virtual Lists | Patterns.devVue Talks #6TanStack VirtualuseVirtualList | VueUse

2025-03-0938 min

Untyped A Date to Remember - Part 2في الحلقة دي بكمل كلام عن الـ Date fields وبالاخص جزء الـ. UI وبعضاً من الـ UX وازاي تعمل Research لحاجة زي كدا وايه المراجع الي المفروض ترجعلها.برضو بتكلم عن ازاي خاصية بسيطة زي قيم Min و Max للـ Field ممكن تؤذي تجربة المستخدم لو مش معمول حساب الحالات الجانبية.لينكات مفيدة: Input date | MDN useDateField | React Aria Date fields | Formwerk Calendars | Formwerk

2025-02-2328 min

Untyped A Date to Remember - Part 1في الحلقة دي حتكلم عن رحلتي في بناء Custom Date Fields اثناء شغلي علي Formwerk.حتكلم عن المشاكل الحالية في الـ Date Object ودعم التقويمات المختلفة زي التقويم الهجري وبرضو ا فروق التوقيتات والأهم في كل دا وهو ازاي نخزن قيمة تاريخ وازاي غرضك من التاريخ يفرق كتير في ازاي انت بتخزنه.لينكات مفيدة: Standard Date Object | MDN The Problem with Time & Timezones - Computerphile Temporal API | MDN JavaScript Temporal is coming Time keeping with Temporals | Untyped @internationalized/date

2025-02-1746 min

Untyped The Monorepo Monologueفي حلقة النهارده هنتكلم عن موضوع مهم في تطوير الويب، وهو الـ "Monorepo". ببساطة، المونوريپو هو مكان واحد بنحط فيه مشاريع كتير بتاعتنا، بدل ما كل مشروع يبقى له Repository خاص بيه. يعني بدل ما يبقى عندك كذا "بيت" للمشاريع، كلهم بيبقوا في "بيت العيلة".طيب، ليه نعمل كده؟ فيه فوايد كتير. أول حاجة، الكود بيتشارك بسهولة بين المشاريع المختلفة. لو عندك Component كويس، تقدر تستخدمه في أكتر من مشروع من غير ما تكرره. تاني حاجة، إدارة الـ Dependencies بتبقى أسهل بكتير، ومشاكلها أقل. كمان، التغييرات اللي بنعملها في الكود بتبقى متناسقة بين كل المشاريع، وده بيقلل المشاكل. ده غير إن الشغل بيبقى أسرع، والتيم بيقدر يشتغل مع بعض بشكل أحسن.لكن، زي أي حاجة، المونوريپو له تحدياته. مهم برضو نختار الأدوات المناسبة، زي Nx أو Turborepo أو pnpm workspaces، كل أداة ليها مميزاتها.في الحلقة دي، هنشرح كل ده بالتفصيل، وهنعرف إمتى نستخدم المونوريپو وإمتى لأ!لينكات مفيدة:NxTurborepopnpm workspacesLerna

2025-02-1031 min

Untyped Coming up with Formwerkفي الحلقة دي بتكلم عن بروجكت Open-source نشرته مؤخراً اسمه Formwerk. الحلقة مش Technical لكنها بتتطرق لازاي بحدد اني اعمل مشروع open-source جديد ولا اكمل على مشروع قديم، ازاي بحدد ان لما اصغر الـScope اقدر اقدم اكثر للمستخدم في الحتة الصغيرة الي انا بعملها في المشروع. حابين اقتراحتكم ومشاركتكم في المشروع! لينكات مفيدة: Headless Skinless Boneless Lifeless UI Formwerk

2025-01-0542 min

Untyped Shaking Things Upفي الحلقة دي بتكلم عن الـ Tree Shaking ونتج ازاي وليه هو حاجة مرغوبة في شغلنا النهاردا سواء كمطورين مكتبات او في شغلنا العادي. بعرفك ايه الحاجات الي ممكن تمنع الكود بتاعك انه يتعمله Tree Shaking وايه القواعد بتاعته وليه اصلاً الموانع كدا وازاي تغيير بسيط في الـ Syntax او شكل الكود يقدر يأثر علي ذلك. لينكات مفيدة: MDN Entry on Tree Shaking Tree shaking | Rollup Tree Shaking Reference Guide | Smashing Magazine Reduce JavaScript payloads with tree shaking | Web.dev Tree Shaking | Rspack

2024-12-0847 min

Untyped One Page at a Timeفي الحلقة دي بتكلم عن الـ Pagination في الفرونت ايند وايه المشكلة الأساسية الي بيعالجها وليه هو من اول الحاجات الي لازم تضع قواعدها مع الباكيند. بغطي الاشكال المختلفة للـ Pagination والفروقات بين كل Model والتاني وازاي بيفرقوا في تجربة المستخدم في النهاية مع بعض الامثلة العملية لامتي تستعمل اياً منهم.

2024-11-2744 min

Untyped Best Friends Forever?تخيل الموقف: بتكلم صديقك الـ Backend وعايزه يجمعلك داتا من ٢ Endpoint مع بعض لكن هو رافض علشان دا مش Restful API صح والمبادئ المعينة الي لا تعني لك شئ في الفرونت تحتم عليه انه ميعملش كدا. سيناريو تاني، مش عارف تعمل ايه بالـ JWT ولا تخزنه فيه او تعمله Refresh بشكل مناسب ازاي. في الحلقة دي بنكتشف فكرة الـ. Backend for Frontend وازاي بتحل احد مشاكل الـ Architecture الكبيرة في السيناريوهات دي وازاي هي مش بعيدة عنك النهاردا وتقدر توظفها للفرونت ايند بتاعك.

2024-11-1737 min

Untyped Cache Me If You Canهل طورت عادة انك تفتح اللينكات في tabs جديدة بسبب انك عارف انك لو دوست Back مش حيرجعك مكانك في الصفحة السابقة؟ ايه رأيك لو قولتلك انك تقدر تتحكم بدا كـ developer؟ في الحلقة دي بتكلم عن الـ Back/forward cache وازاي كانت مبهمة لفترة لكن مؤخراً بقا عندنا APIs وادوات نقدر نستعملها علشان نفعلها في الويب ابليكشنز بتاعتنا وكمان نقدر نعملها debugging ونقيس مدى فعاليتها علشان نستغلها لتحسين اداء صفحات الويب بتاعتنا بشكل ملحوظ. لينكات مفيدة: bfcache | web.dev pageshow and pagehide events Page Life Cycle API Abort Signals | Untyped.fm

2024-11-0539 min

Untyped Of CORS You’re Blocked!في الحلقة دي بتكلم عن موضوع قد يكون معقد لكن في حقيقته هو بسيط، لكنه معقد ناس كتيرة في مجالنا علي الجبهتين سواء فرونت ايند او باك ايند. في الحلقة دي باخد الموضوع من اوله وبشرح ليه فهمك للـ CORS بشكل صحيح يقدر يخليك تحل مشاكله بشكل اسرع وفي نفس الوقت يخليك تقدر تستعمل كأداة Security. لينكات مفيدة: CORS | MDN Origin | MDN Glossary

2024-10-2728 min

Untyped Signals Proposalفي الحلقة دي ببص علي الـ Signals Proposal على TC39 وبشرح ليه من وجهة نظري دي اضافة تاريخية للجافاسكربت وحتفرق معانا ازاي كلنا بغض النظر عن ايه الـ Framework الي بنستعمله. الحلقة دي برعاية Prisma شكر خاص لحسام حمدي على الاداء الصوتي للاعلان. لينكات مفيدة: Signals Proposal Solid Signals Vue Signal Implementation Angular Signals Preact Signals React Signals 😜

2024-10-0636 min

Untyped Keyboard Eventsفي الحلقة دي بتكلم عن الـ Keyboard Events وايه انواعها المختلفة وانسب الاستخدامات لكل واحد فيهم. بتكلم برضو عن ازاي تضيف Shortcuts للابليكشن بتاعك سواء علي مستوى الابليكشن او مستوى الـ Components وازاي دا حيفرق مع مستخدمينك بشكل كبير واثره علي تقنيات الوصول وتجربة المستخدم. الحلقة دي برعاية Prisma لينكات مفيدة: Keyboard Event | MDN Keyboard Event code values | MDN Fix your annoying Popups with the CloseWatcher API

2024-09-2949 min

Untyped Transition Eventsهل استعملت قبل كدا setTimeout علشان تستني CSS Transition او انيميشن انه يخلص؟ في طريقة احسن بكتير وحتتعلمها معايا في هذه الحلقة. حعدي علي الـ Events المختلفة الي ممكن تستمع ليها وامتي كلاً منهم ممكن يفيدك مع بعض الامثلة الحقيقية والعملية الي حتفرق معاك. الحلقة دي برعاية Prisma لينكات مفيدة: transitionend Event | MDN transition-delay | MDN animationend Event | MDN Popovers and Floating UIs | Untyped transition cancel with dialog transitions demo Abort Signals | Untyped

2024-09-0939 min

Untyped You should use Container Queries Nowفي الحلقة دي بتكلم عن خاصية جديدة في الـ CSS موجودة من سنين واصبحت متاحة في جميع المتصفحات السنة الي فاتت. الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture. دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries. لينكات مفيدة: Media Queries | MDN Container Queries | MDN How to use container queries now | Web.dev

2024-09-0528 min

Untyped Progressive Enhancement vs Graceful Degradationفي الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت. لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه. وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك. لينكات مفيدة: animation-timeline | MDN scroll-driven animations demos Scroll Driven Animations | Untyped #37 Popovers and Floating UIs | Untyped #34 CSS.supports | MDN Cloudflare Polyfill.io Mirror

2024-08-2531 min

Untyped Forms are Formidableهل تسائلت ليه دايما بتسمع ان الـ Forms صعبة لكن مفهمتش ليه؟ ليه ليها مكتبات كتيرة وايه المشاكل الي بيحاولوا يحلوها؟ في الحلقة دي بتكلم عن الـ Forms من اكثر من منظور. اولاً من واقع خبرتي كواحد اشتغل عليها، كواحد استعملها وكواحد عمل مكتبات تساعد ملايين الاشخاص انهم يعملوا Forms وازاي الـ Balance ما بين المناظير المختلفة دي بتفرق في جودة المكتبة الي انت بتستعملها. لينكات مفيدة: FormData Object | MDN Form Data Event | MDN Form Essentials | Vue.js Docs Constraint Validation | MDN Zod :user-invalid psudo class | MDN vee-validate Ahmed Elemam with Abdelaziz Elshamasi Episode FormKit Aria Patterns

2024-08-1859 min

Untyped Thoughts on Web Componentsفي الحلقة دي بتكلم عن الـ Web Components وعيوبها الي جعلت معظمنا يبعد عنها وميهتمش بيها تاني وهل تستحق انك تتعلمها النهاردا ولا لأ. الحلقة دي برعاية Prisma لينكات مفيدة: Web Components | MDN EgyptJS Jan Meetup Panel discussion on Web Components Element Internals attachInternals and formAssociated Lit SSR Ionic Web Components Statement Building custom elements with Vue

2024-08-1134 min

Untyped Repeatable Requests with Idempotencyفي الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ Idempotency وايه علاقته بالـ Requests الي بنعملها من الفرونت ايند وازاي ممكن يخلي الـ Application افضل واقل عرضة لاخطاء قد تكون كارثية. من خلال بعض الامثلة العملية وحاجات اشتغلت عليها بنفسي نقدر نفهم امتي منحتاجهوش وامتى لازم نستعمله. لينكات مفيدة: Stripe's API on Idempotent Requests Shopify's API on Idempotent Requests

2024-08-0434 min

Untyped Do we still need VDOM?في الحلقة دي بتكلم عن الـ VDOM وازاي تقارن بالـ DOM وليه احنا كنا محتاجينها بشدة وازاي ممكن تختلف من Framework لآخر بالرغم من انها نفس المبدأ وازاي الاختلافات دي بتأثر عليك في طريقة كتابتك للكود. ببص عليها من نواحي مختلفة ممكن مسمعتهاش قبل كدا زي ليه الـ HTML سيئ كوسيلة Serialization وايه الي يخلي الـ VDOM اسهل في عملية الـ Rendering. وبختم بنظرة علي آخر الـ Frameworks وليه التطور القادم للادوات بتاعتنا ممكن يخلينا نتخلى عن VDOM وليه دا تطور للأفضل. لينكات مفيدة: OTMT Putting React into the Browser ⁠Attributes vs. Properties⁠ Render Functions (h) Million.js Compiler-informed VDOM Vue Vapor Mode

2024-07-2844 min

Untyped Corrections on Authتصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT. الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key. فلو انت بتعمل كدا علي الـ Client Side دا مش خطر. الخطر ان يكون الـ Secret Key موجود بشكل ما علي الـ Client Side زي مثلاً يكون في موضع يمكنه انه يتحقق من صحة الـ Token من غير ما يرجع للسيرفر، فدا خطر لانه بيلمح ان الـ Secret Key موجود علي الـ Client. شكرا للي تواصلوا معايا وصححولي الي انا قولته 🙏

2024-07-2804 min

Untyped Yapping about Authفي الحلقة دي بتكلم عن الـ Authentication ومشاكله معانا في الـ Frontend وبنتكلم عن الطرق المختلفة والي المفروض متعملوش علشان تحمي مستخدمينك علي قدر الامكان. بنجاوب علي اكثر سؤال مزعج الي هو "احط الـ Token فين؟" وايه الحالات الي اختيارك قد يكون كارثي. لينكات مفيدة: What is cross-site scripting? DOMPurify (Helps mitigate XSS) Set-Cookie Header | MDN JWT Tokens Authorization Code Flow with Proof Key for Code Exchange (PKCE)

2024-07-2149 min

Untyped Ship Faster with Feature Flagsفي الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags. بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code. بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية. لينكات مفيدة: Flipper OpenFeature

2024-07-1431 min

Untyped Mobile Apps with JavaScriptفي الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار. بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app". لينكات مفيدة: What PWA Can Do Today Cordova Ionic Framework Capacitor

2024-07-0739 min

Untyped Building Multilingual Appsفي الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ Styling والـ State وازاي حتى بنكتب HTML وايه الادوات المتاحة لينا علشان نعرف نعمل ويب ابليكشن متعدد اللغات. بناخد الموضوع من اول الـ CSS والـ HTML لغاية ازاي نتعامل مع الـ API بشكل سليم. لينكات مفيدة: Alfy's CSS-tricks article HTML "dir" attribute | MDN HTML Standard on dir attribute unicode-bidi property | MDN Unicode Bidirectional Algorithm Logical Properties | MDN LingUI ICU Message Format VueI18n

2024-06-3054 min

Untyped Questioning the RSC Modelفي الحلقة دي بتكلم عن الـ RSC او React Server Components كـ Model يهدف لحل مشكلة الـ Network وتحديداً ايه المشاكل الي شايفها فيه وهل هذا الحل يستحق المشاكل الاخرى ولا لا؟ لينكات مفيدة: React Server Components | React Docs Making Sense of React Server Components React, Solid, HTMX Evan You's tweet on version Skew EgyptJS's Panel on the Network Chasm Untyped App Versioning Episode

2024-06-2642 min

Untyped Debugging JS with logs and breakpointsكل سنة وانتم طيبين، في الحلقة دي بتكلم عن الـ Debugging عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة. وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة. لينكات مفيدة: Console API | MDN Pause your code with breakpoints debugger statement Debugging in VS Code

2024-06-1737 min

Untyped SEO Best Practicesفي الحلقة دي بتكلم عن الـ Search Engine Optimization، ازاي بيشتغل، وازاي بيفرق معانا في نوع الادوات والـ Frameworks الي بنستعملها وايه اهم الـ Best Practices والـ Meta tags الي محتاجين ناخد بالنا منها. لينكات مفيدة: How Google search works Viewport Meta tag | MDN favicon generator Meta tags for SEO | ahrefs The Open Graph Protocol Open Graph meta tags | ahrefs Google Structured data and rich snippets JSON-LD Google Search Console ahrefs

2024-06-1046 min

Untyped Promises Unwrappedالـ Promises احد اهم الحاجات الي بنتعامل معاها في الجافاسكربت وغيرت طريقة كتابتنا من 2015 وقبلها كمان. في الحلقة دي بتكلم عن اهم خواص الـ Promise كـ value وازاي كل خاصية منهم يمكن استخدامها بشكل عملي ومفيد في شغلك النهاردا وبعض النصائح مع async/await. لينكات مفيدة: Promise Object | MDN Promise basics | JavaScript Info My very old presentation on Promises Futures and Promises | Wikipedia Previous Episode on Deduping HTTP requests Previous Episode on PWAs

2024-06-0547 min

Untyped Scroll Driven Animationsفي الحلقة دي بتكلم عن خاصية جديدة في الـ CSS حتغير من طريقة تعامنا مع الـ Animations المربوطة بالـ scrolling والتي كانت من ابرز التحديثات للويب الي تم الإعلان عنها في Google I/O 2024. في الحلقة امثلة عملية لحاجات بنعملها كتير بالجافاسكربت والي حتتغير تماماً مع الـ scroll timeline الجديدة وليه انا كشخص مش ضليع بالـ CSS متحمس ليها! لينكات مفيدة: Latest in Web UI - Google I/O Story Telling Animations Demo Fixed Header Demo Scroll to Bottom/Top Demo scroll-timeline - MDN Scroll-driven animations case study Scroll-driven animations Demos

2024-05-2737 min

Untyped Lying with Optimistic UIفي الحلقة دي بتكلم عن الـ Optimistic Responses كـ Pattern مهم لازم تتعلمه وتعرف تطبقه بسبب اثره علي الـ Performance والـ UX. بناقش ايه الشروط المناسبة ليه، وبدي امثلة عملية عن حاجات انت بتستعملها كل يوم بتطبق الاسلوب دا بشكل ناجح وازاي بيأثر عليك كمستخدم للحاجات دي وكمان امتي مستعملهوش! لينكات مفيدة: True Lies of Optimistic User Interfaces Optimistic mutation results - Apollo Docs Pending UI - Remix Docs

2024-05-1943 min

Untyped Just Enough DevOpsفي الحلقة دي بتكلم عن مقدار المعلومات في الـ DevOps و الـ CI/CD الي لازم تكون عندك وتكتسبها كـ Frontend علشان تكون فعال في سوق العمل. بتكلم عن ادوات مختلفة محتاج تتعلمها علشان تقدر تـ Deploy شغلك للناس. فبعدي علي ازاي ترفع بروجكت بسيط علي سيرفر بدائي وبعدين ازاي تبدأ تستعمل Docker و Nginx وغيرهم من الادوات الي بنستعملها يومياً ولا غنى عنهم في شغلنا. لينكات مفيدة: Nginx Deploy on Netlify Deploy Node.js App with Docker PM2 Certbot

2024-05-1239 min

Untyped Popovers and Floating UIsفي الحلقة دي بنتكلم عن احد اهم عناصر الويب UI وهي اي حاجة طايرة عندك في الشاشة بنعملها ازاي وايه الصعوبات الي بنواجهها في النوع دا من الـ Components. بتكلم برضو عن ادوات الـ Positioning المتاحة لينا وازاي بنستعملها في سيناريوهات مختلفة. وايه الضوء في اخر النفق الي ممكن يحللنا كل مشاكلنا. لينكات مفيدة: CSS Position | MDN Identifying the containing block | MDN Tippy.js Floating UI (Recommended) Stripe Menus Dialog element | MDN Popover API | MDN Steal this popover code Anchor Positioning draft Anchor Positioning tool

2024-05-0548 min

Untyped App versioningفي الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه. ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل. لينكات مفيدة: Semantic versioning

2024-04-2843 min

Untyped The problem with Drag and Drop APIفي الحلقة دي بتكلم عن الـ 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

2024-04-2142 min

Untyped Functional Jargonفي الحلقة دي بتكلم عن الـ 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

2024-04-1549 min

Untyped Optimizing Imagesفي حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم. هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة. سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي تجربة المستخدمين أسرع وأفضل. لينكات مفيدة: Responsive Images | MDN Largest Contentful Paint (LCP) | Web.dev Cumulative Layout Shift (CLS) | Web.dev Maximally optimizing image loading for the web Loading attribute | MDN Decoding attribute | MDN Vite Image Preset Plugin | MDN Device Pixel Ratio | MDN

2024-03-2643 min

Untyped TailwindCSS Overviewفي الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS. بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا! وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له. لينكات مفيدة: TailwindCSS In defense of utility first CSS Adding Tailwind Variants TailwindCSS Intellisene for VSCode

2024-03-1741 min

Untyped Zero JS with Astroفي الحلقة دي بناخد نبذة عن Astro Framework والافكار المميزة الي قدمها للـ Ecosystem وجعلته الافضل في استخدامات عديدة زي مواقع المحتوي. برضو بنبص ليه الـ Islands architecture ميزته من ناحية السرعة وليه هي حل عبقري لمشاكل الـFrameworks الي بنستعملها. لينكات مفيدة: Astro.js Astro Islands Sharing state with nanostores Zod Content collections View transitions API View transitions

2024-03-0539 min

Untyped Abort Signalsفي الحلقة دي بنتكلم عن افضل طريقة لو عندك Request واخد وقت اكتر من اللازم وعايز تلغيه، او مجموعة مع بعض وعايز تلغيهم كلهم في نفس الوقت. كل دا مع استخدامات تانية غريبة للـ Abort Signals. لينكات مفيدة: XHR - MDN AbortController - MDN AbortSignal - MDN Aborting Fetch - JavaScript Info Event Target signal option - MDN Close Watcher API - Logaretm.com

2024-02-1928 min

Untyped Slow Down, Serve Betterفي هذه الحلقة بتناول ثقافة الـ Performance المتمركزة حول الـ Load speed وبالرغم من اهميتها الا انها لا تحكي تجربة المستخدم كاملة وبالتالي سعيك فيها بلا فهم قد يؤدي الي نتائج سلبية. لينكات مفيدة: Core Web Vitals Interaction to next paint Page speed insights

2024-02-1240 min

Untyped Time keeping with Temporalsفي الحلقة دي بنتكلم عن مشاكل الـ Date في الجافاسكربت وليه مقترح الـ Temporals بيهدف لحل المشاكل دي عن طريق نظام سلس بيمثل اكثر من استخدام لعناصر التواريخ والتحويل ما بينهم بسهولة. لينكات مفيدة: Temporals Proposal GitHub Temporals docs Temporals cookbook Temporals polyfill implementation

2024-02-0433 min

Untyped A Tale of Two Queriesفي هذه الحلقة باخدكم في لفة حول الـ 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

2024-01-2854 min

Untyped Being practical about PWAsكانت فكرتي عن الــPWAs غلط من ساعة ما اتعلمتهم واعتقادي ان دا مستقبل الويب، وبعد ما جربت اطبقهم علي شغلي اليومي حسيت ان ملهمش لازمة لان استخداماتهم قليلة ومش لكل انواع الويب سايتس. لكن دلوقتي الـ PWAs بيمثلوا مجموعة افكار وتقنيات تقدر تستعمل منهم ما ينفعك ويفيدك وتترك مالا يعنيك، في الحلقة دي بديك امثلة ويعني ايه PWA دلوقتي. لينكات مفيدة: Web.dev PWA articles PWA display modes PWA installation criteria PWA core checklist Offline UX design guidelines

2024-01-2135 min

Untyped Immutabilityفي هذه الحلقة بنتكلم عن الـ Immutability و الـ mutability وازاي بيأثروا علي علي الكود الي احنا بنكتبه وانهي منهم تعتبر خاصية مرغوبة اكثر من التانية ولا كل واحدة ليها نقاط قوة يجب استغلالها في مكانها. وبرضوا بنبص علي الـ Frameworks وازاي بعضهم بيفرض واحدة منهم عليك وليه. لينكات مفيدة: حلقة مقارنة الـ Frameworks مع احمد الأمام Immer Mutable - MDN Definition Mutability vs Immutability in JavaScript

2024-01-1445 min

Untyped 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

2024-01-0722 min

Untyped The hoops of array loopsفي الحلقة دي بنغطي الـ 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

2023-12-2539 min

Views on Vue A VeeValidate Roadmap Discussion with Abdelrahman Awad -VUE 231Abdelrahman Awad is the Senior Engineer at Rasayel. The discussion unravels the intricacies of form validation and the challenges faced in migrating VeeValidate to Vue 3. They share valuable insights into the composition API, headless components, and the future vision for VeeValidate. Listeners gain a comprehensive understanding of the complexities and innovations at the forefront of front-end development. This episode offers a thought-provoking exploration of form libraries, Vue 3 migration, and the commitment to enhancing the developer experience.Sponsors Chuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksVeeValidatelogaretm/vee-validateSocialsLinkedIn: Abdelrahman AwadTwitter: LoG...

2023-12-191h 01

Untyped Code splitting and lazy loadingفي الحلقة دي حنتكلم عن الـ Code splitting واهدافه والغرض من اننا نـ Lazy Load الكود بتاعنا وازاي اعرف اد ايه من الكود بتاعي ممكن نعمله Split مع Chrome Devtools. وايه آثار ذلك علي الأداء وتجربة المستخدم وهل دا شئ كثرته كويسة ولا لأ؟ لينكات مفيدة: Dynamic imports - Vite.js Async components - Vue.js Lazy - React Astro Client Directives preloadComponent - Nuxt.js

2023-12-1731 min

Untyped Deduping and Batching HTTP Requestsفي هذه الحلقة بنتكلم عن اثرين جانبيين للأسلوب الـ Declarative في بناء الويب الي كلنا بنكتب به ونتيجة ذلك علي الـ HTTP Requests وازاي نقدر نحلهم بشوية فهم ولعب مع الـ Promises. لينكات مفيدة: - Request Deduplication - villus source - Request Batching - villus source

2023-12-1137 min

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

2023-12-0327 min

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

2023-11-2631 min

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

2023-11-1937 min

Untyped Debouncing Madnessتوبيك صعب شوية فهات قهوة او شاي معاك. في الحلقة دي بنتكلم عن الـ Debouncing وليه بنستعمله في حاجات كتيرة، وقد تعتقد انه دايماً بيعتمد علي Delay ثابت ولكن زي ما حتكتشف في الحلقة حتلاقي ان ممكن نخليه يعتمد علي اي حاجة احنا عايزنها وازاي دا بيفرق معاك في الكود الي بتكتبه. لينكات مفيدة: Debouncing and Throttling Explained Through Examples throttle-debounce npm library Leading vs Trailing edge debouncing debounceAsync implementation debounceNextTick implementation

2023-10-0837 min

Untyped Cachingفي الحلقة دي بنتكلم عن الـ Caching في الفرونت ايند وايه الطرق والادوات المتاحة لينا علشان نحسن الأداء وحاجات معينة في الويب ابليكيشنز بتاعتنا. حنتكلم برضو عن الاستراتجيات الي تقدر تستعملها في الـ Caching وازاي دا بيأثر علي تجربة المستخدم في النهاية وايه انسب استراتيجية بشكل عام. لينكات مفيدة: Cache API IndexedDB best practices Cache control headers (Browser cache) Udacity offline web apps course Service worker recipes (Cache strategies)

2023-10-0141 min

Untyped Confidence by Testingفي الحلقة دي حنتكلم عن الـ Testing وايه الهدف منه اصلاً. حنشوف ايه انواع الـ Tests المختلفة والي بقت من متطلبات شغلنا النهاردا. وكالعادة ليا اراء معينة قد تتفق او تختلف معها. لينكات مفيدة: MSW (API mocking framework) Testing RNGs Playwright Pact (Contract testing framework) Web Workers X (Twitter) Space EgyptJS

2023-09-2443 min

Untyped Monitoring and Observabilityانت دلوقتي عملت deploy للأبليكيشن بتاعك، وبعدين؟ هل هو شغال عند الناس التانيه ولا لا؟ هل في ايرورز بتطلع؟ ليه الناس بتقول عليه بطئ او مبيحملش؟ وليه الناس دي بتسأل علي feature انت عاملها بقالك شهور! في الحلقة دي بنتكلم عن موضوع يتم تجاهله كثيراً في الفرونت ايند. ازاي تراقب الابليكشن بتاعك علي اجهزة الناس التانيه وازاي تستفيد من دا انك تحسن من الابليكشن بتاعك وازاي دا نص الشغلانه التاني الي محدش بيجيب سيرته كتير.

2023-09-1026 min

Untyped Fetch!مؤخرا شفت ناس لسه بتستعمل XHR و Axios في ٢٠٢٣ وعلشان كدا في الحلقة دي بنتكلم عن Fetch وليه لازم تستعملها بدلاً من اي مكتبة تانيه. بناقش الاختلافات وميزات هذه الاختلافات وايه علاقتها بالStreaming والسبب الوحيد الي يخليك ترجع لXHR. لينكات مفيدة: Fetch API You may not need axios Fetch download progress workaround Abort controller

2023-09-0335 min

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

2023-08-2732 min

Untyped Web Workers Overviewفي الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي. لينكات مفيدة: Sharing Websocket connections Service workers lifecycle Partytown Concurrency worker scaling example Web workers API | MDN Transferable objects | MDN

2023-08-2046 min

Untyped UI Libraries: When to Avoidفي الحلقة دي بنتكلم عن الUI Libraries والمشاكل الي بيحلوها والمشاكل الي بيقدموها ليك كدين حتدفعه بعدين وايه محاولات الEcosystem بتاعنا في حل كل هذه المشاكل وليه مفيش حل واحد سحري.

2023-08-1343 min

Untyped State managementمحاولة جريئة لتلخيص ال state management في اربعين دقيقة مروراً بتفاصيل كثيرة زي ال persistence وال async state وغيرهم من الحفر الي حفرناها لنفسنا في الفرونت ايند. يعني ايه اصلاً state وليه لازم نديرها؟ ايه الحلول الي بنستعملها في شغلنا النهاردا وايه احدث ما توصله العقل البشري للنقاشين الي زينا في هذا الموضوع. لينكات مفيدة: Pinia.js Redux MobX Overmind

2023-08-0640 min

Untyped Bundlers overviewفي الحلقة دي بنتكلم عن تاريخ الBundling في الويب ورحلة تطور الTooling فيما يتعلق بتلزيق ملفات الجافاسكربت مع بعضها حتي يومنا هذا. بنتكلم عن Vite, Webpack, Rollup وغيرهم من الادوات الضرورية في شغلنا في الفرونت ايند والمستقبل شكله عامل ازاي. لينكات مفيدة: - Vitejs - Turbopack - Rollupjs - Parcel - esbuild

2023-07-3039 min

Untyped SSR vs. SSG vs. SPAغالبا قد سمعت مؤخراً عن مصطلحات زي SSR او SSG او SPA او حتي Meta-framework وعلاقتهم في ازاي بنوصل الكود بتاعنا للمستهلك. في الحلقة دي بنحاول نفك طلاسم المصطلحات المختلفة وايه المشاكل الموجودة وحلولها. لينكات مفيدة: Nuxt.js Next.js Astro

2023-07-2329 min

Untyped Type safetyحنتكلم عن الTypes وليه محتاجينها في شغلنا اكثر من قبل كدا و ليه الTypeScript هي افضل حاجة ممكن تضيفها لمشاريعك القادمة والحالية. برضو حنتكلم عن ازاي تحول مشروعك من JavaScript لTypeScriptبشكل آمن وسريع وحنختم بشوية نصائح عن ايه الي تاخد بالك منه وتركز عليه وانت بتتعلم TypeScript. لينكات مفيدة: State of JavaScript survey results - TypeScript usage `tsconfig` reference Frontend masters - TypeScript fundementals v3

2023-07-1632 min

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

2023-07-0831 min

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

2023-07-0238 min

Untyped Intro - ايه داهو بودكاست عبارة عن تفريغ افكار في مجال الجافاسكربت والبرمجة عموما بالعربي بشكل اسبوعي.

2023-07-0204 min

null++: بالعربي Episode[43][Anniversary]: 2020 Summary + Q&AEpisode Live Stream.Podcast new Facebook Page.2020 Most Downloaded EpisodesEpisode[22]: Egypt Vs Germany Tech Scene With Mostafa Nageeb (2,379 Downloads).Episode[3]: How to Keep Up with Tech Trends (2,187 Downloads).Episode[24]: Software Interviews, The Ultimate Guide With Khaled Badawy (2,107 Downloads).Episode[1]: Open Source Talk with Abdelrahman Awad of vee-validate (2,063 Downloads).Episode[2]: Overview On Software Development Processes (1,771 Downloads).2020 Most Clicked Resources & Pickshttps://effortlessenglishclub.com/ (211 Clicks).Javascript Patterns Book (166 Clicks).Khaled Badawy Twitter Thread (142 Clicks).Invest like the best podcast (137 Clicks).Snowpack (135 Clicks).Join Imagine (131 Clicks).Building Multi-Directional Layouts (122 Clicks).Remote Book (118 Clicks).Ask Developer Pod...

2021-01-091h 32

null++: بالعربي Episode[27]: Development Productivity & Tooling With Ahmed AshLast week, we have fetched the 5th issue from the newsletter where we share articles and resources we find valuable, you can have a look at this issue from here, also you can subscribe to the Newsletter from this link. 00:00:00 -> 00:10:00Ash's Twitter Thread about tooling & productivity.Duck typing.00:10:00 -> 00:20:00Paul Graham Viaweb & Lisp FAQs.Laravel Valet.Episode[5]: Docker Intro & Quick Tips00:20:00 -> 00:30:00Ahmed's plugin for sublime.00:30:00 -> 00:40:00Visual Studio Code Tips and Tricks.G...

2020-07-261h 23

null++: بالعربي Episode[25]: Grow Your Career With Side ProjectsLast week, we have fetched the 3rd issue from the newsletter where we share articles and resources we find valuable, if you didn't subscribe yet, you can do it from this link. For this episode resources, take a look below 👀, we had a bunch of very valuable ones 👇. Taking on Google and Facebook as a Solo Open-Source Founder with Evan You of Vue.js.Episode[1]: Open Source Talk with Abdelrahman Awad of vee-validate.Indie Hackers, early months chronicles & how they have achieved 300k Page Views in the first month.SEO Case Study: 0 to 150,000 Monthly Visitors in 8 Mon...

2020-07-121h 04

null++: بالعربي Episode[1]: Open Source Talk with Abdelrahman Awad of vee-validateEpisode Hot Links 🔥⚡️:vee-validate on githubAbdelrahman's Twitter

2020-01-0542 min