Untyped

Untyped

By Abdelrahman AwadTechnology
Download on the App Store

Untyped episodes

  • 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
      • 43 min
    • Debugging JS with logs and breakpoints

      كل سنة وانتم طيبين، في الحلقة دي بتكلم عن الـ Debugging عن طريق الـ console.log واخواتها وكمان بتكلم عن الـ breakpoints ونكهاتها المختلفة.

      وهدف الحلقة اني اشرحلك الفروقات الرئيسية بينهم علشان تعرف تستعمل كلا منهم في الموقف المناسب، والموضوع ملهوش علاقة بمستوى الخبرة.


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

      • Console API | MDN
      • Pause your code with breakpoints
      • debugger statement
      • Debugging in VS Code


        • 37 min
      • 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 and rich snippets
        • JSON-LD
        • Google Search Console
        • ahrefs
          • 47 min
        • 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
          • Previous Episode on Deduping HTTP requests
          • Previous Episode on PWAs
            • 48 min
          • Scroll Driven Animations

            في الحلقة دي بتكلم عن خاصية جديدة في الـ 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
            • Scroll-driven animations case study
            • Scroll-driven animations Demos


              • 38 min
            • Lying with Optimistic UI

              في الحلقة دي بتكلم عن الـ Optimistic Responses كـ Pattern مهم لازم تتعلمه وتعرف تطبقه بسبب اثره علي الـ Performance والـ UX.

              بناقش ايه الشروط المناسبة ليه، وبدي امثلة عملية عن حاجات انت بتستعملها كل يوم بتطبق الاسلوب دا بشكل ناجح وازاي بيأثر عليك كمستخدم للحاجات دي وكمان امتي مستعملهوش!

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


              • True Lies of Optimistic User Interfaces
              • Optimistic mutation results - Apollo Docs
              • Pending UI - Remix Docs
                • 44 min
              • Just Enough DevOps

                في الحلقة دي بتكلم عن مقدار المعلومات في الـ DevOps و الـ CI/CD الي لازم تكون عندك وتكتسبها كـ Frontend علشان تكون فعال في سوق العمل.

                بتكلم عن ادوات مختلفة محتاج تتعلمها علشان تقدر تـ Deploy شغلك للناس. فبعدي علي ازاي ترفع بروجكت بسيط علي سيرفر بدائي وبعدين ازاي تبدأ تستعمل Docker و Nginx وغيرهم من الادوات الي بنستعملها يومياً ولا غنى عنهم في شغلنا.


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

                • Nginx
                • Deploy on Netlify
                • Deploy Node.js App with Docker
                • PM2
                • Certbot
                  • 40 min
                • Popovers and Floating UIs

                  في الحلقة دي بنتكلم عن احد اهم عناصر الويب 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
                  • Anchor Positioning draft
                  • Anchor Positioning tool
                    • 49 min
                  • App versioning

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

                    ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.

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

                    • Semantic versioning


                      • 44 min
                    • The problem with Drag and Drop API

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

                      About Untyped

                      From the publisher's feed

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