DevGuide

الـ Asynchronous Programming في JavaScript 💯

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

وأنت شغال بلغة JavaScript أكيد سمعت عن مصطلح الـ Asynchronous Programming واللي يعتبر حاجة مهمة لازم تكون فاهمها كويس. البرمجة فيها نوعين أساسيين: Synchronous وAsynchronous، ولما نفهم الفرق بينهم، هيبقى أسهل نعرف ليه الـ Asynchronous مهم جدًا. ——— 📌 الـ Synchronous Programming (التنفيذ المتسلسل): ده يعني إن الكود بيتنفذ خطوة بخطوة، بمعنى إن الكود مبيكملش تنفيذ أي خطوة تانية إلا لما الخطوة اللي قبلها تخلص. يعني لو عندك عملية بتاخد وقت زي إنك بتحمل بيانات من السرفر عن طريق الـ API، الكود هيفضل مستني لحد ما البيانات تتحمل قبل ما يكمل باقي التنفيذ. ——— 📌 الـ Asynchronous Programming (التنفيذ غير المتسلسل): أما في البرمجة Asynchronous، الكود يقدر ينفذ حاجات كتير في نفس الوقت من غير ما يستنى العملية الطويلة تخلص. يعني لو عندك عملية زي تحميل البيانات من السرفر، الكود ممكن يستمر في تنفيذ أكواد تانية، ولما البيانات تتحمل، الكود هيعرف ويتعامل مع النتيجة. ——— 📌 إزاي الكلام ده بيحصل في JavaScript؟ في JavaScript، عندنا طريقتين رئيسيتين للتعامل مع الـ asynchronous programming 🔻 الـ Callbacks 🔻 الـ Promises (وطبعًا async/await اللي هو تحسين للـ Promises) ——— 📌 الـ Callbacks أول طريقة للتعامل مع الـ asynchronous programming كانت عن طريق الـ Callbacks. الفكرة ببساطة إنك بتمرر دالة معينة كـ "callback" للكود اللي بيتنفذ، ولما الكود ده يخلص، الدالة دي بتشتغل. لكن الـ callbacks بتتحول بسرعة لكود معقد جدًا لما يكون عندك عمليات كتير وبتحتاج تكتب حاجات كتير جوة بعضها، وده اللي بنسميه Callback Hell. ——— 📌 الحل: الـ Promises هنا بيجي دور الـ Promises، اللي هي طريقة جديدة وأكثر تنظيمًا للتعامل مع العمليات الـ asynchronous. الـ Promise هو في الأساس "وعد" إن العملية هتخلص في المستقبل. الـ Promise بيكون ليه 3 حالات: 🔻 حالة الـ Pending: يعني العملية لسه مخلصتش. 🔻 حالة الـ Fulfilled: يعني العملية نجحت وطلعت النتيجة. 🔻 حالة الـ Rejected: يعني العملية فشلت وفيه خطأ حصل. لما العملية تخلص بنجاح، الـ Promise بيتحول لحالة "fulfilled"، ولو العملية فشلت بيتحول لحالة "rejected". ——— خلينا نشوف مثال عشان نفهم الكلام ده بشكل أوضح. هنفترض إننا عايزين نحاكي عملية استرجاع بيانات من الـ API.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const dataAvailable = true;

      if (dataAvailable) {
        resolve("Data retrieved successfully!");
      } else {
        reject("Error: Unable to retrieve data.");
      }
    }, 3000);
  });
};

fetchData()
  .then(result => console.log(result)) 
  .catch(error => console.log(error));

في الكود ده، الفنكشن fetchData بترجع Promise. داخل الـ Promise، بنستخدم إما resolve لو العملية نجحت أو reject لو حصل خطأ. باستخدام then، بنقدر نتعامل مع النتيجة لو العملية نجحت، ولو حصل خطأ، الـ catch بتساعدنا في التعامل معاه. ——— 📌 الـ Async/Await علشان نخلي الكود أبسط وأوضح، ظهر حاجة اسمها async/await اللي بتشتغل على الـ Promises بس بشكل مبسط جدًا وبتخلي الكود يبان كأنه synchronous. نفس المثال اللي فوق نقدر نكتبه بطريقة async/await بالشكل ده:

