تركاية CSS ع السريع...⚡️

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

CSS Mix-Blend Mode 🔻

———

📌 LinkedIn Post:
https://www.linkedin.com/posts/dev-alisamir_css-css3-cssstyling-activity-7244951656566603776-Txzw

———

بالتوفيق يا بطل 💪🏻

الـ Microservices Architecture 🔻

في مجال السوفتوير تعتبر الـMicroservices Architecture من أهم التوجهات اللي المبرمجين بيتجهوا ليها لما يبنوا أنظمة كبيرة ومعقدة. بس إيه هي الـMicroservices؟ وليه بنستخدمها؟ خلينا ندردرش شوية...

———

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

———

الـMicroservices Architecture ببساطة هي طريقة لتقسيم التطبيق الكبير بتاعك لعدة خدمات صغيرة، وكل خدمة (أو Microservice) بتكون مسؤولة عن جزء محدد من التطبيق.

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

———

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

فلو مثلًا عندك موقع E-commerce، ممكن تقسّم الموقع لعدة Microservices زي Service خاصة بالـAuthentication، Service تانية لإدارة المنتجات، وService ثالثة للتعامل مع الـOrders.

———

📌 إيه الفوائد اللي ممكن تاخدها من الـMicroservices؟

⚡️ التوسّع (Scalability): لما بتستخدم Microservices، تقدر توسّع أي جزء من التطبيق بسهولة. لو فيه Service معينة محتاجة Resources أكتر، تقدر تزود لها الـResources دي من غير ما تأثر على باقي النظام.

⚡️ التطوير المتوازي (Parallel Development): بفضل إن كل Microservice مستقلة بذاتها، فرق العمل المختلفة ممكن تشتغل على الخدمات المختلفة في نفس الوقت من غير ما يعطلوا بعض.

⚡️ التحديث بدون تعطل (Continuous Deployment): تقدر تعمل تحديث لأي Microservice بشكل منفصل بدون ما توقف التطبيق كله. وده معناه إنك ممكن تجرب تقنيات جديدة، أو تطور وظائف جديدة بسرعة من غير ما تقلق من تعطل النظام.

⚡️ التنوع في التقنيات (Polyglot Programming): ممكن تستخدم لغات برمجة وتقنيات مختلفة لكل Microservice بناءً على احتياجاتها. يعني ممكن يكون عندك Microservice مكتوبة بـNode.js، وأخرى بـPython، وكل واحدة تقدر تشتغل بشكل مستقل تمامًا.

———

لكن لازم تاخد بالك إن التحول لـMicroservices مش مناسب لكل الحالات. فيه تحديات زي إدارة الـDistributed Systems، والـData Consistency، وكمان الـNetwork Latency اللي ممكن تواجهها.

فلازم تدرس الموضوع كويس وتشوف هل النظام بتاعك فعلًا محتاج يتقسم لـMicroservices ولا ممكن يشتغل بشكل أفضل كنظام Monolithic.

———

بالتوفيق يا بطل 💪🏻

تركاية CSS ع السريع...⚡️

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

CSS Writing Mode 🔻

Use the CSS writing-mode to change text direction to horizontal and vertical orientations.

———

⚡️ Tutorial Video:
https://youtu.be/o948nyqpuug

COMPUTER SCIENCE explained in 17 Minutes 🔻

https://youtu.be/CxGSnA-RTsA

الفرق بين الـ Microservices والـ Monolith 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

لما بنيجي نشتغل على مشروع كبير، بنلاقي دايمًا إن اختيار الـ architecture بتاع المشروع من أهم الحاجات اللي ممكن تأثر على نجاح المشروع.

فيه نوعين رئيسيين بنسمع عنهم كتير في مجال السوفتوير: الـ Monolith والـ Microservices. طيب، إيه الفرق بين الاتنين وامتى نختار كل واحد فيهم؟

———

1. الـ Monolith Architecture

ده الـapproach الكلاسيكي اللي بنلاقيه في المشاريع القديمة أو المشاريع الصغيرة. ببساطة، الـ Monolith عبارة عن application واحد كبير متكامل. كل حاجة فيه متشابكة ومربوطة ببعض: الـ frontend، الـ backend، الـ database، وكل الـ business logic.

لما تيجي تضيف feature جديدة أو تعدل على حاجة، بتضطر تشتغل على الكود كله.

———

المميزات ✅

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

