Untyped

في الحلقة دي هنشوف ليه منظومة الـ bundling بتتعاد كتابتها بالكامل دلوقتي. الأدوات الجديدة زي Rspack وRolldown وOxc وTurbopack مش مجرد “بدائل أسرع”، دي إعادة التفكير في طريقة البناء من الأساس. هنمشي على التغييرات الجوهرية: الاعتماد على Rust و parallelism، تقليل cost الـ plugins، ومعالجة مشاكل بقالها سنين في Webpack والجيل القديم. الفكرة هنا إن الانتقال للأدوات دي مش رفاهية ولا مجرد تحسين أداء… ده ا...

في الحلقة دي هنتكلم عن الجانب “المرعب” شوية في الـ Package Managers 👻 ليه أحيانًا تلاقي نسخة تانية من React مستخبية، أو dependecy في مكان غريب؟ حنخش في رحلة تاريخية حوالين الـ Package Managers، ايه المشاكل الي بيحلوها، هنفهم يعني إيه peer dependencies، وإزاي الـ hoisting بيغيّر شكل الـ node_modules من غير ما تاخد بالك، وليه npm و Yarn ساعات بيسيبوا الدنيا تفلت وايه الي بيخلي pnpm مختلف. الحلقة كل...

الاعتقاد الشائع هو إن الجافاسكربت “بيشتغل في أي حتّة”، السيرفر والمتصفح، بس الحقيقة دلوقتي إنك لو شغّلت نفس السطر في مكانين مختلفين… في احتمال كويس إنه يبوظ في واحد منهم. في الحلقة دي، هنتكلم عن ليه بقى عندنا بيئات تشغيل كتير، وكل واحدة ليها مزاجها واولوياتها، وليه حاجات بسيطة زي fetch أو الـ File System ممكن تشتغل تمام هنا وتنهار هناك. وهنفهم إزاي شغل السيرفر بقى بيتقسم ما بين اللي بيقوم في جزء م...

في الحلقة دي بنتكلم عن الهجمات اللي بقت بتحصل في الـ supply chain خصوصًا على مكتبات الـ npm. إزاي كود بسيط بيستخدمه ملايين المطورين ممكن يتقلب لفخ يسرّب بيانات أو يفتح باب لهجوم وانت مش واخد بالك. هنفتكر شوية من أشهر الوقائع اللي هزت الـEcosystem مؤخراً ونشوف الدروس المستفادة. كمان هنتكلم عمليًا: إيه دورك كمؤلف مكتبة علشان تحمي المشروع بتاعك وإيه اللي تقدر تعمله كمستهلك يخلي استخدامك آمن قدر الإمك...

عايز تبدأ تساهم في الـ open source ومش عارف منين؟ في الحلقة دي هنتكلم إزاي تعمل أول خطوة، وتدخل المجتمع، وتخلي الكود بتاعك يبان للناس كلها. من أول fork لحد أول pull request، هتتعلم إزاي ممكن الشغل ابو بلاش دا يفتح لنفسك أبواب جديدة في الكارير وازاي دا مرتبط بدوافعك انك بتعمله عن حب مش عن مقابل. لينكات مفيدة: The Developer Road to Open Source World بالعربي The Developer Road to Open Source Part 2

في سوق الـ Tech في مصر، كل الناس بقت "Senior" حتى لو لسه مكمّلينش سنة! العناوين بقت أكبر من الخبرة، والمرتبات ساعات تبقى أوهام زي السراب. في الحلقة دي هنتكلم عن الـ pyramid scheme بتاع الـ titles، ليه التعويضات مش ماشية مع المسميات، وإزاي السلم الوظيفي ساعات بيقفلك الطريق بدل ما يفتحلك. سواء ماشي في سكة الـ IC أو داخل على Management، هتلاقي إن مش كل هرم بيوصل للقمة.

زمان كنا بنعمل ديبولويمِنت للفرونت إند بكم أمر بسيط على Nginx أو سيرفر عادي وخلاص. دلوقتي مع كل الادوات والـ platforms الجديدة بقينا بنعتمد على أوتوميشن زيادة ونسينا الأساسيات. النسيان ده مش بس بيخلينا نفقد السيطرة، ده كمان بيكلفنا فلوس أكتر من اللازم. في الحلقة دي هنتكلم عن إزاي نرجع نفكر في الـ Deployment كمهارة أساسية، إزاي نستخدمها كـ cost optimization حقيقي للبزنس، وإزاي نقدر ندخل لوجيك ذكي ب...

