Building AI Apps Live from Cairo 🔴
تحب تدعم البث؟ عضوية «داعم» على يوتيوب بـ 60 جنيه في الشهر: شارات، إيموجي، وأسئلتك بجاوبها الأول في البث. اشترك كداعم
الخلاصة
يركّز البث على تجربة عملية طويلة لصقل واجهة موقع بمساعدة وكلاء البرمجة، ولا سيما حركات قسم البداية والشبكة النقطية وخطوط الربط وشريط التقدّم. اعتمد لقمان على المعاينة الحية ولقطات الشاشة وأدوات فحص المتصفح للتحقق من النتيجة بدل الاكتفاء بصحة الكود، وشخّص مشكلات شملت إطارات CSS مفقودة، وتراجعًا بصريًا، والتباس الخوادم والمنافذ، وتأثيرات تختفي بعد التحديث. ظهرت بعض الحركات بعد الانتقال إلى مكتبة الحركة الموجودة في المشروع، لكن ظلّت تفاصيل أخرى قيد الضبط، مع التشديد على حصر التغييرات وحفظ الحالات الجيدة في Git. كما ناقش تصميم مركز قيادة للمشروعات بأدوار وكلاء متعددة وملف JSON مشترك، مقابل خطر الإفراط في الأتمتة وتحول أداة الإدارة إلى مصدر تشتت؛ ولم يُحسم الاختيار بين المسارات المؤتمتة والعمل التفاعلي. وقارن، بوصفه رأيًا وتجربة شخصية لا اختبارًا شاملاً، بين Cursor وWarp وAntigravity وCodex من حيث المعاينة داخل بيئة التطوير، وعزل الطرفية، والتحكم أثناء التنفيذ، ونقل السياق، وحدود الاستخدام. وشملت أسئلة الجمهور WordPress وVercel وCloudflare وSupabase وFirebase، وتحويل فكرة موقع إلى تطبيق Android، وملاءمة WordPress لمنصات IPTV أو OTT مع ضرورة مراعاة حقوق المحتوى. بقيت عدة مسائل بلا نتيجة مؤكدة، منها بعض حركات الواجهة، استعادة تأثير حُذف، استهلاك YouTube API، واختلاف مدة البث المعروضة على YouTube.
108 لحظة من البث
- 5:32:07
مقارنة Antigravity وCursor لتطوير المواقع
ردًا على سؤال من الجمهور، يوضح أن Antigravity بيئة قوية وسهلة تضم إضافات ومعاينة للموقع داخل بيئة التطوير وإمكان اختيار عناصر الصفحة والعمل على كودها. لكنه ينتقد قيدًا في سير عمل الطرفية يقول إنه ظهر في 26 فبراير، ويرى شخصيًا أن Cursor هو الخيار الأفضل لهذا الاستخدام.
- 5:35:17
تصحيح منطق حركة الخطوط المتصلة
يوضح أن خطوط الحركة ينبغي أن تبقى متصلة وتتحرك من أسفل إلى أعلى وصولًا إلى العنصر المستهدف، بدلًا من تكوين أثر متقطع يشبه الثعبان. ويواصل تقييم اللون الأخضر والنتيجة عبر المعاينة المحلية.
- 5:37:55
بدء تجربة تعاون عدة وكلاء لتصور واجهة
يبدأ تجربة أولى لتشغيل عدة وكلاء معًا، ويطلب الاستفادة من وكلاء للواجهة والبحث والاستكشاف من أجل تصور تصميم أمامي راقٍ بطابع قريب من Apple. المقطع ينتهي أثناء صياغة الطلب، لذلك لا يعرض نتيجة مكتملة.
- 5:39:39
بحث تصميم شريط تقدّم بالمراحل الزمنية
بحث طريقة إنشاء شريط تقدّم قوي لموقع، مع مراحل مرتبطة بتوقيتات مختلفة، ودراسة خيارات CSS أو أدوات الحركة المناسبة قبل التنفيذ.
- 5:41:55
فهم حدود الاستخدام داخل Cursor
نقاش لفهم لوحة استخدام Cursor: هل الاستهلاك يتجدد أسبوعيًا أم شهريًا، وكيف يمكن تفسير فصل الاستخدام التلقائي عن استخدام نماذج محددة. طُرحت توصية باستخدام الوضع التلقائي للأعمال المعتادة وحجز الاستخدام المقيد للحالات التي تحتاج نموذجًا بعينه، بوصفها قراءة للوحة المعروضة.
- 5:46:23
من فكرة موقع إلى تطبيق أندرويد على Google Play
إجابة عامة عن سؤال تحويل فكرة موقع إلى تطبيق أندرويد: تصميم وبناء تجربة تطبيق للموبايل، ثم تقديم التطبيق إلى Google Play، مع التنبيه إلى أن عملية التقديم قد تستغرق وقتًا.
- 5:48:28
توزيع مهام البرمجة بين أدوات الذكاء الاصطناعي
رأي عملي بأن الاعتماد المكثف على Cursor في أعمال الخلفية قد يستهلك الحدود بسرعة، لذلك يمكن توزيع العمل بين أدوات مختلفة واستخدام Cursor بصورة انتقائية عند العمل على واجهات الويب أو المهام التي تناسبه.
- 5:54:01
وصف حركة خطوط مترابطة لأداة برمجية
يوضح لقطة واجهة تحتاج فيها خطوط منفصلة إلى الانطلاق من نقطة واحدة، والتحرك في اتجاهين، ثم متابعة المسار الذي يصل بين صندوق مركز الأوامر وصندوق آخر. يطلب إبراز الخط الأخضر وضبط توقيت الحركة، مع الاستعانة بالمخططات لتوضيح المطلوب.
- 5:57:33
مقارنة تقريري محاولتين قبل متابعة التنفيذ
بعد تشغيل محاولتين بالتوازي دون قصد، يقرر جمع تقريري النتيجتين في جلسة منفصلة، وطلب مقارنتهما، ثم اختيار المحاولة الأكثر جاهزية لمتابعة العمل.
- 5:58:17
توضيح أن الحركة يجب أن تستمر لا أن تكتفي بالتوهج
يصقل وصف الحركة موضحاً أن الخطين، عند بلوغ الوصلة بين الصندوقين، يجب أن يواصلا التحرك حتى يلامسا الصندوق الآخر؛ فالتوهج وحده لا يحقق السلوك المطلوب.
- 6:00:45
تحسين حركة الواجهة وتصميم شريط تقدم عبر البرومبتات
ينتقد لقمان توقيت واتجاه حركة خط يصل بين عنصرين في الواجهة، ويلاحظ أن ضعف صياغة البرومبت وقلة خبرته بتصميم الويب وCSS قد يؤثران في النتيجة. ثم يطلب من Claude فهم لقطة الشاشة واقتراح عدة تصاميم SVG لشريط تقدم ذي مراحل، ويصف النتيجة اللاحقة بأنها أفضل كثيرًا.
- 6:08:49
هل توجد بدائل أفضل من Supabase؟
ردًا على سؤال عن منصة لقواعد بيانات المواقع، يقول لقمان إنه يحب Supabase ويستخدمه، ويقترح طلب مقارنة من أدوات مثل GPT أو Gemini أو Claude عند البحث عن بدائل، من دون الزعم بوجود خيار أفضل مطلقًا.
- 6:14:45
تصميم شريط تقدّم مناسب لموقع عام
يوضح أن شريط التقدّم سيظهر للزوار على موقع عام لا كأداة داخلية، ولذلك ينبغي أن يشجع الجمهور على متابعة الرحلة من دون الإفراط في مشاركة التفاصيل، ثم يطلب اقتراحات تصميم تلائم هذا السياق.
- 6:19:14
صياغة حركة حدود مترابطة بدقة
يصف حركة تبدأ من منتصف أسفل صندوق، وتسير في اتجاهين حول حدوده، ثم ينبغي أن تعبر خط الربط الرفيع إلى عنصر آخر. يركز على كتابة طلب محدد لأن الوكيل كان يهمل إضاءة وصلة الربط عند اكتمال الدورة.
- 6:21:22
متى تساعد Firebase في بناء تطبيق؟
يقدّم Firebase كخيار قد يسهّل بناء التطبيق، مع الإشارة إلى أن الاستخدام المجاني محدود وأن المطور القادر على العمل مباشرة داخل بيئة التطوير والطرفية يمكنه تنفيذ العمل بنفسه؛ قيمة المنصة الأساسية هنا هي تبسيط تجربة التطوير.
- 6:23:43
مراجعة كثافة اللون وخلفية قسم البداية
يطلب تحليل قسم البداية لأن تعدد طبقات الأخضر جعله أكثر اخضرارًا من المرغوب، مع مراجعة شبكة نقطية يفترض أن تبقى خافتة في الوسط وأوضح عند الجوانب، ثم جمع الملاحظات قبل إجراء التحسينات.
- 6:25:00
البدء بالوضع الآلي ثم التصعيد عند الحاجة
يجرّب وضعًا آليًا لمعالجة تعديلات قسم البداية، بما فيها وضوح مؤثرات الخلفية، ويقترح سير عمل يبدأ بهذا الخيار ثم ينتقل إلى نماذج أخرى إذا تعثر أو لم ينتج عملًا بالمستوى المطلوب.
- 6:31:33
تصميم خط مسح يكشف شبكة نقطية
جرى ضبط مؤثر بصري يتحرك فيه خط مسح ليكشف الشبكة النقطية بالخلفية بدرجة شفافية مماثلة لتأثير مرور المؤشر، مع تجريب مدد مختلفة للحركة والتوقف بعد اختفاء الخط أو بطئه.
- 6:33:39
لماذا يستغرق صقل الواجهة أطول من بنائها الأولي؟
ملاحظة عملية مفادها أن إنشاء موقع من الصفر قد يكون سريعًا نسبيًا، بينما يستغرق صقل التفاصيل الدقيقة وقتًا وجهدًا أكبر، وقد تؤدي محاولة تعديل صغيرة إلى كسر جزء من العمل.
- 6:41:16
إصلاح مؤثر متحرك دون الإضرار ببقية قسم الواجهة
أظهر الفحص أن التنفيذ أنشأ طبقة نقاط إضافية وأن CSS keyframes لم تُظهر المؤثر المطلوب. وعندما غيّر النهج البديل تخطيط قسم الواجهة وتأثير المرور والحدود وأنتج خطأ في عنصر motion، كان التوجيه هو الرجوع إلى النسخة السابقة وحصر التعديل في حركة المسح فقط.
عندك سؤال عن حاجة في البث ده؟
اسأل في الجروب