DevGuide

\n\nالمتصفح هيعمل الخطوات دي:\n\n1- يكمل قراءة الـ HTML\n2- يحمّل الـ script في الخلفية.\n3- بمجرد ما التحميل يخلص، هيوقف قراءة الـ HTML ويشغّل الـ script علطول.\n\n\n📍 تشغيل الـ script مش مرتبط بانتهاء تحميل باقي الصفحة.\n📍 لو عندك أكتر من async script، مفيش ضمان إنهم هيشتغلوا بنفس ترتيب الكتابة.\n\n———\n\n📌 ثانيًا: defer\n\nلما تستخدم defer في الـ script tag بالشكل ده:\n\n\n\nالمتصفح هيعمل الآتي:\n\n1- يكمل قراءة الـ HTML\n2- يحمّل الـ script في الخلفية (زي async).\n3- لكن مش هيشغّل الـ script غير لما الـ HTML كله يخلص تحميل بالكامل.\n\n\n📍 الـ scripts اللي بـ defer بتتنفذ بنفس ترتيب كتابتها في الـ HTML.\n📍 ده بيكون مفيد جدًا لو عندك scripts معتمدة على بعضها أو محتاجة ترتيب معين.\n\n———\n\nطيب.. أستخدم مين فين؟ 🤔\n\n✅ الـ async: لو الـ script مستقل ومش معتمد على حاجة تانية، زي script لتتبع الزوار (Analytics).\n\n✅ الـ defer: لو الـ script بيعتمد على ترتيب معين أو محتاج يستنى تحميل الصفحة بالكامل قبل التنفيذ، زي الكود الأساسي للـ application بتاعك.\n\n———\n\n📌 مثال توضيحي\n\nلو عندك كود بالشكل ده:\n\n\n\n\nممكن script2.js يشتغل قبل script1.js لأن async ملوش علاقة بالترتيب.\n\n\n📍 لكن لو استخدمت defer\n\n\n\n\nهنا script1.js دائمًا هيشتغل قبل script2.js، مهما حصل.\n\n———\n\n⚡️ خلاصة القول:\n\n- الـ async: سريع بس عشوائي.\n- الـ defer: منظم وبيشتغل بالترتيب.\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-23T12:18:54Z","dateModified":"2025-12-23T12:18:54Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":716},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5928","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5928","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5928","headline":"دردشة سريعة عن الـ Hydration 🔻 . . عمرك فكرت إزاي React أو Next.js بيقدروا يحولوا كود الـ HTML اللي تم إنشاؤه…","articleBody":"دردشة سريعة عن الـ Hydration 🔻\n.\n.\nعمرك فكرت إزاي React أو Next.js بيقدروا يحولوا كود الـ HTML اللي تم إنشاؤه في السيرفر لموقع شغال بالكامل في المتصفح؟ 🤔\n\nالعملية دي اسمها Hydration ... تعال نعرف إزاي الموضوع بيتم...\n\n———\n\n📌 إيه هو الـ Hydration؟\n\nببساطة كده، الـ Hydration هو العملية اللي React بتعملها عشان \"تربط\" الكود اللي اتعمل على السيرفر (SSR - Server-Side Rendering) مع الكود اللي بيشتغل على المتصفح (Client-Side Rendering).\n\nيعني لما تفتح صفحة جايه من السيرفر، React مش بتبدأ من الصفر، هي بتلاقي كود HTML جاهز ومحتاج تزود عليه الـ React Components وتبدأ تتعامل معاها.\n\n———\n\n📌 ليه الـ Hydration مهم؟\n\n📍 تحسين الـ Performance:\nبما إن السيرفر بيبعت HTML جاهز، المتصفح يعرض الصفحة أسرع. المستخدم يشوف المحتوى أسرع حتى لو الـ JavaScript لسه بيحمل.\n\n📍 الـ SEO Optimization:\nعشان محركات البحث زي Google تقدر تقرأ محتوى الصفحة بسهولة، لازم الـ HTML يكون موجود وجاهز. ده بيخلي موقعك يظهر في ترتيب أعلى.\n\n📍 الـ Smooth User Interaction:\nبعد الـ Hydration، الصفحة تبقى interactive بالكامل. المستخدم يقدر يتفاعل مع الـ buttons، forms، والـ links بشكل طبيعي.\n\n———\n\n📌 إزاي الـ Hydration بيشتغل؟\n\nالعملية بتحصل كالتالي:\n\n1- السيرفر بيعمل Server-Side Rendering (SSR)، ويبعت HTML جاهز للمتصفح.\n2- لما يوصل الـ HTML، المتصفح يعرض الصفحة مباشرة.\n3- بعد ما الـ JavaScript يخلص تحميل، React بيبدأ الـ Hydration، وبيربط الكود الجاهز مع الـ DOM.\n4- من اللحظة دي، الصفحة بتتحول لـ interactive.\n\n———\n\n📌 مشاكل ممكن تواجهك مع الـ Hydration:\n\n⚡️ الـ Mismatch بين الـ HTML والـ React State:\n\nلو السيرفر بعت HTML معين والـ React حاول يرندر حاجة مختلفة، ممكن تظهر أخطاء زي Hydration failed.\n\n\n⚡️الـ Render Blocking JavaScript:\n\nلو فيه ملفات JavaScript كبيرة أو معقدة بتتأخر في التحميل، الـ Hydration هيبقى بطيء.\n\n\n⚡️ الـ Heavy Components في الـ Client:\n\nلو عندك Components معقدة جدًا، العملية هتستهلك وقت أطول.\n\n———\n\n📌 إزاي تحسن تجربة الـ Hydration؟\n\n✅ استخدم Dynamic Imports:\nفي Next.js، ممكن تستخدم ()dynamic عشان تأخر تحميل بعض الـ components غير الضرورية.\n\n✅ خلي فيه أهمية للـ Critical Content:\nاعمل رندر للمحتوى الأساسي الأول، وبعدها خلي باقي الصفحة تتفاعل.\n\n✅ تجنب الـ Client-Only Rendering لو مش ضروري:\nحاول تخلي معظم الـ Components بتشتغل مع الـ SSR، إلا لو عندك حاجة لازم تتعمل في الـ client.\n\n———\n\n📌 الفرق بين React و Next.js في الـ Hydration؟\n\nفي React، لو بتعمل Client-Side Rendering (CSR) بس، مفيش Hydration. لكن لما تستخدم ()ReactDOM.hydrate، بتبدأ العملية.\n\nأما في Next.js، الـ Hydration بيشتغل أوتوماتيك لما تستخدم ميزات زي الـ SSR أو الـ Static Site Generation (SSG).\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-22T15:05:37Z","dateModified":"2025-12-22T15:05:37Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":712},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5922","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5922","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5922","headline":"Cookie Masterclass 💯","articleBody":"Cookie Masterclass 💯","datePublished":"2025-12-22T08:08:58Z","dateModified":"2025-12-22T08:08:58Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":692},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5921","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5921","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5921","headline":"تعال ندردش شوية عن الـ Load Balancing 🔻 . . الـ Load Balancing حاجة مهمة جدًا بتأثر في سرعة وثبات أي تطبيق، و…","articleBody":"تعال ندردش شوية عن الـ Load Balancing 🔻\n. \n. \nالـ Load Balancing حاجة مهمة جدًا بتأثر في سرعة وثبات أي تطبيق، وخصوصًا لو التطبيق ده عليه عدد ضخم من المستخدمين.\n\nالفكرة في الـ Load Balancing إنه بيوزع ضغط الطلبات اللي بتيجي على السيرفرات عشان يخلي الأداء أحسن ويقلل أي مشاكل ممكن تحصل.\n\n———\n\n📌 إزاي الـ Load Balancing بيشتغل؟\n\nتخيل معايا أنك عندك تطبيق عليه عدد كبير من المستخدمين اللي بيدخلوا ويعملوا طلبات في نفس الوقت، زي متجر إلكتروني كبير أو موقع تواصل اجتماعي.\n\nلو التطبيق ده موجود على سيرفر واحد، هيواجه مشكلة كبيرة لو العدد زاد لأن السيرفر هيبدأ يبقى بطيء، أو ممكن يقع لو الضغط كان زيادة.\n\nالحل هنا إنك بدل ما تشغل التطبيق كله على سيرفر واحد، بتوزعه على أكتر من سيرفر، وكل سيرفر بيشيل جزء من الشغل.\n\nالـ Load Balancer بيدخل هنا وبيبقى هو اللي بيحدد الطلبات تروح لمين، بحيث مفيش سيرفر يكون عليه ضغط أكتر من التاني.\n\n———\n\n📍 أنواع الـ Load Balancing:\n\n- الـ Round Robin: الطريقة دي ببساطة بتوزع الطلبات بالتساوي على كل السيرفرات. أول طلب يروح لأول سيرفر، والتاني للتاني، وهكذا لحد ما يوصل لآخر سيرفر ويرجع تاني من الأول.\n\n- الـ Least Connections: الطريقة دي بتركز على عدد الاتصالات اللي كل سيرفر شغال عليها، بمعنى إنها بتبعت الطلب للسيرفر اللي عليه عدد أقل من الطلبات حاليًا، وده بيكون مفيد لما يكون فيه اختلاف كبير في الحمل بين الطلبات.\n\n- الـ IP Hash: هنا التوزيع بيكون بناءً على عنوان IP بتاع العميل اللي بيعمل الطلب، يعني كل عميل دايمًا هيتم توجيهه لنفس السيرفر بناءً على عنوان الـ IP بتاعه، ودي بتنفع في حالات معينة زي لما يكون فيه بيانات كاش محتاجة تتوزع.\n\n- الـ Weighted Load Balancing: في الحالة دي بنعمل أحمال مختلفة للسيرفرات بناءً على قدرتهم. يعني لو عندك سيرفر أقوى من الباقيين، تقدر تخليه ياخد حمل أكبر.\n\n———\n\n📍 ليه الـ Load Balancing مهم؟\n\nالهدف الأساسي من الـ Load Balancing هو إنه يخلي التطبيق بتاعك مستقر وسريع للمستخدمين مهما زاد عددهم.\n\nيعني بدل ما الموقع يعلق أو يقع، الطلبات هتفضل تتوزع بشكل مرن على كل السيرفرات.\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-21T14:12:00Z","dateModified":"2025-12-21T14:12:00Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":756},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5920","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5920","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5920","headline":"إزاي تكون مهندس برمجيات شاطر؟ . . How To Be A Good Software Engineer ——— 📌 الجزء الأول: Master the Fundamenta…","articleBody":"إزاي تكون مهندس برمجيات شاطر؟\n.\n.\nHow To Be A Good Software Engineer\n\n———\n\n📌 الجزء الأول: \n\nMaster the Fundamentals: The Bedrock of Becoming a Good Software Engineer \nhttps://dev.to/alisamir/master-the-fundamentals-the-bedrock-of-becoming-a-good-software-engineer-2823\n\n———\n\n📌 الجزء الثاني:\n\nWrite Clean, Maintainable Code: A Guide for Software Engineers \nhttps://dev.to/alisamir/write-clean-maintainable-code-a-guide-for-software-engineers-2834\n\n———\n\n📌 الجزء الثالث:\n\nMastering Testing and Continuous Learning: Steps to Become a Better Software Engineer \nhttps://dev.to/alisamir/mastering-testing-and-continuous-learning-steps-to-become-a-better-software-engineer-an1\n\n———\n\n📌 الجزء الرابع:\n\nHow to Excel in Problem-Solving and Collaboration as a Software Engineer \nhttps://dev.to/alisamir/how-to-excel-in-problem-solving-and-collaboration-as-a-software-engineer-2ih8\n\n———\n\n📌 الجزء الخامس:\n\nBecoming a Good Software Engineer: Business Alignment and Performance Optimization \nhttps://dev.to/alisamir/becoming-a-good-software-engineer-business-alignment-and-performance-optimization-3bd0\n\n———\n\n📌 الجزء السادس:\n\nHow Embracing Tools and Cultivating Soft Skills Can Make You a Better Software Engineer \nhttps://dev.to/alisamir/how-embracing-tools-and-cultivating-soft-skills-can-make-you-a-better-software-engineer-37c4\n\n———\n\n📌 الجزء السابع:\n\nBuilding a Personal Brand and Embracing Adaptability as a Software Engineer \nhttps://dev.to/alisamir/building-a-personal-brand-and-embracing-adaptability-as-a-software-engineer-5ke","datePublished":"2025-12-20T15:00:38Z","dateModified":"2025-12-20T15:00:38Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":834},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":38}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5912","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5912","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5912","headline":"Error Handling in TypeScript","articleBody":"Error Handling in TypeScript","datePublished":"2025-12-20T07:13:52Z","dateModified":"2025-12-20T07:13:52Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":952},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5911","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5911","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5911","headline":"أكيد سمعت عن Docker في عالم البرمجة 💡 . . تعال ندردش شوية عن Docker بطريقة بسيطة ونفهم هو ليه شيء أساسي في تط…","articleBody":"أكيد سمعت عن Docker في عالم البرمجة 💡\n.\n.\nتعال ندردش شوية عن Docker بطريقة بسيطة ونفهم هو ليه شيء أساسي في تطوير التطبيقات. 💯\n\n———\n\n📌 إيه هو Docker؟\n\nببساطة، Docker هو منصة بتسمح لك تبني، تختبر، وتشغل تطبيقاتك في حاجة اسمها Container. \n\nطيب يعني إيه Container؟ \n\nفكر فيها زي علبة بتحط فيها التطبيق بتاعك بكل المكونات اللي محتاجها عشان يشتغل: الـ Code، الـ Libraries، والـ Dependencies اللي مستخدمها، والـ System Configurations. \n\nالفكرة الأساسية إن الـ Container ده بيشتغل زي ما هو على أي جهاز أو سيرفر، بغض النظر عن الـ Operating System أو الـ Environment اللي عليه. يعني لو التطبيق شغال عندك على جهازك الشخصي، هيشتغل بالضبط بنفس الطريقة على أي سيرفر تاني من غير مشاكل.\n\n———\n\n📌 ليه Docker مهم في مجال البرمجة؟\n\n⚡️ التوافق بين البيئات المختلفة:\n\nمن أكتر المشاكل اللي معظمنا بيقابلها إنك تشتغل على مشروع على جهازك وكل حاجة تبقى تمام، لكن أول ما تيجي ترفعه على السيرفر، تبدأ المشاكل! \n\nممكن الـ Libraries أو الـ Environment اللي على السيرفر تكون مختلفة عن جهازك، وده يخلي حاجات كتير تبطل تشتغل. \n\nهنا بييجي دور Docker من خلال الـ Container اللي بيبنيها، كل حاجة بتكون جاهزة ومتوافقة مع بعضها، فالتطبيق بتاعك هيشتغل بنفس الكفاءة على أي بيئة تانية من غير تعديلات.\n\n———\n\n⚡️ سرعة الانتقال من مرحلة التطوير للإنتاج:\n\nالعادي في أي مشروع إنك بتبدأ بـ Development Environment، وبعد كده تنقل المشروع لـ Production Environment. \n\nنقل المشروع ده ممكن ياخد وقت ومجهود كبير، خصوصًا لو بتحتاج تعيد تهيئة البيئة الجديدة كل مرة. Docker بيحل المشكلة دي عن طريق إنك بتجهز كل حاجة في Container واحد، وبتقدر تنقله مباشرة لأي مكان، وبالتالي بتقلل الوقت اللي بياخده المشروع عشان يبقى جاهز للإطلاق.\n\n———\n\n⚡️ مرونة في التوسع (Scalability):\n\nلو بتشتغل على مشروع كبير أو بتبني تطبيق بيسمح بعدد كبير من المستخدمين، هتحتاج تعمل Scale للتطبيق بسرعة.\n\nتقدر تعمل نسخ متعددة من الـ Containers وتشغلهم على أي عدد من السيرفرات بسهولة وفي وقت قليل، وبالتالي تقدر تتعامل مع زيادة الأحمال بدون مشاكل.\n\n———\n\n⚡️ سهولة التجربة والاختبار:\n\nميزة Docker إنه بيوفر لك بيئة معزولة لتجربة أفكار جديدة أو تعديل كود معين بدون التأثير على التطبيق الرئيسي. يعني، لو عايز تجرب Framework جديد أو تضيف Feature للتطبيق، تقدر تعمل Container جديد وتجرب براحتك من غير ما تأثر على البيئة اللي شغال عليها باقي الفريق أو المشروع الأساسي.\n\n———\n\n⚡️ الحفاظ على استمرارية العمل:\n\nمن خلال Docker تقدر تتأكد إن نفس الـ Setup شغال عندك، عند باقي الفريق، وعلى السيرفرات اللي بتشغل التطبيق. ده معناه إن مفيش مشاكل هتحصل بسبب فرق في الـ Configuration أو الـ Environment.\n\n———\n\nلو تعرف مصادر كويسة بتشرح Docker ياريت تضيفها في التعليقات وتفيد غيرك ✅\n\nبالتوفيق 🌿","datePublished":"2025-12-19T08:03:29Z","dateModified":"2025-12-19T08:03:29Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":883},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5910","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5910","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5910","headline":"دردشة سريعة عن الـ Interface Segregation Principle 💯 . . تخيل أنك في شغلانة معينة وكل شوية حد يطلب منك تاسكات…","articleBody":"دردشة سريعة عن الـ Interface Segregation Principle 💯\n.\n.\nتخيل أنك في شغلانة معينة وكل شوية حد يطلب منك تاسكات ملهاش علاقة ببعض ولا ليها علاقة بالشغلانة...طبيعي هتلاقي نفسك مشتت بين التاسكات كلها ومفيش فرصة تركز في الشغلانة الأساسية اللي جاي علشانها وكمان مش هتعملها بأفضل شكل.\n\nنفس السيناريو ده بالضبط ممكن يحصل في البرمجة لما الكود يبقى مضطر يلتزم بحاجات هو مش محتاجها.\n\nوهنا هتلاقي دور الـ Interface Segregation Principle، واحد من أهم المبادئ الخمسة لمفهوم SOLID، عشان يحل المشكلة دي.\n\n———\n\nيعني إيه Interface Segregation Principle؟ 🤔\n\nالـ ISP بيقول ببساطة: \"مينفعش تخلي الكود يلتزم بحاجات هو مش محتاجها.\"\n\nلو عندك Interface فيه مليون وظيفة (methods) لكن الكائن (object) اللي هيستخدم الـ Interface ده هيحتاج كام حاجة بس، يبقى كده أنت بتحمّله شغل ملوش لازمة، وده هيعمل مشاكل في الكود بعدين.\n\n———\n\nمثال بسيط 👇\n\nلو عندك Interface اسمه Bird\n\ninterface Bird {\n fly(): void;\n swim(): void;\n}\n\nلو عملت كائن (object) زي Duck هيبقى منطقي جدًا إنه يقدر يطير (fly) ويعوم (swim).\nلكن لو عندك كائن زي Penguin؟ البطريق بيعوم بس، ومش بيعرف يطير!\n\nفي الحالة دي الـ Penguin هيضطر يطبق (implement) وظيفة ملوش علاقة بيها وهي fly، حتى لو مش هيستخدمها.\n\n———\n\n✅ الحل؟ \n\nافصل الوظائف بتاعت الـ Interface على حسب الاحتياج الفعلي:\n\ninterface FlyingBird {\n fly(): void;\n}\n\ninterface SwimmingBird {\n swim(): void;\n}\n\nوكده لما تيجي تعمل Duck، هيطبق الاتنين:\n\nclass Duck implements FlyingBird, SwimmingBird {\n fly() {\n console.log('Duck is flying');\n }\n \n swim() {\n console.log('Duck is swimming');\n }\n}\n\nأما الـ Penguin، هيطبّق بس اللي له علاقة به:\n\nclass Penguin implements SwimmingBird {\n swim() {\n console.log('Penguin is swimming');\n }\n}\n\n———\n\n📌 ليه المبدأ ده مهم؟\n\n- لما كل كائن يكون مرتبط بالوظائف اللي فعلًا محتاجها، بيبقى أسهل تعمل تغييرات من غير ما تسبب مشاكل لباقي الكود.\n- الكود بتاعك هيبقى منظم \"Organized\" أكتر ومفهوم لأي حد يشتغل عليه بعدك.\n- مش هتضطر تضيف دوال (methods) مش مستخدمة، وده بيقلل الـ Bugs اللي ممكن تظهر.\n\n———\n\n📍 دائمًا خليك حريص إن أي Interface يكون متخصص ومحدد الوظائف.\n📍 لو لقيت Interface كبير ومعقد، افصله لعدة Interfaces أصغر.\n📍 فكر كويس قبل ما تعمل أي implements، واسأل نفسك: الكائن ده فعلًا محتاج كل اللي موجود في الـ Interface؟\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-18T11:30:01Z","dateModified":"2025-12-18T11:30:01Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":710},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5909","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5909","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5909","headline":"الـ OOP أو Object-Oriented Programming 🔻 الـ OOP بتقوم على أربع أعمدة أساسية: Abstraction، Encapsulation، Inh…","articleBody":"الـ OOP أو Object-Oriented Programming 🔻\n\nالـ OOP بتقوم على أربع أعمدة أساسية: Abstraction، Encapsulation، Inheritance، وPolymorphism. طيب، إيه معناهم؟\n\n———\n\n🟠 Abstraction\nالفكرة في الـ Abstraction هي إنك تخفي التفاصيل اللي تخص الـ implementation وتعرض بس الحاجات المهمة اللي المستخدم محتاج يعرفها.\n\nزي مثلًا لو عندك class اسمه Vehicle وفيه method اسمها stop، الـ method دي ممكن تكون abstract يعني محدش يعرف إزاي بتشتغل من جواها، كل اللي باين إنها بتوقف الـ Vehicle.\n\n———\n\n🟠 Encapsulation\nالـ Encapsulation معناه إنك \"تغلف\" البيانات (اللي هي الـ fields) والوظائف (اللي هي الـ methods) في وحدة واحدة اللي هي الـ class. وكمان، إنك تحدد مين يقدر يوصل للبيانات دي عن طريق الـ access modifiers.\n\nزي إنك تخلي الـ fields بتاعتك private، وتعمل لها getters و setters علشان تتحكم في الوصول لها.\n\n———\n\n🟠 Inheritance\nالـ Inheritance بيسمح لك تعمل class جديد (child class) يورث الـ attributes والـ methods من class موجود بالفعل (parent class). الميزة هنا إنك بتقدر تعيد استخدام الكود بدل ما تكتبه من أول وجديد.\n\nمثال: عندك class اسمه Vehicle، تعمل منه class اسمه Car، والـ Car هيبقى عنده نفس صفات وسلوكيات الـ Vehicle.\n\n———\n\n🟠 Polymorphism\nالـ Polymorphism معناه إن الـ methods بتشتغل بشكل مختلف بناءً على الـ object اللي بتتطبق عليه. وده بيخليك تستخدم نوعين ليهم نفس الـ inheritance chain مع بعض من غير مشاكل.\n\nيعني لو عندك method بتاخد Vehicle كـ parameter، ممكن تبعت لها Car أو Bike وهتشتغل عادي طالما إنهم بيورثوا من Vehicle.\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-17T15:54:04Z","dateModified":"2025-12-17T15:54:04Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":863},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5908","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5908","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5908","headline":"System Performance Metrics Every Engineer Should Know 💯","articleBody":"System Performance Metrics Every Engineer Should Know 💯","datePublished":"2025-12-16T03:24:01Z","dateModified":"2025-12-16T03:24:01Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1296},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5907","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5907","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5907","headline":"يعني إيه Cross-Site Scripting (XSS)؟ ⚠️ . . الـ XSS هو نوع من أنواع الثغرات الأمنية اللي ممكن تكون موجودة في…","articleBody":"يعني إيه Cross-Site Scripting (XSS)؟ ⚠️\n.\n.\nالـ XSS هو نوع من أنواع الثغرات الأمنية اللي ممكن تكون موجودة في المواقع، وبيستغلها الهاكرز علشان ينفذوا أكواد ضارة داخل صفحة الويب اللي بيستخدمها الضحية، وكده الهاكر يقدر يتحكم في الموقع أو حسابات المستخدمين، أو حتى يسحب بياناتهم الخاصة.\n\n———\n\n📌 الثغرة دي بتشتغل إزاي؟\n\nخليني أشرحلك السيناريو البسيط اللي ممكن يحصل:\n\n1- الهاكر بيكون عنده كود JavaScript ضار وعايز يزرعه في الموقع.\n\n2- بيستغل ثغرة في المدخلات (Inputs) الموجودة في الموقع زي الـ Forms أو الـ Comments، أو حتى في URL لو الموقع مش مؤمّن كويس.\n\n3- المستخدم العادي، اللي هو الضحية، بيفتح الصفحة من غير ما يعرف، والكود الضار اللي كتبه الهاكر بيبدأ يشتغل تلقائي، وده بيدّي الهاكر صلاحيات كبيرة داخل حسابات الضحية أو حتى بيتمكن من سرقة البيانات اللي موجودة على الموقع.\n\n💥 يعني الكود الضار اللي كتبه الهاكر ممكن يتحكم في أي حاجة بتظهر للمستخدم على الموقع، وده ممكن يكون من خلال:\n\n- سرقة الكوكيز: اللي هي زي ملفات صغيرة بتحتفظ بمعلومات تسجيل الدخول والتفضيلات. الكود الضار ممكن ياخدها ويبعتهاله، والهاكر يستخدمها علشان يدخل بحساب الضحية.\n\n- تغيير محتوى الصفحة: ممكن الهاكر يحط حاجات أو رسائل وهمية في الصفحة تخلّي المستخدمين يدخلوا بياناتهم الشخصية، زي رسائل \"تسجيل الدخول\" أو \"تحديث الحساب\".\n\n- إعادة توجيه المستخدم: لو الهاكر عايز ينقلك لموقع ضار تاني فيه فيروسات أو برامج خبيثة، ممكن يخليك تروحله وأنت مش واخد بالك.\n\n———\n\n🔐 أنواع الـ XSS:\n\nفيه أكتر من نوع يخص الـ XSS، وكل نوع له طريقة مختلفة في التنفيذ وأثر مختلف، خليني أقولك الأنواع الرئيسية:\n\n📍 الـ Stored XSS: النوع ده بيحصل لما الكود الضار بيتخزن في الموقع نفسه، يعني بيكون ثابت وكل مرة حد يفتح الصفحة يتنّفذ على طول.\n\n📍 الـ Reflected XSS: النوع ده بيشتغل لما الكود بيتنّفذ فورًا في الصفحة اللي اتضاف فيها، زي لما حد يبعته في رابط URL، والمستخدم يفتحه فيلاقي الكود شغال.\n\n📍 الـ DOM-based XSS: ده نوع أذكى شويه لأنه بيشتغل على مستوى الـ DOM بتاع الصفحة، يعني بيتعامل مباشرة مع العناصر اللي بتتغير في واجهة المستخدم، وده بيخلي الثغرة أصعب شوية في الاكتشاف.\n\n———\n\n💡 إزاي نمنع الـ XSS؟\n\nعشان تحمي موقعك أو تطمّن إنك متأمن ضد الثغرة دي، لازم تركز على كام حاجة:\n\n📌 أي حاجة بيضيفها المستخدم في الموقع (زي النصوص أو التعليقات) لازم يتعمل عليها فلتر و Validation وتتأكد إن مفيهاش أكواد ضارة.\n\n📌 استخدام Content Security Policy (CSP): ده زي طبقة حماية إضافية بتمنع تنفيذ الأكواد اللي جايه من مصادر غير موثوقة.\n\n📌 تشفير المدخلات والمخرجات: عن طريق استخدام HTML encoding عشان تحول الرموز اللي ممكن تسبب مشاكل (زي < و >) لرموز آمنة.\n\n📌 منع الكوكيز من السرقة: باستخدام حاجة زي HttpOnly اللي بتحمي الكوكيز من الوصول المباشر عبر JavaScript.\n\n———\n\n✋ الـ XSS ثغرة خطيرة جدًا ممكن تهدد خصوصية المستخدمين وتضر بسمعة الموقع كمان. عشان كده لازم تكون فاهم تفاصيلها كويس وتقدر تأمن موقعك منها....","datePublished":"2025-12-15T11:38:05Z","dateModified":"2025-12-15T11:38:05Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":923},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5906","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5906","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5906","headline":"لو بتدور على شغل عن بُعد في مجال الـ Tech 💯 . . قائمة تحتوي على مجموعة شركات بتوفر فرص شغل جزئي أو كلي عن بُع…","articleBody":"لو بتدور على شغل عن بُعد في مجال الـ Tech 💯\n.\n.\nقائمة تحتوي على مجموعة شركات بتوفر فرص شغل جزئي أو كلي عن بُعد.\n\n———\n\nRemote-Friendly Companies 💯\nA list of semi to fully remote-friendly companies (jobs) in tech.\n\nhttps://github.com/remoteintech/remote-jobs","datePublished":"2025-12-14T19:39:08Z","dateModified":"2025-12-14T19:39:08Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1426},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":39}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5900","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5900","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5900","headline":"Master Hydration in React 19.2 💯","articleBody":"Master Hydration in React 19.2 💯","datePublished":"2025-12-11T12:31:19Z","dateModified":"2025-12-11T12:31:19Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":926},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5899","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5899","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5899","headline":"As a React.js developer, Please learn: 1. Advanced State Management - Redux & Redux Toolkit - Context API - R…","articleBody":"As a React.js developer,\n\nPlease learn:\n\n1. Advanced State Management\n- Redux & Redux Toolkit\n- Context API\n- Recoil or Zustand\n\n2. React Performance Optimization\n- Memoization (React.memo, useMemo, useCallback)\n- Code Splitting\n- React Profiler\n\n3. Component Design Patterns\n- Higher-Order Components (HOCs)\n- Custom Hooks\n\n4. Server-Side Rendering (SSR)\n- Next.js\n- Hydration\n\n5. TypeScript with React\n- Type Safety\n- Advanced Types and Generics\n\n6. Testing\n- React Testing Library\n- End-to-End Testing (Cypress, Playwright)\n- Mocking and Stubbing\n\n7. React Ecosystem and Tooling\n- Webpack and Babel\n- ESLint and Prettier\n\n8. API Integration\n- GraphQL (Apollo Client, Relay)\n- SWR and React Query\n- WebSockets and Real-Time Updates\n\n9. Authentication and Authorization\n- OAuth and JWT\n- Role-Based Access Control (RBAC)\n\n10. Code Architecture\n- Monorepos (Nx, Lerna)\n- Micro-Frontends\n- Atomic Design\n\n11. Web Performance Optimization\n- Lazy Loading\n- Progressive Web Apps (PWA)\n- Service Workers","datePublished":"2025-12-10T06:32:17Z","dateModified":"2025-12-10T06:32:17Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":952},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5892","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5892","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5892","headline":"Event Emitters in JavaScript 💯 Event emitters decouple components, enabling scalable, event-driven architectu…","articleBody":"Event Emitters in JavaScript 💯\n\nEvent emitters decouple components, enabling scalable, event-driven architectures.\n\n———\n\n📌 Ideal For:\n\n- UI interactions (clicks, form submissions)\n- APIs/HTTP servers (request/response handling)\n- Real-time apps (chat, notifications)\n- Modular systems (plugins, micro-services)","datePublished":"2025-12-09T07:45:30Z","dateModified":"2025-12-09T07:45:30Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":936},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5891","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5891","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5891","headline":"كلام خفيف عن الـ SOLID Principles 💯 . . ليه بعض المشاريع البرمجية بتفضل ثابتة وقوية مهما زاد حجمها وتعقيدها،…","articleBody":"كلام خفيف عن الـ SOLID Principles 💯\n.\n.\nليه بعض المشاريع البرمجية بتفضل ثابتة وقوية مهما زاد حجمها وتعقيدها، بينما مشاريع تانية أول ما تكبر شوية بتنهار وكل شوية يحصل فيها مشاكل والدنيا بتبقى مدعكة؟ 🤔\n\nالحقيقة السر مش بس في الكود، لكن كمان في طريقة التفكير وكتابة وتنظيم الكود.\n\nوهنا ييجي دور مبادئ الـ SOLID اللي تعتبر زي خريطة طريق لأي مهندس برمجيات عايز يكتب كود نظيف، قابل للتطوير، وسهل الصيانة.\n\nكلمة SOLID اختصار لـ 5 مبادئ أساسية في البرمجة كائنية التوجه (Object-Oriented Programming)، وكل مبدأ فيهم له دور كبير في تحسين جودة الكود.\n\nتعال نفهم كل مبدأ بشكل مبسط:\n\n———\n\n📌 الـ Single Responsibility Principle (SRP) - المسؤولية الواحدة\n\nده معناه ببساطة إن كل كائن (class) في الكود بتاعك لازم يكون عنده وظيفة واحدة بس، وما يعمل أكتر من حاجة.\n\nعلشان لو حصل تغيير في أي جزء، ما تضطر تعدّل كل الكود، وبالتالي تقل الأخطاء وتبقى الصيانة أسهل.\n\n📍 مثال عملي: تخيل معاك موظف في الشغل بيعمل كل حاجة من الحسابات لخدمة العملاء لتوصيل الطلبات. لو الموظف ده تعب، كل حاجة هتقف! لكن لو كل موظف عنده وظيفة محددة، الدنيا هتبقى منظمة أكتر.\n\n———\n\n📌 الـ Open/Closed Principle (OCP) - مفتوح للتوسع ومغلق للتعديل\n\nالمبدأ ده بيقولك خلي الكود بتاعك جاهز للتطوير أو إضافة مميزات جديدة من غير ما تعدّل في الكود الأساسي.\n\nعلشان ما تكسر حاجات شغالة بالفعل وتبقى الميزة الجديدة زي طبقة إضافية فوق النظام القديم.\n\n📍 مثال عملي: زي إنك تبني بيت وتسيب أماكن للتوسعات، بدل ما تضطر تهد الحيطان كل ما تحتاج تضيف أوضة جديدة.\n\n———\n\n📌 الـ Liskov Substitution Principle (LSP) - استبدال الأنواع الفرعية بالأساسية\n\nلو عندك (Parent Class) و (Child Class)، الـ child class لازم يقدر يحل محل الأساسي من غير ما يحصل أي مشاكل في الكود.\n\nعلشان تضمن إن الكود بتاعك يشتغل بشكل متماسك وسلس حتى لو استخدمت كائنات مختلفة.\n\n📍 مثال عملي: زي إنك تشتري عربية جديدة، وأيًا كان الموديل، لازم تقدر تسوقها بنفس الطريقة من غير ما تتعلم حاجة جديدة تمامًا.\n\n———\n\n📌 الـ Interface Segregation Principle (ISP) - تقسيم الواجهات\n\nالمبدأ ده بيقول: مينفعش تجبر الـ classes إنها تستخدم حاجات مش محتاجاها. لو فيه واجهة (Interface) كبيرة ومعقدة، قسمها لواجهات صغيرة خاصة بوظائف محددة.\n\nعلشان ما تخلي الكود مليان حاجات مش ضرورية أو ملهاش علاقة بااـ class.\n\n📍 مثال عملي: زي إنك تطلب اشتراك في صالة جيم علشان تتمرن، مينفعش تلاقي نفسك مجبر إنك تدفع رسوم لحاجات زي الساونا وحمام السباحة وأنت أصلًا عايز تتمرن بس!\n\n———\n\n📌 الـ Dependency Inversion Principle (DIP) - عكس التبعية\n\nهنا المبدأ بيقول إنك لازم تخلي الكود بتاعك يعتمد على واجهات مجردة (Abstractions) بدل ما يعتمد على تفاصيل محددة (Implementations).\n\nعلشان التعديلات تبقى أسهل وماتربط الكود بتفاصيل صغيرة ممكن تتغير في أي وقت.\n\n📍 مثال عملي: زي إنك تستخدم شاحن USB عام بدل ما تعتمد على شاحن نوع معين، لأن أي شاحن تاني ممكن يشتغل على نفس الجهاز.\n\n———\n\n⚡️ ليه مبادئ الـ SOLID مهمة؟\n\n- بتخلي الكود بتاعك سهل القراءة والفهم.\n- بتقلل من الأخطاء اللي بتحصل لما تضيف مميزات جديدة.\n- بتوفر وقت كبير في الصيانة والتعديلات.\n- بتخليك جاهز لأي تحديات جديدة أو تغييرات في المشروع.\n\n———\n\nوفقكم الله لكل خير 🌿","datePublished":"2025-12-08T14:32:17Z","dateModified":"2025-12-08T14:32:17Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":611},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5890","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5890","mainEntityOfPage":"https://telemetr.io/es/channels/1626339485-the_developer_guide/posts/5890","headline":"Top 20 System Design Concepts You Should Know ⭐️","articleBody":"Top 20 System Design Concepts You Should Know ⭐️","datePublished":"2025-12-08T07:41:44Z","dateModified":"2025-12-08T07:41:44Z","author":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/es/channels/1626339485-the_developer_guide","image":"https://img.telemetr.io/c/1M3Xc1/6007882434009042228?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1024},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}}]}