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/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.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":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5928","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5928","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.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":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5922","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5922","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5921","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5921","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.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":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5920","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide/posts/5920","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.io/c/1M3Xc1/6007882434009042228?ty=x"},"publisher":{"@type":"Organization","name":"DevGuide","url":"https://telemetr.io/uz/channels/1626339485-the_developer_guide","image":"https://img.tlmtr.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}]}}]}