- أبسط في الـdeployment: بتعمل build وdeploy مرة واحدة للتطبيق كله.

- أقل تعقيد: الكود كله موجود في مكان واحد، فلو التيم صغير أو المشروع بسيط، الـ Monolith هيكون حل عملي.

———

العيوب ❌

- المشروع مبيكنش scalable بسهولة: كل ما المشروع يكبر، هتلاقي إن تعديل جزء بسيط ممكن يأثر على أجزاء تانية في النظام.

- صعوبة الصيانة: الكود بيبقى ضخم ومعقد، وممكن يبقى صعب جدًا تضيف features جديدة أو تصلح bugs.

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

———

2. الـ Microservices Architecture

في الـ Microservices، المشروع بيتقسم لمجموعة من الـ services الصغيرة، وكل service بتبقى مسؤولة عن جزء معين من الـ business logic.

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

———

المميزات ✅

- الـ Scalability عالي جدًا: ممكن تعمل scaling لكل service بشكل منفصل. يعني لو عندك service بتتعامل مع الـ orders في e-commerce site والترافيك عليها عالي، ممكن تعمل ليها scaling من غير ما تضطر تعمل scaling للتطبيق كله.

- مرونة في التطوير: كل service بتشتغل بشكل مستقل، فالتيم ممكن يشتغل على أكتر من feature في نفس الوقت بدون ما يحصل تعارض.

- سهولة الصيانة: لو فيه bug في service معينة، بتقدر تعدل عليها أو حتى تعملها إعادة تشغيل من غير ما تأثر على الـ services التانية.

———

العيوب ❌

- تعقيد في الـ deployment والـ management: إدارة وتنسيق كل الـ services بيحتاج أدوات وعمليات إضافية زي الـ orchestration tools (زي Kubernetes).

- صعوبة في الـ debugging: بما إن كل service مستقلة، الـ logging والـ monitoring بيبقوا معقدين شوية.

- التواصل بين الـ services: الـ inter-service communication ممكن يضيف latency ومشاكل لو مش معمول بشكل صحيح.

———

امتى تختار كل واحد؟ 🤔

لو المشروع بتاعك لسه صغير أو الـ requirements بتاعته مش معقدة، فالـ Monolith ممكن يبقى اختيار منطقي وسهل. هيوفرلك وقت ومجهود في الـ setup والـ deployment.

لكن لو المشروع كبير أو بيكبر بسرعة، والـ team عندك عايز يشتغل بكفاءة أكتر على features كتير في نفس الوقت، فالـ Microservices هتكون الأنسب.

———

الخلاصة إن كل approach ليه مميزاته وعيوبه، والاختيار ما بينهم بيعتمد بشكل كبير على حجم المشروع واحتياجاته.

الـ Monolith مناسب للمشاريع الصغيرة أو اللي مش متوقعة نمو كبير في القريب العاجل.

أما الـ Microservices فهي الأفضل للمشاريع الكبيرة اللي بتحتاج scalability ومرونة أعلى، بس لازم تكون مستعد للتعامل مع التعقيد الإضافي في الإدارة والـdeployment.

———

بالتوفيق يا بطل 💪🏻

تحسين أداء الموقع باستخدام الـ Code Splitting والـ Lazy Loading 🔻

لو بتشتغل في مجال الـ Front-End أكيد عارف إن تحسين أداء الموقع حاجة أساسية جدًا لأي مبرمج عايز يقدّم تجربة مستخدم سلسة وسريعة.

خلينا ندردش شوية عن تقنيتين مهمين جدًا ممكن يساعدوك في تحسين أداء الموقع بشكل كبير وهما: Code Splitting و Lazy Loading.

———

https://www.linkedin.com/posts/dev-guide_frontend-frontenddeveloper-frontenddevelopment-activity-7246402553939120128-dBkW

———

بالتوفيق يا صديقي ⭐️

لو بتتعامل مع node_modules...

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

Delete Unused node_modules 🔻

This tool allows you to list any node_modules directories in your system and the space they take up. You can then select which ones you want to erase to free up space.

———

⚡️ Tutorial Video:
https://youtu.be/QgX4HIDP8CI

Mastering React.js: The Essential Roadmap ✅

1. Components

- Functional Components
- Class Components
- JSX (JavaScript XML) Syntax

2. Props (Properties)

- Passing Props
- Default Props
- Prop Types (with prop-types package)

