DevGuide – Telegram
11.2K subscribers
2.92K photos
19 videos
133 files
3.61K links
Level up daily with insider dev hacks, smart career tips, and real talk! 🚀

⚡️ Stay connected with me: linktr.ee/AliSamir

📍 To advertise on the channel: https://telega.io/c/the_developer_guide
Download Telegram
دردشة سريعة عن الـ End-to-End Encryption

———

1️⃣ البداية

لما تبعت رسالة لأي حد، سواء نص أو صورة أو فيديو، الرسالة دي مش بتروح للطرف التاني على طول. بالعكس، الأول بتسافر في رحلة طويلة عبر شبكة الإنترنت، وتمر على سيرفرات كتير قبل ما توصل.

هنا يبدأ دور التشفير. التشفير بيعمل شفرة سرية للرسالة، بحيث لو أي حد حاول يتجسس أو يشوف الرسالة (زي الهاكرز، أو حتى الشركة نفسها)، ميعرفش يفهمها.

———

2️⃣ إيه اللي بيميز الـ End-to-End Encryption؟

في أنظمة التشفير العادية، السيرفرات اللي بتعدي عليها الرسالة ممكن تفك الشفرة وتعرف المحتوى. 🛑

لكن في End-to-End Encryption الموضوع بيكون مختلف تمامًا:

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

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

———

3️⃣ ليه الـ End-to-End Encryption مهم؟

الخصوصية حق مش رفاهية، والـ End-to-End Encryption بيوفرلك ده:

🕵️‍♂️ محدش هيعرف يقرأ رسالتك غيرك أنت والطرف التاني.
🔒 بيحميك من التتبع والتجسس. لو حد حاول يعترض الرسالة وهي ماشية، هيلاقيها مشفرة تمامًا.
ثقة أكبر في التطبيقات. لما تطبيق يوفّر النوع ده من التشفير، ده معناه إنه بيحترم خصوصيتك فعلًا.

———

4️⃣ أمثلة على التطبيقات اللي بتستخدم الـ End-to-End Encryption:

📍 واتساب: كل الرسائل والمكالمات مشفرة.
📍 سيجنال: بيعتبر من أكتر التطبيقات أمانًا لأنه مبني بالكامل حول الـ End-to-End Encryption.
📍 تليجرام: بس لازم تفعّل الـ Secret Chats، لأنها مش شغالة تلقائيًا في الشات العادي.

———

5️⃣ هل ده معناه إن كل حاجة آمنة 100%؟

للأسف، لا...

الـ End-to-End Encryption بيحمي الرسائل أثناء نقلها، بس لو جهازك نفسه أو جهاز الطرف التاني فيه برامج تجسس أو فيه حد حصل على الرسائل بعد فك التشفير (زي لما تبعت لقطة شاشة)، يبقى كده مفيش فايدة.

———

💯 خلاصة القول:

الـ End-to-End Encryption زي خزنة سرية للرسائل بتاعتك، محدش يقدر يفتحها غيرك أنت والطرف التاني.

خلي بالك إن الأمان مش بس في التشفير، حافظ على جهازك وكلمات السر بتاعتك لأنها ثغرات محترمة ممكن أي حد يستغلها ضدك.

———

وفقكم الله لكل خير 🌿
11
Speed up your React apps without rewriting everything.
2
Popular Backend Tech Stack. 💯
3
يعني إيه Micro Frontends؟
.
.
تعال ندردش شوية عن Micro Frontends ونعرف قصته وإزاي بيشتغل بشكل مبسط...

———

ممكن تكون سمعت عن مصطلح الـ Microservices اللي موجود في الباك إند...

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

لو شغال في مشروع ضخم، أكيد هتلاقي نفسك بتواجه مشاكل في التنظيم، وصعوبة في التوسع، وتداخل بين الفرق  (Teams) اللي بتشتغل على التطبيق. هنا بقى بييجي دور الـ Micro Frontends.

———

📍 إزاي الـ Micro Frontends بتشتغل؟

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

مثلًا:

- الفريق الأول شغال على جزء التسجيل والدخول باستخدام React.

- الفريق التاني شغال على جزء الداشبورد بتقنية Angular.

- الفريق التالت شغال على قسم المنتجات بـ Vue.js.

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

———

📍 إيه فائدة الـ Micro Frontends؟

لما التطبيق يكون مقسم لوحدات صغيرة، بيبقى أسهل توسع في كل وحدة بدون ما تأثر على بقية التطبيق.

كل فريق ممكن يشتغل بمفرده، يختار التقنية المناسبة له، ويحسن الجزء بتاعه بدون ما ينتظر الفرق التانية.

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

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

———

لكن خد بالك…

رغم كل المزايا دي، لكن فيه تحديات في تطبيق Micro Frontends:

⚡️ لازم يكون فيه تواصل وتنظيم كويس بين الفرق اللي شغاله على المشروع عشان مفيش جزء يتضارب مع جزء تاني.

⚡️ الفكرة لو مش محسوبة صح، ممكن تلاقي نفسك بتواجه مشاكل في سرعة تحميل التطبيق، خصوصًا لو كل وحدة محتاجة تحميل المكتبات بتاعتها.

⚡️ لازم تضمن إن واجهة المستخدم تكون متناسقة، حتى لو الوحدات مبنية بتقنيات مختلفة.

———

📍 إمتى تستخدم الـ Micro Frontends؟

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

———

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

———

وفقكم الله لكل خير 🌿
7👏2
إيه اللي بيخلي بعض تطبيقات React أسرع من غيرها؟ 🤔
.
.
في الغالب جزء كبير من مشاكل تطبيقات React بتكون بسبب الأداء، خصوصًا مع المشاريع اللي بتكبر تدريجيًا.

