DevGuide

Beautiful React Loaders Collection 💯

React Loadly is a modern, high-performance library of React loaders, spinners, and loading indicators. It’s built with TypeScript, optimized for Next.js / SSR, and designed with accessibility and developer experience in mind. ——— 🔗 npm: https://www.npmjs.com/package/react-loadly 🔗 GitHub: https://github.com/Mostafashadow1/react-loadly 🔗 Showcase: https://mostafashadow1.github.io/react-loadly-showCases

Clone Wars - Open Source Clones of Popular Sites

100+ open-source clones and alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, TikTok, Spotify, WhatsApp, YouTube, etc. List contains source code, tutorials, demo links, tech stack, and GitHub stars count. Great for learning purpose! https://github.com/GorvGoyl/Clone-Wars

دردشة سريعة عن الـ Monolithic Architecture 💯 . . لما بنسمع كلمة Monolithic Architecture ممكن ييجي في دماغنا إنها حاجة قديمة خلاص ومبقتش تستخدم. بس الحقيقة إن الشكل ده من الـ architecture لسه موجود في مشاريع كتير، وساعات كمان بيكون هو الحل الأمثل في بدايات أي مشروع. ——— 🔗 LinkedIn: https://www.linkedin.com/posts/mentoor-io_softwaredevelopment-softwareengineering-softwaredeveloper-activity-7376275845306343426-xLsS 🔗 Facebook: https://www.facebook.com/share/p/17K79YsdgW

🎯 فاهم يعني إيه Observer Pattern؟ . . "إزاي أخلي الأجزاء المختلفة في النظام (system) تتواصل مع بعض وتعرف إن فيه تغيير حصل… من غير ما أربط كل حاجة ببعضها وأخلي الكود معقد ومليان dependencies؟" الموضوع يبان بسيط في الأول، بس أول ما تدخل في مشروع كبير، تلاقي الدنيا بقت spaghetti code… كل function مربوطة بالتانية، وأي تعديل صغير ممكن يبوظلك أجزاء تانية في الـ app. في هندسة البرمجيات، فيه بعض الحلول والطرق متفق عليها بتخلّي السيستم modular، سهل الصيانة، وسهل التوسع. الحلول دي بنسميها Design Patterns. واحد من أهم وأشهر الـ patterns اللي بيتكرر وجوده في مجالات مختلفة هو: Observer Pattern الـ pattern ده فكرته عامة جدًا، وممكن تلاقيه مستخدم في الـ events أو real-time updates أو distributed systems، أو حتى في أي application محتاج يتعامل مع تغييرات في state ويشاركها مع أجزاء تانية... ——— 🟢 الفكرة ببساطة: الـ Observer Pattern بيشتغل كده: - عندك Subject: ده الـ object اللي بيمتلك الـ state. - عندك Observers: مجموعة objects عايزين يتبلغوا بأي تغيير في الـ state. أول ما الـ Subject يتغير، يبعت notification لكل Observers، وكل واحد فيهم يعمل update لنفسه بطريقته. المهم إن الـ Subject مش محتاج يعرف التفاصيل عن كل Observer… مجرد يقول "أنا اتغيرت" وخلاص. ——— 🟢 مثال من أرض الواقع: تخيل إنك عامل subscribe لقناة على YouTube: - القناة = Subject - المشتركين = Observers أول ما القناة تنزل فيديو جديد، يوتيوب بيبعت Notification للكل. القناة مش بتسأل "فلان عايز notification إزاي"… هي بس بتبعت والكل يتصرف. ——— 🟢 ليه الـ Observer Pattern مهم؟ 1- بيقلل الـ tight coupling: الـ Subject مش بيعرف التفاصيل عن Observers. 2- بيكون فيه flexibility: تقدر تضيف أو تشيل Observers بسهولة. 3- بيسهل maintenance: أي تعديل بيبقى localized، مش هيبوظ باقي الـ code. ——— في React: لما الـ state تتغير، الـ component تعمل re-render… ده نفس فكرة الـ Observer. في Angular (RxJS): الـ Observables streams هي abstraction قوية لفكرة الـ Observer. في JavaScript Events: كل ما تعمل element.addEventListener، أنت فعليًا بتسجل Observer. ——— وفقكم الله لكل خير 🌿

