Untyped

في الحلقة دي حتكلم عن رحلتي في بناء 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

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

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

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

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

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

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

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

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

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

هل استعملت قبل كدا 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

في الحلقة دي بتكلم عن خاصية جديدة في الـ 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

في الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت. لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه. وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك. لينكات مفيدة: 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

هل تسائلت ليه دايما بتسمع ان الـ 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

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

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

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

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

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

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