المقال ده يعتبر دليل عملي بيشرح أهم طرق Profiling وOptimization في React، باستخدام React Profiler و Chrome DevTools خطوة بخطوة، عشان تكتشف نقاط الخلل وتحسن الأداء بسهولة.

———

A Practical Guide to Profiling & Optimizing React Applications for Peak Performance 🚀


———

Read Full Article 👇🏻

📌 Medium:
https://medium.com/gitconnected/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-20f05f2ccd58

📌 DEV Community:
https://dev.to/alisamir/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-273i

———

لو حابب تتعمق في الموضوع، أرشحلك كتاب Web Performance Fundamentals، الكتاب ممتاز جدًا عن تجربة...
https://www.getwebperf.com

———

وفقكم الله لكل خير 🌿
6
أفـكـار مشـاريـع 🔻
.
.
لو بتدور على أفكار مشاريع جديدة تطور بها مستواك في البرمجة، سواء كنت مبتدئ أو قطعت شوط كويس في المجال، المقال ده فيه 200 فكرة مشروع مختلفة تقدر تطبق المشاريع المناسبة لمستواك وتضيفهم في الـ CV والـ Portfolio...

———

معظم المشاريع لو بحثت عنها على يوتيوب أو GitHub هتلاقي الـكود تبعها، لكن بلاش تعمل كده وابدأ في المشروع بنفسك وحدد المميزات والتكنولوجي اللي هتشتغل بها وابدأ خبط يمين وشمال وشوف قدراتك هتوصلك لحد فين في المشروع...

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

———

200 Project Ideas from Beginner to Advanced with Open Source Contributions 🚀

https://dev.to/kishansheth/200-project-ideas-from-beginner-to-advanced-with-open-source-contributions-3g6a

———

وفقكم الله لكل خير 🌿
8
🔰 JavaScript Decorators & Annotations

Decorators enable metaprogramming by extending classes/methods at design time.
4
Your Journey to DevOps Mastery 💯


Follow this comprehensive roadmap to become a skilled DevOps engineer.
Each stage includes interactive skills with curated resources and hands-on learning paths.

https://devops-daily.com/roadmap
3👍1
دردشة سريعة عن الـ API Gateway ⚡️
.
.
لو بتشتغل على مشروع كبير أو على بيئة Microservices معقدة، أكيد هتحتاج تتعامل مع الـ API Gateway، لأنه ببساطة بيعمل كـ "بوابة" أو وسيط بين المستخدمين (أو الـ Clients) وبين مجموعة الخدمات اللي بيقدمها التطبيق.

———

📌 يعني إيه API Gateway؟


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

الـ API Gateway هو الجزء اللي بيستلم الطلبات من الـ Clients (زي تطبيق الموبايل أو الويب) ويوجهها للـ Microservice الصحيحة.

يعني بدل ما التطبيق يبعت طلب مباشر لكل خدمة ويضيع وقت في فهم مسارات كتير، الـ API Gateway بيستقبل الطلب وينفذه ويبعت البيانات للي عاوزها.

———

📌 وظائف الـ API Gateway؟


توجيه الطلبات: لما ييجي طلب من العميل، الـ API Gateway بيختار الخدمة المناسبة اللي هتقدر تستجيب للطلب ده ويبعته لها.

توحيد البيانات: لو عندك خدمات مختلفة والعميل محتاج بيانات من أكتر من خدمة، الـ API Gateway بيجمع البيانات دي كلها ويرجعها للعميل في رد واحد.

التحكم في الأمان: بيسمح لك تعمل قواعد الأمان زي التحقق من الهويات (Authentication) والترخيص (Authorization)، عشان تضمن إن الطلبات اللي جايه كلها من مصادر موثوق فيها.

التحكم في المعدل (Rate Limiting): تقدر من خلاله تحدد عدد الطلبات اللي ممكن يجريها العميل في وقت معين، بحيث تحمي خدماتك من أي ضغط غير طبيعي أو هجمات زي DDoS.

التوجيه الديناميكي (Dynamic Routing): لو عندك إصدارات مختلفة من نفس الخدمة، تقدر تحدد أي إصدار يستخدمه الـ Client أو تغير التوجيه حسب الوقت أو حسب الـ Load.

التحسين والأداء (Caching): ممكن كمان يقوم بعمل Cache للطلبات اللي بيتكرر استخدامها، وده بيساعد في تخفيف الحمل على الخدمات.

———

📌 ليه مهم نستخدم الـ API Gateway؟


لما بيكون عندك تطبيق بيدير أكتر من خدمة، التعامل المباشر بين العميل وكل خدمة على حدة ممكن يبقى معقد ويتطلب وقت طويل، وده بيأثر على أداء التطبيق.

هنا بقى بييجي دور الـ API Gateway اللي بيسهل التعامل ويوفر طريقة منظمة وبسيطة للتفاعل مع الخدمات.

كمان، لو محتاج تطبق سياسات الأمان بشكل موحد، أو محتاج تعمل Analytics للطلبات اللي بتيجي، يبقى الـ API Gateway هو المكان الصح اللي تعمل فيه كل ده، لأنه نقطة التحكم الرئيسية اللي بتشوف وتتحكم في كل الطلبات اللي جاية ورايحة بين العميل والخدمات.

———

فيه أدوات كتير تقدر تستخدمها كـ API Gateway، زي:

⚙️ Kong
⚙️ NGINX
⚙️ AWS API Gateway
⚙️ Zuul

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

———

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