انتقل للمحتوى
شغّال
ارجع للمكتبة

Building AI Apps Live from Cairo 🔴

Day 0107:34:14

تحب تدعم البث؟ عضوية «داعم» على يوتيوب بـ 60 جنيه في الشهر: شارات، إيموجي، وأسئلتك بجاوبها الأول في البث. اشترك كداعم

الخلاصة

يركّز البث على تجربة عملية طويلة لصقل واجهة موقع بمساعدة وكلاء البرمجة، ولا سيما حركات قسم البداية والشبكة النقطية وخطوط الربط وشريط التقدّم. اعتمد لقمان على المعاينة الحية ولقطات الشاشة وأدوات فحص المتصفح للتحقق من النتيجة بدل الاكتفاء بصحة الكود، وشخّص مشكلات شملت إطارات CSS مفقودة، وتراجعًا بصريًا، والتباس الخوادم والمنافذ، وتأثيرات تختفي بعد التحديث. ظهرت بعض الحركات بعد الانتقال إلى مكتبة الحركة الموجودة في المشروع، لكن ظلّت تفاصيل أخرى قيد الضبط، مع التشديد على حصر التغييرات وحفظ الحالات الجيدة في Git. كما ناقش تصميم مركز قيادة للمشروعات بأدوار وكلاء متعددة وملف JSON مشترك، مقابل خطر الإفراط في الأتمتة وتحول أداة الإدارة إلى مصدر تشتت؛ ولم يُحسم الاختيار بين المسارات المؤتمتة والعمل التفاعلي. وقارن، بوصفه رأيًا وتجربة شخصية لا اختبارًا شاملاً، بين Cursor وWarp وAntigravity وCodex من حيث المعاينة داخل بيئة التطوير، وعزل الطرفية، والتحكم أثناء التنفيذ، ونقل السياق، وحدود الاستخدام. وشملت أسئلة الجمهور WordPress وVercel وCloudflare وSupabase وFirebase، وتحويل فكرة موقع إلى تطبيق Android، وملاءمة WordPress لمنصات IPTV أو OTT مع ضرورة مراعاة حقوق المحتوى. بقيت عدة مسائل بلا نتيجة مؤكدة، منها بعض حركات الواجهة، استعادة تأثير حُذف، استهلاك YouTube API، واختلاف مدة البث المعروضة على YouTube.

  • project planning
  • command center
  • swimlanes
  • roadmap
  • +4

