DevGuide

إيه اللي بيخلي بعض تطبيقات React أسرع من غيرها؟ 🤔 . . في الغالب جزء كبير من مشاكل تطبيقات React بتكون بسبب الأداء، خصوصًا مع المشاريع اللي بتكبر تدريجيًا. المقال ده يعتبر دليل عملي بيشرح أهم طرق Profiling وOptimization في React، باستخدام React Profiler و Chrome DevTools خطوة بخطوة، عشان تكتشف نقاط الخلل وتحسن الأداء بسهولة. ———

A Practical Guide to Profiling & Optimizing React Applications for Peak Performance 🚀

——— Read Full Article 👇🏻 📌 Medium: https://medium.com/gitconnected/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-20f05f2ccd58 📌 DEV Community: https://dev.to/alisamir/a-practical-guide-to-profiling-optimizing-react-applications-for-peak-performance-273i ——— لو حابب تتعمق في الموضوع، أرشحلك كتاب Web Performance Fundamentals، الكتاب ممتاز جدًا عن تجربة... https://www.getwebperf.com ——— وفقكم الله لكل خير 🌿

يعني إيه Micro Frontends؟ . . تعال ندردش شوية عن Micro Frontends ونعرف قصته وإزاي بيشتغل بشكل مبسط... ——— ممكن تكون سمعت عن مصطلح الـ Microservices اللي موجود في الباك إند... الفكرة هي نفسها بس للفرونت إند. يعني بدل ما تبني تطبيق كبير كتلة واحدة (Monolithic)، بتقسم التطبيق لقطع أصغر، كل قطعة منهم بتتعامل كأنها تطبيق مستقل بذاته بس في نفس الوقت بيتكاملوا مع بعض عشان يشتغلوا كجزء واحد. لو شغال في مشروع ضخم، أكيد هتلاقي نفسك بتواجه مشاكل في التنظيم، وصعوبة في التوسع، وتداخل بين الفرق  (Teams) اللي بتشتغل على التطبيق. هنا بقى بييجي دور الـ Micro Frontends. ——— 📍 إزاي الـ Micro Frontends بتشتغل؟ الفكرة إنك بتقسم واجهة التطبيق لقطع مستقلة أو وحدات، وكل وحدة منهم ممكن تبقى شغالة بالتقنية الخاصة بها. مثلًا: - الفريق الأول شغال على جزء التسجيل والدخول باستخدام React. - الفريق التاني شغال على جزء الداشبورد بتقنية Angular. - الفريق التالت شغال على قسم المنتجات بـ Vue.js. كل جزء بيتم تطويره وصيانته بمعزل عن الأجزاء التانية، وكل فريق عنده حرية اختيار التقنيات والأدوات اللي تناسبه، وده بيخلي عملية التطوير أسرع وأسهل. ——— 📍 إيه فائدة الـ Micro Frontends؟ ✅ لما التطبيق يكون مقسم لوحدات صغيرة، بيبقى أسهل توسع في كل وحدة بدون ما تأثر على بقية التطبيق. ✅ كل فريق ممكن يشتغل بمفرده، يختار التقنية المناسبة له، ويحسن الجزء بتاعه بدون ما ينتظر الفرق التانية. ✅ لو فيه مشكلة في جزء معين من التطبيق، تقدر تصلحها بسرعة من غير ما تتعب في البحث في الكود الكبير كله. ✅ تحسين تجربة المستخدم وده لأنك ممكن تعمل تحسينات تدريجية على أجزاء معينة من التطبيق، وبالتالي المستخدم مش هيحس بأي مشاكل. ——— ⚠ لكن خد بالك… رغم كل المزايا دي، لكن فيه تحديات في تطبيق Micro Frontends: ⚡️ لازم يكون فيه تواصل وتنظيم كويس بين الفرق اللي شغاله على المشروع عشان مفيش جزء يتضارب مع جزء تاني. ⚡️ الفكرة لو مش محسوبة صح، ممكن تلاقي نفسك بتواجه مشاكل في سرعة تحميل التطبيق، خصوصًا لو كل وحدة محتاجة تحميل المكتبات بتاعتها. ⚡️ لازم تضمن إن واجهة المستخدم تكون متناسقة، حتى لو الوحدات مبنية بتقنيات مختلفة. ——— 📍 إمتى تستخدم الـ Micro Frontends؟ - لما يكون عندك تطبيق ضخم وعايز توسع فيه بسرعة. - لو فرق التطوير بتاعتك كبيرة وبتشتغل على مشاريع متفرقة. - لو بتحتاج تدعم تقنيات متعددة في نفس المشروع. ——— الـ Micro Frontends حل عبقري عشان تتجنب مشاكل التطبيقات الكبيرة، بس محتاج تكون جاهز بتخطيط كويس وتتأكد إنك بتطبقها صح. ——— وفقكم الله لكل خير 🌿