في الحلقة دي حتكلم عن TailwindCSS v4 وايه الجديد فيه ويفرقه عن الاصدارات الي فاتت. حغطي ازاي تحدث ليه وافضل الطرق لذلك وايه الي تاخد بالك منه في العملية دي. كمان بشارك معاكم ايه الي عجبني فيه وايه الي ضايقني منه ونصايحي لازاي تستعمله في المستقبل. لينكات مفيدة: Tailwind v4 Lighting CSS WindiCSS UnoCSS Upgrade Guide `@apply` issue with scoped CSS

في الحلقة دي هنتكلم عن موضوع بسيط في شكله لكن ليه تأثير ضخم. ليه مهم جدًا تبقى فاهم الـ boundaries بتاعة الداتا اللي بتتعامل معاها؟ وإزاي تجاهل الحدود دي ممكن يفتح عليك أبواب الـ edge cases والـ bugs اللي بتبوظ الدنيا! لينكات مفيدة: One Page at a Time | Untyped

في الحلقة دي من Untyped، بنتكلم عن null و undefined وكل القيم اللي بتعتبر فالصي في JavaScript. ليه وجودهم ساعات بيسبب مشاكل؟ وإزاي لغات تانية زي Rust و TypeScript بتتعامل مع الغياب ده بشكل أوضح من خلال أنواع زي Option و Result؟ كمان هنشوف إزاي المفاهيم دي بدأت تظهر في الجافاسكريبت برضه، سواء من خلال result objects أو أنماط بتفرض التعامل الصريح مع الغلطات.

في الحلقة دي، بنتكلم عن تسريحات الموظفين في شركات زي مايكروسوفت، والربط السريع اللي ناس كتير بتعمله بينها وبين الذكاء الاصطناعي. هل فعلاً الـAI هو السبب؟ ولا في عوامل تانية زي التوظيف الزايد، والتغيرات الاقتصادية؟ بنحاول نفهم الصورة كاملة بعيد عن الهلع والتبسيط الزايد.

في الحلقة دي من Untyped، بنتكلم عن هل فعلاً الـ LLMs ممكن تاخد مكان مبرمجي الـ frontend؟ ولا كل الضجة دي أوفر؟ هنحكي عن اللي فعلاً بتعمله الأدوات دي، وازاي ممكن تساعد، بس في نفس الوقت ليه لسه فيه حاجات مافيش AI بيعرف يتعامل معاها — من تجربة المستخدم لحد قرارات البزنس واكثر.

في الحلقة دي، بنتكلم عن إزاي تقدر تحافظ على الـ context بتاع اليوزر في الويب أب من غير ما الدنيا تبوظ بعد ما يعمل refresh أو يبعَت اللينك لحد تاني. بنشرح إمتى تستخدمهم، إمتى لأ، وإزاي تربطهم بـ localStorage لو حبيت. كمان بنعدّي على شوية سيناريوهات زي forms، filters، وpagination. لينكات مفيدة: URLSearchParams - MDN History API - MDN Location API - MDN

في الحلقة دي، هنتكلم عن فكرة الـ Standard Schemas وإزاي تقدر تكتب تعريف واحد للـ Schema وتبدّل بين مكتبات زي Zod و Valibot من غير ما تغيّر سطر واحد في الكود بتاعك. هنعرف ليه الموضوع ده مهم، وإزاي بيسهّل عليك تفضّل مرن ومش مربوط بمكتبة معينة. لينكات مفيدة: Standard Schema | GitHub Zod.dev valibot.dev arktype.io Standard schema implementations Standard schema consumers

في الحلقة دي حنلف وندور حوالين Rolldown، وهو احد احدث الـ Bundlers الي ظهرت مؤخراً في ساحة الجافاسكربت. حتكلم عن ليه كنا محتاجينه، يقرب ايه لـ Rollup، وهل كلنا حنستعمله غصب عننا في Vite، وإزاي بيخلي الـ builds أخف وأسرع. وهل فعلاً يستاهل الهايب؟ لينكات مفيدة: Rolldown Rollup Bundlers overview | Untyped.fm ESM vs. CommonJS | Untyped.fm Shaking Things Up | Untyped.fm

