المدونة
مقالات ودروس مجانية تساعدك في رحلتك التعليمية — من أساسيات البرمجة إلى أحدث التقنيات.
INP للمتوسط: ليه Lighthouse 95 ومستخدمك حاسس الموقع بطيء
لو Lighthouse بيدّيك 96/100 لكن الزائر بيحس بتأخير ثانية في كل ضغطة زر، المشكلة مش في LCP. INP بيقيس أعلى زمن استجابة لكل تفاعل، وده اللي بيحدد إحساس الزائر بسرعة موقعك. مقال للمستوى المتوسط بمثال طاهي المطعم للمبتدئ، تعريف علمي لـ Long Tasks و Main Thread، 4 تكنيكات قابلة للنسخ (scheduler.yield, requestIdleCallback, Web Workers, debounce)، أرقام مقاسة من إنتاج (412ms → 96ms)، trade-offs الـ overhead، وحالات INP فيها مش أولوية.
Content-Visibility في CSS للمتوسط: ارسم 20% من الصفحة بدل 100% في أول زيارة
لو الصفحة عندك فيها 80 كارد منتج ومدوّنة طويلة وأول رسم بياخد 4.2 ثانية، المتصفح بيرسم كل حاجة حتى اللي مش ظاهر. content-visibility: auto بسطر CSS واحد بيخلّيه يتجاهل العناصر اللي بره الـ viewport ويوفّر 73% من زمن الرسم. مقال للمستوى المتوسط بمثال صفحات الكتاب للمبتدئ، تعريف علمي لـ containment وlayout skipping من W3C CSS Containment Module Level 2، كود CSS شغّال على صفحة 80 كارد، أرقام مقاسة من Lighthouse 12، 4 trade-offs حقيقية، وحالات لا تستخدمها فيها.
Tail Latency للمحترف: ليه P99 يكسر 5% من مستخدميك
المتوسط بيخبّي الكارثة. لو الـ API بيرد في 80ms متوسط لكن P99 = 2400ms، فيه شريحة كاملة من مستخدميك بتعيش تجربة مكسورة. مقال للمحترف بمثال خط الإنتاج للمبتدئ، تعريف علمي للنسب المئوية من ورقة Dean و Barroso "The Tail at Scale"، كود k6 شغّال يقيس P50/P95/P99، أرقام مقاسة من service بـ 5000 RPS، 3 أسباب شائعة لارتفاع الذيل، trade-offs الـ hedged requests، ومتى لا تركّز على P99 أصلاً.
PostgreSQL Partitioning: حوّل query من 8 ثواني لـ 118ms بـ 4 سطور SQL
لو جدول events عندك بقى 218 مليون صف وquery على آخر 7 أيام بياخد 8 ثواني، Declarative Partitioning في PostgreSQL 16 بيخلي planner يقفز للـ partition المطلوب فقط فالاستعلام ينزل لـ 118ms. شرح للمستوى المحترف بمثال مكتبة المخازن، تعريف علمي دقيق، استراتيجيات RANGE وLIST وHASH، كود SQL شغّال، أرقام مقاسة، trade-offs، وحالات لا تستخدم فيها.
WebP vs AVIF للمبتدئ: لماذا صورتك 240KB بدل 1.2MB بنفس الجودة
لو موقعك بيحمّل صور JPEG بحجم 1.2MB والصفحة بتاخد 6.4 ثانية على شبكة 4G، AVIF بيحوّل نفس الصورة لـ 240KB والصفحة لـ 1.8 ثانية بدون فقد جودة محسوس. مقال للمبتدئ بمثال شنطة السفر، تعريف علمي دقيق لـ WebP و AVIF، كود Sharp شغّال يحوّل الصور تلقائيًا، tag picture مع fallback صحيح، أرقام مقاسة على 30 صورة منتج، نسبة دعم المتصفحات 2026، trade-offs زمن الترميز، وحالات لا يصلح فيها AVIF أصلاً.
Resource Hints بالعربي: preconnect يوفّر 240ms قبل أول طلب API
لو موقعك بيستدعي API خارجي زي Stripe أو Google Fonts، أول طلب بيدفع ضريبة 240ms في DNS وTLS handshake. preconnect وdns-prefetch بسطرين HTML بيخلّوا المتصفح يدفع الضريبة دي مبكرًا فأول طلب فعلي يطلع تقريبًا فوريًا. مقال للمستوى المبتدئ بمثال جرس الشقة، تعريف علمي دقيق، كود HTML شغّال، أرقام مقاسة على Fast 3G، trade-offs، وحالات لا تستخدمها فيها.
Bloom Filters بالعربي: ابحث في 100 مليون مفتاح بـ 114MB رام بدل 4GB
لو cache فيه 100 مليون مفتاح وكل request بيدوّر هل المفتاح موجود قبل ما يروح للـ DB، Bloom filter بيخلّيك تجاوب على السؤال ده في 90 نانو ثانية بـ 114MB رام بدل 4GB. مقال للمستوى المتوسط/المحترف بمثال قائمة الفرح، تعريف علمي دقيق، كود Python و Redis شغّال، أرقام مقاسة، trade-offs، وحالات لا تستخدم فيها.
Debouncing vs Throttling في JavaScript: 95% توفير في طلبات API
لو search box في موقعك بيرسل طلب لكل حرف، الزائر بيعمل 24 طلب لكلمة واحدة. Debouncing بـ 8 سطور JavaScript بينزّل ده لطلب واحد. مقال للمبتدئين بمثال جرس الباب، تعريف علمي دقيق، كود vanilla JS شغّال، أرقام مقاسة، الفرق الحقيقي بين debounce وthrottle، trade-offs، وحالات لا تستخدم أي منهما.
PgBouncer بالعربي: خدّم 10,000 عميل من 100 اتصال DB فقط
لو السيرفر بيتجمد عند 300 اتصال متزامن على PostgreSQL، المشكلة مش في الـ DB. كل اتصال جديد بياكل 10MB رام و3-5ms في الـ handshake. PgBouncer بيخلّي 10,000 عميل يستخدموا 100 اتصال DB بسطر إعداد. شرح للمستوى المتوسط/المحترف بمثال السوبر ماركت، الأوضاع الثلاثة (session/transaction/statement)، إعداد شغّال، أرقام مقاسة، trade-offs، وحالات لا يصلح فيها.