Episodes
في الحلقة دي ببص علي الـ Signals Proposal على TC39 وبشرح ليه من وجهة نظري دي اضافة تاريخية للجافاسكربت وحتفرق معانا ازاي كلنا بغض النظر عن ايه الـ Framework الي بنستعمله.
الحلقة دي برعاية Prisma
شكر خاص لحسام حمدي على الاداء الصوتي للاعلان.
لينكات مفيدة:
Signals Proposal
Solid Signals
Vue Signal Implementation
Angular Signals
Preact Signals
React Signals 😜
Published 10/06/24
في الحلقة دي بتكلم عن الـ Keyboard Events وايه انواعها المختلفة وانسب الاستخدامات لكل واحد فيهم.
بتكلم برضو عن ازاي تضيف Shortcuts للابليكشن بتاعك سواء علي مستوى الابليكشن او مستوى الـ Components وازاي دا حيفرق مع مستخدمينك بشكل كبير واثره علي تقنيات الوصول وتجربة المستخدم.
الحلقة دي برعاية Prisma
لينكات مفيدة:
Keyboard Event | MDN
Keyboard Event code values | MDN
Fix your annoying Popups with the CloseWatcher API
Published 09/29/24
هل استعملت قبل كدا 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
Published 09/09/24
في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS موجودة من سنين واصبحت متاحة في جميع المتصفحات السنة الي فاتت.
الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture.
دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries.
لينكات مفيدة:
Media Queries | MDN
Container Queries | MDN
How to use container queries now |...
Published 09/04/24
في الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت.
لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه.
وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك.
لينكات مفيدة:
animation-timeline | MDN
scroll-driven animations demos
Scroll Driven Animations | Untyped #37
Popovers and Floating UIs | Untyped #34
CSS.supports...
Published 08/25/24
هل تسائلت ليه دايما بتسمع ان الـ Forms صعبة لكن مفهمتش ليه؟ ليه ليها مكتبات كتيرة وايه المشاكل الي بيحاولوا يحلوها؟
في الحلقة دي بتكلم عن الـ Forms من اكثر من منظور. اولاً من واقع خبرتي كواحد اشتغل عليها، كواحد استعملها وكواحد عمل مكتبات تساعد ملايين الاشخاص انهم يعملوا Forms وازاي الـ Balance ما بين المناظير المختلفة دي بتفرق في جودة المكتبة الي انت بتستعملها.
لينكات مفيدة:
FormData Object | MDN
Form Data Event | MDN
Form Essentials | Vue.js Docs
Constraint Validation | MDN
Zod
...
Published 08/18/24
في الحلقة دي بتكلم عن الـ 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
Published 08/11/24
في الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ Idempotency وايه علاقته بالـ Requests الي بنعملها من الفرونت ايند وازاي ممكن يخلي الـ Application افضل واقل عرضة لاخطاء قد تكون كارثية.
من خلال بعض الامثلة العملية وحاجات اشتغلت عليها بنفسي نقدر نفهم امتي منحتاجهوش وامتى لازم نستعمله.
لينكات مفيدة:
Stripe's API on Idempotent Requests
Shopify's API on Idempotent Requests
Published 08/04/24
في الحلقة دي بتكلم عن الـ VDOM وازاي تقارن بالـ DOM وليه احنا كنا محتاجينها بشدة وازاي ممكن تختلف من Framework لآخر بالرغم من انها نفس المبدأ وازاي الاختلافات دي بتأثر عليك في طريقة كتابتك للكود.
ببص عليها من نواحي مختلفة ممكن مسمعتهاش قبل كدا زي ليه الـ HTML سيئ كوسيلة Serialization وايه الي يخلي الـ VDOM اسهل في عملية الـ Rendering.
وبختم بنظرة علي آخر الـ Frameworks وليه التطور القادم للادوات بتاعتنا ممكن يخلينا نتخلى عن VDOM وليه دا تطور للأفضل.
لينكات مفيدة:
OTMT Putting React...
Published 07/28/24
تصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT.
الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key.
فلو انت بتعمل كدا علي الـ Client Side دا مش خطر.
الخطر ان يكون الـ Secret Key موجود بشكل ما علي الـ Client Side زي مثلاً يكون في موضع يمكنه انه يتحقق من صحة الـ Token من غير ما يرجع للسيرفر، فدا خطر لانه بيلمح ان الـ Secret Key موجود علي الـ Client.
شكرا للي تواصلوا معايا...
Published 07/28/24
في الحلقة دي بتكلم عن الـ 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)
Published 07/21/24
في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags.
بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code.
بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية.
لينكات مفيدة:
Flipper
OpenFeature
Published 07/14/24
في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار.
بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app".
لينكات مفيدة:
What PWA Can Do Today
Cordova
Ionic Framework
Capacitor
Published 07/07/24
في الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ 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
...
Published 06/30/24
في الحلقة دي بتكلم عن الـ 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
Published 06/26/24
كل سنة وانتم طيبين، في الحلقة دي بتكلم عن الـ Debugging عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة.
وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة.
لينكات مفيدة:
Console API | MDN
Pause your code with breakpoints
debugger statement
Debugging in VS Code
Published 06/17/24
في الحلقة دي بتكلم عن الـ 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
Published 06/09/24
الـ 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
Published 06/05/24
في الحلقة دي بتكلم عن خاصية جديدة في الـ 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
...
Published 05/27/24
في الحلقة دي بتكلم عن الـ Optimistic Responses كـ Pattern مهم لازم تتعلمه وتعرف تطبقه بسبب اثره علي الـ Performance والـ UX.
بناقش ايه الشروط المناسبة ليه، وبدي امثلة عملية عن حاجات انت بتستعملها كل يوم بتطبق الاسلوب دا بشكل ناجح وازاي بيأثر عليك كمستخدم للحاجات دي وكمان امتي مستعملهوش!
لينكات مفيدة:
True Lies of Optimistic User Interfaces
Optimistic mutation results - Apollo Docs
Pending UI - Remix Docs
Published 05/19/24
في الحلقة دي بتكلم عن مقدار المعلومات في الـ DevOps و الـ CI/CD الي لازم تكون عندك وتكتسبها كـ Frontend علشان تكون فعال في سوق العمل.
بتكلم عن ادوات مختلفة محتاج تتعلمها علشان تقدر تـ Deploy شغلك للناس. فبعدي علي ازاي ترفع بروجكت بسيط علي سيرفر بدائي وبعدين ازاي تبدأ تستعمل Docker و Nginx وغيرهم من الادوات الي بنستعملها يومياً ولا غنى عنهم في شغلنا.
لينكات مفيدة:
Nginx
Deploy on Netlify
Deploy Node.js App with Docker
PM2
Certbot
Published 05/12/24
في الحلقة دي بنتكلم عن احد اهم عناصر الويب 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
...
Published 05/05/24
في الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه.
ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.
لينكات مفيدة:
Semantic versioning
Published 04/28/24
في الحلقة دي بتكلم عن الـ 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