Untyped

Untyped

By Abdelrahman AwadTechnology
Download on the App Store

Untyped episodes

  • 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
      • 32 min
    • 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


        • 1 hr
      • 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
          • 35 min
        • Repeatable Requests with Idempotency

          في الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ Idempotency وايه علاقته بالـ Requests الي بنعملها من الفرونت ايند وازاي ممكن يخلي الـ Application افضل واقل عرضة لاخطاء قد تكون كارثية.

          من خلال بعض الامثلة العملية وحاجات اشتغلت عليها بنفسي نقدر نفهم امتي منحتاجهوش وامتى لازم نستعمله.

          لينكات مفيدة:

          • Stripe's API on Idempotent Requests
          • Shopify's API on Idempotent Requests
            • 35 min
          • 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
              • 45 min
            • Corrections on Auth

              تصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT.

              الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key.

              فلو انت بتعمل كدا علي الـ Client Side دا مش خطر.

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


              شكرا للي تواصلوا معايا وصححولي الي انا قولته 🙏

              5 min
            • 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)
                • 50 min
              • Ship Faster with Feature Flags

                في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags.

                بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code.

                بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية.

                لينكات مفيدة:

                • Flipper
                • OpenFeature
                  • 32 min
                • Mobile Apps with JavaScript

                  في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار.

                  بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app".

                  لينكات مفيدة:

                  • What PWA Can Do Today
                  • Cordova
                  • Ionic Framework
                  • Capacitor


                    • 40 min
                  • 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
                      • 55 min

                    About Untyped

                    From the publisher's feed

                    نصف ساعه اسبوعيا من الهبد في مجال الفرونت ايند والجافاسكربت بالعربي