المدونة
مقالات ودروس مجانية تساعدك في رحلتك التعليمية — من أساسيات البرمجة إلى أحدث التقنيات.
Lazy Loading للصور: حمّل 12 صورة بدل 200 وقدّم الصفحة في 1.8 ثانية بدل 6.4
لو صفحة منتجاتك بتحمّل 200 صورة في أول زيارة والزائر بيستنى 6 ثواني، إضافة loading="lazy" على تاج الصورة بتنزل الزمن لـ 1.8 ثانية بسطر واحد. مقال للمستوى المبتدئ بمثال مكتبة الكتب، تعريف علمي دقيق، كود HTML وJavaScript شغّال، أرقام مقاسة على شبكة 4G محاكاة، trade-offs واضحة، وحالات لا تستخدمه فيها.
Stale-While-Revalidate: قدّم استجابة في 12ms وحدّث الكاش في الخلفية
لو endpoint عندك بياخد 240ms من الـ DB كل request، Stale-While-Revalidate بيخلّيه يرد في 12ms من الكاش ويحدّث في الخلفية بدون انتظار. شرح للمستوى المتوسط بمثال محل العصير، تعريف علمي دقيق لـ RFC 5861، إعداد NGINX و Cloudflare قابل للنسخ، أرقام مقاسة من إنتاج، trade-offs، وحالات لا تستخدمه فيها.
HTTP Cache-Control بالعربي: خلّي المتصفح يحفظ ملفاتك ووفّر 87% من الطلبات
لو موقعك بيحمّل نفس logo.png و main.css في كل صفحة، Cache-Control بسطر واحد بيخلّي المتصفح يحتفظ بهم محلياً ويوفّر 87% من عدد الطلبات بدون لمس الكود. شرح للمبتدئين بمثال المكتبة العامة، تعريف علمي دقيق لـ max-age و immutable و ETag و الـ 304، إعداد NGINX شغّال، أرقام مقاسة على ملف حقيقي، trade-offs، وحالات لا تستخدمه فيها.
Materialized Views في PostgreSQL: حوّل تقرير من 12 ثانية لـ 80 مللي ثانية
لو dashboard فيه تقرير aggregation على جدول 18 مليون صف بياخد 12 ثانية كل request، المشكلة مش الـ DB ولا الـ index. المشكلة إنك بتعيد حساب نفس النتيجة كل مرة. Materialized View بينزّل الزمن ده لـ 80ms بسطر CREATE واحد. مقال للمستوى المتوسط بمثال محل البقالة، تعريف علمي دقيق، كود SQL شغّال على PostgreSQL 16، أرقام مقاسة فعليًا، استراتيجية الـ refresh، trade-offs، وحالات لا تستخدمه فيها.
Redis Pipelining بالعربي: 1000 طلب في رحلة شبكة واحدة
لو تطبيقك بيكتب 1000 مفتاح في Redis في loop وبياخد 4 ثواني، Redis مش بطيء — الـ latency بياكل الأداء بين كل أمر والتاني. Pipelining بينزّل الزمن ده لـ 80ms على نفس السيرفر بسطر واحد. مقال للمستوى المتوسط بمثال السوبر ماركت، تعريف علمي دقيق، كود Python شغّال على redis-py، أرقام مقاسة فعليًا، trade-offs، وحالات ما تستخدمهوش فيها.
Keyset Pagination بالعربي: ليه LIMIT OFFSET بيبطّأ على الصفحة 10000
لو endpoint عندك بيرد في 40ms على أول صفحة وبياخد 8 ثواني على الصفحة 10000، المشكلة مش الـ DB ولا الـ index. المشكلة إنك بتستخدم LIMIT OFFSET. مقال للمستوى المتوسط بمثال طابور المخبز، تعريف علمي دقيق لـ Keyset Pagination و B-tree seek، كود SQL وPython شغّال، أرقام مقاسة على PostgreSQL 16 لجدول 500K صف، trade-offs واضحة، وحالات لا تستخدمه فيها.
BRIN Index في PostgreSQL: index بـ 12MB بدل 2.4GB لجدول 800 مليون صف
لو جدول الـ events عندك بقى 800 مليون صف وB-tree index على عمود created_at بياكل 2.4GB ولسه بياخد 9 ثواني في range query، المشكلة مش الـ I/O. المشكلة إنك بتدفع تكلفة index مش مناسب لطبيعة الداتا. BRIN index بيوفّر 99% من الحجم على نفس الجدول وبيخلي الاستعلام يتنفذ في 380ms — بشرط تفهم هو بيشتغل إزاي وإمتى لا يصلح.
React Virtualization: ارسم قائمة 10,000 صف بدون ما الواجهة تتجمّد
لو جدول React بـ 10,000 صف بياخد 4 ثواني في أول رسم وكل scroll بيعلّق نص ثانية، المشكلة مش React. المشكلة إنك بترسم 60,000 عقدة DOM دفعة واحدة. List Virtualization بيخلي الـ DOM فيه 30 صف فقط ويحافظ على scrollbar صحيح. مقال للمستوى المتوسط بمثال السينما، تعريف علمي، كود react-window شغّال، أرقام قياس فعلية، trade-offs، وحالات لا تنفع فيها.
Backpressure في Node.js Streams: ليه السيرفر بياكل 4GB رام عند رفع ملف 500MB
لو سيرفر Node.js بيقع OOM لما حد يرفع ملف 500MB والذاكرة بتطلع لـ 4GB، المشكلة مش الذاكرة ولا حجم الملف. المشكلة إن الكود بيتجاهل backpressure في الستريم. شرح للمستوى المتوسط بمثال المطبخ، تعريف علمي، كود pipe vs pipeline، أرقام قياس فعلية، trade-offs، وحالات لا تستخدم فيها.