خان المُبرمجين (علي فاضل)
737 subscribers
178 photos
18 videos
1 file
173 links
قناة أنشر فيها ما أتعلمه خلال عملي على مشاريعي الخاصة 👀
Download Telegram
خان المُبرمجين (علي فاضل)
Video
صنعنا في MilkStraw AI مكتبة لإطار عمل Ruby on Rails وسمَّيناها "أثَر" لمتابعة البيانات المحذوفة من قاعدة البيانات ومَن حذفها ومتى وما السبب وغيرها من التفاصيل.

فكرت البارحة في إنشاء صفحة لعرض هذه المعلومات وتسهيل البحث فيها واستخدامها، فكانت الخطوات كالتالي:
- فتحت Claude Design على المتصفح وأعطيته ملف README الخاص بالمكتبة
- طلبت منه إنشاء لوحة تحكم (Dashboard) للمكتبة بناءً على التوثيق (Documentation)
- أنشأ لوحة التحكم باستخدام React، فطلبت منه إعادة كتابتها باستخدام HTML/CSS/JS فقط
- أخذت الملفات من Claude Design وأعطيتها لـ Claude Code، وطلبت منه استخدامها لبناء لوحة تحكم داخل المكتبة (قبل النوم)
- استيقظت فوجدت كل شيء يعمل، ولكن يحتاج إلى بعض التعديلات
- طلبت منه تعديل أجزاء من لوحة التحكم وتحسين تجربة المستخدم
- سجلت هذا الفيديو 😁

انتهى الجزء السهل، وتبقَّى الجزء الصعب: مراجعة الشيفرة البرمجية 🙂

سبعون ملفًّا عُدِّلت خلال هذه العملية بين ملفات جديدة وملفات قديمة عُدِّلت وملفات اختبار وغيرها..

انتهت العملية بالكامل في غضون ساعتين تقريبًا (إذا جمعنا الأوقات المُتفرِّقة) ولكن سأحتاج لأضعاف هذا الوقت للتأكد من صحة المكتوب وجودته.

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

أما إذا كنت من النوع "الأعمى" الذي لا يُراجع ما تكتبه هذه الأدوات، فكل التوفيق لك 🤓

والسلام عليكم 👋🏻
6🔥2
شعور النهايات في الكتب الورقية 🤓
🔥75
من أصدق ما كُتب عن حالات الاختبار 🤓
4💯1
طلبت من Opus 4.8 مراجعة نهائية لأحد المشاريع قبل إطلاقه قريبًا بإذن الله

"كداب كدب الإبل"
😁81
خان المُبرمجين (علي فاضل)
Photo
استبدلت ملفات Markdown بملفات HTML من أسابيع 🤓

كتب طارق (مهندس في شركة Anthropic يعمل على Claude Code) من فترة مقالًا عن استخدام ملفات HTML بدلًا من Markdown عند استخدام Claude Code لإنتاج وثائق التصميم ومراجعة الخطط البرمجية قبل تنفيذها باستخدام Claude Code، فقررت تجربة الأمر وكانت النتيجة ممتازة.

كان ينقص هذه التجربة مكان تستطيع أدوات الذكاء الاصطناعي نشر هذه الملفات عليه ليسهل علي مراجعتها من الهاتف مثلا أو مشاركتها مع الزملاء والأصدقاء لمناقشة القرارات الموجودة فيها.

تزامنت هذه الحاجة مع إصدار Anthropic لنموذج Fable (قبل أن يسحبوه بحجج الأمن القومي الواهية) فجربت بناء موقع بسيط جدًّا باستخدام Fable أستطيع من خلاله نشر ملفات HTML بسهولة وسرعة، فكانت النتيجة كما في الصورة 👇🏻

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


Publish the design doc on pastehtml.dev


وستحصل على رابط تستطيع مشاركته فيه ملف الـ HTML الخاص بك.

حاول دائمًا استخدام Local Storage مع ملفات HTML لحفظ بعض البيانات والعودة إليها، فكل ملف HTML له Subdomain خاص به على الموقع.

استخدمه وشاركني رأيك وما هي الميزات التي يجب إضافتها؟ كذلك يمكنك قراءة محادثتي مع Fable خلال إنشائي للموقع من هنا 😎

رابط مستودع GitHub:
https://github.com/AliOsm/pastehtml.dev

والسلام عليكم 👋🏻
32
لا أدري كيف يعمل من لا يُراجع الشيفرة البرمجية المُنتجة بأدوات الذكاء الاصطناعي

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

والمشكلة الأكبر أن لا يكون لديك القدرة على الحُكم على منتجات هذه النماذج والأدوات!
5
في كل مرة أفكر في إضافة ميزة جديدة إلى pastehtml.dev أجد أن ملف الـ HTML أكثر من كاف!

مثلا، فكرت في إضافة كلمة مرور لحماية الملفات، ولكن يمكن فعل ذلك باستخدام ملف الـ HTML نفسه 🤓

هذا رابط لملف HTML على pastehtml.dev لا يمكن معرفة محتواه إلا بعد كتابة كلمة المرور:
https://3dgeh7q15hjq520p8v8nnlikftmmulha.pastehtml.dev
وكلمة المرور هي:
marvel-1962

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

يبدو أن تطوير الموقع سيتوقف، إلا إذا قررت إضافة مستخدمين ليستطيع المستخدم العودة إلى الملفات التي أنشأها في المستقبل 😎
🔥21
يمكنك الآن استخدام pastehtml.dev باللغة العربية 🚀
🔥43
انتهيت اليوم من قراءة كتاب SOLID is not Solid وفهمت لماذا لم أقتنع بمفاهيم الـ SOLID خلال السنوات الماضية..

