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

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. 2:33:28

    اطلب من المساعد البرمجي تأكيد فهمه قبل التنفيذ

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

    • AI coding assistants
    • prompting
    • requirements clarification
    • UI effects
    • +1
  2. 2:37:16

    تنقيح أقسام الموقع والتخطيط لدعم العربية

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

    • website design
    • UI refinement
    • grid background
    • content hierarchy
    • +2
  3. 2:43:43

    استعادة تأثير المطر البرمجي وتشخيص اختفاء الحركة

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

    • frontend
    • hero-section
    • animation
    • code-rain
    • +4
  4. 2:46:36

    مراجعة اقتراحات وكيل البرمجة والحفاظ على العمل

    ينتقد قبول اقتراحات وكيل البرمجة لتغيير التصميم دون رقابة، ويوصي بأن يحتفظ المطور بحكمه التصميمي، ويراجع النتائج، ويحفظ الحالات الجيدة في Git حتى يمكن الرجوع إليها.

    • coding-agents
    • AI-assisted-development
    • design-review
    • version-control
    • +3
  5. 2:49:28

    استكشاف إضافات ومهارات وكيل البرمجة

    يستعرض بصورة تجريبية الإضافات والمهارات والوكلاء المتاحين، مع إشارات إلى GitHub وخوادم MCP، ويذكر أن أمر ‎/reload plugins‎ يتيح له رؤية ما أُعيد تحميله. بعض أسماء الإضافات والتفاصيل غير واضحة في النص.

    • plugins
    • skills
    • coding-agents
    • MCP
    • +4
  6. 2:53:44

    توجيه عدة وكلاء لمعالجة مشكلة حركة في الواجهة

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

    • AI agents
    • frontend animation
    • debugging
    • learning workflow
  7. 2:55:16

    فهم أدوار الوكلاء المتخصصين وإنشاء وكلاء مخصصين

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

    • specialized agents
    • code review
    • brand consistency
    • custom agents
    • +1
  8. 2:58:41

    اختيار إضافات وأدوات لسير عمل البرمجة

    يفحص المتحدث إضافات لسير العمل، ومنها تكامل GitHub عبر MCP وأداة لتبسيط الكود، ويتحقق من وجود Playwright ضمن الإعداد.

    • GitHub
    • MCP
    • Playwright
    • plugins
    • +1
  9. 2:59:51

    رأي في تطور أدوات أتمتة البرمجة

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

    • coding automation
    • agent loops
    • TypeScript
    • frontend design
    • +1
  10. 3:02:25

    إرشادات الأمان ومهارة إنشاء المهارات

    أثناء مراجعة الخيارات، يظهر بند لإرشادات الأمان، ثم وصف لأداة تنشئ مهارات جديدة من الصفر وتحدّث المهارات القائمة وتحسّنها وتقيس أداءها.

    • security guidance
    • skill creation
    • skill optimization
    • performance measurement
  11. 3:07:01

    توحيد بطاقات الواجهة وإظهار تقدّم قائمة الانتظار

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

    • frontend
    • UI design
    • progress bar
    • waitlist
    • +1
  12. 3:10:43

    استكشاف Firecrawl لاستخراج محتوى المواقع

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

    • Firecrawl
    • web extraction
    • open source
    • plugin
    • +1
  13. 3:17:41

    تجربة تأثير «الشاشة المتنفّسة» في قسم الواجهة الرئيسي

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

    • frontend
    • hero section
    • motion design
    • visual effects
    • +1
  14. 3:18:43

    اختيار الوكلاء والمهارات والإضافات لمهمة تصميم

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

    • AI agents
    • skills
    • plugins
    • frontend workflow
    • +1
  15. 3:38:38

    تجهيز Codex بملحقات ومهارات لسير عمل الموقع

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

    • Codex
    • plugins
    • skills
    • configuration
    • +2
  16. 3:42:59

    لماذا يجب أن يكون أثر النموذج الأولي واضحًا بصريًا

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

    • visual prototyping
    • design iteration
    • visual verification
    • AI agents
    • +3
  17. 3:49:53

    استكشاف تأثير بصري يختفي بعد تحديث الصفحة

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

    • frontend
    • visual effects
    • debugging
    • design implementation
    • +2
  18. 3:56:03

    قيود عزل الطرفية داخل أدوات البرمجة

    ناقش كيف يمكن لعزل الطرفية داخل Cursor وAntigravity أو بيئات التطوير أن يحد من وظائف الأوامر، مع الإشارة إلى Warp كمسار عمل مخصص للطرفية. الطرح كان ملاحظة عملية عن قيود الأدوات، وليس اختبارًا مقارنًا مكتملًا.

    • terminal sandboxing
    • Cursor
    • Antigravity
    • Warp
    • +2
  19. 3:58:51

    موازنة حدود الاستخدام وخيارات الاشتراك لأدوات البرمجة بالذكاء الاصطناعي

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

    • Cursor
    • AI coding tools
    • usage limits
    • subscriptions
    • +2
  20. 4:04:09

    ما هو Max Mode في Cursor؟

    يستعرض إعداد Max Mode في Cursor: يوسّع نافذة السياق لمساعدة النموذج على فهم قدر أكبر من الشفرة في المهام المعقدة، مع تسعير قائم على عدد الرموز وفق سعر واجهة النموذج. العرض يشرح الوصف الظاهر في الواجهة ولا يثبت تحسن النتائج باختبار مستقل.

    • Cursor
    • Max Mode
    • context window
    • token pricing
    • +2

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

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