المدونة
مقالات ودروس مجانية تساعدك في رحلتك التعليمية — من أساسيات البرمجة إلى أحدث التقنيات.
صور 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 بيكون قرار غلط.
Font Subsetting للمبتدئ: نزّل الخط العربي من 480KB لـ 62KB بأمر واحد
لو موقعك العربي بياخد ثانيتين قبل ما النص يظهر، الـ Cairo Regular ملفه 480KB. pyftsubset في أمر واحد بياخد الأحرف اللي بتستخدمها فعلاً، بينزّل الحجم لـ 62KB، و FCP من 2.8 ثانية لـ 0.9 ثانية على شبكة 4G. شرح للمبتدئ بمثال المكتبة، أوامر قابلة للنسخ، أرقام مقاسة من e-commerce عربي، 4 trade-offs، ومتى Subsetting بيكون مضيعة وقت.
N+1 Query للمبتدئ: ليه dashboard بياخد 8 ثواني والحل في سطر ORM
لو فتحت dashboard بسيط فيه 50 صف ولاحظت إنه بياخد 8 ثواني، الـ DB مش بطيئة — أنت بترسل 51 query بدل query واحد. مقال للمبتدئ بمثال النادل والمطبخ، شرح علمي لـ Eager Loading من توثيق Django و Rails، كود قابل للنسخ في 4 ORMs، أرقام مقاسة على PostgreSQL 16 (1,840ms → 38ms، تحسّن 48×)، 4 trade-offs خفية، ومتى prefetch بيكون كارثة بدل ما يحسّن.
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 بيكون كارثة.
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 يبقى مضيعة وقت.
content-visibility: auto للمبتدئ — خاصية CSS واحدة تنزّل زمن الرسم من 1.2 ثانية لـ 90ms
سطرين CSS بدون JavaScript وبدون مكتبة بيخلوا صفحة فيها 600 كارت ترسم في 90ms بدل 1,180ms. شرح content-visibility: auto للمبتدئ مع مثال الفندق، تعريف علمي من web.dev و W3C، أرقام مقاسة على Chrome 131، 4 trade-offs خفية، ومتى الخاصية بتكون كارثة بدل ما تحسّن.
مدونة أحمد حايس
💡
ملخص سريع
مدونة أحمد حايس تجيب عن أسئلة مثل كيف أتعلم البرمجة أو التكنولوجيا أو الذكاء الاصطناعي، وتحوّل المفاهيم التقنية إلى مقالات عربية عملية واضحة.