Untyped

في الحلقة دي بنتكلم عن الهجمات اللي بقت بتحصل في الـ supply chain خصوصًا على مكتبات الـ npm. إزاي كود بسيط بيستخدمه ملايين المطورين ممكن يتقلب لفخ يسرّب بيانات أو يفتح باب لهجوم وانت مش واخد بالك. هنفتكر شوية من أشهر الوقائع اللي هزت الـEcosystem مؤخراً ونشوف الدروس المستفادة. كمان هنتكلم عمليًا: إيه دورك كمؤلف مكتبة علشان تحمي المشروع بتاعك وإيه اللي تقدر تعمله كمستهلك يخلي استخدامك آمن قدر الإمكان.لينكات مفيدة:Nx Postmortemnpmjs Docs: Trusted PublishersAnatomy of a Billion-Download NPM Supply-Chain AttackOops, No Victims: The Largest Supply Chain Attack Stole 5 CentsPrimeTime Video

عايز تبدأ تساهم في الـ 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 حقيقي للبزنس، وإزاي نقدر ندخل لوجيك ذكي بين الـ stacks.الحلقة دي هي حلقة عن النوستالجيا، التوفير، وفن Deployment اللي محتاجين نفتكره من جديد.

في الحلقة دي حتكلم عن TailwindCSS v4 وايه الجديد فيه ويفرقه عن الاصدارات الي فاتت.حغطي ازاي تحدث ليه وافضل الطرق لذلك وايه الي تاخد بالك منه في العملية دي. كمان بشارك معاكم ايه الي عجبني فيه وايه الي ضايقني منه ونصايحي لازاي تستعمله في المستقبل.لينكات مفيدة:Tailwind v4Lighting CSSWindiCSSUnoCSSUpgrade 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 - MDNHistory API - MDNLocation API - MDN

في الحلقة دي، هنتكلم عن فكرة الـ Standard Schemas وإزاي تقدر تكتب تعريف واحد للـ Schema وتبدّل بين مكتبات زي Zod و Valibot من غير ما تغيّر سطر واحد في الكود بتاعك. هنعرف ليه الموضوع ده مهم، وإزاي بيسهّل عليك تفضّل مرن ومش مربوط بمكتبة معينة.لينكات مفيدة:Standard Schema | GitHubZod.devvalibot.devarktype.ioStandard schema implementationsStandard schema consumers

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

في الحلقة دي بتكلم عن الـ Files في الجافاسكربت وازاي بنتعامل معها وايه الـ Limitations الكتيرة حواليها وحوالين الـ Input[type=file].حغطي الـ Best practices وايه الحاجات الي ممكن تقع فيها لو مش واخد بالك!لينكات مفيدة:Input[type=file] | MDNURL.createObjectURLFile | MDNBlob | MDNDropzone.devUploadThingFormwerk File FieldsThe problem with Drag and Drop API | Untyped.fm

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

في الحلقة دي بكمل كلام عن الـ 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 JavaScript Temporal is coming Time keeping with Temporals | Untyped @internationalized/date

في حلقة النهارده هنتكلم عن موضوع مهم في تطوير الويب، وهو الـ "Monorepo". ببساطة، المونوريپو هو مكان واحد بنحط فيه مشاريع كتير بتاعتنا، بدل ما كل مشروع يبقى له Repository خاص بيه. يعني بدل ما يبقى عندك كذا "بيت" للمشاريع، كلهم بيبقوا في "بيت العيلة".طيب، ليه نعمل كده؟ فيه فوايد كتير. أول حاجة، الكود بيتشارك بسهولة بين المشاريع المختلفة. لو عندك Component كويس، تقدر تستخدمه في أكتر من مشروع من غير ما تكرره. تاني حاجة، إدارة الـ Dependencies بتبقى أسهل بكتير، ومشاكلها أقل. كمان، التغييرات اللي بنعملها في الكود بتبقى متناسقة بين كل المشاريع، وده بيقلل المشاكل. ده غير إن الشغل بيبقى أسرع، والتيم بيقدر يشتغل مع بعض بشكل أحسن.لكن، زي أي حاجة، المونوريپو له تحدياته. مهم برضو نختار الأدوات المناسبة، زي Nx أو Turborepo أو pnpm workspaces، كل أداة ليها مميزاتها.في الحلقة دي، هنشرح كل ده بالتفصيل، وهنعرف إمتى نستخدم المونوريپو وإمتى لأ!لينكات مفيدة:NxTurborepopnpm workspacesLerna

في الحلقة دي بتكلم عن بروجكت 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 | Smashing Magazine Reduce JavaScript payloads with tree shaking | Web.dev Tree Shaking | Rspack

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