🔅 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.

———

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