المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Worker Threads في Node.js للمتوسط: شغّل CPU-bound Tasks بدون ما تجمّد Event Loop
لو الـ Node.js process بيستقبل 1,200 طلب/ثانية بسلاسة، وأول ما يدخل طلب فيه parse PDF أو image resize الـ API كله يقف 3 ثواني، انت مش محتاج سيرفر أقوى. مقال للمتوسط بمثال المطبخ للمبتدئ، شرح علمي للـ Event Loop والـ V8 isolates من توثيق Node.js 22، كود قابل للنسخ في 12 سطر، أرقام مقاسة من خدمة image processing بـ 32K طلب/يوم (P95 من 2,840ms لـ 180ms، throughput من 420 لـ 1,160 req/sec)، 4 trade-offs خفية في الـ RAM والـ structured clone والـ startup time، ومتى Worker Threads بيكون اختيار غلط.
Critical CSS للمتوسط: نزّل First Paint من 2.8s لـ 0.6s
لو موقعك بياخد 2.8 ثانية قبل ما المستخدم يشوف أول pixel، الـ stylesheet هو اللي بيوقف الرسم. Critical CSS بيستخرج قواعد above-the-fold ويضمّنها inline، فينزّل First Contentful Paint لـ 0.6 ثانية. مقال للمتوسط بمثال المطعم للمبتدئ، شرح علمي للـ render-blocking من توثيق web.dev، كود Penthouse في 18 سطر شغّال على Node.js 20+، أرقام مقاسة من متجر عربي بـ 24K زيارة يومياً، 4 trade-offs خفية، ومتى Critical CSS بيكون مضيعة وقت.
useMemo و useCallback للمتوسط: متى React يبقى أبطأ بـ 3× بسبب الـ Memoization
لو حاطط useMemo على كل filter و map في تطبيق React بنية إنك بتسرّع، انت غالبًا بتدفع تكلفة المقارنة بدون مكسب. مقال للمتوسط بمثال الدفتر للمبتدئ، شرح علمي من توثيق React 19، كود قابل للنسخ، أرقام مقاسة من dashboard فيه 200 صف (0.08ms ← 0.14ms، أي 75% أبطأ مع useMemo)، 4 trade-offs خفية، ومتى useMemo يبقى قرار غلط نهائي.
Memory Leaks في Node.js: اكتشف وأصلح بـ Heap Snapshots في 3 خطوات
لو الـ Node.js process بتاعك بياكل RAM كل ساعة لحد ما يموت بـ OOM، الكود مش بيتسرّب — هو بيحتفظ بمرجع لكائن مفروض ينتهي. مقال للمتوسط بمثال صاحب البيت للمبتدئ، شرح علمي للـ V8 heap، 3 خطوات capture/diff/analyze بـ Chrome DevTools، حالة event listeners حقيقية، أرقام مقاسة (من 1.4GB لـ 180MB)، 4 trade-offs، ومتى Heap Snapshot يكون اختيار غلط.
تقسيم الكود للمتوسط: نزّل أول تحميل JavaScript لـ 210KB
أغلب المواقع بتبعت كل كود التطبيق دفعة واحدة، فالمستخدم بيستنى ثواني في شاشة فاضية. تقسيم الكود بيقسّم الـ JavaScript لأجزاء تتحمّل عند الطلب — مقال للمتوسط بمثال المطعم، كود React شغّال، أرقام مقاسة (1.83MB ← 210KB)، 4 trade-offs، ومتى متستخدمهوش.
SKIP LOCKED في PostgreSQL: شيل Redis Queue بـ 18 سطر SQL
لو خدمتك بترسل 4,200 job/دقيقة على Redis Queue، انت بتدفع $112/شهر لـ ElastiCache بدون داعي. SKIP LOCKED في PostgreSQL 9.5+ بيحوّل أي جدول لـ job queue حقيقي بـ throughput يوصل 8,400 job/ثانية على instance واحد، بدون مكتبة خارجية. مقال للمتوسط بمثال محل الجزار للمبتدئ، شرح علمي من توثيق PostgreSQL 18 الرسمي، كود SQL و Node.js شغّال على pg 8.x، أرقام مقاسة من خدمة إنتاج، 4 trade-offs خفية، ومتى SKIP LOCKED بيكون اختيار غلط.
صور AVIF و WebP للمتوسط: نزّل حجم الصور 78% وحسّن LCP من 3.4 ثانية لـ 0.9 ثانية
لو موقعك العربي بياخد 3.4 ثانية قبل ما الصورة الكبيرة تظهر، السيرفر مش بطيء — الـ JPEG بتاعتك 480KB ولها بديل بـ 105KB بنفس الجودة. مقال للمتوسط بمثال ضغط المياه للمبتدئ، شرح علمي لـ AV1 و VP8، أوامر cwebp و avifenc كاملة، إعداد <picture> مع fallback، أرقام مقاسة من e-commerce عربي بـ 38K زيارة/يوم (LCP من 3.4s لـ 0.9s)، 4 trade-offs خفية، ومتى AVIF بيكون قرار غلط.
PgBouncer Transaction Pooling للمتوسط: من 8,400 connection error/دقيقة إلى صفر
لو الـ API بتاعك بيرجّع FATAL: too many clients already وقت الذروة، PostgreSQL مش ضعيف — انت بتفتح 1,200 connection على DB قابل لـ 100 فقط. PgBouncer 1.23 في transaction mode بيخلّي 1,000 طلب متزامن يشتغلوا على 25 connection حقيقي، وبيقلّل connection errors من 8,420 في الدقيقة لـ صفر، مع نزول P95 من 480ms لـ 28ms. مقال للمتوسط بمثال المطعم للمبتدئ، شرح علمي للـ 3 modes من توثيق PgBouncer 1.23 الرسمي، إعداد كامل قابل للنسخ، كود Node.js شغّال على pg 8.x، أرقام مقاسة من إنتاج 1,240 req/sec، 4 trade-offs خفية بما فيهم prepared statements و LISTEN/NOTIFY، ومتى Transaction Pooling بيكون مضيعة وقت.
Redis Pipelining للمتوسط: من 12K لـ 290K SET/ثانية بسطر
لو خدمتك بتعمل 12,400 SET/ثانية على Redis و CPU الـ client على 92%، المشكلة في round-trips مش في Redis. Pipelining بسطر بايثون واحد بيرفع الرقم لـ 290,300 SET/ثانية على نفس السيرفر. شرح للمتوسط بمثال موظف الدليفري للمبتدئ، تعريف علمي من توثيق Redis 7.4 الرسمي، كود Python شغّال على redis-py 5.0.8، أرقام إنتاج من خدمة authentication، 4 trade-offs خفية، ومتى Pipelining بيكون كارثة.