3. State

- useState Hook (Functional Components)
- Class Component State
- Immutable State Management

4. Lifecycle Methods (Class Components)

- componentDidMount
- componentDidUpdate
- componentWillUnmount

5. Hooks (Functional Components)

- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- Custom Hooks (Creating reusable logic)

6. Event Handling

- Handling Events in Functional Components
- Handling Events in Class Components

7. Conditional Rendering

- if Statements
- Ternary Operators
- Logical && Operator

8. Lists and Keys

- Rendering Lists
- Keys in React Lists

9. Component Composition

- Reusing Components
- Children Props
- Composition vs. Inheritance

10. Higher-Order Components (HOC)

- Creating HOCs
- Using HOCs for Reusability

11. Render Props

- Using Render Props Pattern

12. React Router

- <BrowserRouter>
- <Route>
- <Link>
- <Switch>
- Route Parameters

13. Navigation

- useHistory Hook
- useLocation Hook

14. Context API

- Creating Context
- useContext Hook

15. Redux

- Actions
- Reducers
- Store
- connect Function (React-Redux)
- Redux Toolkit

16. Forms

- Handling Form Data
- Controlled Components
- Uncontrolled Components
- Form Validation (with libraries like Formik, Yup)

17. Side Effects

- useEffect for Data Fetching
- useEffect Cleanup

18. AJAX Requests

- Fetch API
- Axios Library

19. Error Boundaries

- componentDidCatch (Class Components)
- ErrorBoundary Component (Functional Components)

20. Testing

- Jest Testing Framework
- React Testing Library
- Enzyme (for older codebases)

21. Optimization

- Memoization
- Profiling and Performance Monitoring (React Profiler)
- Lazy Loading (with React.lazy and Suspense)

22. Build and Deployment

- Production Builds
- Deployment Strategies (Vercel, Netlify, Heroku)
- Code Splitting and Bundling (Webpack, Rollup)

23. Styling Libraries

- Styled-components
- CSS Modules
- Emotion
- Tailwind CSS

24. State Management Libraries

- Redux
- MobX
- Zustand (alternative for simple state management)

25. Routing Libraries

- React Router
- Reach Router
- Next.js (for SSR)

26- Additional Concepts

- TypeScript with React: Integrating TypeScript into your React applications
- Server-Side Rendering (SSR): Using Next.js for SSR in React applications
- Progressive Web Apps (PWA): Building PWAs with React

Best API Documentation Tools for 2024 💯

https://www.instagram.com/p/DAf5lDDicde

الفرق بين Local Storage و Cookies و Session Storage 🔻


لما بنشتغل على تطبيقات الويب، أحيانًا بنحتاج نخزن بيانات في المتصفح، سواء لفترة قصيرة أو طويلة.

هنا بييجي دور 3 تقنيات أساسية: Local Storage، Cookies، و Session Storage. طيب إيه الفرق بينهم وامتى نستخدم كل واحد فيهم؟ خلينا نبسط الموضوع:

https://www.linkedin.com/posts/dev-guide_webdeveloper-webdevelopment-webdev-activity-7247541509963571200-b-AF

Try any Node.js package right in your browser 🔻

https://npm.runkit.com

تركاية فرونت اند ع السريع...⚡️

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي لـبنـان وفي كل دول العالم من المسلمين من الدعاء. 🔻

CSS Line Height Differences 🔻

- Identify the effects of line-height: 2 (twice the element's font size) versus line-height: 2rem (twice the root font size) by checking the computed style using Chrome DevTools.

———

⚡️ Tutorial Video: https://youtu.be/EkSapGQh3m4

الـ Atomic Design 🔻

الـ Atomic Design يعتبر واحد من أقوى الطرق اللي بتساعد في تنظيم وبناء واجهات المستخدم بشكل سهل ومنظم، وده بيساعد في الحفاظ على التناسق (consistency) بين التيم اللي شغال على المشروع وتحسين تجربة المستخدم.

الفكرة الأساسية في الـ Atomic Design إنه بيقسم واجهة المستخدم لـ 5 مستويات رئيسية، ودي بتكون زي الطبقات اللي بنبنيها فوق بعض عشان نكون الشكل النهائي للتطبيق أو الموقع.

———

https://www.linkedin.com/posts/dev-alisamir_frontenddeveloper-frontend-frontenddevelopment-activity-7248666993707409409-zJyP