𝟮𝟰 𝗖𝗼𝗱𝗶𝗻𝗴 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀 𝗧𝗼 𝗟𝗮𝗻𝗱 𝗬𝗼𝘂𝗿 𝗗𝗿𝗲𝗮𝗺 𝗝𝗼𝗯

———

𝟭) 𝗧𝘄𝗼 𝗣𝗼𝗶𝗻𝘁𝗲𝗿𝘀

𝟮) 𝗣𝗿𝗲𝗳𝗶𝘅 𝗦𝘂𝗺𝘀

𝟯) 𝗦𝗹𝗶𝗱𝗶𝗻𝗴 𝗪𝗶𝗻𝗱𝗼𝘄

𝟰) 𝗞𝗮𝗱𝗮𝗻𝗲’𝘀 𝗔𝗹𝗴𝗼𝗿𝗶𝘁𝗵𝗺

𝟱) 𝗙𝗶𝗻𝗱 𝗻𝘂𝗺𝗯𝗲𝗿 𝗼𝗳 𝘀𝘂𝗯𝗮𝗿𝗿𝗮𝘆𝘀

𝟲) 𝗙𝗮𝘀𝘁 𝗮𝗻𝗱 𝗦𝗹𝗼𝘄 𝗣𝗼𝗶𝗻𝘁𝗲𝗿𝘀

𝟳) 𝗗𝗲𝗽𝘁𝗵-𝗙𝗶𝗿𝘀𝘁 𝗦𝗲𝗮𝗿𝗰𝗵

𝟴) 𝗕𝗿𝗲𝗮𝗱𝘁𝗵-𝗙𝗶𝗿𝘀𝘁 𝗦𝗲𝗮𝗿𝗰𝗵

𝟵) 𝗠𝗮𝘁𝗿𝗶𝘅 𝗧𝗿𝗮𝘃𝗲𝗿𝘀𝗮𝗹

𝟭𝟬) 𝗔𝗱𝗷𝗮𝗰𝗲𝗻𝗰𝘆 𝗟𝗶𝘀𝘁 𝗕𝗙𝗦 / 𝗗𝗙𝗦

𝟭𝟭) 𝗧𝘄𝗼 𝗛𝗲𝗮𝗽𝘀

𝟭𝟮) 𝗕𝗶𝗻𝗮𝗿𝘆 𝗦𝗲𝗮𝗿𝗰𝗵 (𝗠𝗼𝗱𝗶𝗳𝗶𝗲𝗱)

𝟭𝟯) 𝗧𝗼𝗽𝗼𝗹𝗼𝗴𝗶𝗰𝗮𝗹 𝗦𝗼𝗿𝘁

𝟭𝟰) 𝗧𝗼𝗽 𝗞

𝟭𝟱) 𝗟𝗶𝗻𝗸𝗲𝗱 𝗟𝗶𝘀𝘁 𝗥𝗲𝘃𝗲𝗿𝘀𝗮𝗹

𝟭𝟲) 𝗣𝗲𝗿𝗺𝘂𝘁𝗮𝘁𝗶𝗼𝗻𝘀

𝟭𝟳) 𝗖𝗼𝗺𝗯𝗶𝗻𝗮𝘁𝗶𝗼𝗻𝘀

𝟭𝟴) 𝗧𝗿𝗲𝗲 𝗠𝗮𝘇𝗲 (𝗕𝗮𝗰𝗸𝘁𝗿𝗮𝗰𝗸𝗶𝗻𝗴)

𝟭𝟵) 𝗟𝗼𝗻𝗴𝗲𝘀𝘁 𝗖𝗼𝗺𝗺𝗼𝗻 𝗦𝘂𝗯𝘀𝗲𝗾𝘂𝗲𝗻𝗰𝗲

𝟮𝟬) 𝗠𝗼𝗻𝗼𝘁𝗼𝗻𝗶𝗰 𝗦𝘁𝗮𝗰𝗸

𝟮𝟭) 𝗠𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻

𝟮𝟮) 𝗧𝗮𝗯𝘂𝗹𝗮𝘁𝗶𝗼𝗻

𝟮𝟯) 𝗠𝘂𝗹𝘁𝗶-𝗦𝗼𝘂𝗿𝗰𝗲 𝗕𝗙𝗦

𝟮𝟰) 𝗠𝗲𝗿𝗴𝗲 𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹𝘀

BECOME A FRONTEND WIZARD! 🔮

