دردشة سريعة عن الـ Hydration 🔻
.
.
عمرك فكرت إزاي React أو Next.js بيقدروا يحولوا كود الـ HTML اللي تم إنشاؤه في السيرفر لموقع شغال بالكامل في المتصفح؟ 🤔

العملية دي اسمها Hydration ... تعال نعرف إزاي الموضوع بيتم...

———

📌 إيه هو الـ Hydration؟

ببساطة كده، الـ Hydration هو العملية اللي React بتعملها عشان "تربط" الكود اللي اتعمل على السيرفر (SSR - Server-Side Rendering) مع الكود اللي بيشتغل على المتصفح (Client-Side Rendering).

يعني لما تفتح صفحة جايه من السيرفر، React مش بتبدأ من الصفر، هي بتلاقي كود HTML جاهز ومحتاج تزود عليه الـ React Components وتبدأ تتعامل معاها.

———

📌 ليه الـ Hydration مهم؟

📍 تحسين الـ Performance:
بما إن السيرفر بيبعت HTML جاهز، المتصفح يعرض الصفحة أسرع. المستخدم يشوف المحتوى أسرع حتى لو الـ JavaScript لسه بيحمل.

📍 الـ SEO Optimization:
عشان محركات البحث زي Google تقدر تقرأ محتوى الصفحة بسهولة، لازم الـ HTML يكون موجود وجاهز. ده بيخلي موقعك يظهر في ترتيب أعلى.

📍 الـ Smooth User Interaction:
بعد الـ Hydration، الصفحة تبقى interactive بالكامل. المستخدم يقدر يتفاعل مع الـ buttons، forms، والـ links بشكل طبيعي.

———

📌 إزاي الـ Hydration بيشتغل؟

العملية بتحصل كالتالي:

1- السيرفر بيعمل Server-Side Rendering (SSR)، ويبعت HTML جاهز للمتصفح.
2- لما يوصل الـ HTML، المتصفح يعرض الصفحة مباشرة.
3- بعد ما الـ JavaScript يخلص تحميل، React بيبدأ الـ Hydration، وبيربط الكود الجاهز مع الـ DOM.
4- من اللحظة دي، الصفحة بتتحول لـ interactive.

———

📌 مشاكل ممكن تواجهك مع الـ Hydration:

⚡️ الـ Mismatch بين الـ HTML والـ React State:

لو السيرفر بعت HTML معين والـ React حاول يرندر حاجة مختلفة، ممكن تظهر أخطاء زي Hydration failed.


⚡️الـ Render Blocking JavaScript:

لو فيه ملفات JavaScript كبيرة أو معقدة بتتأخر في التحميل، الـ Hydration هيبقى بطيء.


⚡️ الـ Heavy Components في الـ Client:

لو عندك Components معقدة جدًا، العملية هتستهلك وقت أطول.

———

📌 إزاي تحسن تجربة الـ Hydration؟

✅ استخدم Dynamic Imports:
في Next.js، ممكن تستخدم ()dynamic عشان تأخر تحميل بعض الـ components غير الضرورية.

✅ خلي فيه أهمية للـ Critical Content:
اعمل رندر للمحتوى الأساسي الأول، وبعدها خلي باقي الصفحة تتفاعل.

✅ تجنب الـ Client-Only Rendering لو مش ضروري:
حاول تخلي معظم الـ Components بتشتغل مع الـ SSR، إلا لو عندك حاجة لازم تتعمل في الـ client.

———

📌 الفرق بين React و Next.js في الـ Hydration؟

في React، لو بتعمل Client-Side Rendering (CSR) بس، مفيش Hydration. لكن لما تستخدم ()ReactDOM.hydrate، بتبدأ العملية.

أما في Next.js، الـ Hydration بيشتغل أوتوماتيك لما تستخدم ميزات زي الـ SSR أو الـ Static Site Generation (SSG).

———

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

