🔅 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

🌐 يعني إيه 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

لو بتشتغل فرونت إند أو مهتم تبني سيستم كبير ومحترم، فالمقال ده هيفيدك جدًا. 🚀
.
.
جمعتلك فيه أهم المفاهيم والممارسات الحديثة في تصميم معماريات الفرونت إند، زي الفرق بين 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

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

مفهوم الـ 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.

———

وفقكم الله لكل خير 🌿

مفهوم الـ 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 ولا لا؟

الاتنين مكملين بعض، بس مش نفس الحاجة.

———

وفقكم الله لكل خير 🌿