في الحلقة دي بتكلم عن مشكلة لما الفرونت ايند يكلم باك ايند احدث منه او العكس، فرونت ايند قديم يكلم باك ايند احدث منه.
ايه حلول المشكلة دي وتفرق من نوع application لآخر ولا لا؟ وايه الحلول النصفية الي ممكن تمشينا مؤقتاً لغاية ما نحلها بشكل كامل.
في الحلقة دي بتكلم عن الـ Drag and Drop API واستعملاته المتعددة الي بنشوفها كل يوم في اي سوفتوير بنستعمله ومكوناته الاساسية وامكانياته علي الويب.
بنتطرق للـ Events والاختلافات ما بينهم وامتي وازاي تستعمل اياً منهم بكفاءة، واخيراً ليه انا بعتبر الـ API دا من اصعب الـ APIs وايه افضل المكتبات الحالية الي حتوفر عليك وقت ومجهود.
في الحلقة دي بتكلم عن الـ Functional Programming وبعض من مصطلحاتها الغريبة وبرمي امثلة عبيطة تفهمك الفكرة وبرمي امثلة تانية عملية اكثر وتوريك انك بالفعل بتستعمل الحاجات دي كل يوم من غير ما تاخد بالك.
في نفس الوقت، بربط ما بين المصطلحات دي في صورتها ككود وازاي احنا بنطبقها في الـ Components.
في حلقتنا دي، هنتكلم عن ازاي بنستعمل الصور في الويب وإزاي بتأثر علي سرعة التحميل وتجربة المستخدم.
هنتكلم عن أحدث التقنيات والأدوات اللي تقدر تستخدمها في تحسين الصور، من غير ما نضحي بالجودة، وكمان هنعرف إزاي تختار الصيغة المثالية للصورة وتستخدم الضغط الصحيح بدون ما تفقد جودة الصورة.
سواء كنت مطور مواقع مبتدئ أو محترف، الحلقة دي هتديك الكثير من النصايح اللي حتحتاجها علشان تعلى مستوى صفحتك وتخلي تجربة المستخدمين أسرع وأفضل.
في الحلقة دي بتكلم عن TailwindCSS وبنشوف ليه اكتسح الساحة واحدث تغيير كبير في ازاي بنكتب الـ CSS.
بنلقي نظرة برضو علي نقاط النقض وسلبياته الي بيطرحها البعض وبنرد عليها وهل هو فعلاً كانك بتكتب inline styles ولا لا!
وليه في وجهة نظري هو طريقة جديدة لكتابة الـ CSS وليس تبسيطاً له.
في الحلقة دي بناخد نبذة عن Astro Framework والافكار المميزة الي قدمها للـ Ecosystem وجعلته الافضل في استخدامات عديدة زي مواقع المحتوي.
برضو بنبص ليه الـ Islands architecture ميزته من ناحية السرعة وليه هي حل عبقري لمشاكل الـFrameworks الي بنستعملها.
في الحلقة دي بنتكلم عن افضل طريقة لو عندك Request واخد وقت اكتر من اللازم وعايز تلغيه، او مجموعة مع بعض وعايز تلغيهم كلهم في نفس الوقت. كل دا مع استخدامات تانية غريبة للـ Abort Signals.
في هذه الحلقة بتناول ثقافة الـ Performance المتمركزة حول الـ Load speed وبالرغم من اهميتها الا انها لا تحكي تجربة المستخدم كاملة وبالتالي سعيك فيها بلا فهم قد يؤدي الي نتائج سلبية.
في الحلقة دي بنتكلم عن مشاكل الـ Date في الجافاسكربت وليه مقترح الـ Temporals بيهدف لحل المشاكل دي عن طريق نظام سلس بيمثل اكثر من استخدام لعناصر التواريخ والتحويل ما بينهم بسهولة.
في هذه الحلقة باخدكم في لفة حول الـ GraphQL من كذا منظور وبنبص علي المشاكل الي بيحلها ومشاكله وازاي نحلها وشوية نصائح و Best practices. وليه في اعتقادي، مفيش سبب يمنعك من استعماله!
كانت فكرتي عن الــPWAs غلط من ساعة ما اتعلمتهم واعتقادي ان دا مستقبل الويب، وبعد ما جربت اطبقهم علي شغلي اليومي حسيت ان ملهمش لازمة لان استخداماتهم قليلة ومش لكل انواع الويب سايتس.
لكن دلوقتي الـ PWAs بيمثلوا مجموعة افكار وتقنيات تقدر تستعمل منهم ما ينفعك ويفيدك وتترك مالا يعنيك، في الحلقة دي بديك امثلة ويعني ايه PWA دلوقتي.
في هذه الحلقة بنتكلم عن الـ Immutability و الـ mutability وازاي بيأثروا علي علي الكود الي احنا بنكتبه وانهي منهم تعتبر خاصية مرغوبة اكثر من التانية ولا كل واحدة ليها نقاط قوة يجب استغلالها في مكانها.
وبرضوا بنبص علي الـ Frameworks وازاي بعضهم بيفرض واحدة منهم عليك وليه.
الـ JAMstack كان مصطلح بتسمعه كل يوم في حياتك كفرونت ايند وناس كتيرة كانت بتيجي تقولك تعالا نعمل ويبسايت باستعمال الطريقة دي.
لكن دلوقتي الكلمة اختفت تقريباً واتضح انها لم يكن ليها معنى من البداية، ايه القصة؟
- Is Jamstack Officially Finished?
- How to Blow Up a Category - Netlify's New Era and The JAMstack Endgame
- JavaScript JAM Newsletter
في الحلقة دي بنغطي الـ For loos والفروق ما بين For ... in و For ... of مع بعض التعمق في ازاي بيشتغلو. واكيد في سؤال مهم اجا علي بالك، امتي استعملهم خاصة وانا عندي طرق اسهل مع ال( Array methods زي forEach و map.
وبختم بايه حكاية every وازاي ممكن تعملي مشاكل غير متوقعة!
في الحلقة دي حنتكلم عن الـ Code splitting واهدافه والغرض من اننا نـ Lazy Load الكود بتاعنا وازاي اعرف اد ايه من الكود بتاعي ممكن نعمله Split مع Chrome Devtools.
وايه آثار ذلك علي الأداء وتجربة المستخدم وهل دا شئ كثرته كويسة ولا لأ؟
في هذه الحلقة بنتكلم عن اثرين جانبيين للأسلوب الـ Declarative في بناء الويب الي كلنا بنكتب به ونتيجة ذلك علي الـ HTTP Requests وازاي نقدر نحلهم بشوية فهم ولعب مع الـ Promises.
في الحلقة دي بتكلم عن الـ Micro Frontends وايه الاسباب الي ادت لنشأة الفكرة وفي نفس الوقت بتكلم عن مشاكلها علي الصعيد التقني والإداري في الشركات.
لو انت بتستعمل Micro Frontends في شركتك، شاركنا بتجربتك واسبابك وممكن نناقشها في حلقة اخري.
في هذه الحلقة بنتكلم عن الـ Modules في الجافاسكربت الي بتسمحلنا نكتب كود ونستعمله في اكثر من مكان واكثر من مشروع.
عالم الجافاسكربت بيتجه بشكل كبير الي ESM الي هي الستاندرد المتفق عليه، وبدأنا نسيب CommonJS ورانا الي كانت ومازالت عدد كبير من المكتبات بيستعملها. فأنا بقولك ايه المشاكل الي بتحصل وحتحصل بسبب الاتجاه دا والانقسام الكبير الناتج عنه وازاي نعدي الفترة دي باقل مشاكل ممكنة.
في الحلقة دي بنتكلم مشكلة رئيسية بتواجهنا اثناء كتابة الكود سواء لوحدك او مع فريق، ازاي كلنا نكتب كود شبه بعضه في الشكل والجودة بالرغم من اختلاف خبرات وتجارب افراد الفريق.
ودا يجيبنا للـ Formatting و الـ Linting ويفرقو ايه عن بعض وازاي ممكن تستعملهم في شغلك في شركتك علي اكثر من مستوي بحيث تضمن مفيش كود غير متناسق يندمج مع باقي الكود.
روابط مفيدة:
ESlint
JSLint
JS Standard
Prettier
TypeScript ESLint
Husky
lint-staged
توبيك صعب شوية فهات قهوة او شاي معاك.
في الحلقة دي بنتكلم عن الـ Debouncing وليه بنستعمله في حاجات كتيرة، وقد تعتقد انه دايماً بيعتمد علي Delay ثابت ولكن زي ما حتكتشف في الحلقة حتلاقي ان ممكن نخليه يعتمد علي اي حاجة احنا عايزنها وازاي دا بيفرق معاك في الكود الي بتكتبه.
في الحلقة دي بنتكلم عن الـ Caching في الفرونت ايند وايه الطرق والادوات المتاحة لينا علشان نحسن الأداء وحاجات معينة في الويب ابليكيشنز بتاعتنا.
حنتكلم برضو عن الاستراتجيات الي تقدر تستعملها في الـ Caching وازاي دا بيأثر علي تجربة المستخدم في النهاية وايه انسب استراتيجية بشكل عام.
في الحلقة دي حنتكلم عن الـ Testing وايه الهدف منه اصلاً. حنشوف ايه انواع الـ Tests المختلفة والي بقت من متطلبات شغلنا النهاردا. وكالعادة ليا اراء معينة قد تتفق او تختلف معها.
انت دلوقتي عملت deploy للأبليكيشن بتاعك، وبعدين؟ هل هو شغال عند الناس التانيه ولا لا؟ هل في ايرورز بتطلع؟ ليه الناس بتقول عليه بطئ او مبيحملش؟ وليه الناس دي بتسأل علي feature انت عاملها بقالك شهور!
في الحلقة دي بنتكلم عن موضوع يتم تجاهله كثيراً في الفرونت ايند. ازاي تراقب الابليكشن بتاعك علي اجهزة الناس التانيه وازاي تستفيد من دا انك تحسن من الابليكشن بتاعك وازاي دا نص الشغلانه التاني الي محدش بيجيب سيرته كتير.
مؤخرا شفت ناس لسه بتستعمل XHR و Axios في ٢٠٢٣ وعلشان كدا في الحلقة دي بنتكلم عن Fetch وليه لازم تستعملها بدلاً من اي مكتبة تانيه. بناقش الاختلافات وميزات هذه الاختلافات وايه علاقتها بالStreaming والسبب الوحيد الي يخليك ترجع لXHR.
بنتكلم عن الHeadless components وايه الفروق بينها وبين حاجات مشابهة زي Renderless components وامتي استعملهم واعتقاداتي الشخصية عن مدي قدرتهم علي حل المشكلة الازلية بتاعة Buy vs. Build.
Radix UI
React-aria
في الحلقة دي بنتكلم عن ال Web workers وانواعهم المختلفة وامتي بستعمل كل نوع فيهم وبدي امثلة عملية عن الاستخدامات المناسبة لكل واحد فيهم الي استعملتهم فعلياً في شغلي.
في الحلقة دي بنتكلم عن الUI Libraries والمشاكل الي بيحلوها والمشاكل الي بيقدموها ليك كدين حتدفعه بعدين وايه محاولات الEcosystem بتاعنا في حل كل هذه المشاكل وليه مفيش حل واحد سحري.
محاولة جريئة لتلخيص ال state management في اربعين دقيقة مروراً بتفاصيل كثيرة زي ال persistence وال async state وغيرهم من الحفر الي حفرناها لنفسنا في الفرونت ايند.
يعني ايه اصلاً state وليه لازم نديرها؟ ايه الحلول الي بنستعملها في شغلنا النهاردا وايه احدث ما توصله العقل البشري للنقاشين الي زينا في هذا الموضوع.
في الحلقة دي بنتكلم عن تاريخ الBundling في الويب ورحلة تطور الTooling فيما يتعلق بتلزيق ملفات الجافاسكربت مع بعضها حتي يومنا هذا.
بنتكلم عن Vite, Webpack, Rollup وغيرهم من الادوات الضرورية في شغلنا في الفرونت ايند والمستقبل شكله عامل ازاي.
غالبا قد سمعت مؤخراً عن مصطلحات زي SSR او SSG او SPA او حتي Meta-framework وعلاقتهم في ازاي بنوصل الكود بتاعنا للمستهلك.
في الحلقة دي بنحاول نفك طلاسم المصطلحات المختلفة وايه المشاكل الموجودة وحلولها.
حنتكلم عن الTypes وليه محتاجينها في شغلنا اكثر من قبل كدا و ليه الTypeScript هي افضل حاجة ممكن تضيفها لمشاريعك القادمة والحالية.
برضو حنتكلم عن ازاي تحول مشروعك من JavaScript لTypeScriptبشكل آمن وسريع وحنختم بشوية نصائح عن ايه الي تاخد بالك منه وتركز عليه وانت بتتعلم TypeScript.
مفيش حاجة بتمشي عدل ابداً في شغلنا، وبالتالي لازم نتعلم ازاي نتوقع المشاكل الي ممكن تحصل وازاي نتعامل معها ونكتشفها.
بتكلم عن الحالات الي ممكن انت تشوفها كأيرور التي يجب معاملتها انها جزء لا يتجزئ من الابليكشن بتاعك. هي الايرورز الي غالبا مش بتجيلك في ديزاين او بتتقالك في ميتنج وازاي هي Business logic اكتر منها Errors.
من وجهة نظري، انت كفرونت ايند اكتر شخص مؤهل لاكتشاف الحالات دي والتعامل معها.
الحلقة دي قد تكون مفيدة لناس كتير ومش بالضرورة الفرونت ايند بس.
قد تكون سمعت عن السيجنالز مؤخرا وجاء علي بالك بعض الاسئلة مثل جت منين وليه كل فريمورك عايز منها حته. وليه بتوع فيو مقموصين منها.
في الحلقة دي بحاول اجيب الشريط من اوله وبنشوف الافكار المختفلة عن الرياكتيفتي وما يميز السيجنالز تحديداً عن غيرها.
بعض المصادر:
حلقة تيك بودكاست مع احمد الامام
Angular Signals
Solid reactive primitives
Vue primitives and connection to signals