const fetchData = async () => {
  try {
    const result = await new Promise((resolve, reject) => {
      setTimeout(() => {
        const dataAvailable = true;
        if (dataAvailable) {
          resolve("Data retrieved successfully!");
        } else {
          reject("Error: Unable to retrieve data.");
        }
      }, 3000);
    });
    console.log(result);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

الميزة هنا إننا استخدمنا await عشان نستنى النتيجة من الـ Promise وكأن العملية دي synchronous، لكن في الحقيقة الكود شغال بطريقة asynchronous. وبدل ما نستخدم then و catch، استخدمنا try و catch علشان نتعامل مع النجاح أو الخطأ. ——— 📌 ليه أستخدم الـ Promises والـ Async/Await؟ ✅ تنظيم الكود: الكود بيبقى أنضف وأبسط في الفهم مقارنة بالـ Callbacks. ✅ الـ Error Handling أفضل: التعامل مع الأخطاء بقى أسهل باستخدام try/catch. ✅ لما يكون عندك مشروع كبير، الـ async/await هيساعدك في إدارة الأكواد الطويلة والمعقدة بسهولة. ——— بالتوفيق يا بطل 💪🏻

قـواعـد البيانات (Databases) 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

الداتابيز (Database) هي جزء أساسي في أي سوفتوير سواء موقع أو تطبيق، لأنها بتخزن وبتتعامل مع البيانات اللي بيستخدمها التطبيق. https://www.linkedin.com/posts/dev-alisamir_database-sql-nosql-activity-7240785181274451968-jp_6

الـ Git 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

الـ Git هو واحد من أهم الأدوات اللي لازم تتعلمها وتفهمها كويس جدًا في مجال السوفتوير، وده لأنه بيساعدك في إدارة الأكواد بتاعتك وتنظيمها بشكل محترف من غير ما تضيع وقتك ومجهودك. باختصار، Git هو نظام لإدارة الإصدارات (Version Control System) اللي بيخليك تقدر تحتفظ بنسخ مختلفة من الكود بتاعك وتقدر ترجع لأي نسخة في أي وقت. كمان بيسهل عليك تشتغل مع فريق لأنك تقدر تدمج شغلك مع شغل باقي الفريق بدون مشاكل. ——— 📌 طيب إيه هي أهم أوامر Git اللي لازم تعرفها؟

⚡️ الـ git init

ده الأمر اللي بيعمل تهيئة (initialize) لمشروعك عشان يتحول لمشروع Git، يعني بيعمل ملف مخفي في المشروع بتاعك اسمه (git.) اللي بيحتوي على كل التفاصيل الخاصة بالإصدارات. ———

⚡️ الـ git clone

الأمر ده بيستخدم لما تحب تنسخ مشروع من GitHub أو أي مستودع (repository) خارجي وتشتغل عليه محليًا (locally) على جهازك. ———

⚡️ الـ git status

من أهم الأوامر اللي لازم تستخدمها كتير، بيعرض لك حالة الملفات اللي اشتغلت عليها وهل هي جاهزة للإضافة ولا لا، وكمان بيوريك أي تعديلات تمت على المشروع. ———

⚡️ الـ git add

لما تعدل في أي ملف وعاوز تضيفه للاستعداد لعملية الحفظ (commit)، بتستخدم الأمر ده. مثلًا:

git add .

ده بيضيف كل الملفات اللي تم تعديلها. ———

⚡️ الـ git commit -m "commit message"

هنا بتيجي الخطوة الأهم، اللي هي إنك تحفظ التعديلات اللي عملتها بشكل دائم، وباستخدام الـ -m تقدر تضيف رسالة توضح التعديلات اللي عملتها. الرسالة دي بتساعدك بعدين تفهم إيه اللي حصل في كل مرحلة. ———

⚡️ الـ git push

ده الأمر اللي بيبعت التعديلات اللي عملتها للمستودع اللي شغال عليه على GitHub أو أي خدمة تانية. وده مهم جدًا لو شغال ضمن فريق أو لو عاوز تعمل نسخة احتياطية للكود بتاعك. ———

⚡️ الـ git pull

لو فيه تعديلات جديدة على المستودع الرئيسي وعاوز تسحبها عندك، بتستخدم الأمر ده. بيحدث الكود عندك عشان يكون محدث دايمًا بالتعديلات اللي تمت من باقي الفريق. ———

⚡️ الـ git branch

عشان تعمل فرع جديد للكود بتاعك (branch) وتشتغل على ميزة معينة من غير ما تعدل على الفرع الرئيسي (main branch)، بتستخدم الأمر ده. مثلًا:

git branch feature-xyz

هيعمل فرع جديد اسمه feature-xyz. ———

⚡️ الـ git merge

بعد ما تخلص شغلك على الفرع (branch) اللي كنت شغال عليه وعاوز تدمجه مع الفرع الرئيسي، بتستخدم git merge. ده بيسمح لك تجمع التعديلات كلها في مكان واحد. ——— أما GitHub فهو منصة بترفع عليها الكود بتاعك اللي مستخدم فيه Git عشان تقدر تخزنه أونلاين، وتشتغل عليه مع باقي التيم وكمان توصله من أي جهاز بنفس الأكونت بتاعك. يعني تخيل إنك شغال في مشروع كبير ومعاك تيم، كل واحد ممكن يشتغل على جزء معين من الكود، وبعدين تدمجوا شغلكم كله مع بعض من غير ما يحصل أي لخبطة. بالنسبة لـ GitLab فهو منصة زي GitHub من حيث الوظيفة والاستخدام. ولكن هتلاقي شكلها مختلف شوية. ——— الـ Git هيوفر لك وقت كبير وهيجنبك كتير من الأخطاء اللي ممكن تحصل لو اشتغلت على الكود بشكل غير منظم. كل الأوامر اللي فوق دي هي الأساسيات اللي هتساعدك تبدأ، وطبعًا فيه أوامر أكتر متقدمة ممكن تتعلمها بعد كده. ✅

Announcing Vue 3.5 https://blog.vuejs.org/posts/vue-3-5

Understanding Clean Code: Systems ⚡️

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

- When building software systems, it's crucial to manage codebase complexity. - Clean Code's Chapter 11 discusses designing modular systems that are easier to maintain and adapt over time. https://dev.to/alisamir/understanding-clean-code-systems-53da

الـ DOM (Document Object Model) 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

هي البنية اللي المتصفح بيستخدمها عشان يحوّل صفحة الويب من كود HTML لكائنات (Objects) يقدر يتعامل معاها. يعني ببساطة، الصفحة بتاعتك اللي بتتكون من عناصر زي العناوين، الفقرات، الصور، وغيرها بتتحول لشجرة من الكائنات، وكل عنصر بيتحول لكائن فيه خصائص زي النص، الألوان، الأحجام، وغيرها. ——— الجميل في الـ DOM إنه بيسمح لنا نغير الصفحة بعد ما تتحمل، وده اللي بنسميه "DOM Manipulation" باستخدام JavaScript. ✅ فكرة الـ DOM Manipulation ببساطة هي إنك بتقدر تعدل على عناصر الصفحة وتغيرها بناءً على تفاعل المستخدم، زي إنك تضيف زرار جديد، تشيل صورة، أو حتى تغير النص اللي مكتوب في الفقرات. 💯 ——— 📌 إزاي تجيب عناصر من الـ DOM؟ عشان تقدر تعمل DOM Manipulation، لازم الأول تعرف إزاي تجيب العناصر اللي عايز تعدلها. فيه طرق كتير عشان تجيب العناصر: ⚡️ الـ document.getElementById: دي بتجيب العنصر اللي ليه ID معين. مثلًا:

const element = document.getElementById("myElement");

⚡️ الـ document.querySelector: دي طريقة أقوى شوية لأنها بتستخدم CSS Selectors، يعني تقدر تجيب أي عنصر بناءً على الاسم، الـ class، أو حتى الـ ID:

const element = document.querySelector(".myClass");

⚡️ الـ document.getElementsByClassName والـ document.getElementsByTagName: دول بيرجعوا لك مصفوفة (Array-like) من العناصر اللي ليها نفس الـ class أو الـ tag. ——— 📌 إيه اللي ممكن تعمله بـ DOM Manipulation؟ ⚡️ إضافة عناصر جديدة: لو عايز تضيف عنصر جديد في الصفحة، زي زرار أو صورة، تقدر تستخدم JavaScript عشان تعمل Create Element، وبعد كده تضيفه للشجرة باستخدام appendChild. مثال بسيط:

const newButton = document.createElement("button");
newButton.innerHTML = "اضغط هنا";
document.body.appendChild(newButton);

الكود ده بيعمل زرار جديد مكتوب عليه "اضغط هنا" وبيضيفه في آخر الـ body. ——— ⚡️ تعديل محتوى العناصر: تقدر بسهولة تغير النص أو الـ HTML اللي موجود جوا أي عنصر باستخدام innerHTML أو textContent. يعني مثلًا لو عندك فقرة فيها نص وعاوز تغير النص ده لما المستخدم يدوس على زرار:

document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("myParagraph").innerHTML = "النص اتغير!";
});

