المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
React Virtualization: ارسم قائمة 10,000 صف بدون ما الواجهة تتجمّد
لو جدول React بـ 10,000 صف بياخد 4 ثواني في أول رسم وكل scroll بيعلّق نص ثانية، المشكلة مش React. المشكلة إنك بترسم 60,000 عقدة DOM دفعة واحدة. List Virtualization بيخلي الـ DOM فيه 30 صف فقط ويحافظ على scrollbar صحيح. مقال للمستوى المتوسط بمثال السينما، تعريف علمي، كود react-window شغّال، أرقام قياس فعلية، trade-offs، وحالات لا تنفع فيها.
Bloom Filters بالعربي: ازاي تتحقق من مليار عنصر بـ 11 ميجابايت بس
لو بتعمل lookup على قاعدة بيانات فيها مليار صف لكل request وبتدفع ثمنها latency و RAM، Bloom Filter بيقفلك 99% من الـ lookups دي قبل ما توصل للـ DB أصلاً، بـ 11 ميجابايت ذاكرة فقط. شرح للمستوى المتوسط بمثال حارس الحفلة، تعريف علمي، كود Python شغّال، أرقام مقاسة، trade-offs، ومتى لا تستخدمه.
Evals لتطبيقات AI: ازاي تختبر LLM بتاعك من غير ما تخمّن
لو بتغيّر prompt في تطبيق AI وبتختبره يدويًا على 5 أمثلة قبل الديبلوي، ده مش اختبار، ده تخمين. Evals بتحوّل التخمين لرقم مقاس. مقال للمستوى المتوسط بمثال امتحان الرخصة، تعريف علمي، كود Python شغّال على Anthropic SDK، أرقام قبل وبعد، trade-offs، وحالات ما تستخدمهاش.
Files API في Claude: ارفع PDF كامل وخلّيه يجاوب بدون ما تبني RAG
لو عندك PDF كبير وعايز Claude يجاوب منه، Files API بيستبدل أسبوع شغل RAG بـ 4 سطور كود. مقال للمستوى المتوسط بمثال كاميرا المطار، تعريف علمي، كود Python شغّال على Anthropic SDK، أرقام تكلفة قبل وبعد، trade-offs، وحالات لا تستخدمه فيها.
Reranking في RAG: ليه نتائج بحثك متلخبطة حتى مع Embeddings ممتازة
لو RAG pipeline بتاعك بيرجّع الإجابة الصح في المركز السابع بدل الأول، المشكلة مش embeddings — المشكلة إنك واقف عند خطوة retrieval. شرح للمستوى المتوسط بمثال المكتبة، تعريف علمي للفرق بين bi-encoder وcross-encoder، كود Python شغّال على pgvector + BGE-reranker، أرقام مقاسة من BEIR-FiQA، trade-offs، ومتى لا تستخدم Reranker.
اعمل Webhook Receiver آمن بـ Node.js: تحقّق من HMAC Signature ورد في 50ms
لو endpoint الـ webhook بتاعك مفتوح من غير verification، أي حد عارف الرابط يقدر يزوّر طلبات ويغيّر حالة الـ DB. مقال للمستوى المتوسط بمثال ختم المخبز للمبتدئ، تعريف علمي دقيق لـ HMAC-SHA256 من RFC 2104، كود Node.js شغّال في 30 سطر مع timingSafeEqual ومنع replay، أرقام قياس فعلية، trade-offs، وحالات لا تستخدمه فيها.
ابنِ Realtime Notifications في Next.js 15 بـ SSE بدون WebSockets
لو محتاج تبعت إشعارات حية للمستخدم في تطبيق Next.js — رد جديد، رسالة، تحديث طلب — مش لازم تركّب WebSocket server. Server-Sent Events بيعمل نفس الشغل بـ Route Handler عادي، بيشتغل خلف أي proxy، وبتقدر تنشره على Vercel أو Cloudflare بدون إعداد إضافي. شرح للمستوى المتوسط بمثال جرس البيت، تعريف علمي دقيق، كود Next.js 15 شغّال، أرقام مقاسة، trade-offs واضحة، وحالات لا تستخدم فيها SSE.
اعمل Status Page لخدماتك بـ Gatus وDocker بدون اشتراكات شهرية
لو بتدفع 30 دولار شهري لـ Statuspage.io أو Better Uptime علشان تعرض حالة خدماتك للعميل، Gatus self-hosted بيرد نفس الفايدة في 15 دقيقة بـ Docker Compose. خطوات قابلة للنسخ، فحوصات HTTP وICMP، تنبيهات Slack، أرقام استهلاك مقاسة، trade-offs، وحالات لا تستخدمه فيها.
AbortController في JavaScript: ليه searchbar بتاعك بيرسل 47 طلب لكل كلمة
لو الـ search box عندك بيرسل طلب لكل حرف والنتايج بترجع متلخبطة لأن الطلب رقم 3 وصل بعد رقم 7، المشكلة مش fetch ولا debounce. الحل اسمه AbortController. مقال للمستوى المتوسط بمثال الطباخ، تعريف علمي دقيق لـ Signal Pattern، كود JavaScript قابل للنسخ، أرقام مقاسة، trade-offs، ومتى لا تستخدمه.
Race Conditions في البرمجة: ليه نفس الكود بينجح في التيست ويفشل في الإنتاج
لو endpoint الشراء بتاعك خصم آخر قطعة لاتنين عملاء في نفس الثانية، الكود مش غلط. خيطين تنفيذ قروا الرقم في نفس النانوثانية. شرح Race Conditions للمستوى المتوسط بمثال آخر تذكرة في الحفلة، تعريف علمي لـ Critical Section و Mutual Exclusion، كود Python threading قابل للنسخ يعيد إنتاج المشكلة، 4 حلول عملية مع أرقام مقاسة (Mutex، Atomic، Optimistic، SELECT FOR UPDATE)، trade-offs، وقاعدة قرار سريعة.