Popular Backend Tech Stack. 💯

دردشة سريعة عن الـ End-to-End Encryption ——— 1️⃣ البداية لما تبعت رسالة لأي حد، سواء نص أو صورة أو فيديو، الرسالة دي مش بتروح للطرف التاني على طول. بالعكس، الأول بتسافر في رحلة طويلة عبر شبكة الإنترنت، وتمر على سيرفرات كتير قبل ما توصل. هنا يبدأ دور التشفير. التشفير بيعمل شفرة سرية للرسالة، بحيث لو أي حد حاول يتجسس أو يشوف الرسالة (زي الهاكرز، أو حتى الشركة نفسها)، ميعرفش يفهمها. ——— 2️⃣ إيه اللي بيميز الـ End-to-End Encryption؟ في أنظمة التشفير العادية، السيرفرات اللي بتعدي عليها الرسالة ممكن تفك الشفرة وتعرف المحتوى. 🛑 لكن في End-to-End Encryption الموضوع بيكون مختلف تمامًا: - الرسالة بتتشفّر على جهازك باستخدام مفتاح تشفير. - المفتاح ده موجود بس عندك أنت وعند الشخص اللي بتكلمه. - حتى الشركة اللي بتقدّم الخدمة (زي واتساب) ما عندها المفتاح ده، وده معناه إنهم ما يعرفوا يفكّوا الشفرة. يعني الرسالة بتفضل مشفرة طول رحلتها من جهازك لحد ما توصل للطرف التاني. ——— 3️⃣ ليه الـ End-to-End Encryption مهم؟ الخصوصية حق مش رفاهية، والـ End-to-End Encryption بيوفرلك ده: 🕵️‍♂️ محدش هيعرف يقرأ رسالتك غيرك أنت والطرف التاني. 🔒 بيحميك من التتبع والتجسس. لو حد حاول يعترض الرسالة وهي ماشية، هيلاقيها مشفرة تمامًا. ✅ ثقة أكبر في التطبيقات. لما تطبيق يوفّر النوع ده من التشفير، ده معناه إنه بيحترم خصوصيتك فعلًا. ——— 4️⃣ أمثلة على التطبيقات اللي بتستخدم الـ End-to-End Encryption: 📍 واتساب: كل الرسائل والمكالمات مشفرة. 📍 سيجنال: بيعتبر من أكتر التطبيقات أمانًا لأنه مبني بالكامل حول الـ End-to-End Encryption. 📍 تليجرام: بس لازم تفعّل الـ Secret Chats، لأنها مش شغالة تلقائيًا في الشات العادي. ——— 5️⃣ هل ده معناه إن كل حاجة آمنة 100%؟ للأسف، لا... الـ End-to-End Encryption بيحمي الرسائل أثناء نقلها، بس لو جهازك نفسه أو جهاز الطرف التاني فيه برامج تجسس أو فيه حد حصل على الرسائل بعد فك التشفير (زي لما تبعت لقطة شاشة)، يبقى كده مفيش فايدة. ——— 💯 خلاصة القول: الـ End-to-End Encryption زي خزنة سرية للرسائل بتاعتك، محدش يقدر يفتحها غيرك أنت والطرف التاني. خلي بالك إن الأمان مش بس في التشفير، حافظ على جهازك وكلمات السر بتاعتك لأنها ثغرات محترمة ممكن أي حد يستغلها ضدك. ——— وفقكم الله لكل خير 🌿

