DiscoverUntyped
58 Episodes
Reverse
هل طورت عادة انك تفتح اللينكات في 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
في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار.
بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app".
لينكات مفيدة:
What PWA Can Do Today
Cordova
Ionic Framework
Capacitor
في الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ 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
في الحلقة دي بتكلم عن الـ 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 عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة.
وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة.
لينكات مفيدة:
Console API | MDN
Pause your code with breakpoints
debugger statement
Debugging in VS Code
في الحلقة دي بتكلم عن الـ 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
الـ 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
Top Podcasts
The Best New Comedy Podcast Right Now – June 2024The Best News Podcast Right Now – June 2024The Best New Business Podcast Right Now – June 2024The Best New Sports Podcast Right Now – June 2024The Best New True Crime Podcast Right Now – June 2024The Best New Joe Rogan Experience Podcast Right Now – June 20The Best New Dan Bongino Show Podcast Right Now – June 20The Best New Mark Levin Podcast – June 2024
United States
بودكاست ممتاز ياهندسه 💡 عندي استفسار في جزئيه ال hydration و ال partial hydration لما السيرفر الأول ي render و يبعت ال plain Html بعدين الbrowser يعمل rerender عشان يmatch بين الاتنين عايز افهم بالنسبه لل user ملفات ال js في الحالتين بيتم استخدامهم ازاي ؟ يعني لما ال user يدخل علي الويبسايت الاول السيرفر هو المسؤل عن استخدام ال js fiels و بعدين يبعتها لل user في الحاله التانيه الbrowser هو اللي بيحمل ال js fiels عشان يقدر يستخدمها و بيحملها منين و في حاله ال hydration كل الملفات بتتحمل صح؟