هنا، لما المستخدم يدوس على الزرار اللي ID بتاعه "myButton"، النص اللي في الفقرة اللي ID بتاعها "myParagraph" هيبقى "النص اتغير!". ——— ⚡️ تعديل تنسيق العناصر (CSS): عن طريق الـ DOM، تقدر تعدل في التنسيق (CSS) بتاع أي عنصر بسهولة باستخدام element.style. يعني لو عاوز تغير لون الخلفية لزرار معين لما المستخدم يدوس عليه:

document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("myButton").style.backgroundColor = "red";
});

هنا الزرار هيغير لونه للأحمر بعد ما المستخدم يدوس عليه. ——— ⚡️ حذف عناصر من الصفحة: مش بس بتقدر تضيف أو تعدل، كمان تقدر تحذف عناصر من الصفحة تمامًا باستخدام remove():

document.getElementById("myButton").remove();

الكود ده هيحذف الزرار اللي ID بتاعه "myButton" من الصفحة. ——— 📌 إيه أهمية DOM Manipulation؟ الـ DOM Manipulation بيلعب دور كبير جدًا في مجال الويب، وده لأنه بيخليك تقدر تبني صفحات ويب ديناميكية تستجيب لتفاعل المستخدم في اللحظة. على سبيل المثال، في تطبيقات زي الـ Single Page Applications (SPA) زي اللي معمولين بـ React أو Vue، الـ DOM بيتم تحديثه باستمرار عشان يعرض للمستخدم المحتوى اللي هو محتاجه بدون ما نعمل Reload للصفحة كلها. كمان، لو بتشتغل على تحسين تجربة المستخدم (UX)، هتلاقي إن DOM Manipulation بيساعدك توصل للنتائج اللي أنت عايزها، سواء بتعديل في التنسيق أو بتحريك العناصر على الصفحة بشكل سلس. ملحوظة: رغم إن DOM Manipulation مهم جدًا، إلا أنه ممكن يبقى مكلف شوية لو عملت تعديلات كتير مرة واحدة على الصفحة، عشان كده من الأفضل دايمًا تستخدم تقنيات زي الـ Virtual DOM في مكتبات زي React عشان تحسن الأداء. ——— في النهاية، الـ DOM Manipulation هو الأساس اللي بتبني عليه التفاعل في صفحات الويب، وكل ما فهمته كويس وقدرت تتعامل معاه، كل ما قدرت تبني واجهات مستخدم متقدمة وتفاعلية للمواقع. ✅