سؤال فرونت إند لذيذ ممكن يقابلك في الانترڤيو 💯
.
.
📌 إيه الفرق بين الـ async والـ defer في الـ noscript tag؟

———

📍 تعال نفهم المشكلة الأول

لما بتستخدم <noscript> عشان تضيف JavaScript في الصفحة، المتصفح بيبدأ يقرأ الكود (HTML parsing)، لكن لما يوصل لـ noscript مش محدد له async ولا defer، هيعمل إيه؟

- هيوقف قراءة الـ HTML.
- هيحمّل الـ noscript بالكامل.
- بعدين يشغّل الكود.
- وبعدين يكمل قراءة الـ HTML.

ده معناه إن الصفحة هتقف شوية (render blocking) لحد ما التحميل والتشغيل يخلصوا. النتيجة؟ تجربة مستخدم أبطأ والموقع هيكون تقيل.

———

وهنا دور الـ async والـ defer علشان يحلوا المشكلة:

📌 أولًا: async

لما تستخدم async في الـ noscript tag بالشكل ده:

<noscript src="main.js" async></noscript>

المتصفح هيعمل الخطوات دي:

1- يكمل قراءة الـ HTML
2- يحمّل الـ noscript في الخلفية.
3- بمجرد ما التحميل يخلص، هيوقف قراءة الـ HTML ويشغّل الـ noscript علطول.


📍 تشغيل الـ noscript مش مرتبط بانتهاء تحميل باقي الصفحة.
📍 لو عندك أكتر من async noscript، مفيش ضمان إنهم هيشتغلوا بنفس ترتيب الكتابة.

———

📌 ثانيًا: defer

لما تستخدم defer في الـ noscript tag بالشكل ده:

<noscript src="main.js" defer></noscript>

المتصفح هيعمل الآتي:

1- يكمل قراءة الـ HTML
2- يحمّل الـ noscript في الخلفية (زي async).
3- لكن مش هيشغّل الـ noscript غير لما الـ HTML كله يخلص تحميل بالكامل.


📍 الـ noscripts اللي بـ defer بتتنفذ بنفس ترتيب كتابتها في الـ HTML.
📍 ده بيكون مفيد جدًا لو عندك noscripts معتمدة على بعضها أو محتاجة ترتيب معين.

———

طيب.. أستخدم مين فين؟ 🤔

✅ الـ async: لو الـ noscript مستقل ومش معتمد على حاجة تانية، زي noscript لتتبع الزوار (Analytics).

✅ الـ defer: لو الـ noscript بيعتمد على ترتيب معين أو محتاج يستنى تحميل الصفحة بالكامل قبل التنفيذ، زي الكود الأساسي للـ application بتاعك.

———

📌 مثال توضيحي

لو عندك كود بالشكل ده:

<noscript src="noscript1.js" async></noscript>
<noscript src="noscript2.js" async></noscript>

ممكن noscript2.js يشتغل قبل noscript1.js لأن async ملوش علاقة بالترتيب.


📍 لكن لو استخدمت defer

<noscript src="noscript1.js" defer></noscript>
<noscript src="noscript2.js" defer></noscript>

هنا noscript1.js دائمًا هيشتغل قبل noscript2.js، مهما حصل.

———

⚡️ خلاصة القول:

- الـ async: سريع بس عشوائي.
- الـ defer: منظم وبيشتغل بالترتيب.

———

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

مسار قواعد البيانات 💯

مسار تعليمي يُمكّن المهتمين بمجال قواعد البيانات من بناء فهم راسخ لأساسيات قواعد البيانات، واكتساب مهارات SQL المتقدمة، والتعامل بكفاءة مع قواعد البيانات باستخدام MongoDB، بالإضافة إلى إدارة البيانات وتخزينها عبر Firebase بأسلوب احترافي وعملي.

———

📌 المهارات المكتسبة من المسار:

