المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
stale-while-revalidate للمتوسط: API response في 4ms بدل 380ms بسطر Cache-Control
لو الـ API بياخد 380ms كل ما الـ cache يخلص ويستنى refresh، Cache-Control: stale-while-revalidate بـ سطرين بيخلّي 99% من الطلبات ترجع في 4ms والـ refresh في الخلفية. مقال للمتوسط بمثال المخبز للمبتدئ، شرح علمي من RFC 5861، إعداد Nginx و Cloudflare Workers قابل للنسخ، أرقام من API بـ 1.2 مليون طلب يوميًا، 4 trade-offs خفية، ومتى الـ stale-while-revalidate يكون مضيعة وقت.
LISTEN/NOTIFY في PostgreSQL للمتوسط: استبدل polling بـ real-time events في 30 سطر
لو خدمتك بتفتح SELECT كل ثانيتين علشان تلحق آخر تعديل في الجدول، انت بتدفع 3 تكاليف خفية على نفس الـ DB. LISTEN/NOTIFY في PostgreSQL بترسل event من الـ DB للتطبيق في 12 مللي ثانية بدون Redis ولا RabbitMQ. مقال للمتوسط بمثال جرس الباب للمبتدئ، تعريف علمي من توثيق PostgreSQL 16 الرسمي، كود SQL و Node.js شغّال على pg 8.x، أرقام مقاسة من خدمة تتبع شحنات بـ 4,200 سائق نشط (1,400 query/ثانية → 14، latency 1.6 ثانية → 38ms)، 4 trade-offs خفية، ومتى LISTEN/NOTIFY بيكون الاختيار الغلط.
HTTP/3 و QUIC للمتوسط: ليه موقعك بياخد 800ms على 4G وإزاي توصّله لـ 240ms
لو LCP بياخد 3.4 ثانية على شبكة موبايل رغم CDN و HTTP/2، المشكلة مش في الكود — هي في TCP نفسه. HTTP/3 على QUIC بيشيل round-trips من أول طلب، وبينزّل TTFB من 820ms لـ 240ms. مقال للمتوسط بمثال طلبية الكافيه، شرح من RFC 9000، إعداد NGINX 1.25 شغّال، 4 trade-offs خفية، ومتى HTTP/3 يبقى مضيعة وقت.
INP و scheduler.yield للمتوسط: نزّل زمن الكليك من 320ms لـ 80ms
لو زرار dashboard بياخد 320ms قبل ما يستجيب، الموقع مش بطيء — هو شغّال long task بيقفل main thread. scheduler.yield في Chrome 129 بتنزّل INP لـ 80ms بدون Web Worker، وبتحفظ ترتيبك في Search لأن INP بقى رسمي في Core Web Vitals من مارس 2024.
Virtual Scrolling في React للمتوسط: اعرض 100 ألف صف بدون ما يتجمد المتصفح
لو جدول React بيتجمّد لما البيانات تعدّي 5,000 صف، المشكلة مش في React — هي إنك بترسم 100 ألف DOM node والمتصفح بيموت. Virtual Scrolling بـ 12 سطر ومكتبة react-window 6KB بيرسم 18 صف فقط على الشاشة والباقي وهمي. مقال للمتوسط بمثال السينما للمبتدئ، شرح علمي للـ DOM rendering pipeline، كود JSX شغّال على React 19 و react-window 1.8، أرقام مقاسة على Chrome 131 (Initial render من 4.18 ثانية لـ 38ms، FPS من 4 لـ 60، RAM من 1.2GB لـ 38MB)، 4 trade-offs حقيقية بما فيهم Ctrl+F و a11y، ومتى Virtual Scrolling بيكون كارثة بدل ما يحسّن.
Table Partitioning في PostgreSQL للمتوسط: من 4.2 ثانية لـ 12ms على جدول 80 مليون صف
لو جدول الطلبات في PostgreSQL وصل 80 مليون صف وأي SELECT آخر 30 يوم بياخد 4.2 ثانية، الـ DB مش ضعيفة — هي بتفحص الجدول كله. Declarative Partitioning في PostgreSQL 16 بيقسّم الجدول لـ partitions شهرية بحيث الـ query يضرب 2.6 مليون صف بدل 80 مليون، ويرجع في 12 مللي ثانية. مقال للمتوسط بمثال أرشيف الفواتير للمبتدئ، تعريف علمي من توثيق PostgreSQL 16، كود SQL قابل للنسخ، أرقام مقاسة من إنتاج e-commerce، 4 trade-offs، ومتى Partitioning بيكون كارثة بدل ما يحسّن.
Read Replicas في PostgreSQL للمتوسط: وزّع 80% من القراءات بدون تعديل سطر كود
لو سيرفر PostgreSQL الإنتاج بيرفع CPU لـ 92% الساعة 8 الصبح ومعظم الطلبات SELECT بسيطة، الـ DB مش ضعيفة — هي بتخدم القراءة والكتابة من نفس الـ instance. Read Replica واحد بيستقبل 80% من القراءات بدون لمس كود التطبيق، وبيخفّض P95 latency من 480ms لـ 38ms. مقال للمتوسط بمثال المكتبة العامة للمبتدئ، شرح علمي للـ Streaming Replication من توثيق PostgreSQL 16، إعداد primary + standby قابل للنسخ، توجيه القراءات بـ pgpool-II، أرقام مقاسة من API بـ 12K طلب/دقيقة، 4 trade-offs حقيقية، ومتى Read Replica بتكون مضيعة وقت.
Service Worker Caching للمتوسط: خلّي موقعك يفتح في 0.4 ثانية للزائر العائد
لو الزائر اللي بيرجع لموقعك بيستنّى 2.8 ثانية كأنه أول زيارة، Service Worker بـ 40 سطر JavaScript بينزّل الزمن لـ 0.4 ثانية ويخلّي الموقع يفتح حتى من غير إنترنت. مقال للمتوسط بمثال أمين المخزن للمبتدئ، تعريف علمي من Service Worker API spec، 3 استراتيجيات caching بكود شغّال على Workbox 7، أرقام مقاسة من e-commerce عربي بـ 84,000 زائر شهريًا (P75 من 2.8s لـ 0.4s، bounce rate -38%، فاتورة CDN -54%)، 4 trade-offs خفية، ومتى Service Worker بيكون كارثة بدل ما يفيد.
PgBouncer للمتوسط: شغّل 5,000 اتصال متزامن على Postgres بـ 512MB ذاكرة
لو Postgres بيرفض اتصالات جديدة عند 100 مستخدم ويرمي "too many clients already"، السيرفر مش ضعيف — Postgres بيشغّل process منفصل لكل اتصال. PgBouncer بـ 12 سطر config بيخلّيك تشغّل 5,000 client متزامن بنفس السيرفر. مقال للمتوسط بمثال شبابيك البنك للمبتدئ، شرح علمي للـ pooling modes الثلاثة، ملف pgbouncer.ini شغّال، أرقام مقاسة من API FastAPI (الـ throughput من 2,400 لـ 14,800 طلب/دقيقة)، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.