DevGuide | LinkedIn 🔻 https://www.linkedin.com/company/dev-guide

الـ OOP 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

البرمجة الكائنية (Object-Oriented Programming أو OOP) هي واحدة من أهم الأساليب في البرمجة وبتعتمد على فكرة تقسيم الكود إلى "كائنات" (Objects). الكائنات دي بتكون زي الوحدات الأساسية اللي بتجمع الخصائص (Attributes) والسلوكيات (Methods) المتعلقة بحاجة معينة في مكان واحد. ——— 📌 الأساسيات في البرمجة الكائنية تشمل: ⚡️ الـ Encapsulation ده يعني إن كل كائن يحتفظ بالبيانات الخاصة بيه ويخفيها عن بقية الكود، بحيث البيانات تبقى محمية ومش أي جزء تاني في البرنامج يقدر يغيرها مباشرة. الكائن يوفر طرق محددة للوصول للبيانات دي أو تعديلها. ⚡️ الـ Inheritance الميزة دي بتسمح لك بإنك تبني كائنات جديدة تعتمد على كائنات موجودة مسبقًا. يعني تقدر تاخد الخصائص والسلوكيات من كائن أساسي وتضيف ليه أو تعدل عليه، وده بيوفر وقت وجهد في كتابة الكود. ⚡️ الـ Polymorphism ده يعني إنك تقدر تستخدم نفس الاسم لدوال (Methods) مختلفة في كائنات مختلفة، لكن كل كائن ينفذها بشكل يناسبه. مثلًا، ممكن يكون عندك دالة اسمها draw في كائنات مختلفة زي Circle و Rectangle، وكل واحدة منهم بتنفيذ دالة draw بطريقة مختلفة. ⚡️ الـ Abstraction التجريد بيسمح لك تبني كائنات تركز على الخصائص المهمة فقط وتخفي التفاصيل المعقدة. يعني الكائنات بتتعامل مع البيانات بشكل مبسط، وبتقدم واجهات واضحة ومحددة للتفاعل مع المستخدم. ——— الـ OOP مش بس بتخلي الكود بتاعك منظم وسهل القراءة، لكن كمان بتساعدك في إدارة المشاريع الكبيرة بشكل أسهل، وبتسهل عليك تعديل وتوسيع الكود بدون ما تأثر على باقي أجزاء البرنامج. 💯 ——— بالتوفيق يا بطل 💪🏻