- القدرة على اختيار نوع قاعدة البيانات المناسب حسب المشروع.
- التمييز بين قواعد البيانات: Structured Data & UnStructured Data.
- مهارات التعامل مع SQL.
- مهارات التعامل مع MongoDB.
- إدارة قواعد البيانات باستخدام Firebase.
- كتابة استعلامات CRUD (Create, Read, Update, Delete).
- ربط قواعد البيانات مع تطبيقات الويب أو الموبايل.

———

📌 رابط المسار:
https://satr.tuwaiq.edu.sa/path/BDwtRrEpyD/view

تعال ندردش شوية عن الـ JSDoc 💯
.
.
لو أنت شغال بـ JavaScript أو TypeScript ممكن تبقى سمعت مصطلح الـ JSDoc

خليني أقولك إن شغلك ممكن يكون جامد جدًا، لكن لو الكود بتاعك مش موثق كويس (Well Documented)، هتبقى بتعذب الشخص اللي هيشتغل عليه بعدك، وممكن حتى "أنت" نفسك تتعذب لو رجعتله بعد فترة. وهنا بقى بييجي دور JSDoc. 💡

———

📌 إيه هو الـ JSDoc؟

الـ JSDoc ببساطة هو tool أو مكتبة بتسمحلك تكتب documentation داخل الكود نفسه باستخدام comments. الفكرة إنه يخليك تشرح الكود بتاعك بشكل structured ومفهوم لأي حد يقرأه.

والأجمل إنه كمان بيساعدك لو بتشتغل بـ TypeScript أو حتى JavaScript عشان يحسن تجربة الكتابة بـ IDE زي VSCode.

———

📌 ليه تستخدم الـ JSDoc؟

✅ الـ Documentation هتكون واضحة وسهلة:
الكود بتاعك ممكن يكون معقد أو فيه لوجيك معقد شوية. باستخدام JSDoc، تقدر توضح إيه اللي الكود بيعمله، إيه الـ inputs اللي بياخدها، وإيه الـ output اللي بيرجعه.


✅ هتلاقي Autocomplete محترم:
لو بتكتب الكود في IDE زي WebStorm أو VSCode، الـ JSDoc comments بتساعدك بـ Autocomplete رهيب. يعني لو كودك معقد شوية، هيبقى سهل جدًا تعرف إيه الـ properties أو الـ methods المتاحة وأنت بتكتب.


✅ تحسين الـ Type Checking:
لو بتشتغل بـ JavaScript ومش TypeScript، الـ JSDoc ممكن يديك تقريبًا نفس الفائدة اللي TypeScript بتقدمها من ناحية الـ types (مش بنفس القوة طبعًا، بس حاجة محترمة).


✅ لو شغال في تيم، الـ documentation اللي بتكتبها بـ JSDoc بتوفر على زمايلك وقت كبير في فهم الكود، وده بيقلل الـ technical debt بشكل كبير.

———

💡 إزاي تبدأ مع الـ JSDoc؟

الموضوع بسيط جدًا هتدخل على الموقع ده وتبدأ تشوف الأجزاء اللي عاوز تعملها توثيق (Documentation) سواء كانت Function أو Object Types أو Classes
https://jsdoc.app

وده مقال لذيذ فيه شوية معلومات حلوة:
https://dev.to/alisamir/a-comprehensive-guide-to-jsdoc-3meb

———

💯 نصائح وإرشادات:

- بلاش توثق حاجات بديهية، يعني لو عندك function اسمها add، مش محتاج تكتب "دي بتجمع حاجتين" لو اسمها واضح. استخدم الـ JSDoc للحاجات اللي فعلًا محتاجة توضيح.
- خلي التعليقات (Comments) بتاعتك قصيرة ومباشرة.

———

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

مجموعة مدونات تقنية مميزة في مجال هندسة البرمجيات 🔻

الريبو ده فيه مجموعة من أفضل المدونات اللي هتعلمك كل حاجة عن البرمجة والتقنيات المختلفة. 🌐

Software Engineering Blogs ✍️

A curated list of engineering blogs

https://github.com/kilimchoi/engineering-blogs