دردشة سريعة عن الـ Vector Database 💡 . . لو ركزت شوية في معظم التطبيقات الذكية اللي موجودة في الوقت الحالي – من Google Search لحد ChatGPT و Netflix – هتلاقي إن فيه حاجة مشتركة بينهم: القدرة إنهم "يفهموا" اللي أنت بتدور عليه مش بس يطابقوا الكلمات. الموضوع ده عمره ما كان هيبقى سهل بالـ Databases التقليدية اللي تعودنا عليها زي SQL أو NoSQL. وعلشان كده ظهر نوع جديد من قواعد البيانات اسمه: Vector Database. الـ Vector Database اتعملت مخصوص عشان تحل مشكلة البحث بالـ "معنى" مش بالـ "كلمة"، ودي النقلة اللي خلت أي نظام ذكي يقدر يتعامل مع الـ Data بطريقة شبه تفكيرنا كبشر. ——— 📌 يعني إيه Vector Database؟ الـ AI Models (زي NLP أو Computer Vision) لما تيجي تمثل أي معلومة – سواء نص، صورة، أو صوت – مش بتخزنها بشكلها الخام. هي بتحولها لحاجة اسمها Embedding Vector. الـ Vector ببساطة عبارة عن Array أرقام (زي [0.23, -0.44, 0.91, …]) والأرقام دي بتعبر عن المعنى. مثال: - كلمة "cat" و "dog" هتلاقي الـ Vectors بتوعهم قريبين جدًا في الـ Space. - لكن كلمة "car" هتكون بعيدة عنهم. بالتالي البحث هنا بيبقى مش بالكلمة نفسها، بالـ Similarity في المعنى. ——— ⚡️ إيه المشكلة مع الـ Databases العادية؟ - الـ MySQL أو MongoDB مصممين للـ Keyword Search. يعني تدور على كلمة "cat" يجيبلك Data فيها الكلمة دي بالحرف. - لكن لو عايز تبحث عن حاجة شبه "cat" بالمعنى (زي "kitten" أو "cute animal")… هنا الـ Databases التقليدية مش هتساعدك. ——— 💡 إيه وظيفة الـ Vector Database؟ 1- تخزن الـ Vectors بشكل efficient. 2- تتيحلك تعمل Similarity Search أو Nearest Neighbor Search بسرعة كبيرة جدًا. 3- تخليك تقدر تسأل بالـ natural language وتاخد نتيجة دقيقة بالمعنى. ——— 🛠 أمثلة عملية: - الـ Recommendation Systems: زي Netflix أو Spotify لما يقترحوا حاجة شبه اللي بتحبها. - الـ Semantic Search: تدور في Documents أو Emails عن "meeting" فيجيبلك حاجات ليها علاقة حتى لو الكلمة مش مكتوبة بالحرف. - الـ Chatbots: زي ChatGPT لما يرد عليك من Knowledge Base باستخدام أقرب إجابة بالمعنى مش بالكلمة. ——— 📂 أمثلة على Vector Databases: - Pinecone - Weaviate - Milvus - Qdrant كمان فيه Extensions للـ Databases التقليدية زي PostgreSQL (pgvector). ——— الـ Vector Database مش بديل للـ SQL أو NoSQL، لكنها إضافة قوية جدًا للأنظمة اللي بتعتمد على الذكاء الاصطناعي. هي السبب إن أي تطبيق ذكي النهارده يقدر يتعامل مع الـ Data بالمعنى مش بالكلمة. ——— وفقكم الله لكل خير 🌿

كيف تكون مهندس علوم بيانات - عمرو صالح | Data Engineer in 2025 https://youtu.be/UmAakop7Be8

Laravel launches Laravel Learn with two free mini-courses 🌟

Kickstart your journey with two mini video courses: - Getting Started with Laravel - PHP Fundamentals https://laravel.com/learn

Why React Query?

Still juggling useEffect and loading spinners? 🤔

Let me show you how React Query makes data fetching, caching, and syncing ridiculously easy. Smarter state. Fewer bugs. Cleaner code.

React 19: Smooth Transitions 🚀

React 19 makes your UI buttery smooth! Using startTransition, you can handle complex animations and interactions without blocking the main thread.

JavaScript Array Methods ✅

React Portals Made Simple 💯

Tired of z-index headaches when building modals in React?

React Portals let you render modals into separate roots, solving stacking context problems once and for all.

أهم بدائل الـ 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: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟ ——— وفقكم الله لكل خير 🌿

بلاش تستخدم git pull ⚠️ . . بفضل الله تم نشر مقال جديد على مدونة Level Up Coding على منصة Medium ✅ شرح مبسط وواضح للفرق بين: - git pull - git pull --rebase . . Git Pull vs. Git Pull — Rebase: A Complete Guide for Developers 💯 ——— المقال كامل هنا 👇 https://medium.com/gitconnected/git-pull-vs-git-pull-rebase-a-complete-guide-for-developers-e209ce0df18c ——— وفقكم الله لكل خير 🌿

