DevGuide

الفرق بين Hashing و Encoding و Encryption 🔐 . . لو بتشتغل في الباك إند، أو بتتعامل مع APIs، أو حتى بتشتغل على تطبيق بسيط فيه عملية تسجيل دخول… أكيد قابلت مصطلحات زي Hashing و Encoding و Encryption. وممكن تفتكر إنهم شبه بعض، أو إن أي واحد فيهم "بيأمن البيانات وخلاص". لكن الحقيقة إن كل واحد له هدف مختلف تمامًا، ولو استخدمت حاجة غلط ممكن تفتح ثغرات أمنية وأنت مش واخد بالك. تعال ندردش شوية عن الفرق بينهم... ———

✅ أولًا: الـ Hashing:

تخيل إنك بتعمل بصمة لأي معلومة… مش علشان ترجع لها بعدين، لكن علشان تتأكد إنها متغيرتش. الـ Hashing بياخد قيمة (زي password مثلًا)، ويطلع منها سلسلة ثابتة الطول شكلها عشوائي – اسمها Hash – واللي بتستخدمها عشان تطابق أو تتحقق من البيانات من غير ما تحتاج تخزن الأصل. 🎯 المهم هنا: - العملية دي One Way (مفيش رجوع). - لو غيرت حرف واحد، الـ Hash كله بيتغير. - وده اللي بنستخدمه مثلًا لما نخزن الـ Passwords في قواعد البيانات. ⚠️ لو حد عرف الـ Hash، مش هيعرف يطلع منه الباسورد الأصلي (بس ممكن يعمل Brute Force ويحاول يخمنه). ———

✅ ثانيًا: الـ Encoding:

ده ملوش أي علاقة بالسرية... الـ Encoding هو طريقة بنحول بها البيانات لشكل تاني علشان يسهل تخزينها أو نقلها. زي Base64، اللي بتحول مثلًا صورة أو نص يحتوي رموز غريبة لشكل مفهوم لأي نظام. 🎯 المهم هنا: - العملية دي Two Way (تقدر ترجّع البيانات الأصلية). - مفيش أي حماية أو تشفير، أي حد يعرف نوع الـ encoding يقدر يفكه بسهولة. - الهدف منه بس إنك تنقل الداتا بدون ما تضيع أو تبوظ. مثال بسيط: لو عندك some text ممكن يتحول بـ Base64 إلى: c29tZSB0ZXh0 ———

✅ ثالثًا: الـ Encryption:

أنت عايز تبعت داتا سرية لحد، ومش عايز أي حد في النص يفهمها. فبتعمل لها تشفير باستخدام مفتاح (Key)، والمستلم اللي معاه المفتاح يقدر يفكها. 🎯 المهم هنا: - العملية دي Two Way، بس لازم المفتاح. - لو المفتاح اتسرّب أو ضاع، أي حد يقدر يفك البيانات. - بتستخدمها في إرسال معلومات حساسة زي بطاقات الدفع أو بيانات المستخدمين. فيه نوعين من الـ Encryption: - الـ Symmetric: نفس المفتاح بيشفّر ويفك (زي AES). - الـ Asymmetric: مفتاحين، واحد بيشفّر (public) والتاني بيفك (private) – زي اللي بيستخدم في HTTPS. ——— 💡 إمتى تستخدم مين؟ - بتخزن passwords؟ يبقى Hashing - بتبعت صورة أو داتا عبر API؟ يبقى Encoding - بتبعت معلومات حساسة زي tokens أو بيانات مستخدم؟ يبقى Encryption ——— وفقكم الله لكل خير 🌿

How to Learn Databases? 🤔 1- Database Fundamentals 2- Data Models and Types 3- Querying and Language 4- Indexing and Optimization 5- Security, Backups, and Scaling 6- Tools and Ecosystem

16 Coding Patterns That Make Interviews Easy 💯 1- Two-Pointer Technique 2- HashMaps 3- Linked Lists 4- Fast and Slow Pointers 5- Sliding Window Technique 6- Binary Search 7- Stacks 8- Heaps 9- Prefix Sum 10- Trees 11- Tries 12- Graphs 13- Backtracking 14- Dynamic Programming 15- Greedy Algorithms 16- Intervals