خلينا ندردش في موضوع مهم جدًا لأي حد بيشتغل في تطوير مواقع الويب أو تطبيقات الموبايل، وهو الـ Pixel Perfect Design. 💯

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

——— https://www.linkedin.com/posts/dev-guide_frontenddeveloper-frontenddevelopment-frontend-activity-7239897420229169152--GYJ

وأنت شغال في مجال السوفتوير، أكيد سمعت عن Docker 🔻

لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍

تعال ندردش شوية عن Docker بطريقة بسيطة ونفهم هو ليه شيء أساسي في تطوير التطبيقات. 💯 https://www.linkedin.com/posts/dev-alisamir_docker-softwaredeveloper-softwaredevelopment-activity-7239690984626806784-sU8K

بالرغم من إن GraphQL ليها مميزات كتير زي المرونة في طلب البيانات وتقليل الـ requests، إلا أنها زي أي تكنولوجي، ليها شوية عيوب لازم تاخد بالك منها. 🔻 - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 ——— تعال أقولك على أهم العيوب اللي ممكن تواجهك: 1. تعقيد في الـ Server-Side في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى في ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي. ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه. ——— 2. الأداء (Performance) بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة. لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب. ——— 3. الـ Over-fetching والـ Under-fetching في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة. ——— 4. الحماية (Security) بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح. على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة. ——— 5. مسار التعلم (Learning Path) الـ GraphQL جديدة نسبيًا مقارنة بـ REST، فلو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بيها بشكل فعّال. كمان الـ tooling بتاع GraphQL لسه مش بنفس درجة النضج اللي موجودة مع REST. ——— 6. عدم التوافق مع الـCaching التقليدي في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching. عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد. ——— في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، ليها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لأ، بناءً على متطلبات التطبيق والـ team اللي شغال معاك. ——— بالتوفيق يا بطل 💪🏻