Microservices Best Practices 💯

JavaScript Shorthands 💯

إصدار PHP 8.5 هينزل يوم 20 نوفمبر 2025 وجايب معاه شوية تحديثات رايقة 💯 ——— 📌 LinkedIn: https://www.linkedin.com/posts/mentoor-io_php-backend-backenddevelopment-activity-7396215941098962944-xUd8 📌 Facebook: https://www.facebook.com/share/p/1AsjVju9F1

Custom Scrollbar in CSS 💫

Learn Functional Programming With JavaScript | FREE COURSE 💯 https://youtu.be/XvLMO2wE3OQ

مفهوم الـ 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). ——— وفقكم الله لكل خير 🌿

n8n Course for Beginners – Build Complex Workflows & Master AI Integration 💯 https://youtu.be/GIZzRGYpCbM

مفهوم الـ JSON Web Tokens (JWT) 💡 . . يعني إيه JWT؟ وليه هو مهم في عالم السوفتوير؟ لو اشتغلت قبل كده على أي تطبيق ويب أو موبايل بيتطلب منك تسجيل دخول (login)، غالبًا سمعت عن حاجة اسمها JWT أو JSON Web Tokens. ببساطة، الـ JWT دي زي تذكرة أمان بيديهالك السيرفر لما بتعمل تسجيل دخول. كل ما تيجي تدخل التطبيق بعد كده، بتروح تقول للسيرفر "أنا معايا التذكرة بتاعتي!" والسيرفر يسيبك تعدي من غير ما تعيد تسجيل الدخول تاني. ——— التذكرة دي (أو الـ JWT) مش مجرد كود عشوائي كده، لكنه عبارة عن 3 أجزاء: 📍 الـ Header: وده بيكون فيه معلومات بسيطة زي نوع الـ Token وطريقة التشفير المستخدمة. 📍 الـ Payload: وده الجزء اللي فيه المعلومات المهمة زي الـ user ID بتاعك أو الأذونات اللي معاك في التطبيق. 📍 الـ Signature: وده الجزء اللي بيتعمله توقيع عشان نتأكد إن الـ Token ده مش معمول فيه أي لعب أو تعديل من طرفك أو طرف أي حد تاني. ——— 📌 إزاي الـ JWT بيشتغل؟ ⚡️ لما بتسجل دخول، السيرفر بيديك Token مشفر، بيكون فيه الـ user ID بتاعك أو أي معلومات تانية بتحدد هويتك. ⚡️ أنت بقى كل مرة تفتح التطبيق، الـ JWT ده بيروح مع كل طلب بتعمله للسيرفر (زي لما تفتح بروفايلك أو تغير إعدادات حسابك). ⚡️ السيرفر بياخد الـ JWT ويتأكد إنه سليم ومفيش حد لعب فيه، ولو كل حاجة تمام، بيسمحلك تكمل طلبك. ——— 🔐 ليه التشفير في الـ JWT مهم؟ التشفير ده اللي بيمنع أي حد من إنه يعدل في البيانات الموجودة في الـ Token. يعني مثلًا لو حد حاول يغير الـ user ID عشان يتظاهر إنه مستخدم تاني، التوقيع الرقمي اللي في الـ JWT هيبقى مش مظبوط، والسيرفر هيعرف إن فيه حاجة غلط وهيمنع الطلب ده. ——— 💯 إمتى تستخدم الـ JWT؟ الـ JWT مفيد لما يكون عندك تطبيق بيعتمد على API وبتحتاج تدي صلاحيات للمستخدمين بدون ما تخليهم يسجلوا الدخول كل شوية. وكمان حلو في التطبيقات اللي بتشتغل على أكتر من منصة، زي إنك تعمل تسجيل دخول من الموبايل أو الكمبيوتر بنفس الطريقة. ——— 💡 مزايا وعيوب الـ JWT - المزايا: سهل الاستخدام، سريع، مش محتاج تخزين معلومات الجلسات على السيرفر (Stateless). - العيوب: لو الـ Token باظ أو اتسرق، المستخدم ممكن يكون معرض لخطر، ومدة صلاحية الـ Token لازم تكون مظبوطة عشان تقلل من المشاكل دي. ——— وفقكم الله لكل خير 🌿