The Most Confused Concepts in Engineering https://youtu.be/z5lpHsl8qQ4 ——— 💡 إن شاء الله قريب نشرح الفرق بينهم بالعربي

مفهوم الـ Atomicity 💯 . . تخيل إنك شغال على سيستم تحويل فلوس. العميل حول 1000 جنيه من حسابه، السيستم خصم الفلوس… وقبل ما يحطهم في حساب الشخص التاني، الكهرباء قطعت. كده الفلوس طارت؟ ولا هترجع؟ ولا هتتحول؟ السؤال ده بيجاوب عليه مفهوم مهم جدًا في البرمجة والـ Databasese وهو الـ Atomicity يا إما كل الخطوات تتم بالكامل...يا مفيش ولا خطوة تتم. ——— 🤔 يعني إيه Atomicity؟ تخيل إنك بتسحب فلوس من الـ ATM. العملية دي فيها خطوتين: 1- البنك يخصم المبلغ من حسابك. 2- الماكينة تطلع لك الفلوس. لو حصل إن السيستم عمل الخطوة الأولى بس، ووقف فجأة قبل ما يوصلك الفلوس… أنت كده خسرت فلوسك؟ هنا بقى ييجي دور الـ Atomicity. الـ Atomicity معناها إن العملية كلها تتنفذ بالكامل من أولها لآخرها، أو ما تتنفذ خالص. يعني All or Nothing. في مثال الـ ATM: يا البنك يخصم وتاخد الفلوس، يا ميحصلش أي حاجة أصلًا. مفيش نص عملية. ——— 💡 إزاي ده بيتم؟ الـ Atomicity هي واحدة من الـ ACID Properties اللي بتضمن سلامة البيانات خصوصًا في الـ Databases. علشان تحقق الـ Atomicity، السيستم بيستخدم حاجة اسمها Transactions. كل Transaction بتتكون من مجموعة عمليات (زي insert، update، delete)، والمفروض إن كل العمليات دي يحصلها commit في نفس الوقت، أو يحصلها rollback لو حصل أي خطأ. مثال:

BEGIN TRANSACTION;

UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;

COMMIT;

لو أي واحدة من الـ 2 updates فشلت، الـ transaction كلها هتتفك، والداتا ترجع زي ما كانت كأن مفيش حاجة حصلت. ——— ⚠️ إيه اللي ممكن يبوّظ الـ Atomicity؟ - قطع الكهرباء أو أي Crash في النص. - الـ Exceptions أو الـ Errors في جزء من الـ transaction. - إنك تنفذ queries من غير transaction أصلًا ولو السيستم مش بيطبق الـ Atomicity صح، الداتا ممكن تبقى corrupted، وساعتها ربنا يستر. ——— 📌 إيه الفرق بين الـ Atomicity وبين الـ Consistency؟ الـ Atomicity بتتكلم عن هل العملية كلها تمت أو لا؟ الـ Consistency بتسأل هل الداتا بعد العملية في حالة صحيحة؟ يعني: - الـ Atomicity = حصل commit كامل ولا لا؟ - الـ Consistency = لو حصل، الداتا بقت consistent ولا لا؟ الاتنين مكملين بعض، بس مش نفس الحاجة. ——— وفقكم الله لكل خير 🌿