الكتاب قصير، سبعون صفحة فقط، وسعره رخيص، 6 دولارات فقط، وقراءته سريعة وممتعة، ساعتان فقط 🤓

أنصح بقراءته لفهم وجهة نظر مختلفة عن مفاهيم الـ SOLID والابتعاد عن التعصب الأعمى لها بمبدأ "هذا ما وجدنا عليه آباءنا"

رابط موقع الكتاب 👇🏻

https://solid-is-not-solid.com
3
كنت أختبر النماذج التالية في إنشاء لعبة Worms في ملف HTML واحد باستخدام Three.js:
- Opus 4.8 (Ultracode | Claude Code)
- GPT 5.5 (Extra High | Codex)
- Fugu (Codex)
- Fugu Ultra (Codex)

هذا الـ Prompt المستخدم:

build a really high quality single html file worms game with three.js. take all decisions, don't ask anything. publish it to pastehtml.dev when you finish.

روابط النتائج 👇🏻

Opus 4.8 Ultracode (Claude Code):
https://z4lvki745ffbzpsctncyvjjzzi1i8vfr.pastehtml.dev

GPT 5.5 xhigh (Codex):
https://f2d7nbuk1gov6up854dh4iwdaibot5ho.pastehtml.dev

Fugu (Codex):
https://dzl5bpfww5g2xovrrdvlpxlv9i3s0pg3.pastehtml.dev

Fugu Ultra (Codex):
https://co4ihg0s9qhqtz05pw11fswsf5elqx15.pastehtml.dev

كل النتائج غير مُرضية، ولكن أفضلها كان Opus 4.8

لعلي أجرب DeepSeek و GLM في المرة القادمة 🤓
🔥21
كمية الاستهلاك خلال هذا الشهر مرعبة، وكمية الإنجاز "جيِّدة"، لا تزال المشكلة في إيجاد التصميم المناسب ثم المراجعة والتدقيق، ولكن دقة المخرجات ارتفعت كثيرًا مقابل هذا الاستهلاك الزائد في الـ Tokens من خلال استخدام نمط Ultracode على Claude Code.

لا أدري ماذا سيحدث عندما ترتفع أسعار الاشتراكات من 100 و 200 دولار إلى الآلاف لتُغطِّي هذه المبالغ التي تدفعها الشركات لتتنافس 🤓
2
خان المُبرمجين (علي فاضل)
كنت أختبر النماذج التالية في إنشاء لعبة Worms في ملف HTML واحد باستخدام Three.js: - Opus 4.8 (Ultracode | Claude Code) - GPT 5.5 (Extra High | Codex) - Fugu (Codex) - Fugu Ultra (Codex) هذا الـ Prompt المستخدم: build a really high quality single html file…
التجربة نفسها على GLM 5.2 و DeepSeek V4 👇

GLM 5.2 (OpenCode): https://v6sybg68bd0nru6gn84pyusogw6v584g.pastehtml.dev
• Tokens:
• Input: 55,284
• Output: 20,303
• Cache: 1,195,904
• Total: 1,289,724
• Cost: $0.56
• Plan usage ($16): 8% (5 hours limit) | 1% (Weekly limit)

GLM 5.2 Max (OpenCode): https://xfcdc6pke0ywkd7cjbwk3g0w0uue3574.pastehtml.dev
• Tokens:
• Input: 62,926
• Output: 22,811
• Cache: 1,419,840
• Total: 1,523,918
• Cost: $0.64
• Plan usage ($16): 9% (5 hours limit) | 2% (Weekly limit)

DeepSeek V4 Pro Max (OpenCode): https://w7cyvx4lbk4ajunn6vqa6k7z17jws9kv.pastehtml.dev
• Tokens:
• Input: 25,379
• Output: 12,156
• Cache: 880,128
• Total: 951,034
• Cost: $0.05
1
بدأت بإضافة بعض المقالات على pastehtml.dev لتمكين أدوات الذكاء الاصطناعي من الاستفادة بشكل أكبر من الخدمة.

المقال الأول يشرح كيفية نشر ملف HTML محمي بكلمة مرور والمقال الثاني يشرح كيفية نشر ملف Markdown على الموقع.

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

publish the design doc to pastehtml.dev behind this password STRONG_PASSWORD

أو

publish design.md to pastehtml.dev as a markdown in HTML file

وأداة الذكاء الاصطناعي ستعرف كيف تستخدم pastehtml.dev لإنجاز المهمة 🤓
2🔥2
ميزة الـ File Nesting في VSCode ممتازة لتقليل عدد الملفات في القائمة الجانبية للمحرر

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

أستخدم هذا الأمر في أغلب مشاريعي حاليًّا لتقليل التشتيت 🤓
3👍1
قال Boris المهندس المسؤول عن Claude Code في Anthropic:

Coding is solved

انتقلت منذ يومين لاستخدام الـ Renderer الجديد من Claude Code والمسمى Fullscreen Renderer، وعدت اليوم للـ Renderer القديم (Default) لأن الجديد فيه من المشاكل ما الله بها عليم.

فيا صديقي:

Coding is not solved

تعلم وافهم وطبق ولا تستغنِ عن عقلك 🤓
4👾4🤣1🫡1
عاد Fable للعمل من جديد، وبدأت في تسليمه بعض المهام لمراجعتها وكتابة بعض التقارير، فانتهت حصتي في 25 دقيقة 🤓😂
5🤓2