CI/CD Simplified Visual Guide 💡

Whether you're a developer, a DevOps specialist, a tester, or involved in any modern IT role, CI/CD pipelines have become an integral part of the software development process.

كورس React.js ممتاز 💯 . . React Full Course - Beginner to Pro (React 19, 2025) 1. React Basics, JSX 2. Components, Props, Start the Chatbot Project 3. State, Event Handlers, Chatbot Project Features 4. CSS with React, Hooks, Finish Chatbot Project 5. Proper React Setup with Vite 6. React Router, Git, Start the E-commerce Project 7. React with Backend, Data Fetching, Load E-commerce Project Data 8. Data Mutation, Update E-commerce Project Data 9. Automated Tests in React with Vitest 10. Deploy React to the Internet, Intro to AWS 11. React 19 Updates 12. TypeScript with React 13. AI with React . . https://youtu.be/TtPXvEcE11E

اسألني عن أي شيء من خلال حسابي في قبيلة 👇🏻 https://qabilah.com/profile/alisamir/professional-profile?target=ask-me-anything

Design Patterns Cheat Sheet 💯

The cheat sheet briefly explains each pattern and how to use it.

DevOps Full Course | Build and Deploy a Scalable Production Ready API

Learn DevOps fast in this crash course covering Git & GitHub, CI/CD pipelines, Docker, Kubernetes, IaC, and API deployment. Everything you need to automate dev and deployment. ——— https://youtu.be/H5FAxTBuNM8

مفهوم الـ Middleware في Next.js 💡 . . أكيد قابلت سيناريو إنك محتاج تتحكم في الـ requests اللي داخلة لموقعك أو تعمل checks معينة قبل ما الـ user يشوف الـ page. مثلًا: - محتاج تمنع user مش عامل login إنه يدخل صفحة معينة. - أو تعمل redirect لو user مش عنده صلاحيات. - أو حتى تضيف headers أو تعمل logging لكل request. الحتة دي في أي app بتبقى critical جدًا، لأنك ساعات محتاج layer كده في النص بين request الـ user والـ response اللي راجع. وهنا ييجي دور الـ Middleware... ——— 🔥 يعني إيه Middleware؟ الـ Middleware ببساطة عبارة عن function بتتنفذ قبل ما الـ request يوصل للـ route. يعني هو واقف كـ حارس البوابة: أي request لازم يعدي منه الأول، وساعتها أنت تقدر: - تغير في الـ request أو الـ response. - تعمل redirect أو rewrite. - تمنع requests معينة. - أو حتى تضيف logic زي الـ authentication, logging, A/B testing, rate limiting… إلخ. ——— 📌 إزاي الـ Middleware بيشتغل في Next.js؟ في Next.js 13 (والـ App Router)، لو عايز تعمل Middleware بتضيف ملف باسم: middleware.ts or middleware.js في الـ root بتاع الـ project. الـ function الأساسية بتكون كده:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  // Example: check if user is authenticated
  const token = req.cookies.get('token')
  
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*'],
}

✅ اللي بيحصل هنا: - أي request داخل على /dashboard/* لازم يعدي من الـ middleware. - لو مفيش token: يتعمل redirect على /login. - لو فيه token: يكمل عادي. ——— ⚡️ أهم مميزات الـ Middleware في Next.js: 1- الـ Edge Runtime: بيتنفذ على الـ Edge (Cloudflare Workers/Akamai… إلخ) يعني ultra fast ومش محتاج server تقيل. 2- الـ Lightweight: مش معمول إنه يشيل logic تقيل جدًا، هو بس layer سريعة للـ requests. 3- الـ Selective Matching: تقدر تحدد routes معينة بس اللي تعدي من الـ middleware عن طريق الـ matcher. 4- عنده Use Cases متنوعة: - Authentication & Authorization. - Redirects & Rewrites. - A/B Testing - Bot Protection. - Internationalization ——— خلي بالك إن الـ Middleware مش مكان تحط فيه كل الـ business logic بتاعك، هو معمول للحاجات اللي محتاجة تتنفذ بسرعة وقبل ما الـ request يروح للـ route. يعني authentication, headers, redirects… حاجات كده. لكن الـ heavy logic مكانها مش هنا. ——— وفقكم الله لكل خير 🌿