في الحلقة دي بتكلم عن الـ Files في الجافاسكربت وازاي بنتعامل معها وايه الـ Limitations الكتيرة حواليها وحوالين الـ Input[type=file]. حغطي الـ Best practices وايه الحاجات الي ممكن تقع فيها لو مش واخد بالك! لينكات مفيدة: Input[type=file] | MDN URL.createObjectURL File | MDN Blob | MDN Dropzone.dev UploadThing Formwerk File Fields The problem with Drag and Drop API | Untyped.fm

في الحلقة دي بتكلم عن الـ Virtual Lists والـ Virtual Scrolling! حنغطي تفاصيل مبدأ الـ Windowing وازاي ممكن تعمله بنفسك، وايه العقبات الي حتواجهك والافتراضات الي لازم تضعها علشان تقدر تعملها. حنتكلم برضوا عن الـ Performance وازاي ممكن تحسنه او تضره، وايه عواقب التكنيك دا علي الـAccessibility وازاي ممكن تتحل. لينكات مفيدة: Virtual Lists | Patterns.dev Vue Talks #6 TanStack Virtual useVirtualList | V...

في الحلقة دي بكمل كلام عن الـ Date fields وبالاخص جزء الـ. UI وبعضاً من الـ UX وازاي تعمل Research لحاجة زي كدا وايه المراجع الي المفروض ترجعلها. برضو بتكلم عن ازاي خاصية بسيطة زي قيم Min و Max للـ Field ممكن تؤذي تجربة المستخدم لو مش معمول حساب الحالات الجانبية. لينكات مفيدة: Input date | MDN useDateField | React Aria Date fields | Formwerk Calendars | Formwerk

في الحلقة دي حتكلم عن رحلتي في بناء Custom Date Fields اثناء شغلي علي Formwerk. حتكلم عن المشاكل الحالية في الـ Date Object ودعم التقويمات المختلفة زي التقويم الهجري وبرضو ا فروق التوقيتات والأهم في كل دا وهو ازاي نخزن قيمة تاريخ وازاي غرضك من التاريخ يفرق كتير في ازاي انت بتخزنه. لينكات مفيدة: Standard Date Object | MDN The Problem with Time & Timezones - Computerphile Temporal API | MDN Java...

في حلقة النهارده هنتكلم عن موضوع مهم في تطوير الويب، وهو الـ "Monorepo". ببساطة، المونوريپو هو مكان واحد بنحط فيه مشاريع كتير بتاعتنا، بدل ما كل مشروع يبقى له Repository خاص بيه. يعني بدل ما يبقى عندك كذا "بيت" للمشاريع، كلهم بيبقوا في "بيت العيلة". طيب، ليه نعمل كده؟ فيه فوايد كتير. أول حاجة، الكود بيتشارك بسهولة بين المشاريع المختلفة. لو عندك Component كويس، تقدر تس...

في الحلقة دي بتكلم عن بروجكت Open-source نشرته مؤخراً اسمه Formwerk. الحلقة مش Technical لكنها بتتطرق لازاي بحدد اني اعمل مشروع open-source جديد ولا اكمل على مشروع قديم، ازاي بحدد ان لما اصغر الـScope اقدر اقدم اكثر للمستخدم في الحتة الصغيرة الي انا بعملها في المشروع. حابين اقتراحتكم ومشاركتكم في المشروع! لينكات مفيدة: Headless Skinless Boneless Lifeless UI Formwerk

في الحلقة دي بتكلم عن الـ Tree Shaking ونتج ازاي وليه هو حاجة مرغوبة في شغلنا النهاردا سواء كمطورين مكتبات او في شغلنا العادي. بعرفك ايه الحاجات الي ممكن تمنع الكود بتاعك انه يتعمله Tree Shaking وايه القواعد بتاعته وليه اصلاً الموانع كدا وازاي تغيير بسيط في الـ Syntax او شكل الكود يقدر يأثر علي ذلك. لينكات مفيدة: MDN Entry on Tree Shaking Tree shaking | Rollup Tree Shaking Reference Guide | Smashi...

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

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

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