A collection of frontend challenges, JavaScript problems, and Data Structures & Algorithms (DSA) exercises to sharpen your problem-solving skills. Solve & compete 💪🏻

https://frontwizards.com

مفهوم الـ Cache Invalidation 🔥
.
.
تعال أحكيلك حكاية صغيرة:
أنت فتحت تطبيق لطلب الأكل، لقيت العرض بيقولك "خصم 50% على أول أوردر".. فرحت ودخلت على البرجر، ولسه بتختار، التطبيق قالك "الخصم خلص" 🫠

طب ما أنت لسه قايل من 5 ثواني إن فيه خصم!

هنا بقى ييجي دور الـ "Cache Invalidation"!

———

📌 يعني إيه Cache أصلًا؟

ببساطة كده، الكاش ده زي لما بتصور شاشة المحادثة بدل ما ترجع تقراها كل مرة، أو زي لما المطعم بيطبع منيو مخصوص ويحطه قدام الناس بدل ما يطبع كل مرة حد يسأله عن المنيو.

هو نسخة سريعة من البيانات، بتخلي الموقع أو التطبيق أسرع، بدل ما يروح يجيب الداتا من السيرفر كل مرة.

بس السؤال هنا:
إمتى نرمي الصورة القديمة ونجيب واحدة جديدة؟

———

📌 ليه بنعمل Invalidate للكاش؟

"لأن البيانات بتتغير"

مثلًا:
- السعر تغير
- البوست اتعدل
- المنتج خلص من المخزن

لو الكاش فضل يعرضلك بيانات قديمة، ده هيبقى تضليل، وهيخلي تجربة المستخدم في الضياع.

تخيل تفتح فيسبوك تلاقي بوستات من أسبوعين فوق، أو تدخل تشتري موبايل تلاقيه "متاح"، ولما تضيفه للسلة يقولك "غير موجود"

يبقى لازم نعرف إمتى نرمي الكاش ونرجع نجيب الداتا الجديدة.

———

💡 أنواع الـ Cache Invalidation

1- الـ Time-based Invalidation

يعني الكاش يبقى له "صلاحية".

مثلًا: "احفظ البيانات دي لمدة 5 دقائق، وبعدها امسحها".
ده مفيد في الداتا اللي مش بتتغير بسرعة، زي صفحة البروفايل.


2- الـ Event-based Invalidation

ده بقى لما يحصل "حاجة معينة"، نمسح الكاش فورًا.
زي مثلًا الأدمن يعدل سعر منتج، أو المستخدم يضيف بوست جديد وقتها هنرمي الكاش القديم.

———

🤔 نستخدم أي نوع؟

- لو الداتا بتتغير بسرعة جدًا يبقى الـ Event-based
- لو الداتا ثابتة نسبيًا وعايز توازن بين الأداء والدقة يبقى الـ Time-based

وأحيانًا بنستخدم الاتنين مع بعض...

———

⚠️ تحديات الـ Cache Invalidation

- بيانات قديمة بتظهر
لو الكاش متمسحش في الوقت الصح، المستخدم هيشوف داتا غلط وده هيخلي الثقة أقل والمشاكل هتزيد.

- ضغط زائد على السيرفر
لو مسحت الكاش كتير أو بدري، السيرفر هيتخنق منك وهيبقى بطيء.


🎯 الحل؟

- استخدم أدوات قوية زي Redis أو Memcached
- اعمل Monitoring للكاش بتاعك
- اختبر الـ Invalidation كويس جدًا
- قسم الكاش حسب نوع الداتا، مينفعش كله يتعامل بنفس الطريقة

———

✅ أمثلة من أرض الواقع

- مواقع التجارة الإلكترونية
زي Amazon أو Noon، بيستخدموا Event-based Invalidation لما السعر أو المخزون يتغير، وTime-based لحاجات زي صفحات التصنيفات.

- السوشيال ميديا
تطبيق Facebook مثلاً بيخزن كاش للبوستات بس أول ما حد يعدل البوست أو يعمل كومنت الـ Event-based triggers تمسح الكاش وتجيب الجديد فورًا.

———

وفقكم الله لكل خير 🌿

أكثر من 100 مشروع JavaScript لجماعة الويب 🚀
.
.
مشاريع بسيطة ومناسبة للمبتدئين، ومعتمدة على HTML, CSS, وVanilla JavaScript بس 💻🔥
———

JavaScript Projects for Web Developers

Master web development with our curated collection of beginner-friendly projects built with HTML, CSS, and Vanilla JavaScript

https://www.100jsprojects.com