خلينا نتكلم عن حاجة مهمة جدًا في في مجال السوفتوير وهي GraphQL، ونعرف الفرق بينها وبين REST APIs. 🔻 - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 ——— 📌 إيه هي GraphQL؟ الـ GraphQL عبارة عن طريقة للتعامل مع الـ APIs، وهي تعتبر بديل أو تحسين لـ REST APIs. اللي بيحصل في GraphQL إنك بتقدر تحدد البيانات اللي عاوزها بالضبط من الـ API، من غير ما ترجع كل حاجة موجودة في الـ endpoint زي ما بيحصل في REST. بمعنى تاني، في REST لو بتطلب بيانات المستخدم مثلاً، الـ API بيرجعلك كل حاجة عن المستخدم حتى لو أنت محتاج جزء صغير منها زي الاسم أو الإيميل بس. لكن في GraphQL، أنت اللي بتحدد أنت عاوز إيه بالضبط، يعني لو محتاج الاسم بس، هتاخد الاسم بس وهكذا. ——— 📌 إيه الفرق بين GraphQL وREST؟ ✅ الـ REST بيعتمد على فكرة الـ endpoints، يعني كل endpoint مسؤول عن إرجاع نوع معين من البيانات. لكن في GraphQL، عندك query واحدة تقدر تطلب بيها أي بيانات أنت محتاجها، بغض النظر عن عدد الـ endpoints. ✅ في REST ممكن تبقى محتاج تعمل أكتر من request عشان تجيب البيانات من أكتر من مكان، لكن في GraphQL، تقدر تطلب كل البيانات المطلوبة في request واحدة. ✅ كمان GraphQL بتقلل كمية البيانات اللي بترجع في الـ response، وده لأنه أنت اللي بتحدد إيه اللي محتاجه بالضبط. على عكس REST اللي ممكن يبعت بيانات أكتر من اللي أنت عاوزها. ——— 📌 ليه ممكن تفكر تستخدم GraphQL؟ ⚡️ لو المشروع معقد وفيه علاقات كتير بين البيانات، GraphQL هتساعدك تنظم البيانات وتطلبها بطريقة أسهل. ⚡️ هتقلل عدد الـ requests اللي بتتبعت للسيرفر. ⚡️ هتتحكم أكتر في البيانات اللي بترجع، وده هيحسن أداء التطبيق خصوصًا لو شغال على موبايل أو انترنت بطيء. ——— الـ GraphQL مش بديل كامل عن REST، لكن هي طريقة مختلفة في التعامل مع الـ APIs وبتديك مرونة أكتر في طلب البيانات. لو بتطور تطبيق معقد أو محتاج تحكم أكتر في الـ requests اللي بتبعتها وتستقبلها، يبقى GraphQL ممكن تكون اختيار مناسب ليك. ——— طيب هي ملهاش عيوب؟ الـ GraphQL زيها زي أي تكنولوجي ليها مميزات وليها عيوب، لكن خلينا نذكر العيوب في جزء تاني منفصل. 💯

تركاية فرونت اند ع السريع...⚡️ - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 إزاي تتحكم في أول حرف أو أول سطر في أي فقرة داخل الموقع وتعمل ليهم ستايل مختلف عن باقي الفقرة 💯

CSS Newspaper Subheadings

——— ⚡️ Tutorial Video: https://youtu.be/eSebCtQgnx0 ⚡️ LinkedIn Post: https://www.linkedin.com/posts/dev-alisamir_css-css3-cssstyling-activity-7238785437761212416-V3OP