108 لحظة من البث

  1. 0:03:31

    تحويل خريطة المشروع إلى مركز قيادة

    يشرح تصورًا بدأ كمسارات عمل تعرض أسابيع المشروع ومهامه، ثم اتسع إلى مركز قيادة يوضح الخريطة العامة ويساعد على مقارنة التقدم الفعلي بالجدول. ويعرض تخطيط تطبيق موجّه لتجار Shopify ضمن نطاقات عمل متعددة، مع التأكيد أن تفاصيل الفكرة ستتضح عند بدء البناء.

    • project planning
    • command center
    • swimlanes
    • roadmap
    • +1
  2. 0:07:57

    مركز قيادة لإدارة المشروعات والمهام والوكلاء

    يوسّع الفكرة من عرض خريطة المشروع إلى مساحة شبيهة ببرامج إدارة المشروعات، لكن مع وكلاء ينفذون العمل ويتبادلون الحالة. ويقترح أن تسجل الوكلاء المهام المكتملة في ملف JSON مشترك لتوحيد التتبع، مع إمكانية ربط أدوات ووكلاء مختلفين.

    • AI agents
    • agent hub
    • task tracking
    • JSON
    • +3
  3. 0:09:13

    متى يتحول بناء أداة الإدارة إلى تشتت؟

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

    • scope creep
    • overengineering
    • automation
    • workflow orchestration
    • +1
  4. 0:10:05

    متى يصبح مسار الوكلاء المتعددين مبالغة؟

    مراجعة لمسار يفصل الاستكشاف والتخطيط والتنفيذ بين وكلاء فرعيين. يرى المتحدث أنه يفرض انضباطاً مفيداً، لكنه قد يكون زائداً ومشتتاً عندما يستطيع الوكيل الأساسي تحديد الخطوات المطلوبة بنفسه.

    • multi-agent systems
    • AI agents
    • planning
    • software workflow
    • +1
  5. 0:12:58

    Cursor وAntigravity: أثر عزل الطرفية على سير العمل

    مقارنة شخصية تفضّل Cursor في مهمة واجهة تجريبية، لأن عزل الطرفية في Antigravity جعل نقل عناصر الصفحة ولقطات الشاشة يمر عبر مدير الوكلاء، بينما أتاح Cursor التعامل المباشر مع عناصر HTML أو الأصناف من الطرفية.

    • Cursor
    • Antigravity
    • terminal sandboxing
    • frontend workflow
    • +1
  6. 0:15:09

    إنهاء العمل الصغير قبل الانتقال للمشروع الأصعب

    يتحدث المتحدث عن مقاومة التلميع المفتوح والتشتت: إنهاء تعديلات محدودة، أتمتة الجزء المتكرر، ثم وضع المهمة جانباً قبل العودة إلى مشروع أصعب.

    • focus
    • scope control
    • automation
    • prioritization
    • +1
  7. 0:15:31

    تحليل استهلاك YouTube API وتحديث حالة البث

    طلب لتحليل سبب نفاد حصة استدعاءات YouTube API بعد اختلاف التقديرات المتكررة، ثم إصلاح أي مسارات إضافية تستهلكها. الهدف هو تحديث قسم الموقع دورياً ليعرض حالة البث والجدول تلقائياً، مع ملاحظة أن الحالة المعروضة لم تكن متزامنة مع البث الفعلي.

    • YouTube API
    • API quota
    • live status
    • polling
    • +2
  8. 0:21:11

    تشخيص تأثير تتبّع حدود في واجهة Command Center

    يناقش تعثّر عدة محاولات لتنفيذ تأثير بصري حول قسم في الواجهة، ثم يظهر تشخيصاً محتملاً يفيد بأن المكوّن يشير إلى إطارات حركة CSS مفقودة. تُطرح إعادة تصميم الوصلة كخطة بديلة، من دون نتيجة نهائية مؤكدة في هذه الصفحة.

    • Command Center
    • CSS
    • keyframes
    • UI debugging
    • +2
  9. 0:24:06

    تشغيل مهام دورية من الطرفية

    يستعرض مثالاً لأمر حلقي يمكن ضبطه لإعادة تنفيذ مهمة تلقائياً على فاصل زمني من داخل الطرفية، بوصفه أسلوباً لأتمتة الأعمال المتكررة.

    • terminal
    • automation
    • recurring tasks
    • loop command
  10. 0:26:19

    مقارنة جلسات الطرفية وPipeline وRun in Warp

    يحدّد النقاش حالات قد تصبح فيها آلية Pipeline مفيدة، مثل فهم كود قائم، وجود تبعيات، الحاجة إلى الاتساق وسجل تدقيق، أو تشغيل مهام بالتوازي. ثم يطلب مقارنة شاملة للمزايا والعيوب بين الجلسات المباشرة في الطرفية وPipeline وميزة Run in Warp؛ ولا تتضمن الصفحة نتيجة المقارنة نفسها.

    • AI coding workflows
    • terminal sessions
    • pipeline
    • Run in Warp
    • +2
  11. 0:27:48

    تجربة تكييف تأثير بصري بمساعدة أدوات البرمجة

    يقترح المتحدث أخذ تأثير بصري أعجبه وتطويره لواجهة الموقع، مع اختبار ما إذا كانت أداة البرمجة تستطيع إعادة إنتاجه بدقة. يصف التأثير بأنه قد يكون زائداً قليلاً، ويواجه أيضاً مشكلة في فتح عرض متصفح إضافي؛ ولا تسجّل الصفحة نتيجة التجربة.

    • UI prototyping
    • visual effects
    • AI-assisted coding
    • browser preview
    • +1
  12. 0:30:57

    تشخيص تنفيذ واجهة غير ناجح بمساعدة وكلاء متعددين

    بعد أن جاءت النتيجة البصرية أسوأ من المطلوب، عاد المتحدث إلى وضع التخطيط وطلب بحثاً خارج المشروع وتشخيصاً للمشكلة عبر عدة وكلاء، لأن المحاولات السابقة لم تنفذ التأثير المقصود بدقة.

    • AI agents
    • frontend
    • diagnosis
    • research
    • +1
  13. 0:32:38

    استخدام مراجع بصرية وأتمتة المتصفح لإعادة بناء تأثير واجهة

    يناقش المتحدث الاستفادة من خلفية مرجعية وتأثير بصري محدد، ويوضح أن وصف الحركة بالكلمات صعب. وحتى عند فتح موقع مرجعي عبر Claude وPlaywright MCP، نُفذت عناصر كثيرة بصورة صحيحة لكن سلوك الحركة فُهم على نحو غير مطابق للمقصود.

    • visual reference
    • UI animation
    • Claude
    • Playwright MCP
    • +1
  14. 0:35:40

    تجربة مهارات وإضافات الواجهة لتحسين النتيجة

    يستكشف المتحدث ما إذا كانت هناك مهارة أو إضافة متخصصة في تصميم الواجهات يمكن استخدامها تلقائياً، ثم يجرب مساراً آخر، لكنه يقرر أن الناتج ما زال لا يطابق التأثير المطلوب.

    • frontend design
    • skills
    • plugins
    • iteration
    • +1
  15. 0:38:13

    صعوبة وصف المؤثرات وفحص عناصر المواقع المرجعية

    ينتقل النقاش إلى تأثير مرجعي آخر يبدو جذاباً لكنه صعب الوصف، مع التفكير في استخراج العنصر أو فحصه. وتظهر قيود على أدوات الفحص في الموقع، مع إمكان فحص بعض الأشياء فقط.

    • web inspection
    • motion effects
    • reference sites
    • developer tools
    • +1
  16. 0:41:25

    تحليل الواجهة وتنفيذها انطلاقًا من لقطة شاشة

    يطلب لقطة شاشة للموقع وفحصًا بصريًا مفصلًا قبل تسليم عمل الواجهة، ثم يستخدم وصف الخلفية الداكنة والشبكة لتوجيه تنفيذ المؤثر في قسم أعلى الصفحة ذي الخلفية الخضراء الفاتحة مع الحفاظ على البنية البصرية للعلامة. كان الهدف التحقق مما إذا كان النظام يفهم المرجع ويستطيع تطبيقه، وليس ادعاء نجاح التنفيذ النهائي.

    • UI analysis
    • screenshot workflow
    • visual effects
    • above the fold
    • +3
  17. 0:48:02

    تعطل Cursor وأهمية التفاعل الصوتي مع الطرفية

    يناقش تعطل Cursor وصعوبة النسخ واللصق أثناء العمل، ويوضح أن القدرة على مخاطبة الطرفية صوتيًا مهمة لسير عمله وأن الكلام أسرع بكثير لديه من كتابة التعليمات. يذكر إعادة التشغيل كاحتمال، لكن المقطع لا يثبت أن المشكلة حُلّت.

    • Cursor
    • terminal
    • voice input
    • developer workflow
    • +3
  18. 0:55:46

    لماذا يفشل وكيل البرمجة رغم فهمه للمطلوب؟

    يتساءل لقمان عن سبب عجز وكيل البرمجة أحيانًا عن تنفيذ مهمة بسيطة رغم فهم الهدف بدقة، ويحاول تحديد هل القصور في صياغة الطلب أم في قدرة الوكيل، حتى يتمكن من تحسين توجيهاته.

    • AI coding agents
    • prompting
    • agent limitations
    • debugging
  19. 0:57:06

    التحقق البصري من واجهة ينفذها وكيل ذكاء اصطناعي

    أثناء إضافة توهج أخضر تفاعلي إلى شبكة منقطة، يناقش لقمان استخدام فتح الواجهة ولقطات الشاشة كحلقة مراجعة قبل تسليم العمل. يمكن للصور كشف أخطاء الشكل الثابت مثل ظهور خط بدل سهم، لكنها قد لا تثبت جودة تأثير متحرك؛ لذلك يطلب تكرار الفحص والتعديل حتى يطابق الناتج المقصود.

    • frontend
    • visual verification
    • screenshots
    • UI iteration
    • +2
  20. 1:01:09

    حلقة تحقق بصري قبل إتمام مهام الواجهة

    يطلب المتحدث إبقاء الوكيل في وضع التخطيط، ثم فتح الموقع والتقاط لقطة شاشة وتحليل مدى توافق النتيجة مع المطلوب. إذا لم تتوافق، تُعدّل الواجهة وتُراجع بلقطة جديدة قبل إعلان اكتمال المهمة.

    • AI coding agents
    • visual QA
    • screenshots
    • plan mode
    • +4

عندك سؤال عن حاجة في البث ده؟

اسأل في الجروب