Untyped

Untyped

By Abdelrahman AwadTechnology
Download on the App Store

Untyped episodes

  • Coming up with Formwerk

    في الحلقة دي بتكلم عن بروجكت Open-source نشرته مؤخراً اسمه Formwerk.

    الحلقة مش Technical لكنها بتتطرق لازاي بحدد اني اعمل مشروع open-source جديد ولا اكمل على مشروع قديم، ازاي بحدد ان لما اصغر الـScope اقدر اقدم اكثر للمستخدم في الحتة الصغيرة الي انا بعملها في المشروع.

    حابين اقتراحتكم ومشاركتكم في المشروع!


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

    • Headless Skinless Boneless Lifeless UI
    • Formwerk
      • 43 min
    • Shaking Things Up

      في الحلقة دي بتكلم عن الـ 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
        • 47 min
      • One Page at a Time

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

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

        45 min
      • Best Friends Forever?

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

        سيناريو تاني، مش عارف تعمل ايه بالـ JWT ولا تخزنه فيه او تعمله Refresh بشكل مناسب ازاي.

        في الحلقة دي بنكتشف فكرة الـ. Backend for Frontend وازاي بتحل احد مشاكل الـ Architecture الكبيرة في السيناريوهات دي وازاي هي مش بعيدة عنك النهاردا وتقدر توظفها للفرونت ايند بتاعك.

        38 min
      • Cache Me If You Can

        هل طورت عادة انك تفتح اللينكات في tabs جديدة بسبب انك عارف انك لو دوست Back مش حيرجعك مكانك في الصفحة السابقة؟ ايه رأيك لو قولتلك انك تقدر تتحكم بدا كـ developer؟


        في الحلقة دي بتكلم عن الـ Back/forward cache وازاي كانت مبهمة لفترة لكن مؤخراً بقا عندنا APIs وادوات نقدر نستعملها علشان نفعلها في الويب ابليكشنز بتاعتنا وكمان نقدر نعملها debugging ونقيس مدى فعاليتها علشان نستغلها لتحسين اداء صفحات الويب بتاعتنا بشكل ملحوظ.


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

        • bfcache | web.dev
        • pageshow and pagehide events
        • Page Life Cycle API
        • Abort Signals | Untyped.fm
          • 40 min
        • Of CORS You’re Blocked!

          في الحلقة دي بتكلم عن موضوع قد يكون معقد لكن في حقيقته هو بسيط، لكنه معقد ناس كتيرة في مجالنا علي الجبهتين سواء فرونت ايند او باك ايند.

          في الحلقة دي باخد الموضوع من اوله وبشرح ليه فهمك للـ CORS بشكل صحيح يقدر يخليك تحل مشاكله بشكل اسرع وفي نفس الوقت يخليك تقدر تستعمل كأداة Security.


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

          • CORS | MDN
          • Origin | MDN Glossary
            • 29 min
          • Signals Proposal

            في الحلقة دي ببص علي الـ Signals Proposal على TC39 وبشرح ليه من وجهة نظري دي اضافة تاريخية للجافاسكربت وحتفرق معانا ازاي كلنا بغض النظر عن ايه الـ Framework الي بنستعمله.

            الحلقة دي برعاية Prisma

            شكر خاص لحسام حمدي على الاداء الصوتي للاعلان.


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

            • Signals Proposal
            • Solid Signals
            • Vue Signal Implementation
            • Angular Signals
            • Preact Signals
            • React Signals 😜
              • 37 min
            • Keyboard Events

              في الحلقة دي بتكلم عن الـ Keyboard Events وايه انواعها المختلفة وانسب الاستخدامات لكل واحد فيهم.

              بتكلم برضو عن ازاي تضيف Shortcuts للابليكشن بتاعك سواء علي مستوى الابليكشن او مستوى الـ Components وازاي دا حيفرق مع مستخدمينك بشكل كبير واثره علي تقنيات الوصول وتجربة المستخدم.

              الحلقة دي برعاية Prisma

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

              • Keyboard Event | MDN
              • Keyboard Event code values | MDN
              • Fix your annoying Popups with the CloseWatcher API
                • 50 min
              • Transition Events

                هل استعملت قبل كدا 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
                  • 40 min
                • You should use Container Queries Now

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

                  About Untyped

                  From the publisher's feed

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