الـ REST APIs دلوقتي بقت حاجة أساسية في أي مشروع برمجي، سواء كان تطبيق ويب أو موبايل. طيب تعال نفهم واحدة واحدة، يعني إيه أصلاً REST API وليه مهمة؟ ⚡️ أول حاجة كلمة API هي اختصار لـ Application Programming Interface، وده معناه إن الـ API عبارة عن وسيلة بتسمح لتطبيقات مختلفة إنها "تتكلم" مع بعض. 💯 يعني إيه "تتكلم"؟ يعني تطبيق زي تطبيق موبايل أو ويب يقدر يطلب بيانات أو خدمات من سيرفر (الخادم) ويستقبل رد. طب إزاي بنعمل ده؟ هنا بييجي دور الـ REST. ——— كلمة REST اختصار لـ Representational State Transfer، وده نوع من أنواع الـ APIs اللي بيسمح لنا إننا نستخدم بروتوكول HTTP (اللي هو نفس البروتوكول اللي بنستخدمه لما ندخل على أي موقع) علشان نبعت طلبات للسيرفر وناخد ردود منه. 🔻 ——— 📌 إزاي ده بيشتغل بقى؟ الفكرة ببساطة إنك بتبعت حاجة اسمها request للسيرفر. الطلب ده ممكن يكون مثلًا إنك عاوز تجيب بيانات معينة زي قائمة المنتجات، أو إنك عاوز تضيف مستخدم جديد. السيرفر بيشوف الطلب بتاعك، وبيرجعلك response اللي بيكون فيه البيانات المطلوبة. البيانات اللي السيرفر بيرد بيها بتكون في الغالب مكتوبة بصيغة اسمها JSON (JavaScript Object Notation)، ودي طريقة بسيطة ومنظمة علشان التطبيقات تقدر تفهم البيانات بشكل سهل وتشتغل بيها. ——— 📌 ليه بقى REST APIs مهمة؟ ✅ فصل الـ frontend عن الـ backend: بمعنى إن المبرمجين اللي شغالين على تصميم واجهة المستخدم (frontend) يقدروا يشتغلوا بعيد عن اللي شغالين على السيرفر والبيانات (backend). كل واحد بيبعت طلبات للتاني وياخد منه ردود من غير ما يكونوا مرتبطين ببعض بشكل مباشر. ✅ المرونة: الـ REST APIs بتخلي التطبيقات المختلفة (موبايل، ويب، برامج ديسكتوب) تقدر تتكلم مع نفس السيرفر. يعني مثلًا لو عندك موقع ويب وتطبيق موبايل، الاتنين ممكن يستخدموا نفس الـ API عشان يجيبوا نفس البيانات. ✅ لو عاوز تضيف مميزات أو تطور في التطبيق، مش بتحتاج تغير كل حاجة. فقط بتضيف نقاط جديدة (endpoints) في الـ API. ——— فبالتالي، الـ REST APIs بتخلي عملية التواصل بين التطبيقات والسيرفر سهلة ومرنة جدًا، وبتسهل على المبرمجين إنهم يبنوا مشاريع كبيرة بشكل منظم وسهل في التعديل. 🔥

معظم الشركات حاليًا معتمدة على GitLab في إدارة المشاريع الخاصة بها، فالأفضل إنك تتعلم GitLab بالإضافة إلى تعلم Git & GitHub 🔻 لو متعرفش يعني إيه Git خليني أقولك ببساطة كده، Git هو نظام إدارة إصدارات (Version Control System) بيساعدك تتحكم في كل التغييرات اللي بتحصل في الكود بتاعك. يعني لو عملت تعديل غلط، ممكن بكل سهولة ترجع لنسخة قديمة من الكود وتصلح اللي حصل. ——— أما GitHub فهو منصة بترفع عليها الكود بتاعك اللي مستخدم فيه Git عشان تقدر تخزنه أونلاين، وتشتغل عليه مع باقي التيم وكمان توصله من أي جهاز بنفس الأكونت بتاعك. يعني تخيل إنك شغال في مشروع كبير ومعاك تيم، كل واحد ممكن يشتغل على جزء معين من الكود، وبعدين تدمجوا شغلكم كله مع بعض من غير ما يحصل أي لخبطة. ——— ميزة إدارة الإصدارات (Version Control) بقى إنها بتخليك تتابع كل نسخة بتعدلها في الكود، وتقدر تعمل branches يعني نسخ مختلفة من الكود لكل خاصية جديدة بتشتغل عليها، وبعد ما تخلص بتدمجها مع النسخة الأساسية من المشروع. بالنسبة لـ GitLab فهو منصة زي GitHub من حيث الوظيفة والاستخدام. ولكن هتلاقي شكلها مختلف شوية. ——— بالتوفيق يا بطل 💪🏻

