Untyped
بودكاست أسبوعي لمدة نصف ساعة يتناول مواضيع في مجال تطوير الواجهات الأمامية وجافاسكريبت باللغة العربية، مع نقاشات غير رسمية وممتعة.
حلقات
Repacking the Web
في الحلقة دي هنشوف ليه منظومة الـ bundling بتتعاد كتابتها بالكامل دلوقتي.الأدوات الجديدة زي Rspack وRolldown وOxc وTurbopack مش مجرد “بدائل أسرع”، دي إعادة التفكير في طريقة البناء من الأساس.هنمشي على التغييرات الجوهرية: الاعتماد على Rust و parallelism، تقليل cost الـ plugins، ومعالجة مشاكل بقالها سنين في Webpack والجيل القديم.الفكرة هنا إن الانتقال للأدوات دي مش رفاهية ولا مجرد تحسين أداء… ده الات
Peeranormal Activity
في الحلقة دي هنتكلم عن الجانب “المرعب” شوية في الـ Package Managers 👻 ليه أحيانًا تلاقي نسخة تانية من React مستخبية، أو dependecy في مكان غريب؟حنخش في رحلة تاريخية حوالين الـ Package Managers، ايه المشاكل الي بيحلوها، هنفهم يعني إيه peer dependencies، وإزاي الـ hoisting بيغيّر شكل الـ node_modules من غير ما تاخد بالك، وليه npm و Yarn ساعات بيسيبوا الدنيا تفلت وايه الي بيخلي pnpm مختلف.الحلقة كلها
The Compatibility Hunger Games
الاعتقاد الشائع هو إن الجافاسكربت “بيشتغل في أي حتّة”، السيرفر والمتصفح، بس الحقيقة دلوقتي إنك لو شغّلت نفس السطر في مكانين مختلفين… في احتمال كويس إنه يبوظ في واحد منهم.في الحلقة دي، هنتكلم عن ليه بقى عندنا بيئات تشغيل كتير، وكل واحدة ليها مزاجها واولوياتها، وليه حاجات بسيطة زي fetch أو الـ File System ممكن تشتغل تمام هنا وتنهار هناك. وهنفهم إزاي شغل السيرفر بقى بيتقسم ما بين اللي بيقوم في جزء من
npm install backdoor
في الحلقة دي بنتكلم عن الهجمات اللي بقت بتحصل في الـ supply chain خصوصًا على مكتبات الـ npm. إزاي كود بسيط بيستخدمه ملايين المطورين ممكن يتقلب لفخ يسرّب بيانات أو يفتح باب لهجوم وانت مش واخد بالك. هنفتكر شوية من أشهر الوقائع اللي هزت الـEcosystem مؤخراً ونشوف الدروس المستفادة. كمان هنتكلم عمليًا: إيه دورك كمؤلف مكتبة علشان تحمي المشروع بتاعك وإيه اللي تقدر تعمله كمستهلك يخلي استخدامك آمن قدر الإمك
Merge and Emerge
عايز تبدأ تساهم في الـ open source ومش عارف منين؟ في الحلقة دي هنتكلم إزاي تعمل أول خطوة، وتدخل المجتمع، وتخلي الكود بتاعك يبان للناس كلها. من أول fork لحد أول pull request، هتتعلم إزاي ممكن الشغل ابو بلاش دا يفتح لنفسك أبواب جديدة في الكارير وازاي دا مرتبط بدوافعك انك بتعمله عن حب مش عن مقابل.لينكات مفيدة:The Developer Road to Open Source World بالعربيThe Developer Road to Open Source Part 2
Climbing the Pyramid Scheme
في سوق الـ Tech في مصر، كل الناس بقت "Senior" حتى لو لسه مكمّلينش سنة! العناوين بقت أكبر من الخبرة، والمرتبات ساعات تبقى أوهام زي السراب.في الحلقة دي هنتكلم عن الـ pyramid scheme بتاع الـ titles، ليه التعويضات مش ماشية مع المسميات، وإزاي السلم الوظيفي ساعات بيقفلك الطريق بدل ما يفتحلك. سواء ماشي في سكة الـ IC أو داخل على Management، هتلاقي إن مش كل هرم بيوصل للقمة.
Deployed and Forgotten
زمان كنا بنعمل ديبولويمِنت للفرونت إند بكم أمر بسيط على Nginx أو سيرفر عادي وخلاص.دلوقتي مع كل الادوات والـ platforms الجديدة بقينا بنعتمد على أوتوميشن زيادة ونسينا الأساسيات. النسيان ده مش بس بيخلينا نفقد السيطرة، ده كمان بيكلفنا فلوس أكتر من اللازم.في الحلقة دي هنتكلم عن إزاي نرجع نفكر في الـ Deployment كمهارة أساسية، إزاي نستخدمها كـ cost optimization حقيقي للبزنس، وإزاي نقدر ندخل لوجيك ذكي بين
A Whirlwind Migration
في الحلقة دي حتكلم عن TailwindCSS v4 وايه الجديد فيه ويفرقه عن الاصدارات الي فاتت.حغطي ازاي تحدث ليه وافضل الطرق لذلك وايه الي تاخد بالك منه في العملية دي. كمان بشارك معاكم ايه الي عجبني فيه وايه الي ضايقني منه ونصايحي لازاي تستعمله في المستقبل.لينكات مفيدة:Tailwind v4Lighting CSSWindiCSSUnoCSSUpgrade Guide`@apply` issue with scoped CSS
Setting Boundaries
في الحلقة دي هنتكلم عن موضوع بسيط في شكله لكن ليه تأثير ضخم.ليه مهم جدًا تبقى فاهم الـ boundaries بتاعة الداتا اللي بتتعامل معاها؟ وإزاي تجاهل الحدود دي ممكن يفتح عليك أبواب الـ edge cases والـ bugs اللي بتبوظ الدنيا!لينكات مفيدة:One Page at a Time | Untyped
Nothing to See Here
في الحلقة دي من Untyped، بنتكلم عن null و undefined وكل القيم اللي بتعتبر فالصي في JavaScript. ليه وجودهم ساعات بيسبب مشاكل؟ وإزاي لغات تانية زي Rust و TypeScript بتتعامل مع الغياب ده بشكل أوضح من خلال أنواع زي Option و Result؟ كمان هنشوف إزاي المفاهيم دي بدأت تظهر في الجافاسكريبت برضه، سواء من خلال result objects أو أنماط بتفرض التعامل الصريح مع الغلطات.
Big Tech, Big Cuts, Small Context
في الحلقة دي، بنتكلم عن تسريحات الموظفين في شركات زي مايكروسوفت، والربط السريع اللي ناس كتير بتعمله بينها وبين الذكاء الاصطناعي. هل فعلاً الـAI هو السبب؟ ولا في عوامل تانية زي التوظيف الزايد، والتغيرات الاقتصادية؟ بنحاول نفهم الصورة كاملة بعيد عن الهلع والتبسيط الزايد.
LLMao
في الحلقة دي من Untyped، بنتكلم عن هل فعلاً الـ LLMs ممكن تاخد مكان مبرمجي الـ frontend؟ ولا كل الضجة دي أوفر؟هنحكي عن اللي فعلاً بتعمله الأدوات دي، وازاي ممكن تساعد، بس في نفس الوقت ليه لسه فيه حاجات مافيش AI بيعرف يتعامل معاها — من تجربة المستخدم لحد قرارات البزنس واكثر.
Query-ous Behavior
في الحلقة دي، بنتكلم عن إزاي تقدر تحافظ على الـ context بتاع اليوزر في الويب أب من غير ما الدنيا تبوظ بعد ما يعمل refresh أو يبعَت اللينك لحد تاني.بنشرح إمتى تستخدمهم، إمتى لأ، وإزاي تربطهم بـ localStorage لو حبيت. كمان بنعدّي على شوية سيناريوهات زي forms، filters، وpagination.لينكات مفيدة:URLSearchParams - MDNHistory API - MDNLocation API - MDN
One Schema to Rule Them All
في الحلقة دي، هنتكلم عن فكرة الـ Standard Schemas وإزاي تقدر تكتب تعريف واحد للـ Schema وتبدّل بين مكتبات زي Zod و Valibot من غير ما تغيّر سطر واحد في الكود بتاعك. هنعرف ليه الموضوع ده مهم، وإزاي بيسهّل عليك تفضّل مرن ومش مربوط بمكتبة معينة.لينكات مفيدة:Standard Schema | GitHubZod.devvalibot.devarktype.ioStandard schema implementationsStandard schema consumers
Rolling in the Deep
في الحلقة دي حنلف وندور حوالين Rolldown، وهو احد احدث الـ Bundlers الي ظهرت مؤخراً في ساحة الجافاسكربت.حتكلم عن ليه كنا محتاجينه، يقرب ايه لـ Rollup، وهل كلنا حنستعمله غصب عننا في Vite، وإزاي بيخلي الـ builds أخف وأسرع. وهل فعلاً يستاهل الهايب؟لينكات مفيدة:RolldownRollupBundlers overview | Untyped.fmESM vs. CommonJS | Untyped.fmShaking Things Up | Untyped.fm
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
The Scrollmill Workout
في الحلقة دي بتكلم عن الـ Virtual Lists والـ Virtual Scrolling!حنغطي تفاصيل مبدأ الـ Windowing وازاي ممكن تعمله بنفسك، وايه العقبات الي حتواجهك والافتراضات الي لازم تضعها علشان تقدر تعملها.حنتكلم برضوا عن الـ Performance وازاي ممكن تحسنه او تضره، وايه عواقب التكنيك دا علي الـAccessibility وازاي ممكن تتحل.لينكات مفيدة:Virtual Lists | Patterns.devVue Talks #6TanStack VirtualuseVirtualList | VueUse
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
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 Java
The Monorepo Monologue
في حلقة النهارده هنتكلم عن موضوع مهم في تطوير الويب، وهو الـ "Monorepo". ببساطة، المونوريپو هو مكان واحد بنحط فيه مشاريع كتير بتاعتنا، بدل ما كل مشروع يبقى له Repository خاص بيه. يعني بدل ما يبقى عندك كذا "بيت" للمشاريع، كلهم بيبقوا في "بيت العيلة".طيب، ليه نعمل كده؟ فيه فوايد كتير. أول حاجة، الكود بيتشارك بسهولة بين المشاريع المختلفة. لو عندك Component كويس، تقد
Coming up with Formwerk
في الحلقة دي بتكلم عن بروجكت Open-source نشرته مؤخراً اسمه Formwerk.
الحلقة مش Technical لكنها بتتطرق لازاي بحدد اني اعمل مشروع open-source جديد ولا اكمل على مشروع قديم، ازاي بحدد ان لما اصغر الـScope اقدر اقدم اكثر للمستخدم في الحتة الصغيرة الي انا بعملها في المشروع.
حابين اقتراحتكم ومشاركتكم في المشروع!
لينكات مفيدة:
Headless Skinless Boneless Lifeless UI
Formwerk
Shaking Things Up
في الحلقة دي بتكلم عن الـ Tree Shaking ونتج ازاي وليه هو حاجة مرغوبة في شغلنا النهاردا سواء كمطورين مكتبات او في شغلنا العادي.
بعرفك ايه الحاجات الي ممكن تمنع الكود بتاعك انه يتعمله Tree Shaking وايه القواعد بتاعته وليه اصلاً الموانع كدا وازاي تغيير بسيط في الـ Syntax او شكل الكود يقدر يأثر علي ذلك.
لينكات مفيدة:
MDN Entry on Tree Shaking
Tree shaking | Rollup
Tree Shaking Reference Guide | S
One Page at a Time
في الحلقة دي بتكلم عن الـ Pagination في الفرونت ايند وايه المشكلة الأساسية الي بيعالجها وليه هو من اول الحاجات الي لازم تضع قواعدها مع الباكيند.
بغطي الاشكال المختلفة للـ Pagination والفروقات بين كل Model والتاني وازاي بيفرقوا في تجربة المستخدم في النهاية مع بعض الامثلة العملية لامتي تستعمل اياً منهم.
Best Friends Forever?
تخيل الموقف: بتكلم صديقك الـ Backend وعايزه يجمعلك داتا من ٢ Endpoint مع بعض لكن هو رافض علشان دا مش Restful API صح والمبادئ المعينة الي لا تعني لك شئ في الفرونت تحتم عليه انه ميعملش كدا.
سيناريو تاني، مش عارف تعمل ايه بالـ JWT ولا تخزنه فيه او تعمله Refresh بشكل مناسب ازاي.
في الحلقة دي بنكتشف فكرة الـ. Backend for Frontend وازاي بتحل احد مشاكل الـ Architecture الكبيرة في السيناريوهات دي وازاي هي
Cache Me If You Can
هل طورت عادة انك تفتح اللينكات في tabs جديدة بسبب انك عارف انك لو دوست Back مش حيرجعك مكانك في الصفحة السابقة؟ ايه رأيك لو قولتلك انك تقدر تتحكم بدا كـ developer؟
في الحلقة دي بتكلم عن الـ Back/forward cache وازاي كانت مبهمة لفترة لكن مؤخراً بقا عندنا APIs وادوات نقدر نستعملها علشان نفعلها في الويب ابليكشنز بتاعتنا وكمان نقدر نعملها debugging ونقيس مدى فعاليتها علشان نستغلها لتحسين اداء صفحات الو
Of CORS You’re Blocked!
في الحلقة دي بتكلم عن موضوع قد يكون معقد لكن في حقيقته هو بسيط، لكنه معقد ناس كتيرة في مجالنا علي الجبهتين سواء فرونت ايند او باك ايند.
في الحلقة دي باخد الموضوع من اوله وبشرح ليه فهمك للـ CORS بشكل صحيح يقدر يخليك تحل مشاكله بشكل اسرع وفي نفس الوقت يخليك تقدر تستعمل كأداة Security.
لينكات مفيدة:
CORS | MDN
Origin | MDN Glossary
Signals Proposal
في الحلقة دي ببص علي الـ Signals Proposal على TC39 وبشرح ليه من وجهة نظري دي اضافة تاريخية للجافاسكربت وحتفرق معانا ازاي كلنا بغض النظر عن ايه الـ Framework الي بنستعمله.
الحلقة دي برعاية Prisma
شكر خاص لحسام حمدي على الاداء الصوتي للاعلان.
لينكات مفيدة:
Signals Proposal
Solid Signals
Vue Signal Implementation
Angular Signals
Preact Signals
React Signals 😜
Keyboard Events
في الحلقة دي بتكلم عن الـ Keyboard Events وايه انواعها المختلفة وانسب الاستخدامات لكل واحد فيهم.
بتكلم برضو عن ازاي تضيف Shortcuts للابليكشن بتاعك سواء علي مستوى الابليكشن او مستوى الـ Components وازاي دا حيفرق مع مستخدمينك بشكل كبير واثره علي تقنيات الوصول وتجربة المستخدم.
الحلقة دي برعاية Prisma
لينكات مفيدة:
Keyboard Event | MDN
Keyboard Event code values | MDN
Fix your annoying Popups with
Transition Events
هل استعملت قبل كدا setTimeout علشان تستني CSS Transition او انيميشن انه يخلص؟ في طريقة احسن بكتير وحتتعلمها معايا في هذه الحلقة.
حعدي علي الـ Events المختلفة الي ممكن تستمع ليها وامتي كلاً منهم ممكن يفيدك مع بعض الامثلة الحقيقية والعملية الي حتفرق معاك.
الحلقة دي برعاية Prisma
لينكات مفيدة:
transitionend Event | MDN
transition-delay | MDN
animationend Event | MDN
Popovers and Floating UIs |
You should use Container Queries Now
في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS موجودة من سنين واصبحت متاحة في جميع المتصفحات السنة الي فاتت.
الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture.
دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries.
لينكا
Progressive Enhancement vs Graceful Degradation
في الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت.
لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه.
وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك.
لينكات مفيدة:
animation-timeline | MDN
scroll-driven animations demos
Forms are Formidable
هل تسائلت ليه دايما بتسمع ان الـ Forms صعبة لكن مفهمتش ليه؟ ليه ليها مكتبات كتيرة وايه المشاكل الي بيحاولوا يحلوها؟
في الحلقة دي بتكلم عن الـ Forms من اكثر من منظور. اولاً من واقع خبرتي كواحد اشتغل عليها، كواحد استعملها وكواحد عمل مكتبات تساعد ملايين الاشخاص انهم يعملوا Forms وازاي الـ Balance ما بين المناظير المختلفة دي بتفرق في جودة المكتبة الي انت بتستعملها.
لينكات مفيدة:
FormData Object | M
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
Repeatable Requests with Idempotency
في الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ Idempotency وايه علاقته بالـ Requests الي بنعملها من الفرونت ايند وازاي ممكن يخلي الـ Application افضل واقل عرضة لاخطاء قد تكون كارثية.
من خلال بعض الامثلة العملية وحاجات اشتغلت عليها بنفسي نقدر نفهم امتي منحتاجهوش وامتى لازم نستعمله.
لينكات مفيدة:
Stripe's API on Idempotent Requests
Shopify's API on Idempotent Requests
Do we still need VDOM?
في الحلقة دي بتكلم عن الـ VDOM وازاي تقارن بالـ DOM وليه احنا كنا محتاجينها بشدة وازاي ممكن تختلف من Framework لآخر بالرغم من انها نفس المبدأ وازاي الاختلافات دي بتأثر عليك في طريقة كتابتك للكود.
ببص عليها من نواحي مختلفة ممكن مسمعتهاش قبل كدا زي ليه الـ HTML سيئ كوسيلة Serialization وايه الي يخلي الـ VDOM اسهل في عملية الـ Rendering.
وبختم بنظرة علي آخر الـ Frameworks وليه التطور القادم للادوات ب
Corrections on Auth
تصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT.
الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key.
فلو انت بتعمل كدا علي الـ Client Side دا مش خطر.
الخطر ان يكون الـ Secret Key موجود بشكل ما علي الـ Client Side زي مثلاً يكون في موضع يمكنه انه يتحقق من صحة الـ Token من غير ما يرجع للسي
Yapping about Auth
في الحلقة دي بتكلم عن الـ Authentication ومشاكله معانا في الـ Frontend وبنتكلم عن الطرق المختلفة والي المفروض متعملوش علشان تحمي مستخدمينك علي قدر الامكان.
بنجاوب علي اكثر سؤال مزعج الي هو "احط الـ Token فين؟" وايه الحالات الي اختيارك قد يكون كارثي.
لينكات مفيدة:
What is cross-site scripting?
DOMPurify (Helps mitigate XSS)
Set-Cookie Header | MDN
JWT Tokens
Authorization Code Fl
Ship Faster with Feature Flags
في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags.
بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code.
بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية.
لينكات مفيدة:
Flipper
OpenFeature
Mobile Apps with JavaScript
في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار.
بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app".
لينكات مفيدة:
What PWA Can Do Today
Cordova
Ionic Framework
Capacitor
Building Multilingual Apps
في الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ Styling والـ State وازاي حتى بنكتب HTML وايه الادوات المتاحة لينا علشان نعرف نعمل ويب ابليكشن متعدد اللغات.
بناخد الموضوع من اول الـ CSS والـ HTML لغاية ازاي نتعامل مع الـ API بشكل سليم.
لينكات مفيدة:
Alfy's CSS-tricks article
HTML "dir" attribute | MDN
HTML Standard on dir attribute
unicode-bid
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
Debugging JS with logs and breakpoints
كل سنة وانتم طيبين، في الحلقة دي بتكلم عن الـ Debugging عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة.
وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة.
لينكات مفيدة:
Console API | MDN
Pause your code with breakpoints
debugger statement
Debugging in VS Code
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 a
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
P
Scroll Driven Animations
في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS حتغير من طريقة تعامنا مع الـ Animations المربوطة بالـ scrolling والتي كانت من ابرز التحديثات للويب الي تم الإعلان عنها في Google I/O 2024.
في الحلقة امثلة عملية لحاجات بنعملها كتير بالجافاسكربت والي حتتغير تماماً مع الـ scroll timeline الجديدة وليه انا كشخص مش ضليع بالـ CSS متحمس ليها!
لينكات مفيدة:
Latest in Web UI - Google I/O
Story Telling Anima
Lying with Optimistic UI
في الحلقة دي بتكلم عن الـ Optimistic Responses كـ Pattern مهم لازم تتعلمه وتعرف تطبقه بسبب اثره علي الـ Performance والـ UX.
بناقش ايه الشروط المناسبة ليه، وبدي امثلة عملية عن حاجات انت بتستعملها كل يوم بتطبق الاسلوب دا بشكل ناجح وازاي بيأثر عليك كمستخدم للحاجات دي وكمان امتي مستعملهوش!
لينكات مفيدة:
True Lies of Optimistic User Interfaces
Optimistic mutation results - Apollo Docs
Pending UI
Just Enough DevOps
في الحلقة دي بتكلم عن مقدار المعلومات في الـ DevOps و الـ CI/CD الي لازم تكون عندك وتكتسبها كـ Frontend علشان تكون فعال في سوق العمل.
بتكلم عن ادوات مختلفة محتاج تتعلمها علشان تقدر تـ Deploy شغلك للناس. فبعدي علي ازاي ترفع بروجكت بسيط علي سيرفر بدائي وبعدين ازاي تبدأ تستعمل Docker و Nginx وغيرهم من الادوات الي بنستعملها يومياً ولا غنى عنهم في شغلنا.
لينكات مفيدة:
Nginx
Deploy on Netlify
Depl
Popovers and Floating UIs
في الحلقة دي بنتكلم عن احد اهم عناصر الويب UI وهي اي حاجة طايرة عندك في الشاشة بنعملها ازاي وايه الصعوبات الي بنواجهها في النوع دا من الـ Components.
بتكلم برضو عن ادوات الـ Positioning المتاحة لينا وازاي بنستعملها في سيناريوهات مختلفة. وايه الضوء في اخر النفق الي ممكن يحللنا كل مشاكلنا.
لينكات مفيدة:
CSS Position | MDN
Identifying the containing block | MDN
Tippy.js
Floating UI (Recommen
App versioning
في الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه.
ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.
لينكات مفيدة:
Semantic versioning
The problem with Drag and Drop API
في الحلقة دي بتكلم عن الـ Drag and Drop API واستعملاته المتعددة الي بنشوفها كل يوم في اي سوفتوير بنستعمله ومكوناته الاساسية وامكانياته علي الويب.
بنتطرق للـ Events والاختلافات ما بينهم وامتي وازاي تستعمل اياً منهم بكفاءة، واخيراً ليه انا بعتبر الـ API دا من اصعب الـ APIs وايه افضل المكتبات الحالية الي حتوفر عليك وقت ومجهود.
لينكات مفيدة:
Drag and Drop API | MDN
File drag and drop | MDN
DataTr
Functional Jargon
في الحلقة دي بتكلم عن الـ Functional Programming وبعض من مصطلحاتها الغريبة وبرمي امثلة عبيطة تفهمك الفكرة وبرمي امثلة تانية عملية اكثر وتوريك انك بالفعل بتستعمل الحاجات دي كل يوم من غير ما تاخد بالك.
في نفس الوقت، بربط ما بين المصطلحات دي في صورتها ككود وازاي احنا بنطبقها في الـ Components.
لينكات مفيدة:
Functional Light JS
Currying
A very old presentation I did on functional JS
Vue.js Scop
Optimizing Images
في حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم.
هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة.
سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي ت
TailwindCSS Overview
في الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS.
بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا!
وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له.
لينكات مفيدة:
TailwindCSS
In defense of utility first CSS
Adding Tailwind Variants
TailwindCSS Intellisene for V
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
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
Slow Down, Serve Better
في هذه الحلقة بتناول ثقافة الـ Performance المتمركزة حول الـ Load speed وبالرغم من اهميتها الا انها لا تحكي تجربة المستخدم كاملة وبالتالي سعيك فيها بلا فهم قد يؤدي الي نتائج سلبية.
لينكات مفيدة:
Core Web Vitals
Interaction to next paint
Page speed insights
Time keeping with Temporals
في الحلقة دي بنتكلم عن مشاكل الـ Date في الجافاسكربت وليه مقترح الـ Temporals بيهدف لحل المشاكل دي عن طريق نظام سلس بيمثل اكثر من استخدام لعناصر التواريخ والتحويل ما بينهم بسهولة.
لينكات مفيدة:
Temporals Proposal GitHub
Temporals docs
Temporals cookbook
Temporals polyfill implementation
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
Being practical about PWAs
كانت فكرتي عن الــPWAs غلط من ساعة ما اتعلمتهم واعتقادي ان دا مستقبل الويب، وبعد ما جربت اطبقهم علي شغلي اليومي حسيت ان ملهمش لازمة لان استخداماتهم قليلة ومش لكل انواع الويب سايتس.
لكن دلوقتي الـ PWAs بيمثلوا مجموعة افكار وتقنيات تقدر تستعمل منهم ما ينفعك ويفيدك وتترك مالا يعنيك، في الحلقة دي بديك امثلة ويعني ايه PWA دلوقتي.
لينكات مفيدة:
Web.dev PWA articles
PWA display modes
PWA installa
Immutability
في هذه الحلقة بنتكلم عن الـ Immutability و الـ mutability وازاي بيأثروا علي علي الكود الي احنا بنكتبه وانهي منهم تعتبر خاصية مرغوبة اكثر من التانية ولا كل واحدة ليها نقاط قوة يجب استغلالها في مكانها.
وبرضوا بنبص علي الـ Frameworks وازاي بعضهم بيفرض واحدة منهم عليك وليه.
لينكات مفيدة:
حلقة مقارنة الـ Frameworks مع احمد الأمام
Immer
Mutable - MDN Definition
Mutability vs Immutability in Ja
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
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 tru
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
Deduping and Batching HTTP Requests
في هذه الحلقة بنتكلم عن اثرين جانبيين للأسلوب الـ Declarative في بناء الويب الي كلنا بنكتب به ونتيجة ذلك علي الـ HTTP Requests وازاي نقدر نحلهم بشوية فهم ولعب مع الـ Promises.
لينكات مفيدة:
- Request Deduplication - villus source
- Request Batching - villus source
Micro Frontends
في الحلقة دي بتكلم عن الـ Micro Frontends وايه الاسباب الي ادت لنشأة الفكرة وفي نفس الوقت بتكلم عن مشاكلها علي الصعيد التقني والإداري في الشركات.
لو انت بتستعمل Micro Frontends في شركتك، شاركنا بتجربتك واسبابك وممكن نناقشها في حلقة اخري.
ESM vs. CommonJS
في هذه الحلقة بنتكلم عن الـ Modules في الجافاسكربت الي بتسمحلنا نكتب كود ونستعمله في اكثر من مكان واكثر من مشروع.
عالم الجافاسكربت بيتجه بشكل كبير الي ESM الي هي الستاندرد المتفق عليه، وبدأنا نسيب CommonJS ورانا الي كانت ومازالت عدد كبير من المكتبات بيستعملها. فأنا بقولك ايه المشاكل الي بتحصل وحتحصل بسبب الاتجاه دا والانقسام الكبير الناتج عنه وازاي نعدي الفترة دي باقل مشاكل ممكنة.
Linting and Formatting
في الحلقة دي بنتكلم مشكلة رئيسية بتواجهنا اثناء كتابة الكود سواء لوحدك او مع فريق، ازاي كلنا نكتب كود شبه بعضه في الشكل والجودة بالرغم من اختلاف خبرات وتجارب افراد الفريق.
ودا يجيبنا للـ Formatting و الـ Linting ويفرقو ايه عن بعض وازاي ممكن تستعملهم في شغلك في شركتك علي اكثر من مستوي بحيث تضمن مفيش كود غير متناسق يندمج مع باقي الكود.
روابط مفيدة:
ESlint
JSLint
JS Standard
Prettier
Type
Debouncing Madness
توبيك صعب شوية فهات قهوة او شاي معاك.
في الحلقة دي بنتكلم عن الـ Debouncing وليه بنستعمله في حاجات كتيرة، وقد تعتقد انه دايماً بيعتمد علي Delay ثابت ولكن زي ما حتكتشف في الحلقة حتلاقي ان ممكن نخليه يعتمد علي اي حاجة احنا عايزنها وازاي دا بيفرق معاك في الكود الي بتكتبه.
لينكات مفيدة:
Debouncing and Throttling Explained Through Examples
throttle-debounce npm library
Leading vs Trailing edge
Caching
في الحلقة دي بنتكلم عن الـ Caching في الفرونت ايند وايه الطرق والادوات المتاحة لينا علشان نحسن الأداء وحاجات معينة في الويب ابليكيشنز بتاعتنا.
حنتكلم برضو عن الاستراتجيات الي تقدر تستعملها في الـ Caching وازاي دا بيأثر علي تجربة المستخدم في النهاية وايه انسب استراتيجية بشكل عام.
لينكات مفيدة:
Cache API
IndexedDB best practices
Cache control headers (Browser cache)
Udacity offline web app
Confidence by Testing
في الحلقة دي حنتكلم عن الـ Testing وايه الهدف منه اصلاً. حنشوف ايه انواع الـ Tests المختلفة والي بقت من متطلبات شغلنا النهاردا. وكالعادة ليا اراء معينة قد تتفق او تختلف معها.
لينكات مفيدة:
MSW (API mocking framework)
Testing RNGs
Playwright
Pact (Contract testing framework)
Web Workers X (Twitter) Space
EgyptJS
Monitoring and Observability
انت دلوقتي عملت deploy للأبليكيشن بتاعك، وبعدين؟ هل هو شغال عند الناس التانيه ولا لا؟ هل في ايرورز بتطلع؟ ليه الناس بتقول عليه بطئ او مبيحملش؟ وليه الناس دي بتسأل علي feature انت عاملها بقالك شهور!
في الحلقة دي بنتكلم عن موضوع يتم تجاهله كثيراً في الفرونت ايند. ازاي تراقب الابليكشن بتاعك علي اجهزة الناس التانيه وازاي تستفيد من دا انك تحسن من الابليكشن بتاعك وازاي دا نص الشغلانه التاني الي محدش بي
Fetch!
مؤخرا شفت ناس لسه بتستعمل XHR و Axios في ٢٠٢٣ وعلشان كدا في الحلقة دي بنتكلم عن Fetch وليه لازم تستعملها بدلاً من اي مكتبة تانيه. بناقش الاختلافات وميزات هذه الاختلافات وايه علاقتها بالStreaming والسبب الوحيد الي يخليك ترجع لXHR.
لينكات مفيدة:
Fetch API
You may not need axios
Fetch download progress workaround
Abort controller
Headless Components
بنتكلم عن الHeadless components وايه الفروق بينها وبين حاجات مشابهة زي Renderless components وامتي استعملهم واعتقاداتي الشخصية عن مدي قدرتهم علي حل المشكلة الازلية بتاعة Buy vs. Build.
Radix UI
React-aria
Web Workers Overview
في الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي.
لينكات مفيدة:
Sharing Websocket connections
Service workers lifecycle
Partytown
Concurrency worker scaling example
Web workers API | MDN
Transferable objects | MDN
UI Libraries: When to Avoid
في الحلقة دي بنتكلم عن الUI Libraries والمشاكل الي بيحلوها والمشاكل الي بيقدموها ليك كدين حتدفعه بعدين وايه محاولات الEcosystem بتاعنا في حل كل هذه المشاكل وليه مفيش حل واحد سحري.
State management
محاولة جريئة لتلخيص ال state management في اربعين دقيقة مروراً بتفاصيل كثيرة زي ال persistence وال async state وغيرهم من الحفر الي حفرناها لنفسنا في الفرونت ايند.
يعني ايه اصلاً state وليه لازم نديرها؟ ايه الحلول الي بنستعملها في شغلنا النهاردا وايه احدث ما توصله العقل البشري للنقاشين الي زينا في هذا الموضوع.
لينكات مفيدة:
Pinia.js
Redux
MobX
Overmind
Bundlers overview
في الحلقة دي بنتكلم عن تاريخ الBundling في الويب ورحلة تطور الTooling فيما يتعلق بتلزيق ملفات الجافاسكربت مع بعضها حتي يومنا هذا.
بنتكلم عن Vite, Webpack, Rollup وغيرهم من الادوات الضرورية في شغلنا في الفرونت ايند والمستقبل شكله عامل ازاي.
لينكات مفيدة:
- Vitejs
- Turbopack
- Rollupjs
- Parcel
- esbuild
SSR vs. SSG vs. SPA
غالبا قد سمعت مؤخراً عن مصطلحات زي SSR او SSG او SPA او حتي Meta-framework وعلاقتهم في ازاي بنوصل الكود بتاعنا للمستهلك.
في الحلقة دي بنحاول نفك طلاسم المصطلحات المختلفة وايه المشاكل الموجودة وحلولها.
لينكات مفيدة:
Nuxt.js
Next.js
Astro
Type safety
حنتكلم عن الTypes وليه محتاجينها في شغلنا اكثر من قبل كدا و ليه الTypeScript هي افضل حاجة ممكن تضيفها لمشاريعك القادمة والحالية.
برضو حنتكلم عن ازاي تحول مشروعك من JavaScript لTypeScriptبشكل آمن وسريع وحنختم بشوية نصائح عن ايه الي تاخد بالك منه وتركز عليه وانت بتتعلم TypeScript.
لينكات مفيدة:
State of JavaScript survey results - TypeScript usage
`tsconfig` reference
Frontend masters - TypeSc
Expecting errors
مفيش حاجة بتمشي عدل ابداً في شغلنا، وبالتالي لازم نتعلم ازاي نتوقع المشاكل الي ممكن تحصل وازاي نتعامل معها ونكتشفها.
بتكلم عن الحالات الي ممكن انت تشوفها كأيرور التي يجب معاملتها انها جزء لا يتجزئ من الابليكشن بتاعك. هي الايرورز الي غالبا مش بتجيلك في ديزاين او بتتقالك في ميتنج وازاي هي Business logic اكتر منها Errors.
من وجهة نظري، انت كفرونت ايند اكتر شخص مؤهل لاكتشاف الحالات دي والتعامل معها.
ا
