إزاي تتجنب الـ Memory Leaks في JavaScript؟ 🤔
.
.
خلال رحلتك في عالم الـ JavaScript، سواء في فرونت اند أو باك اند، ممكن تكون سمعت عن مصطلح الـ "Memory Leaks". وده موضوع ممكن يتسبب في كوارث زي إن التطبيق بتاعك يبقى بطيء جدًا أو حتى ينهار خالص...⚠️

تعال ندردش شوية عن الـ Memory Leaks وإزاي تتجنبها في الكود...

———

Memory Leaks in JavaScript: A Simple Guide 💯

في المقال ده تكلمنا عن أهم المواضيع اللي تخص الـ Memory Leaks:

📍 What is a Memory Leak?
📍 How JavaScript Manages Memory
📍 Common Causes of Memory Leaks
📍 How to Detect Memory Leaks
📍 Tips to Prevent Memory Leaks

———

📌 رابط المقال:

⚡️ Dev Community
https://dev.to/alisamir/memory-leaks-in-javascript-a-simple-guide-31e8

⚡️ Medium
https://medium.com/@dev.alisamir/memory-leaks-in-javascript-a-simple-guide-e274d44f169c

———

وفقكم الله لكل خير ☘️

———

#javascript

One line of CSS. Smooth page transitions. No JavaScript. 💯

@view-transition {
  navigation: auto;
}

The 🆕 CSS View Transitions bring native animations to multi-page apps, no SPA setup needed!

———

Explore now 👇
https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide

———

#css

12 نصيحـة لحمـاية الـ APIs! 🛡
.
.
في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهم جدًا وحاجة أساسية في التطبيق. 💡

تعال ندردش شوية عن طرق حماية الـ APIs...

———

1- استخدم الـ HTTPS:

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

2- اعتمد على الـ OAuth2:

ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات.

3- جرب الـ WebAuthn:

لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه).

4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys):

مينفعش نفس المفتاح يقدر يعمل كل حاجة! قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق.

5- ركز على الـ Authorization مش بس الـ Authentication:

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

6- طبّق الـ Rate Limiting:

متخليش أي حد يقدر يضرب الـ API بتاعتك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks.

7- اعمل API Versioning:

تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة لها. حافظ على الإصدارات المختلفة.

8- استخدم Whitelisting:

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

9- افحص OWASP API Security Risks:

قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم.

10- خلي فيه API Gateway:

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

11- تعامل بحرص مع الأخطاء (Error Handling):

متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية.

12- فعّل Input Validation:

بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.

———

وفقكم الله لكل خير ☘️

———

#api

دردشة سريعة عن الـ React Server Components ⚡️
.
.
لو بتشتغل React بقالك فترة، أكيد عارف إن واحد من أكبر التحديات هو إن الأداء ساعات بيتأثر، والـ bundle size بيكبر، وبتلاقي نفسك بتجري ورا الـ optimization يمين وشمال: تضيف memo هنا، و useCallback هناك، و Server-Side Rendering عشان السرعة… بس لسه حاسس إن فيه حاجة ناقصة.

علشان كده React طلعوا بحاجة اسمها React Server Components (RSC)…

الـ React Server Components بتنقل React إلى مستوى تاني خالص. بتخلّي جزء كبير من الكود يشتغل على الـ Server بدل ما ينزل كله للـ Client، وبالتالي:

✅ الـ performance أعلى
✅ الـ bundle size أقل
✅ الـ data fetching أسهل وأبسط
✅ هيكون عندك zero client-side overhead لحاجات مش محتاجة تكون Client components أصلًا

يعني تخيّل تعمل Component كاملة تتنفذ على السيرفر من غير ما تنزل للمتصفح… وتقدر تدخل فيها مباشرة DB queries أو تستخدم APIs من غير ما تفكر في security ولا hooks زي useEffect…

———

الـ RSC هي Components بيحصل لها render بالكامل على الـ Server، ومش بتوصل للـ Browser كـ JavaScript code. هي بتبعت الـ UI final result للـ Client بشكل lightweight، من غير ما يبقى محتاج hydrate زي الـ SSR.

———

📌 الفرق بينها وبين SSR (Server-Side Rendering)؟

📍 الـ SSR:
- السيرفر بيعمل render، بس بيبعت HTML + hydration scripts
- بيبعت JS كتير للـ Client
- الهدف: تحسين الـ First Paint

📍 الـ Server Components:
- السيرفر بيبعت UI بدون hydration، ومش كل حاجة بتحتاج تكون interactive
- ممكن تمنع تحميل JS أصلًا لبعض الـ Components
- الهدف: تقليل الـ bundle size + handling logic على السيرفر

———

✅ الـ Server Components: بتتكتب بنفس شكل الـ Components العادية، بس بيحصل لها render على السيرفر فقط، ومينفعش تستخدم فيها useState أو useEffect.

✅ الـ Client Components: دي اللي بتشتغل على الـ Browser، وبتحتاج تكتب في أولها "use client" عشان React تفهم إنها لازم تنزل للـ Client.

———

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

———

#react