GyaanSetu WebDev

Frontend, backend and devops for the modern web.

230 articlesDeep, practical knowledge

Open Interpreter يتيح لنماذج اللغات الكبيرة تشغيل الأكواد محلياً، مما يقلل تكاليف السحابة ويعزز الخصوصية

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

WebDev · 2 دقيقة قراءة

فريق الواجهة الأمامية يقلص حجم الحزمة إلى الصفر عبر تقنية Tree-Shaking لنماذج API وهمية آمنة النوع

قام الفريق ببناء طبقة نماذج وهمية (mock layer) مخصصة لبيئة التطوير فقط باستخدام Axios interceptors وتقنية tree-shaking الخاصة بـ Vite. ومن خلال ربط المعترض (interceptor) بـ import.meta.env.DEV، وعلم VITE_ENABLE_MSW مخصص، ومتغير MODE، يتم استبعاد كود النماذج الوهمية بالكامل من حزم الإنتاج، مما يحافظ على حجم الحزمة دون تغيير.

WebDev · 3 دقيقة قراءة

ثغرة البريد الإلكتروني في RamenHire حوّلت كل تنبيه توظيف إلى طُعم للتصيد الاحتيالي

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

WebDev · 3 دقيقة قراءة

اختبار الكود الخاص بي: ما كشفه اختبار العقود

اختبار الكود الخاص بي: ما كشفه اختبار العقود. كنت أظن أن مشروع محاكاة Zerodha الخاص بي قد اكتمل. لقد كان مشروعاً يعتمد على MERN stack مع Node في الخلفية (backend)، وReact في الواجهة الأمامية (frontend)، وMongoDB، وRazorpay...

WebDev · 3 دقيقة قراءة

بوت تسوق بالذكاء الاصطناعي بدون تكلفة يعمل داخل أي صفحة ويب – لا يتطلب مفتاح API

قام المؤلف بضبط نموذج LFM2.5 من LiquidAI، الذي يحتوي على 350 مليون معلمة، باستخدام مجموعة بيانات اصطناعية مكونة من 30 مليون رمز عبر وحدة معالجة رسومات (GPU) واحدة بسعة 16 جيجابايت، ثم أضاف ثماني أدوات مبرمجة مسبقاً وتقنية فك تشفير مقيدة بالقواعد النحوية، مما يتيح للوكيل التصفح وإضافة المنتجات وإتمام عملية الشراء بالكامل مباشرة على الجهاز.

WebDev · 4 دقيقة قراءة

فهرس عالمي مجاني يدرج 3,804 موانئ و9,640 مطاراً – دون الحاجة للتسجيل

يسحب الموقع البيانات من NGA World Port Index وUN/LOCODE وOurAirports، ويعالج التناقضات فيها، ويضيف ربطاً بين عمق المياه والسفن وبين المدارج والطائرات، ويتم تقديم كل ذلك عبر بناء ثابت باستخدام Next.js مع انعدام تكاليف الحوسبة المستمرة.

WebDev · 4 دقيقة قراءة

TypeScript تضيف معاملات نوع const لمنع توسيع القيم الحرفية في الـ Generics

يخبر المُعدل const الجديد الخاص بمعامل النوع المترجم باستنتاج أضيق نوع ممكن، بحيث تظل القيم الحرفية مثل "GET" حرفية عبر حدود الدوال، مما يلغي الحاجة إلى تكرار عمليات التحويل باستخدام as const.

WebDev · 3 دقيقة قراءة

مطور غاني يطلق PowerPulse باستخدام تقنيات البرمجة منخفضة الكود المدعومة بالذكاء الاصطناعي دون الحاجة لخبرة برمجية

يتيح تطبيق PowerPulse لأي شخص في غانا الإبلاغ عن انقطاع التيار الكهربائي، ومشاهدة البث المباشر، وكسب النقاط مقابل المساهمات. تم بناء التطبيق باستخدام Next.js وTailwind وSupabase واستضافته على Vercel، ويهدف إلى إضافة تنبؤات مدعومة بالذكاء الاصطناعي وإشعارات فورية للتغلب على مشكلة البداية الباردة.

WebDev · 3 دقيقة قراءة

الانتقال إلى DeepSeek و Qwen خفّض فاتورة الذكاء الاصطناعي لأحد البوتات من 420 دولاراً إلى 28 دولاراً

عبر توجيه 85% من الاستعلامات إلى نماذج أقل تكلفة، وتخزين الأوامر المتكررة مؤقتاً، وضغط المدخلات، تمكن الفريق من خفض الإنفاق الشهري من 420 دولاراً إلى 28 دولاراً، مع الحفاظ على سرعة الاستجابة وجودة تجربة المستخدم.

WebDev · 2 دقيقة قراءة

مطور يقلل الأعباء الإضافية لواجهة برمجة التطبيقات (API) عبر استبدال REST بـ tRPC في أسبوعين

