10_Programming_Principles_Every_Software_Developer_Should_Know.pdf
222.9 KB
مهم جدًا تركز على المبادئ دي وأنت بتكتب كود 💯
10 Programming Principles Every Software Developer Should Know!
- DRY (Don’t Repeat Yourself)
- KISS (Keep it Simple, Stupid)
- YAGNI (You Aren’t Gonna Need It
- Separation of Concerns (SoC)
- SOLID Principles
- Do The Simplest Thing That Could Possibly Work
- Code For The Maintainer
- Avoid Premature Optimization
- Boy Scout Rule
- Law of Demeter
10 Programming Principles Every Software Developer Should Know!
- DRY (Don’t Repeat Yourself)
- KISS (Keep it Simple, Stupid)
- YAGNI (You Aren’t Gonna Need It
- Separation of Concerns (SoC)
- SOLID Principles
- Do The Simplest Thing That Could Possibly Work
- Code For The Maintainer
- Avoid Premature Optimization
- Boy Scout Rule
- Law of Demeter
❤4👏2
دردشة سريعة عن الـ 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 زي خزنة سرية للرسائل بتاعتك، محدش يقدر يفتحها غيرك أنت والطرف التاني.
خلي بالك إن الأمان مش بس في التشفير، حافظ على جهازك وكلمات السر بتاعتك لأنها ثغرات محترمة ممكن أي حد يستغلها ضدك.
———
وفقكم الله لكل خير 🌿
———
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
يعني إيه Micro Frontends؟
.
.
تعال ندردش شوية عن Micro Frontends ونعرف قصته وإزاي بيشتغل بشكل مبسط...
———
ممكن تكون سمعت عن مصطلح الـ Microservices اللي موجود في الباك إند...
الفكرة هي نفسها بس للفرونت إند. يعني بدل ما تبني تطبيق كبير كتلة واحدة (Monolithic)، بتقسم التطبيق لقطع أصغر، كل قطعة منهم بتتعامل كأنها تطبيق مستقل بذاته بس في نفس الوقت بيتكاملوا مع بعض عشان يشتغلوا كجزء واحد.
لو شغال في مشروع ضخم، أكيد هتلاقي نفسك بتواجه مشاكل في التنظيم، وصعوبة في التوسع، وتداخل بين الفرق (Teams) اللي بتشتغل على التطبيق. هنا بقى بييجي دور الـ Micro Frontends.
———
📍 إزاي الـ Micro Frontends بتشتغل؟
الفكرة إنك بتقسم واجهة التطبيق لقطع مستقلة أو وحدات، وكل وحدة منهم ممكن تبقى شغالة بالتقنية الخاصة بها.
مثلًا:
- الفريق الأول شغال على جزء التسجيل والدخول باستخدام React.
- الفريق التاني شغال على جزء الداشبورد بتقنية Angular.
- الفريق التالت شغال على قسم المنتجات بـ Vue.js.
كل جزء بيتم تطويره وصيانته بمعزل عن الأجزاء التانية، وكل فريق عنده حرية اختيار التقنيات والأدوات اللي تناسبه، وده بيخلي عملية التطوير أسرع وأسهل.
———
📍 إيه فائدة الـ Micro Frontends؟
✅ لما التطبيق يكون مقسم لوحدات صغيرة، بيبقى أسهل توسع في كل وحدة بدون ما تأثر على بقية التطبيق.
✅ كل فريق ممكن يشتغل بمفرده، يختار التقنية المناسبة له، ويحسن الجزء بتاعه بدون ما ينتظر الفرق التانية.
✅ لو فيه مشكلة في جزء معين من التطبيق، تقدر تصلحها بسرعة من غير ما تتعب في البحث في الكود الكبير كله.
✅ تحسين تجربة المستخدم وده لأنك ممكن تعمل تحسينات تدريجية على أجزاء معينة من التطبيق، وبالتالي المستخدم مش هيحس بأي مشاكل.
———
⚠ لكن خد بالك…
رغم كل المزايا دي، لكن فيه تحديات في تطبيق Micro Frontends:
⚡️ لازم يكون فيه تواصل وتنظيم كويس بين الفرق اللي شغاله على المشروع عشان مفيش جزء يتضارب مع جزء تاني.
⚡️ الفكرة لو مش محسوبة صح، ممكن تلاقي نفسك بتواجه مشاكل في سرعة تحميل التطبيق، خصوصًا لو كل وحدة محتاجة تحميل المكتبات بتاعتها.
⚡️ لازم تضمن إن واجهة المستخدم تكون متناسقة، حتى لو الوحدات مبنية بتقنيات مختلفة.
———
📍 إمتى تستخدم الـ Micro Frontends؟
- لما يكون عندك تطبيق ضخم وعايز توسع فيه بسرعة.
- لو فرق التطوير بتاعتك كبيرة وبتشتغل على مشاريع متفرقة.
- لو بتحتاج تدعم تقنيات متعددة في نفس المشروع.
———
الـ 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 خطوة بخطوة، عشان تكتشف نقاط الخلل وتحسن الأداء بسهولة.
———
———
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
———
وفقكم الله لكل خير 🌿
.
.
في الغالب جزء كبير من مشاكل تطبيقات 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
———
وفقكم الله لكل خير 🌿
.
.
لو بتدور على أفكار مشاريع جديدة تطور بها مستواك في البرمجة، سواء كنت مبتدئ أو قطعت شوط كويس في المجال، المقال ده فيه 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