مفهوم الـ Atomicity 💯 . . تخيل إنك شغال على سيستم تحويل فلوس. العميل حول 1000 جنيه من حسابه، السيستم خصم الفلوس… وقبل ما يحطهم في حساب الشخص التاني، الكهرباء قطعت. كده الفلوس طارت؟ ولا هترجع؟ ولا هتتحول؟ السؤال ده بيجاوب عليه مفهوم مهم جدًا في البرمجة والـ Databasese وهو الـ Atomicity يا إما كل الخطوات تتم بالكامل...يا مفيش ولا خطوة تتم. ——— 🤔 يعني إيه Atomicity؟ تخيل إنك بتسحب فلوس من الـ ATM. العملية دي فيها خطوتين: 1- البنك يخصم المبلغ من حسابك. 2- الماكينة تطلع لك الفلوس. لو حصل إن السيستم عمل الخطوة الأولى بس، ووقف فجأة قبل ما يوصلك الفلوس… أنت كده خسرت فلوسك؟ هنا بقى ييجي دور الـ Atomicity. الـ Atomicity معناها إن العملية كلها تتنفذ بالكامل من أولها لآخرها، أو ما تتنفذ خالص. يعني All or Nothing. في مثال الـ ATM: يا البنك يخصم وتاخد الفلوس، يا ميحصلش أي حاجة أصلًا. مفيش نص عملية. ——— 💡 إزاي ده بيتم؟ الـ Atomicity هي واحدة من الـ ACID Properties اللي بتضمن سلامة البيانات خصوصًا في الـ Databases. علشان تحقق الـ Atomicity، السيستم بيستخدم حاجة اسمها Transactions. كل Transaction بتتكون من مجموعة عمليات (زي insert، update، delete)، والمفروض إن كل العمليات دي يحصلها commit في نفس الوقت، أو يحصلها rollback لو حصل أي خطأ. مثال: BEGIN TRANSACTION; UPDATE accounts SET balance = balance - 100 WHERE id = 1; UPDATE accounts SET balance = balance + 100 WHERE id = 2; COMMIT; لو أي واحدة من الـ 2 updates فشلت، الـ transaction كلها هتتفك، والداتا ترجع زي ما كانت كأن مفيش حاجة حصلت. ——— ⚠️ إيه اللي ممكن يبوّظ الـ Atomicity؟ - قطع الكهرباء أو أي Crash في النص. - الـ Exceptions أو الـ Errors في جزء من الـ transaction. - إنك تنفذ queries من غير transaction أصلًا ولو السيستم مش بيطبق الـ Atomicity صح، الداتا ممكن تبقى corrupted، وساعتها ربنا يستر. ——— 📌 إيه الفرق بين الـ Atomicity وبين الـ Consistency؟ الـ Atomicity بتتكلم عن هل العملية كلها تمت أو لا؟ الـ Consistency بتسأل هل الداتا بعد العملية في حالة صحيحة؟ يعني: - الـ Atomicity = حصل commit كامل ولا لا؟ - الـ Consistency = لو حصل، الداتا بقت consistent ولا لا؟ الاتنين مكملين بعض، بس مش نفس الحاجة. ——— وفقكم الله لكل خير 🌿

مفهوم الـ Dependency Inversion Principle 💡 . . فيه مبدأ من مبادئ SOLID بيغيّر طريقة تفكيرك في تصميم الكود بشكل كبير جدًا... مبدأ أول ما تفهمه كويس وتطبّقه صح، هتحس إن المشروع بقى modular أكتر، والـ testing بقى أسهل، والـ bugs بقت قليلة إلى حد ما... تعال ندردش شوية عن مبدأ الـ Dependency Inversion... ——— 📌 يعني إيه Dependency Inversion Principle؟ المبدأ ده بيقول: "High-level modules should not depend on low-level modules. Both should depend on abstractions." و "Abstractions should not depend on details. Details should depend on abstractions." يعني لما تيجي تبني جزء كبير من السيستم (زي مثلاً order service في تطبيق تجارة إلكترونية)، المفروض ميكنش الـ high-level logic (زي إزاي الـ order بيتم) بيعتمد مباشرة على الـ details زي مثلا API معين أو database معينة أو class بتبعت إيميلات. بدل كده، المفروض يكون بيعتمد على abstraction (interface أو contract)، بحيث التفاصيل دي تقدر تتغير بسهولة بعد كده من غير ما تغيّر في الـ business logic نفسه. ———

📦 مثال بسيط:

[ كل الأكواد في التعليقات 👇 ]

class EmailService {
  sendEmail(to: string, body: string) {
    // logic to send email
  }
}

class OrderService {
  private emailService = new EmailService();

  placeOrder(orderData: any) {
    // logic to place order
    this.emailService.sendEmail(orderData.customerEmail, "Order placed!");
  }
}