أدت عملية الانتقال إلى التخلص من مواصفات OpenAPI، وتوليد الـ SDK، ومجموعات Postman، وواجهات TypeScript المكتوبة يدويًا، مما سمح للمحرر باكتشاف عدم التطابق فورًا وتقليص حجم المستودع بشكل كبير.

WebDev · 3 دقيقة قراءة

الفريق يؤتمت إنشاء تقارير VPAT في عملية التكامل المستمر (CI)، مما يمنع طلبات السحب (PRs) غير المتوافقة مع معايير الوصول

من خلال دمج فحوصات axe-core، ومساعدات لوحة المفاتيح المخصصة لـ Vitest، ونتائج قارئ الشاشة المخزنة بتنسيق JSON في عملية البناء، تقوم عملية الأتمتة (pipeline) بإيقاف أي طلب سحب (PR) يتسبب في تراجع في إمكانية الوصول، وتصدر تلقائياً تقرير VPAT بصيغة PDF مع كل إصدار ناجح.

WebDev · 3 دقيقة قراءة

توقف عن إهدار ساعات الـ GPU: متى تستخدم هندسة الأوامر (Prompting)، أو الـ RAG، أو الضبط الدقيق (Fine-Tuning)

يوضح هذا الدليل ثلاثة محاور أساسية — هندسة الأوامر، والتوليد المعزز بالاسترجاع (RAG)، والضبط الدقيق (Fine-Tuning) — مبيناً كيفية التمييز بين فجوة المعرفة وفجوة السلوك، كما يقدم قائمة مرجعية من ثلاث خطوات لاختيار الأداة المناسبة قبل إنفاق مبالغ طائلة على موارد الحوسبة.

WebDev · 4 دقيقة قراءة

Auto-Animate تطلق محول Marko 6، وتُحرك القوائم باستخدام وسم واحد فقط

يتصل المحول الجديد بدورة حياة onMount الخاصة بـ Marko، ويقوم بإنشاء MutationObserver، ويُشغل محرك auto-animate؛ مما يتيح للمطورين استخدام الوسم <auto-animate> حول القوائم للحصول على تأثيرات دخول وخروج وإعادة ترتيب سلسة دون الحاجة إلى أي كود JavaScript إضافي.

WebDev · 3 دقيقة قراءة

ES2023 تضيف دوال مصفوفات غير معدلة (Non-Mutating)، مما يتيح لـ React اكتشاف تغييرات الحالة فوراً

تُرجع الدوال الأربع الجديدة — `toSorted` و `toReversed` و `toSpliced` و `with` — مصفوفات جديدة، مما يجعل نظام المقارنة السطحية (shallow-compare) في React يرى مرجعاً جديداً ويقوم بإعادة الصيرورة (re-render) دون الحاجة إلى حيل عامل الانتشار (spread-operator) المزعجة التي كانت تخفي التحديثات سابقاً.

WebDev · 4 دقيقة قراءة

استيراد React-Fiber يقلل الفجوة بين التصميم والكود، ويوفر على الفرق آلاف الدولارات في الصيانة

تقرأ هذه الإضافة شجرة Fiber الداخلية لـ React بدلاً من الـ DOM المُصيّر، حيث تقوم بربط المكونات مباشرة بطبقات Figma، مع الحفاظ على المتغيرات، وقيود التخطيط التلقائي، ومحفزات الحالة، مما يلغي الحاجة إلى إعادة إنشاء رموز التصميم (design tokens) يدوياً.

WebDev · 3 دقيقة قراءة

يتفوق Claude Fable 5 على GPT-5.6 في توليد الأكواد البرمجية، محققاً نسبة 80% في اختبار SWE-Bench Pro

في حين يتفوق GPT-5.6 على Claude Fable 5 من حيث تسعير الرموز (tokens) ويبرز في مهام الوكيل متعددة الخطوات، إلا أن نموذج Anthropic يقدم تفوقاً واضحاً في اختبارات البرمجة الواقعية. لذا، ينبغي للمطورين تجربة كلا النموذجين، مع مراعاة خصومات التخزين المؤقت وأنماط ضغط العمل قبل الالتزام بأحدهما.

WebDev · 3 دقيقة قراءة

هل ترغب في الترقية إلى TypeScript 7؟ توقع عمليات فحص أسرع بـ 10 مرات، ولكن احذر من فشل نظام الـ CI الخاص بك

يوفر محرك tsgo الجديد القائم على لغة Go عمليات بناء أسرع بـعشر مرات، ولكن واجهة برمجة التطبيقات (API) التي لا تزال قيد التغيير تتسبب في تعطل الأدوات الشائعة. وحتى يتم تجميد واجهة برمجة التطبيقات في الإصدار 7.1، يجب على الفرق الإبقاء على TS 6.x لعمليات البناء واستخدام @typescript/native-preview لإجراء عمليات الفحص السريعة.

WebDev · 3 دقيقة قراءة