Top 20 System Design Concepts You Should Know 💯

الـ DNS Prefetching 🔻 . . الموضوع ده مهم جدًا لأنه بيحسن سرعة تحميل الصفحات في المواقع وبيخلّي تجربة المستخدم أحسن بكتير... ——— 📍 يعني إيه DNS Prefetching؟ ببساطة، الـ DNS Prefetching هو أسلوب بيخلي المتصفح يعمل استباق لتحويل الدومينات اللي محتمل تزورها قريب، قبل ما المستخدم يضغط على اللينك أو قبل ما اللينك يشتغل. يعني إيه الكلام ده؟ يعني المتصفح بيحاول يعرف عنوان الـ IP الخاص بالدومين أو الموقع اللي اللينك بتاعه موجود في الصفحة عشان يكون جاهز بسرعة لو المستخدم ضغط عليه. ——— 📍 ليه بنحتاج الـ DNS Prefetching؟ خليني أقولك إن كل ما يكون فيه روابط كتير في الصفحة، والمتصفح يحتاج يعرف العناوين الخاصة بها قبل ما يقدر يجيب البيانات، الموضوع بياخد وقت. كل رابط محتاج تحويل أو DNS Lookup عشان يوصل للمكان اللي بيخزن عليه المحتوى. التحويل ده ممكن ياخد وقت خاصة لو كان فيه أكتر من دومين مختلف. الـ DNS Prefetching بيخلي المتصفح يخلص الحكاية دي بسرعة من غير ما يستنى المستخدم، وبكده بيكون جاهز لما ييجي دور الرابط. ——— 📍 إزاي الـ DNS Prefetching بيشتغل؟ ⚙️ المتصفح بيعمل استباق للدومين: يعني المتصفح بيقول لنفسه "اللينك ده هيستخدم دومين مختلف؟ طيب خليني أجيب عنوان IP بتاعه من دلوقتي". ⚙️ التقليل من وقت الـ DNS Lookup: لما المستخدم يضغط على الرابط، المتصفح بالفعل عنده عنوان الـ IP الخاص بالموقع الجاي، وبالتالي مفيش وقت هيضيع في محاولة الوصول للمكان. ——— 📍 إمتى نستخدم الـ DNS Prefetching؟ الـ DNS Prefetching يعتبر فكرة كويسة لو عندك موقع فيه لينكات كتير لمصادر خارجية زي مكتبات الـ JavaScript، الصور، الخطوط، أو إعلانات. يعني لو الموقع بتاعك فيه مكتبات JavaScript مستوردة من دومينات خارجية، زي مكتبة الخطوط من جوجل أو أي حاجة من دومينات تانية، يبقى الـ DNS Prefetching فكرة ممتازة عشان السرعة تكون أعلى والمستخدم ما يلاحظ أي تأخير. ——— 📍 إيه فائدة الـ DNS Prefetching للمستخدم؟ أكبر فائدة للمستخدم هي تسريع تحميل الصفحة. ده بيخلي الموقع يشتغل بشكل أسرع ومريح أكتر، خاصة لو الصفحة فيها لينكات لمحتوى خارجي أو مصادر مختلفة، وبالتالي بيقلل الانتظار اللي ممكن يواجهه المستخدم لما يضغط على رابط معين. ——— 📍 إزاي نستخدمه في الكود؟ هنضيف الوسم الخاص بالـ DNS Prefetching في الـ <head> وهيكون بالشكل ده:

<link rel="dns-prefetch" href="https://example.com">

السطر ده بيخلي المتصفح يجهز عنوان الـ IP الخاص بالدومين المحدد في الوسم. ——— وفقكم الله لكل خير 🌿

