كورس ممتاز هيساعدك في التحضير لانترفيو الـ Problem Solving 💯
The NeetCode 150 is the most important LeetCode problems you need to master, selected to cover all major algorithmic patterns that top tech companies test for.
https://youtu.be/T0u5nwSA0w0
———
وده شيت فيه مجموعة مسائل لذيذة هتساعدك في عالم الـ Problem Solving
📍 Most Asked Technical Interview Questions:
https://docs.google.com/spreadsheets/d/1hzP8j7matoUiJ15N-RhsL5Dmig8_E3aP/edit
Neetcode 150 Course - All Coding Interview Questions Solved 🚀
The NeetCode 150 is the most important LeetCode problems you need to master, selected to cover all major algorithmic patterns that top tech companies test for.
https://youtu.be/T0u5nwSA0w0
———
وده شيت فيه مجموعة مسائل لذيذة هتساعدك في عالم الـ Problem Solving
📍 Most Asked Technical Interview Questions:
https://docs.google.com/spreadsheets/d/1hzP8j7matoUiJ15N-RhsL5Dmig8_E3aP/edit
❤9
دردشة سريعة عن الـ Monolithic Architecture 💯
.
.
لما بنسمع كلمة Monolithic Architecture ممكن ييجي في دماغنا إنها حاجة قديمة خلاص ومبقتش تستخدم. بس الحقيقة إن الشكل ده من الـ architecture لسه موجود في مشاريع كتير، وساعات كمان بيكون هو الحل الأمثل في بدايات أي مشروع.
السبب؟ لأنه ببساطة أبسط شكل ممكن تبني به تطبيق أو سيستم وهيكون عبارة عن كود واحد، deploy واحد، وكل حاجة تحت سقف واحد. الفكرة دي شكلها سهلة وبديهية جدًا، وده اللي خلّاها تفضل مستخدمة سنين طويلة. لكن مع إن الموضوع باين عليه straightforward، لكن له مميزات وعيوب ممكن تأثر جدًا على قرارك كمبرمج أو كـ startup founder.
———
🎯 يعني إيه Monolithic Architecture؟
تخيل إنك بتبني سيستم كامل زي موقع e-commerce فيه:
- الـ UI (front-end).
- الـ business logic (زي إضافة منتجات للسلة، حساب الخصومات).
- الـ database access (CRUD operations).
في الـ Monolithic Architecture… كل ده بيتحط في codebase واحد، ويتعمله deplpoy كـ تطبيق واحد (single unit).
يعني لو عايز تعدل في جزء معين لازم تعيد Deploy للتطبيق كله.
———
✅ مميزات Monolithic Architecture:
1- البساطة:
الكود كله في مكان واحد، سهل تفهم العلاقات بين الأجزاء المختلفة.
2- سهولة الـ Development في البداية:
مثالي جدًا للـ MVP أو المشاريع الصغيرة.
3- أداء كويس:
مفيش network latency بين components (كلها في نفس العملية).
4- سهولة الـ Testing:
تقدر تعمل end-to-end test بسهولة لأن كل حاجة في مكان واحد.
———
❌ عيوب Monolithic Architecture:
1- صعوبة التوسّع (Scalability):
عايز تكبر جزء واحد بس من السيستم؟ مش هتقدر… لازم تكبر التطبيق كله.
2- الـ Codebase ضخم ومعقد مع الوقت:
لما المشروع يكبر، الكود بيبقى صعب أي حد يفهمه ويتعامل معاه.
3- ضعف المرونة في اختيار التكنولوجيا:
مش هينفع تبني جزء بـ Node.js وجزء بـ Python، كله لازم يبقى بنفس الـ stack.
4- بطء في الـ Deployment:
أي تعديل صغير لازم هتعمل Deploy التطبيق كله.
5- الـ Reliability ضعيفة:
لو جزء واحد وقع، ممكن يأثر على السيستم كله.
———
📌 إمتى تستخدم Monolithic Architecture؟
- لو بتبني مشروع صغير أو MVP وعايز تجرّب الفكرة بسرعة.
- لو عندك فريق صغير ومحتاج تقلل الـ overhead.
- لو لسه السيستم مش معقد ومش محتاج Scalability عالية.
———
الـ Monolithic: كل حاجة في تطبيق واحد.
الـ Microservices: السيستم متقسم لمجموعة خدمات مستقلة، كل خدمة بتشتغل لوحدها وتقدر تعمل Deploy/Scale/Debug بشكل منفصل.
———
وفقكم الله لكل خير 🌿
.
.
لما بنسمع كلمة Monolithic Architecture ممكن ييجي في دماغنا إنها حاجة قديمة خلاص ومبقتش تستخدم. بس الحقيقة إن الشكل ده من الـ architecture لسه موجود في مشاريع كتير، وساعات كمان بيكون هو الحل الأمثل في بدايات أي مشروع.
السبب؟ لأنه ببساطة أبسط شكل ممكن تبني به تطبيق أو سيستم وهيكون عبارة عن كود واحد، deploy واحد، وكل حاجة تحت سقف واحد. الفكرة دي شكلها سهلة وبديهية جدًا، وده اللي خلّاها تفضل مستخدمة سنين طويلة. لكن مع إن الموضوع باين عليه straightforward، لكن له مميزات وعيوب ممكن تأثر جدًا على قرارك كمبرمج أو كـ startup founder.
———
🎯 يعني إيه Monolithic Architecture؟
تخيل إنك بتبني سيستم كامل زي موقع e-commerce فيه:
- الـ UI (front-end).
- الـ business logic (زي إضافة منتجات للسلة، حساب الخصومات).
- الـ database access (CRUD operations).
في الـ Monolithic Architecture… كل ده بيتحط في codebase واحد، ويتعمله deplpoy كـ تطبيق واحد (single unit).
يعني لو عايز تعدل في جزء معين لازم تعيد Deploy للتطبيق كله.
———
✅ مميزات Monolithic Architecture:
1- البساطة:
الكود كله في مكان واحد، سهل تفهم العلاقات بين الأجزاء المختلفة.
2- سهولة الـ Development في البداية:
مثالي جدًا للـ MVP أو المشاريع الصغيرة.
3- أداء كويس:
مفيش network latency بين components (كلها في نفس العملية).
4- سهولة الـ Testing:
تقدر تعمل end-to-end test بسهولة لأن كل حاجة في مكان واحد.
———
❌ عيوب Monolithic Architecture:
1- صعوبة التوسّع (Scalability):
عايز تكبر جزء واحد بس من السيستم؟ مش هتقدر… لازم تكبر التطبيق كله.
2- الـ Codebase ضخم ومعقد مع الوقت:
لما المشروع يكبر، الكود بيبقى صعب أي حد يفهمه ويتعامل معاه.
3- ضعف المرونة في اختيار التكنولوجيا:
مش هينفع تبني جزء بـ Node.js وجزء بـ Python، كله لازم يبقى بنفس الـ stack.
4- بطء في الـ Deployment:
أي تعديل صغير لازم هتعمل Deploy التطبيق كله.
5- الـ Reliability ضعيفة:
لو جزء واحد وقع، ممكن يأثر على السيستم كله.
———
📌 إمتى تستخدم Monolithic Architecture؟
- لو بتبني مشروع صغير أو MVP وعايز تجرّب الفكرة بسرعة.
- لو عندك فريق صغير ومحتاج تقلل الـ overhead.
- لو لسه السيستم مش معقد ومش محتاج Scalability عالية.
———
الـ Monolithic: كل حاجة في تطبيق واحد.
الـ Microservices: السيستم متقسم لمجموعة خدمات مستقلة، كل خدمة بتشتغل لوحدها وتقدر تعمل Deploy/Scale/Debug بشكل منفصل.
———
وفقكم الله لكل خير 🌿
❤7
اسألني عن أي شيء من خلال حسابي في قبيلة 👇🏻
https://qabilah.com/profile/alisamir/professional-profile?target=ask-me-anything
https://qabilah.com/profile/alisamir/professional-profile?target=ask-me-anything
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Color Palette Inspiration 💡
Curated color palette ideas displayed in an example website.
http://happyhues.co
❤5
مفيش كورس واحد بيغطي كل حاجة عن الـ Security في الـ Frontend، بس لو عايز تبدأ صح، ركّز على المواضيع دي بالترتيب:
Prevent users from injecting malicious code into your page.
Protect your forms and requests from being executed without user consent.
Understand JWT, cookies, tokens, and how to handle them securely.
Never trust user input, always validate and sanitize it.
Use headers like CSP, X-Frame-Options, and X-Content-Type-Options to strengthen your app’s security.
Regularly check your npm packages (npm audit, Snyk) for vulnerabilities.
Understand how HTTPS works and how to configure CORS properly.
Store and handle session tokens safely.
Protect your app from being embedded or tricking users with fake UI.
1- XSS (Cross-Site Scripting)
Prevent users from injecting malicious code into your page.
2- CSRF (Cross-Site Request Forgery)
Protect your forms and requests from being executed without user consent.
3- Authentication & Authorization
Understand JWT, cookies, tokens, and how to handle them securely.
4- Input Validation & Sanitization
Never trust user input, always validate and sanitize it.
5- Secure Headers
Use headers like CSP, X-Frame-Options, and X-Content-Type-Options to strengthen your app’s security.
6- Dependencies Security
Regularly check your npm packages (npm audit, Snyk) for vulnerabilities.
7- HTTPS & CORS
Understand how HTTPS works and how to configure CORS properly.
8- Session Management
Store and handle session tokens safely.
9- Clickjacking & Phishing Protection
Protect your app from being embedded or tricking users with fake UI.
❤10
أهم بدائل الـ localStorage 💡
.
.
خلال رحلتك في عالم الـ Front-End لازم في وقت من الأوقات هتحتاج تخزن بيانات عند الـ Client Side (يعني عند المستخدم).
أبسط حاجة كلنا عرفناها في الأول هي الـ localStorage. سهلة جدًا والكود بسيط، وكمان عبارة عن key/value، بس الحقيقة إن localStorage مش دايمًا أحسن حل.
ليه؟ 👇
- الـ size محدود (تقريبًا 5MB).
- كل حاجة بتتخزن كـ string.
- مفيهاش أي نوع من الـ security (ممكن أي حد يقرأها).
- مش scalable لو بتتعامل مع data كبيرة.
علشان كده تعال ندردش شوية عن 4 بدائل للـ localStorage ممكن تساعدك في بعض السيناريوهات المختلفة...
———
📌 الـ IndexedDB
- دي عبارة عن database كاملة داخل الـ browser.
- بتخليك تخزن structured data (objects، arrays…) مش مجرد strings.
- بتتعامل معاها عن طريق APIs أو libraries زي Dexie.js عشان تسهّل الموضوع.
- مناسبة جدًا لو عندك data كبيرة أو offline apps زي Note Apps أو Todo Apps.
- أسرع بكتير في الـ queries من localStorage.
———
📌 الـ sessionStorage
- نفس فكرة localStorage بالضبط لكن الفرق إنها بتتمسح أول ما الـ tab تتقفل.
- مناسبة لحاجات temporary زي tokens أثناء الـ session أو data مش مهمة تحتفظ بها بعد ما اليوزر يقفل الصفحة.
- حجمها برضه محدود زي localStorage.
———
📌 الـ Cookies
- أقدم وأشهر طريقة لتخزين البيانات في الـ browser.
- ميزتها إنها بتتبعت تلقائي مع كل HTTP Request للـ server.
- مناسبة جدًا للـ authentication (زي الـ JWT tokens أو session IDs).
- بس عيبها إنها صغيرة (حوالي 4KB) وأي data زيادة ممكن تقلل سرعة الـ requests.
- لازم تستخدمها للحاجات الخفيفة والمهمة بس.
———
📌 الـ Service Workers + Cache API
- ده حل advanced شوية، بيستخدم الـ Service Workers مع Cache API.
- بيخليك تخزن responses كاملة من الـ network (زي HTML, CSS, JS, Images).
- ممتاز للـ Progressive Web Apps (PWA) عشان تشتغل offline.
- تقدر تتحكم في caching strategy (مثلًا: Network First, Cache First…).
- مفيد جدًا للأداء (performance) وتحسين تجربة المستخدم.
———
💡 الخلاصة:
- لو data كبيرة: استخدم IndexedDB.
- لو data بسيطة ومؤقتة: sessionStorage.
- لو عايز data تتبعت للـ server: استخدم Cookies.
- لو بتبني PWA أو محتاج caching قوي: استخدم Service Workers + Cache API.
فكر دايمًا قبل ما تستخدم localStorage: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟
———
وفقكم الله لكل خير 🌿
.
.
خلال رحلتك في عالم الـ Front-End لازم في وقت من الأوقات هتحتاج تخزن بيانات عند الـ Client Side (يعني عند المستخدم).
أبسط حاجة كلنا عرفناها في الأول هي الـ localStorage. سهلة جدًا والكود بسيط، وكمان عبارة عن key/value، بس الحقيقة إن localStorage مش دايمًا أحسن حل.
ليه؟ 👇
- الـ size محدود (تقريبًا 5MB).
- كل حاجة بتتخزن كـ string.
- مفيهاش أي نوع من الـ security (ممكن أي حد يقرأها).
- مش scalable لو بتتعامل مع data كبيرة.
علشان كده تعال ندردش شوية عن 4 بدائل للـ localStorage ممكن تساعدك في بعض السيناريوهات المختلفة...
———
📌 الـ IndexedDB
- دي عبارة عن database كاملة داخل الـ browser.
- بتخليك تخزن structured data (objects، arrays…) مش مجرد strings.
- بتتعامل معاها عن طريق APIs أو libraries زي Dexie.js عشان تسهّل الموضوع.
- مناسبة جدًا لو عندك data كبيرة أو offline apps زي Note Apps أو Todo Apps.
- أسرع بكتير في الـ queries من localStorage.
———
📌 الـ sessionStorage
- نفس فكرة localStorage بالضبط لكن الفرق إنها بتتمسح أول ما الـ tab تتقفل.
- مناسبة لحاجات temporary زي tokens أثناء الـ session أو data مش مهمة تحتفظ بها بعد ما اليوزر يقفل الصفحة.
- حجمها برضه محدود زي localStorage.
———
📌 الـ Cookies
- أقدم وأشهر طريقة لتخزين البيانات في الـ browser.
- ميزتها إنها بتتبعت تلقائي مع كل HTTP Request للـ server.
- مناسبة جدًا للـ authentication (زي الـ JWT tokens أو session IDs).
- بس عيبها إنها صغيرة (حوالي 4KB) وأي data زيادة ممكن تقلل سرعة الـ requests.
- لازم تستخدمها للحاجات الخفيفة والمهمة بس.
———
📌 الـ Service Workers + Cache API
- ده حل advanced شوية، بيستخدم الـ Service Workers مع Cache API.
- بيخليك تخزن responses كاملة من الـ network (زي HTML, CSS, JS, Images).
- ممتاز للـ Progressive Web Apps (PWA) عشان تشتغل offline.
- تقدر تتحكم في caching strategy (مثلًا: Network First, Cache First…).
- مفيد جدًا للأداء (performance) وتحسين تجربة المستخدم.
———
💡 الخلاصة:
- لو data كبيرة: استخدم IndexedDB.
- لو data بسيطة ومؤقتة: sessionStorage.
- لو عايز data تتبعت للـ server: استخدم Cookies.
- لو بتبني PWA أو محتاج caching قوي: استخدم Service Workers + Cache API.
فكر دايمًا قبل ما تستخدم localStorage: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟
———
وفقكم الله لكل خير 🌿
❤7🔥3
دردشة سريعة عن الـ HTTP Caching 🔻
.
.
من ضمن المصطلحات المهمة جدًا في عالم الويب، خصوصًا لو مهتم بـ تحسين أداء المواقع... إيه فكرته وإزاي الموضوع ده بيساعد في تسريع المواقع وتحسين تجربة المستخدم؟
———
📌 يعني إيه Caching؟
ببساطة، الـ Caching هو لما الموقع بيخزن بيانات معينة في مكان قريب من المستخدم (زي المتصفح بتاعك أو سيرفر معين)، عشان لما تحتاج البيانات دي تاني، يجيبها بسرعة بدل ما يطلبها من السيرفر الأساسي كل مرة.
الفكرة هنا هي إنك بتقلل الوقت المستغرق في تحميل الصفحة، وبتقلل الضغط على السيرفر كمان.
———
📌 إزاي الـ HTTP Caching بيشتغل؟
لما تفتح موقع، الطلبات اللي بتروح للسيرفر (الـ HTTP Requests) ممكن يترد عليها ببيانات بتتخزن عندك محليًا أو على مستوى معين من الشبكة.
لما تيجي تزور الموقع تاني، المتصفح ممكن يقرر يستخدم البيانات اللي مخزنها بدل ما يطلبها تاني من السيرفر، وده بيخلي الصفحة تفتح أسرع بكتير.
———
📌 أنواع الـ HTTP Caching:
- الـ Browser Caching:
المتصفح بيخزن حاجات زي الصور، ملفات CSS، و JavaScript لفترة معينة. لما تزور الموقع تاني، المتصفح بيستخدم الحاجات دي بدل ما يحملها من السيرفر.
- الـ Server-Side Caching:
ده بيبقى على مستوى السيرفر نفسه، وبيخزن صفحات أو أجزاء من البيانات الجاهزة عشان يبعتها للمستخدمين بسرعة.
- الـ CDN Caching:
الـ Content Delivery Network هو شبكة سيرفرات موزعة عالميًا. السيرفرات دي بتخزن محتوى الموقع (زي الصور والفيديوهات) عشان توصل للمستخدمين من أقرب سيرفر ليهم، وبالتالي تقلل زمن التحميل.
———
الموضوع ده مش بيشتغل لوحده، لازم نستخدم شوية إعدادات زي الـ Cache-Control Headers عشان نتحكم في إزاي البيانات تتخزن، وفترة التخزين، وإمتى البيانات دي تتحدث. تعال نشوف أشهر الأنواع:
⚡️ الـ public: يعني البيانات ممكن تتخزن في أكتر من مكان، زي المتصفح أو الـ CDN.
⚡️ الـ private: البيانات تتخزن عند المستخدم بس، ومش مفروض تبقى متاحة على سيرفرات تانية.
⚡️ الـ no-cache: البيانات محتاجة تتأكد من صحتها قبل الاستخدام، يعني لازم يتم التأكد من إنها لسه صالحة من السيرفر.
⚡️ الـ max-age: ده بيحدد المدة اللي البيانات تفضل متخزنة فيها (بالثواني).
———
📌 ليه الـ HTTP Caching مهم؟
✅ سرعة التحميل: المواقع بتفتح أسرع لأن المتصفح مش بيضطر يحمل كل حاجة من الأول.
✅ تخفيف الحمل على السيرفر: كل ما الطلبات للسيرفر تقل، السيرفر يقدر يخدم عدد أكبر من المستخدمين في نفس الوقت.
✅ تجربة مستخدم أفضل: الناس بتحب المواقع السريعة، وده بيخليهم يقعدوا وقت أطول ويتفاعلوا أكتر مع الموقع.
———
📌 إيه المشاكل اللي ممكن تقابلنا؟
- لو بيانات الموقع بتتحدث كتير، ممكن المستخدم يشوف بيانات قديمة لو الـ Cache مش معمول له إدارة كويسة.
- ضبط الـ Caching بطريقة صح بيحتاج شوية خبرة، خصوصًا لو الموقع فيه أجزاء كتير بتتحدث بشكل مستمر.
———
وفقكم الله لكل خير 🌿
.
.
من ضمن المصطلحات المهمة جدًا في عالم الويب، خصوصًا لو مهتم بـ تحسين أداء المواقع... إيه فكرته وإزاي الموضوع ده بيساعد في تسريع المواقع وتحسين تجربة المستخدم؟
———
📌 يعني إيه Caching؟
ببساطة، الـ Caching هو لما الموقع بيخزن بيانات معينة في مكان قريب من المستخدم (زي المتصفح بتاعك أو سيرفر معين)، عشان لما تحتاج البيانات دي تاني، يجيبها بسرعة بدل ما يطلبها من السيرفر الأساسي كل مرة.
الفكرة هنا هي إنك بتقلل الوقت المستغرق في تحميل الصفحة، وبتقلل الضغط على السيرفر كمان.
———
📌 إزاي الـ HTTP Caching بيشتغل؟
لما تفتح موقع، الطلبات اللي بتروح للسيرفر (الـ HTTP Requests) ممكن يترد عليها ببيانات بتتخزن عندك محليًا أو على مستوى معين من الشبكة.
لما تيجي تزور الموقع تاني، المتصفح ممكن يقرر يستخدم البيانات اللي مخزنها بدل ما يطلبها تاني من السيرفر، وده بيخلي الصفحة تفتح أسرع بكتير.
———
📌 أنواع الـ HTTP Caching:
- الـ Browser Caching:
المتصفح بيخزن حاجات زي الصور، ملفات CSS، و JavaScript لفترة معينة. لما تزور الموقع تاني، المتصفح بيستخدم الحاجات دي بدل ما يحملها من السيرفر.
- الـ Server-Side Caching:
ده بيبقى على مستوى السيرفر نفسه، وبيخزن صفحات أو أجزاء من البيانات الجاهزة عشان يبعتها للمستخدمين بسرعة.
- الـ CDN Caching:
الـ Content Delivery Network هو شبكة سيرفرات موزعة عالميًا. السيرفرات دي بتخزن محتوى الموقع (زي الصور والفيديوهات) عشان توصل للمستخدمين من أقرب سيرفر ليهم، وبالتالي تقلل زمن التحميل.
———
الموضوع ده مش بيشتغل لوحده، لازم نستخدم شوية إعدادات زي الـ Cache-Control Headers عشان نتحكم في إزاي البيانات تتخزن، وفترة التخزين، وإمتى البيانات دي تتحدث. تعال نشوف أشهر الأنواع:
⚡️ الـ public: يعني البيانات ممكن تتخزن في أكتر من مكان، زي المتصفح أو الـ CDN.
⚡️ الـ private: البيانات تتخزن عند المستخدم بس، ومش مفروض تبقى متاحة على سيرفرات تانية.
⚡️ الـ no-cache: البيانات محتاجة تتأكد من صحتها قبل الاستخدام، يعني لازم يتم التأكد من إنها لسه صالحة من السيرفر.
⚡️ الـ max-age: ده بيحدد المدة اللي البيانات تفضل متخزنة فيها (بالثواني).
———
📌 ليه الـ HTTP Caching مهم؟
✅ سرعة التحميل: المواقع بتفتح أسرع لأن المتصفح مش بيضطر يحمل كل حاجة من الأول.
✅ تخفيف الحمل على السيرفر: كل ما الطلبات للسيرفر تقل، السيرفر يقدر يخدم عدد أكبر من المستخدمين في نفس الوقت.
✅ تجربة مستخدم أفضل: الناس بتحب المواقع السريعة، وده بيخليهم يقعدوا وقت أطول ويتفاعلوا أكتر مع الموقع.
———
📌 إيه المشاكل اللي ممكن تقابلنا؟
- لو بيانات الموقع بتتحدث كتير، ممكن المستخدم يشوف بيانات قديمة لو الـ Cache مش معمول له إدارة كويسة.
- ضبط الـ Caching بطريقة صح بيحتاج شوية خبرة، خصوصًا لو الموقع فيه أجزاء كتير بتتحدث بشكل مستمر.
———
وفقكم الله لكل خير 🌿
❤5
الكورس الكامل لتحليل البيانات للمبتدئين شامل شرح كامل لبرنامج Power BI
https://youtu.be/HgznuWuCBqk
———
الكورس الشامل للإكسل بالعربي | من البداية حتى المستوى المتقدم - Excel Full Course from A to Z
https://youtu.be/QW7Z730O8BQ
———
كورس تحليل البيانات الشامل بلغة Python | مع مقدمة في الإحصاء والاحتمالات
https://youtu.be/ocqLwTcnB7c
———
الكورس الشامل لتعلم SQL لمحللي البيانات | The Complete SQL Course for Data Analysts
https://youtu.be/QC8UeHhMErg
❤3
الفرق بين MVC و MVP و MVVM و MVI 💡
.
.
في عالم السوفتوير هتقابل أنماط تصميم زي MVC و MVP و MVVM و MVI.
تعال ندردش شوية عن كل واحد فيهم ونشوف إيه الفرق بينهم وإزاي كل واحد بيأثر على طريقة كتابة الكود وتنظيمه.
———
📌 الـ MVC (Model-View-Controller)
ده من أقدم الأنماط اللي ظهرت، وبيستخدم لحد دلوقتي في مشاريع كتير في مجال الويب. الفكرة ببساطة إنك بتقسم الكود لـ 3 أجزاء:
⚡️ الـ Model: بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: الجزء المسؤول عن الـ UI وعرض البيانات للمستخدم.
⚡️ الـ Controller: المسؤول عن الربط ما بين الـ Model والـ View. يعني بياخد البيانات من الـ Model ويوديها للـ View علشان تظهر، وبياخد الـ Input من الـ View ويعمل Processing في الـ Model.
———
ده نمط بسيط ومناسب للتطبيقات اللي حجمها صغير أو متوسط. لكن لما المشروع يكبر أحيانًا الـ Controller بيبقى كبير ومعقد، وده بيخلي التعامل معاه صعب سواء التعديل أو الإضافة.
———
📌 الـ MVP (Model-View-Presenter)
الـ MVP بيعتبر تطوير شوية عن MVC، والفرق الرئيسي هنا هو إن الـ Presenter بياخد مكان الـ Controller.
⚡️ الـ Model: برضو بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: زي MVC، مسؤول عن عرض الـ UI.
⚡️ الـ Presenter: بيشتغل كـ "وسيط" بين الـ Model والـ View، لكن بعكس الـ Controller في MVC، الـ View في الـ MVP بيكون أكتر "غباءً" يعني الـ View مش بتعمل حاجة غير إنها تستعرض اللي الـ Presenter بيبعتُه.
الـ Presenter بيكون مفصول تمامًا عن الـ View، وده بيسهل اختبار الـ Presenter بشكل مستقل، وده اللي بيخلي MVP أكتر قابلية للاختبار.
———
📌 الـ MVVM (Model-View-ViewModel)
ده النمط الأكثر استخدامًا في التطبيقات الحديثة، خاصة في الموبايل و Desktop Applications. الفرق هنا إننا بنضيف عنصر جديد اسمه ViewModel:
⚡️ الـ Model: برضو زي ما هو، فيه البيانات والـ Business Logic.
⚡️ الـ View: بتمثل الـ UI.
⚡️ الـ ViewModel: المسؤول عن إدارة حالة الـ View والتعامل مع البيانات اللي هتظهر فيه. بيخلي الـ View "ذكية" لأنها بتراقب الـ ViewModel وتستجيب لأي تغييرات أوتوماتيك.
———
الجميل في MVVM إنه بيشتغل مع الـ Data Binding، يعني لما البيانات تتغير في الـ ViewModel، الـ View بتتحدث لوحدها. وده بيخلي الكود كويس وأسهل في الصيانة.
———
📌 الـ MVI (Model-View-Intent)
آخر نمط معانا هو MVI، وده نوعًا ما مختلف عن الباقيين. هنا الفكرة الأساسية هي إن كل حاجة في التطبيق عبارة عن "Intent"، يعني بتبدأ بنية (Intent) معينة، والـ View بتتحدث بناءً عليها.
⚡️ الـ Model: بيحتوي على الحالة الحالية للبيانات.
⚡️ الـ View: بتمثل الـ UI اللي بيعرض البيانات بناءً على الـ Model.
⚡️ الـ Intent: بيستخدم للتفاعل مع الـ Model وتحديث البيانات.
———
الـ MVI بيتناسب أكتر مع الـ Reactive Programming، يعني مناسب أكتر للتطبيقات اللي بتتعامل مع الـ Streams والـ Events بشكل متواصل زي تطبيقات الـ Chat أو الـ Real-Time Apps.
———
اختيارك للنمط المناسب بيختلف حسب نوع المشروع اللي شغال عليه وحجمه.
الـ MVC مناسب لو المشروع بسيط أو صغير، بينما الـ MVVM و MVI هيكونوا خيار أفضل لو بتشتغل على تطبيقات كبيرة أو معقدة.
———
وفقكم الله لكل خير 🌿
.
.
في عالم السوفتوير هتقابل أنماط تصميم زي MVC و MVP و MVVM و MVI.
تعال ندردش شوية عن كل واحد فيهم ونشوف إيه الفرق بينهم وإزاي كل واحد بيأثر على طريقة كتابة الكود وتنظيمه.
———
📌 الـ MVC (Model-View-Controller)
ده من أقدم الأنماط اللي ظهرت، وبيستخدم لحد دلوقتي في مشاريع كتير في مجال الويب. الفكرة ببساطة إنك بتقسم الكود لـ 3 أجزاء:
⚡️ الـ Model: بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: الجزء المسؤول عن الـ UI وعرض البيانات للمستخدم.
⚡️ الـ Controller: المسؤول عن الربط ما بين الـ Model والـ View. يعني بياخد البيانات من الـ Model ويوديها للـ View علشان تظهر، وبياخد الـ Input من الـ View ويعمل Processing في الـ Model.
———
ده نمط بسيط ومناسب للتطبيقات اللي حجمها صغير أو متوسط. لكن لما المشروع يكبر أحيانًا الـ Controller بيبقى كبير ومعقد، وده بيخلي التعامل معاه صعب سواء التعديل أو الإضافة.
———
📌 الـ MVP (Model-View-Presenter)
الـ MVP بيعتبر تطوير شوية عن MVC، والفرق الرئيسي هنا هو إن الـ Presenter بياخد مكان الـ Controller.
⚡️ الـ Model: برضو بيحتوي على البيانات والـ Business Logic.
⚡️ الـ View: زي MVC، مسؤول عن عرض الـ UI.
⚡️ الـ Presenter: بيشتغل كـ "وسيط" بين الـ Model والـ View، لكن بعكس الـ Controller في MVC، الـ View في الـ MVP بيكون أكتر "غباءً" يعني الـ View مش بتعمل حاجة غير إنها تستعرض اللي الـ Presenter بيبعتُه.
الـ Presenter بيكون مفصول تمامًا عن الـ View، وده بيسهل اختبار الـ Presenter بشكل مستقل، وده اللي بيخلي MVP أكتر قابلية للاختبار.
———
📌 الـ MVVM (Model-View-ViewModel)
ده النمط الأكثر استخدامًا في التطبيقات الحديثة، خاصة في الموبايل و Desktop Applications. الفرق هنا إننا بنضيف عنصر جديد اسمه ViewModel:
⚡️ الـ Model: برضو زي ما هو، فيه البيانات والـ Business Logic.
⚡️ الـ View: بتمثل الـ UI.
⚡️ الـ ViewModel: المسؤول عن إدارة حالة الـ View والتعامل مع البيانات اللي هتظهر فيه. بيخلي الـ View "ذكية" لأنها بتراقب الـ ViewModel وتستجيب لأي تغييرات أوتوماتيك.
———
الجميل في MVVM إنه بيشتغل مع الـ Data Binding، يعني لما البيانات تتغير في الـ ViewModel، الـ View بتتحدث لوحدها. وده بيخلي الكود كويس وأسهل في الصيانة.
———
📌 الـ MVI (Model-View-Intent)
آخر نمط معانا هو MVI، وده نوعًا ما مختلف عن الباقيين. هنا الفكرة الأساسية هي إن كل حاجة في التطبيق عبارة عن "Intent"، يعني بتبدأ بنية (Intent) معينة، والـ View بتتحدث بناءً عليها.
⚡️ الـ Model: بيحتوي على الحالة الحالية للبيانات.
⚡️ الـ View: بتمثل الـ UI اللي بيعرض البيانات بناءً على الـ Model.
⚡️ الـ Intent: بيستخدم للتفاعل مع الـ Model وتحديث البيانات.
———
الـ MVI بيتناسب أكتر مع الـ Reactive Programming، يعني مناسب أكتر للتطبيقات اللي بتتعامل مع الـ Streams والـ Events بشكل متواصل زي تطبيقات الـ Chat أو الـ Real-Time Apps.
———
اختيارك للنمط المناسب بيختلف حسب نوع المشروع اللي شغال عليه وحجمه.
الـ MVC مناسب لو المشروع بسيط أو صغير، بينما الـ MVVM و MVI هيكونوا خيار أفضل لو بتشتغل على تطبيقات كبيرة أو معقدة.
———
وفقكم الله لكل خير 🌿
❤7
💡 Free Introduction to Docker eBook
This is an open-source introduction to Docker guide that will help you learn the basics of Docker and how to start using containers for your SysOps, DevOps, and Dev projects. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you will most likely have to use Docker at some point in your career.
The guide is suitable for anyone working as a developer, system administrator, or a DevOps engineer and wants to learn the basics of Docker.
———
🚀 Download:
https://devdojo.com/post/bobbyiliev/free-introduction-to-docker-ebook
❤2
ليه لازم تستخدم الـ Module Bundler؟ 🤔
.
.
لما تبدأ مشروع ويب جديد، الأمور في الأول بتكون بسيطة وسهلة، مجرد كام ملف HTML و CSS و JavaScript، وكل حاجة شغالة تمام.
لكن مع الوقت، ومع إضافة ميزات جديدة، بتبدأ الأمور تتعقد تدريجيًا، وتلاقي نفسك بتواجه مشاكل زي بطء التحميل أو صعوبة في تنظيم الكود...
والحل الممتاز لكل المشاكل دي هو الـ Module Bundler... تعال نوضح الموضوع ببساطة...💯
———
ببساطة، هو أداة بتاخد كل الملفات اللي بتستخدمها في مشروعك (JS, CSS, Images... إلخ)، وتظبطها وتجمعهم في ملف واحد أو مجموعة ملفات صغيرة ومنظمة، بحيث تكون جاهزة للتشغيل على المتصفح بكفاءة عالية.
من أشهر الـ Bundlers اللي ممكن تستخدمهم:
- Webpack
- Vite
- Parcel
- Rollup
———
1- تحسين الأداء (Performance Optimization)
- بيعمل Minification للكود، يعني بيشيل المسافات والتعليقات الزيادة، فحجم الملف بيصغر ويتحمّل أسرع.
- بيعمل Tree Shaking، يعني بيشيل أي كود مش مستخدم من المشروع علشان يبقى خفيف.
2- تقليل عدد الـ Requests
بدل ما المتصفح يطلب 100 ملف JavaScript و CSS، الـ Bundler بيحطهم في ملف واحد أو كام ملف قليلين، فالصفحة تفتح أسرع.
3- التعامل مع الـ Dependencies بسهولة
لو بتستخدم مكتبات زي React أو Vue، الـ Bundler بينظمها ويدمجها في الكود بشكل احترافي.
4- التوافق مع جميع المتصفحات
بيحول الكود الحديث لكود قديم مفهوم للمتصفحات القديمة باستخدام أدوات زي Babel.
5- سهولة تقسيم الكود (Code Splitting)
ممكن تحمل أجزاء معينة من الكود لما تحتاجها بس، بدل ما تحمل كل حاجة مرة واحدة، وده بيسرّع الصفحة.
6- دعم الـ Hot Reloading
مع أدوات التطوير اللي بتيجي مع الـ Bundler (زي Vite أو Webpack Dev Server)، لما تعدل الكود الصفحة بتتحدث لوحدها من غير ما تعمل Refresh.
7- سهولة التعامل مع الملفات المختلفة
تقدر تستخدم CSS و SCSS وتضيف صور وخطوط بسهولة عن طريق إعدادات الـ Bundler زي الـ Loaders في Webpack.
———
لو مشروعك صغير جدًا، زي صفحة HTML بسيطة مع شوية CSS و JS، ممكن تشتغل من غير Bundler. لكن لو المشروع كبر ودخل فيه مكتبات أو أكواد كتير، هتحتاجه جدًا.
———
استخدام Module Bundler بيساعدك في:
✅ تحسين الأداء وتسريع التحميل.
✅ تنظيم المشروع وتقليل المشاكل.
✅ توافق أفضل مع المتصفحات.
✅ تجربة تطوير أسهل وأسرع.
———
وفقكم الله لكل خير 🌿
.
.
لما تبدأ مشروع ويب جديد، الأمور في الأول بتكون بسيطة وسهلة، مجرد كام ملف HTML و CSS و JavaScript، وكل حاجة شغالة تمام.
لكن مع الوقت، ومع إضافة ميزات جديدة، بتبدأ الأمور تتعقد تدريجيًا، وتلاقي نفسك بتواجه مشاكل زي بطء التحميل أو صعوبة في تنظيم الكود...
والحل الممتاز لكل المشاكل دي هو الـ Module Bundler... تعال نوضح الموضوع ببساطة...💯
———
📌 إيه هو الـ Module Bundler؟
ببساطة، هو أداة بتاخد كل الملفات اللي بتستخدمها في مشروعك (JS, CSS, Images... إلخ)، وتظبطها وتجمعهم في ملف واحد أو مجموعة ملفات صغيرة ومنظمة، بحيث تكون جاهزة للتشغيل على المتصفح بكفاءة عالية.
من أشهر الـ Bundlers اللي ممكن تستخدمهم:
- Webpack
- Vite
- Parcel
- Rollup
———
📌 ليه تستخدم الـ Module Bundler؟
1- تحسين الأداء (Performance Optimization)
- بيعمل Minification للكود، يعني بيشيل المسافات والتعليقات الزيادة، فحجم الملف بيصغر ويتحمّل أسرع.
- بيعمل Tree Shaking، يعني بيشيل أي كود مش مستخدم من المشروع علشان يبقى خفيف.
2- تقليل عدد الـ Requests
بدل ما المتصفح يطلب 100 ملف JavaScript و CSS، الـ Bundler بيحطهم في ملف واحد أو كام ملف قليلين، فالصفحة تفتح أسرع.
3- التعامل مع الـ Dependencies بسهولة
لو بتستخدم مكتبات زي React أو Vue، الـ Bundler بينظمها ويدمجها في الكود بشكل احترافي.
4- التوافق مع جميع المتصفحات
بيحول الكود الحديث لكود قديم مفهوم للمتصفحات القديمة باستخدام أدوات زي Babel.
5- سهولة تقسيم الكود (Code Splitting)
ممكن تحمل أجزاء معينة من الكود لما تحتاجها بس، بدل ما تحمل كل حاجة مرة واحدة، وده بيسرّع الصفحة.
6- دعم الـ Hot Reloading
مع أدوات التطوير اللي بتيجي مع الـ Bundler (زي Vite أو Webpack Dev Server)، لما تعدل الكود الصفحة بتتحدث لوحدها من غير ما تعمل Refresh.
7- سهولة التعامل مع الملفات المختلفة
تقدر تستخدم CSS و SCSS وتضيف صور وخطوط بسهولة عن طريق إعدادات الـ Bundler زي الـ Loaders في Webpack.
———
⚠️ إمتى ممكن تستغنى عن الـ Bundler؟
لو مشروعك صغير جدًا، زي صفحة HTML بسيطة مع شوية CSS و JS، ممكن تشتغل من غير Bundler. لكن لو المشروع كبر ودخل فيه مكتبات أو أكواد كتير، هتحتاجه جدًا.
———
💡 خلاصة الكلام
استخدام Module Bundler بيساعدك في:
✅ تحسين الأداء وتسريع التحميل.
✅ تنظيم المشروع وتقليل المشاكل.
✅ توافق أفضل مع المتصفحات.
✅ تجربة تطوير أسهل وأسرع.
———
وفقكم الله لكل خير 🌿
❤5
Media is too big
VIEW IN TELEGRAM
Dev Encyclopedia 💡
Dev encyclopedia is a simple, easy-to-use, and ad-free website that simplifies technical terms, concepts, jargon, and whatnot. It has a simple UI, covers various fields like UI/UX, Backend Development, AI/ML, and more, with 420+ simplified terms.
———
Find out what that Sr. Developer is talking about. 👇🏻
https://devpedia.dev
❤2