وأنت بتكتب كود JavaScript، مهم جدًا تركز على كتابة كود نظيف (Clean Code) وسهل الفهم، مش بس عشان نفسك، لكن كمان عشان أي حد تاني يشتغل على الكود بعدك وبالأخص لو شغال في تيم في شركة أو على مشروع معين. ⚡️ ——— 📌 حاول تخلي أسماء المتغيرات والدوال معبرة: لازم الاسم يكون بيوضح إيه اللي بيحصل، بلاش تختار أسماء زي x وy. مثال: بدل ما تكتب tmp، خلي الاسم زي userAge أو productPrice. ——— 📌 خلي الدالة بتعمل حاجة واحدة بس: كل دالة لازم يبقى ليها وظيفة واضحة محددة، يعني لو عندك دالة بتجيب داتا من API وكمان بتعمل معالجة ليها وتعرضها، فالأفضل إنك تقسمهم لدوال أصغر كل واحدة منهم مسؤولة عن وظيفة واحدة. ——— 📌 قلل من استخدام الـ comments: الكود بتاعك المفروض يبقى واضح لدرجة إنه مش محتاج كومنتات كتير، استخدم الكومنتات بس لما يكون فيه حاجة فعلاً محتاجة توضيح. ——— 📌 استخدم الـ const و let صح: بلاش تستخدم var، ودايمًا خلي بالك إنك تستخدم const للمتغيرات اللي مش هتتغير، وlet للحاجات اللي ممكن تتغير قيمتها. ——— 📌 رتب الكود وخليه مقروء: خلي فيه مسافات بين الأسطر واهتم بتنسيق الكود، استخدام أدوات زي Prettier ممكن يساعدك في الموضوع ده. ——— لو مهتم أكثر بالـ Clean Code في JavaScript بنصحك تشوف الموقع ده 🔻 https://blog.abdelhadi.org/clean-code-javascript-in-arabic ——— بالتوفيق يا بطل 💪🏻

تركاية فرونت اند ع السريع...⚡️ - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 لو زهقت من أشكال الـ list التقليدية في الـ CSS، تعال أقولك على حاجة عبقرية تقدر من خلالها تعمل الـ list style الخاصة بيك وتتحكم في شكل الأرقام أو الرموز بكل سهولة💡 CSS Custom List Styles 🔻 ——— ⚡️ Tutorial Video: https://youtu.be/wZ4TdxtvLdQ ⚡️ LinkedIn Post: https://www.linkedin.com/posts/dev-alisamir_css-cssstyling-frontendabrtips-activity-7238241222073479169-CQpA ——— بالتوفيق يا بطل 💪🏻

السؤال اللي هتقابله في أي انترفيو JavaScript Learn Closures In 13 Minutes https://youtu.be/47SPG8TvUXA

Throttling & Debouncing in JavaScript: A Beginner's Guide ⚡️ - When using JavaScript, excessive event triggers can slow down your application. For instance, a user resizing the browser window or typing in a search bar can cause events to fire repeatedly in a short time, impacting app performance. - This is where throttling and debouncing come to the rescue. They help you manage how often your functions are called when dealing with events that fire too often. ——— https://dev.to/alisamir/throttling-debouncing-in-javascript-a-beginners-guide-3j7n

لو مهتم بتطوير تطبيقات الويب بطريقة أفضل 💯 - لا تنسوا أهلنا في فلــسطــين وفي ســوريا وفي الســودان وفي اليــمن وفي كل دول العالم من المسلمين من الدعاء. 🤍 https://www.linkedin.com/posts/dev-alisamir_javascript-react-nextjs-activity-7237809089198608385-NG4a ——— بالتوفيق يا بطل 💪🏻