مفهوم الـ Infrastructure as Code (IaC) 💯 . . تعال ندردش شوية عن مفهوم مهم جدًا في عالم الـ DevOps، وهو Infrastructure as Code (IaC)، أو بمعنى آخر "البنية التحتية كـ كود". الفكرة دي يمكن تكون غريبة شوية في البداية، لكن خليني أوضحلك إزاي الموضوع ده بيغير شكل إدارة البنية التحتية في المشاريع التقنية. ——— 📌 إيه فكرة الـ IaC؟ زمان لما كنا بنشتغل على السيرفرات أو الكلاود، كان لازم نقعد نجهز كل حاجة يدوي: نثبت أنظمة التشغيل، نظبط الإعدادات، نحدد ال permissions، وده طبعًا بياخد وقت طويل جدًا. لكن مع Infrastructure as Code الموضوع مختلف، لأننا بنكتب كل الإعدادات دي على شكل كود، زي ما بنكتب الكود بتاع التطبيق، يعني بتتحول عملية إعداد السيرفرات نفسها لكود نقدر نشغله في أي وقت ونطلع نفس النتيجة بدون تدخل يدوي. ——— 📌 أهمية الـ IaC؟ ⚡️ السرعة والدقة: بدل ما نجهز كل السيرفرات يدوي ونضيع وقت، بنكتب كود بيجهز لنا السيرفرات أو الموارد اللي عايزينها بالضبط وبالسرعة المطلوبة. وده بيخلي الشغل أسرع بكتير وبيقلل الأخطاء اللي ممكن تحصل. ⚡️ قابلية التكرار: لما نبني بيئة من الأول أو نعمل سيرفر جديد، بنقدر نستخدم نفس الكود عشان نضمن إن كله متظبط بالضبط زي السيرفرات التانية، وده مهم لو بنشتغل في شركة فيها أكتر من بيئة (زي بيئة للتطوير وبيئة للاختبار وبيئة للإنتاج). ⚡️ التحكم في النسخ والـ Versioning: بما إن الكود ده بنكتبه على شكل ملفات زي كود البرنامج، بنقدر نعمل عليه Version Control باستخدام أدوات زي Git. يعني لو حصلت مشكلة في أي وقت، بنقدر نرجع لنسخة أقدم من الكود بسهولة. ——— 📌 فيه أدوات كتير بتساعدنا نكتب الـ IaC وننفذه، وأشهر الأدوات دي: ⚙️ الـ Terraform: الأداة دي بتساعدك تكتب كود يشتغل على أي منصة تقريبًا، سواء AWS أو Azure أو GCP أو غيرهم. ⚙️ الـ AWS CloudFormation: دي أداة مخصوصة لـ AWS، بتقدر تكتب بها الـ IaC بتاعك لو شغال على خدمات AWS. ⚙️ الـ Ansible و Chef و Puppet: دول أدوات بنسميها Configuration Management Tools، بتساعدنا نجهز السيرفرات ونحافظ على الإعدادات ثابتة. ——— 📌 مثال بسيط على الـ Terraform لو عندك مشروع شغال على AWS وعايز تبني فيه بيئة مكونة من EC2 Instance و S3 Bucket، ممكن تكتب كود بسيط باستخدام Terraform وتقول له يعمل Deploy، وفي ثواني هتلاقي البيئة كلها اتبنت بنفس المواصفات اللي كتبتها. 📍 إزاي بنكتب الكود؟ الكود بيتكتب غالبًا بلغة بسيطة بتعبر عن الموارد اللي عايز تبنيها والإعدادات بتاعتها. لو عايز سيرفر، هتكتب كود يقول يعمل سيرفر بالشكل ده، وبعدين هتشغل الكود بتاعك، وهو هيجهز لك كل حاجة، حتى لو هتشتغل على أكتر من سيرفر أو Cloud Provider. ——— 📌 التحديات اللي ممكن تواجهك مع الـ IaC؟ - التعلم: الـ IaC بيحتاج شوية وقت عشان تتعلم الأدوات المختلفة وتفهم إزاي تكتب كود يناسب البنية التحتية اللي عايز تبنيها. - الاختبار والتحديث: أي تغيير في الكود ممكن يأثر على البنية كلها، علشان كده هتحتاج تختبر الكود كويس وتتأكد إنه شغال تمام قبل ما تطبقه. - الأمان: كتابة إعدادات الأمان والـ permissions بطريقة صح في الكود بتاعك مهمة جدًا، خصوصًا لو بتشتغل على بيئة Production. ——— الـ Infrastructure as Code (IaC) بيوفر وقت ومجهود كبير وبيخلي إدارة البنية التحتية أبسط وأدق بكتير. ممكن تتخيلها كأنك بتبني البنية التحتية بنفس الطريقة اللي بتبني بيها التطبيق بتاعك، كله بالكود، كله قابل للتكرار والتحديث بسهولة. ——— وفقكم الله لكل خير 🌿