كده الـ OrderService معتمد بشكل مباشر على الـ EmailService. لو حبيت تغير وسيلة إرسال الإيميل أو تبعتها عبر SMS أو push notification، هتضطر تغيّر في الكود بتاع OrderService نفسه… وده ضد مبدأ open/closed principle كمان. ———

✅ الحل؟

interface Notifier {
  notify(to: string, message: string): void;
}

class EmailService implements Notifier {
  notify(to: string, message: string) {
    // send email
  }
}

class SMSService implements Notifier {
  notify(to: string, message: string) {
    // send sms
  }
}

class OrderService {
  constructor(private notifier: Notifier) {}

  placeOrder(orderData: any) {
    // logic to place order
    this.notifier.notify(orderData.customerContact, "Order placed!");
  }
}

كده الـ OrderService ميعرفش أي حاجة عن الـ implementation بتاع الـ notifier، سواء كان email أو sms. هو بس بيتعامل مع abstraction (interface اسمها Notifier). وبالتالي تقدر تغير الـ implementation في أي وقت من غير ما تلمس الـ OrderService. ———

💡 إزاي ده هيفرق معاك؟

- الكود بتاعك بقى loosely coupled. - بقى modular وأسهل في التعديل والصيانة. - الـ testing بقى أبسط لأنك تقدر تعمل mock لـ Notifier بسهولة. - بقيت تقدر تبدّل الـ implementation من غير ما تعمل refactor تقيل. ——— الـ Dependency Inversion بيخليك دايمًا تفكر في dependencies على إنها شيء ممكن يتغير… فبدل ما تبني عليها بشكل مباشر، استخدم abstraction تفصل به بين high-level logic و low-level details. ——— وفقكم الله لكل خير 🌿

Struggling with authentication bugs? ⚠️ Learn clean NextAuth.js patterns to secure your Next.js app like a pro!

System Design was HARD until I Learned these 30 Concepts 💯 https://medium.com/algomaster-io/system-design-was-hard-until-i-learned-these-30-concepts-78042ff99cae

لو بتشتغل فرونت إند أو مهتم تبني سيستم كبير ومحترم، فالمقال ده هيفيدك جدًا. 🚀 . . جمعتلك فيه أهم المفاهيم والممارسات الحديثة في تصميم معماريات الفرونت إند، زي الفرق بين MVC و Flux و Micro Frontends، وإمتى تستخدم كل واحد فيهم، وكمان أفضل الأدوات والتقنيات اللي ممكن تعتمد عليها في كل حالة. هتلاقي كمان قسم عن تحسين الأداء، وإزاي تختبر وتعمل Debug بشكل احترافي، وكمان مفاهيم مهمة زي الـ Edge Computing و WASM. 📘 المقال يعتبر دليل شامل لأي حد عاوز يبني تطبيق فرونت إند قوي، قابل للتوسّع وسهل الصيانة. ——— Modern Frontend Architecture: A Definitive Guide for Scalable Web Applications 🚀 ———

🔗 Medium:

https://medium.com/@dev.alisamir/modern-frontend-architecture-a-definitive-guide-for-scalable-web-applications-693e5bf2a932

🔗 DEV Community:

https://dev.to/alisamir/modern-frontend-architecture-a-definitive-guide-for-scalable-web-applications-2mj3

🌐 يعني إيه DNS؟ . . أول ما بتفتح المتصفح وتكتب مثلًا: www.google.com إيه اللي بيخلي الموقع ده يظهر لك؟ هل المتصفح بيبقى عارف هو فين؟ هل اسم الموقع ده لوحده كفاية؟ الإجابة طبعًا لا... اللي بيحصل ورا الكواليس أعقد من كده شوية… وده اللي بيدخلنا في موضوع اسمه DNS – Domain Name System، وده واحد من أهم أساسيات مجال الويب... ———

🔗 LinkedIn:

https://www.linkedin.com/posts/mentoor-io_webdevelopment-webdeveloper-mentoor-activity-7355991093995286528-VyVX

🔗 Facebook:

https://www.facebook.com/mentoor.io/posts/pfbid04kpidgbkXsH44S6A9YsAprDVdQZwvzG6ZKQqj2nzBa5STmCV8rqsZ4rtMXibWXRhl

🔗 Qabilah:

https://qabilah.com/posts/R0dGIj7iNKg

🔅 Figma Oversimplified (2025)

Learn Figma in 13 minutes by covering all the core concepts you need to get started.

⏰ Timestamps: 00:00 - Intro 01:20 - Getting started 01:58 - Interface & Tools 03:54 - Frames 04:22 - Plugins 04:41 - Layouts 07:36 - Components 08:51 - Variants & Prototypes 09:59 - Design to product 11:09 - Low-code plugins

🔰 Working with URLs in JavaScript!!

Key JavaScript URL operations to simplify building, parsing, and dynamically managing web resources efficiently.

React Native Bootcamp in 30 HOURS for FREE 💯 https://youtu.be/q3HE1dFiJBI

No more loading states all over your code!

React Suspense in React 19 makes data fetching clean, declarative, and responsive.

سنوات الخبرة 🔻 . . هو أنا عندي كام سنة خبرة في مجال البرمجة؟ سؤال بسيط.. بس أغلبنا بيحسبه غلط، وغلط بسيط زي ده ممكن يبوظ الـ CV كله، ويقلل فرصك في الشغل. زمان أول ما بدأت أتعلم برمجة، كنت فاكر إني لما أذاكر كام شهر في البرمجة هيكون عندي خبرة وهقدر أقول عندي 6 شهور خبرة مثلًا 😅 ولكن الكلام ده غير صحيح أبدًا... ——— 📌 إزاي نحسب سنوات الخبرة؟ 1- هل كل اللي تعلمته يحتسب خبرة؟ لا، الخبرة الفعلية = الوقت اللي كنت بتشتغل فيه بشكل منتظم على مشاريع حقيقية وقابلت فيها تحديات وقدرت تحلها. يعني مثلًا: - اشتغلت في شركة؟ تمام. ده خبرة. - عملت شغل فريلانسنج لمدة 6 شهور وكنت بتسلم شغل لعميل؟ ده كمان خبرة. - اشتغلت على مشروع شخصي كبير، وكنت بتحل فيه مشاكل زي اللي بتحصل في أغلب المشاريع في الشركات؟ ده ممكن يتحسب، بس بشروط. لكن: - ذاكرت كورسات بس؟ - شوفت فيديوهات يوتيوب وطبقت معاها شوية أكواد؟ - عملت مشاريع بسيطة ملهاش علاقة بأرض الواقع؟ ده يُعتبر "تعلم"، مش خبرة حقيقية. ——— 💡 إيه شروط إن المشروع الشخصي يتحسب كخبرة؟ مش أي side project تحطه كـ proof إن عندك 3 سنين خبرة في React. فيه شوية شروط لو تحققت، تقدر تحسبه: - كان مشروع ليه هدف واضح (مش مجرد تجارب). - اشتغلت عليه لفترة طويلة وبشكل منتظم. - استخدمت فيه تقنيات بتستخدمها الشركات فعلًا (مش مجرد HTML و CSS). - قابلت فيه مشاكل performance و optimization و architecture و state management… إلخ. - المشروع deployed والناس تقدر تشوفه وتستخدمه. ——— لو كتبت في CV إن عندك 5 سنين خبرة، بس لما تيجي وقت الـ interview أو وقت الشغل ويتضح إن مستواك junior، ده بيضرك أنت قبل ما يضر الشركة ومش بعيد جدًا تبقى blocked بالنسبة للشركة دي ومتعرفش تشتغل فيها تاني حتى لو عندك 10 سنوات خبرة. لو حصل فجوة في شغلك لأي سبب حاول تذكرها في الـ CV بطريقة كويسة وخليك صريح...واشرح إزاي الفترة دي ساعدتك تتعلم بعض المهارات وتحسن من نفسك وهكذا... ——— وفقكم الله لكل خير 🌿

كل ما تحتاج معرفته عن الـ SSL || تأمين المواقع على الإنترنت https://youtu.be/9EOdDUmAErQ