دردشة سريعة عن الـ WebAssembly ⚡️ . . عمرك سألت نفسك إزاي التطبيقات التقيلة زي Photo Editor و Video Processor، أو ألعاب الويب بتشتغل داخل المتصفح بسرعة تكاد تكون زي التطبيقات اللي بنشغلها على الجهاز؟ 🤔 السر هنا في الـ WebAssembly (Wasm) - تقنية بتسمح إنك تشغل لغات زي ++C أو Rust أو Go داخل المتصفح بنفس تقريبًا كفاءة الأداء الـ native، الفكرة بدأت لما الناس اكتشفت إن JavaScript رغم إنها قوية جدًا، بس مش معمولة في الأساس عشان تشيل برامج تقيلة أو عمليات معقدة على مستوى الأداء (زي الـ Machine Learning أو معالجة الفيديوهات). وده عمل performance gap بين native apps و web apps. ——— 📌 يعني إيه WebAssembly؟ الـ WebAssembly هو binary instruction format، يعني كود بيتنفّذ بسرعة عالية جدًا لأن المتصفح بيقرأه مباشرة شبه الـ machine code. بس في نفس الوقت بيشتغل داخل الـ browser sandbox، يعني آمن جدًا ومش هيأثر على نظام التشغيل. ببساطة: هو layer جديدة بين الـ browser و الـ native code، بتخلي المتصفح يفهم كود مكتوب بلغة مش JavaScript (زي C و ++C و Rust...) بعد ما بيتحوّل لـ Wasm format. ——— ⚙️ إزاي العملية دي بتحصل؟ 1- المبرمج بيكتب الكود بلغة زي ++C أو Rust. 2- بعد كده بيستخدم compiler زي Emscripten أو wasm-pack عشان يحوّل الكود ده لملف wasm. 3- الملف ده بيتحط في المشروع بتاعك على الويب. 4- الـ JavaScript بقى بتقدر تستدعي الـ WebAssembly module وتشغله كأنه function عادية. المتصفح في اللحظة دي بيترجم الـ wasm مباشرة للبروسيسور، وده اللي بيخليه أسرع بكتير جدًا من JavaScript في العمليات الحسابية أو المعالجة المعقدة. ——— 💡 أهم استخدامات الـ WebAssembly: - ألعاب الويب (Web Games) اللي محتاجة performance عالي جدًا. - تطبيقات AI و Machine Learning بتشتغل على المتصفح. - الـ Web-based editors زي Figma أو Canva أو Photoshop Web Edition. - مكتبات جاهزة مكتوبة بلغة تانية وعايز تستخدمها في مشروع JavaScript. - أي حاجة فيها heavy computation أو math operations تقيلة. يعني ببساطة، WebAssembly فتح الباب إن الويب يبقى platform أقوى بكتير من مجرد صفحات HTML و CSS و JS. ——— ⚠️ هل هو بديل لـ JavaScript؟ لا، هما بيكملوا بعض. الـ WebAssembly مش معمول عشان يستبدل JavaScript، لكنه معمول عشان يساعدها في المهام اللي محتاجة performance عالي جدًا. يعني ممكن تسيب الجزء الـ UI و الـ DOM لـ JavaScript، وتسيب الـ logic التقيل لـ WebAssembly. ——— 📍 أمثلة بسيطة من الواقع: - Canva - Photopea - Google Earth - AutoCAD Web - Flixier - Zoom وده بيوضح قد إيه Wasm فعلًا بيغيّر شكل التطبيقات اللي ممكن تتعمل على الويب. ——— وفقكم الله لكل خير 🌿م