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

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

———

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

الـ OOP 🔻

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

البرمجة الكائنية (Object-Oriented Programming أو OOP) هي واحدة من أهم الأساليب في البرمجة وبتعتمد على فكرة تقسيم الكود إلى "كائنات" (Objects).

الكائنات دي بتكون زي الوحدات الأساسية اللي بتجمع الخصائص (Attributes) والسلوكيات (Methods) المتعلقة بحاجة معينة في مكان واحد.

———

📌 الأساسيات في البرمجة الكائنية تشمل:

⚡️ الـ Encapsulation

ده يعني إن كل كائن يحتفظ بالبيانات الخاصة بيه ويخفيها عن بقية الكود، بحيث البيانات تبقى محمية ومش أي جزء تاني في البرنامج يقدر يغيرها مباشرة. الكائن يوفر طرق محددة للوصول للبيانات دي أو تعديلها.


⚡️ الـ Inheritance

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


⚡️ الـ Polymorphism

ده يعني إنك تقدر تستخدم نفس الاسم لدوال (Methods) مختلفة في كائنات مختلفة، لكن كل كائن ينفذها بشكل يناسبه.

مثلًا، ممكن يكون عندك دالة اسمها draw في كائنات مختلفة زي Circle و Rectangle، وكل واحدة منهم بتنفيذ دالة draw بطريقة مختلفة.


⚡️ الـ Abstraction

التجريد بيسمح لك تبني كائنات تركز على الخصائص المهمة فقط وتخفي التفاصيل المعقدة. يعني الكائنات بتتعامل مع البيانات بشكل مبسط، وبتقدم واجهات واضحة ومحددة للتفاعل مع المستخدم.

———

الـ OOP مش بس بتخلي الكود بتاعك منظم وسهل القراءة، لكن كمان بتساعدك في إدارة المشاريع الكبيرة بشكل أسهل، وبتسهل عليك تعديل وتوسيع الكود بدون ما تأثر على باقي أجزاء البرنامج. 💯

———

بالتوفيق يا بطل 💪🏻

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

الـ 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 هو الأساس اللي بتبني عليه التفاعل في صفحات الويب، وكل ما فهمته كويس وقدرت تتعامل معاه، كل ما قدرت تبني واجهات مستخدم متقدمة وتفاعلية للمواقع. ✅

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

الـ 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 هيوفر لك وقت كبير وهيجنبك كتير من الأخطاء اللي ممكن تحصل لو اشتغلت على الكود بشكل غير منظم. كل الأوامر اللي فوق دي هي الأساسيات اللي هتساعدك تبدأ، وطبعًا فيه أوامر أكتر متقدمة ممكن تتعلمها بعد كده. ✅

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

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

الداتابيز (Database) هي جزء أساسي في أي سوفتوير سواء موقع أو تطبيق، لأنها بتخزن وبتتعامل مع البيانات اللي بيستخدمها التطبيق.

https://www.linkedin.com/posts/dev-alisamir_database-sql-nosql-activity-7240785181274451968-jp_6

الـ 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 هيساعدك في إدارة الأكواد الطويلة والمعقدة بسهولة.

———

بالتوفيق يا بطل 💪🏻

سناك فرونت اند ع السريع...⚡️

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

تحسين الأداء (Performance) عنصر مهم جدًا في نجاح أي موقع. لما الموقع يكون أسرع وأكثر استجابة، هتلاقي تجربة المستخدم أحسن وترتيب الموقع في محركات البحث أعلى. 💯

———

⚡️ Tutorial Video:
https://youtu.be/GlR0lzwDKD8

Proven Tips to Optimize Performance in Your Next.js App ⚡️

- Optimizing performance in web applications is crucial for delivering fast, smooth user experiences.

- With Next.js, a powerful React framework, you can leverage many built-in features to enhance the speed and efficiency of your app.

https://dev.to/alisamir/proven-tips-to-optimize-performance-in-your-nextjs-app-lpc

الفرق بين useMemo و useCallback في React 🔻

باختصار الفرق في إيه اللي بيتم تحسينه.


📌 الـ useMemo:

- بتحفظ نتيجة الدالة (زي قيمة أو حساب معين) عشان مش كل مرة يتم حسابه لما الصفحة يتعملها إعادة تحميل.

- مفيدة لو عندك عملية حسابية تقيلة وعايزها تتنفذ بس لما حاجات معينة تتغير.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

هنا الدالة computeExpensiveValue هتشتغل بس لو a أو b اتغيروا.

———

📌 الـ useCallback:

- بتحفظ الدالة نفسها عشان مش كل مرة يتم إنشائها لما الصفحة يحصلها إعادة تحميل، وده بيساعد في منع إعادة تحميل الـ Components الفرعية اللي معتمدة على الدالة دي.

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

الدالة هيتعملها إعادة إنشاء بس لو a أو b اتغيروا.

———

بمعنى أبسط:

⚡️ الـ useMemo بتحفظ القيم.
⚡️ الـ useCallback بتحفظ الدوال.

———

المقال ده موضح الفرق بالتفصيل:
https://www.freecodecamp.org/news/difference-between-usememo-and-usecallback-hooks

الحل هو التطبيق العملي...💯

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

في الـ Frontend، ممكن تبدأ بمشاريع بسيطة زي صفحة ويب شخصية أو آلة حاسبة، وبعدين تطور نفسك بمشاريع زي تطبيق إدارة مهام أو موقع إخباري بواجهة احترافية.

أما في الـ Backend، ابدأ بمشاريع زي API بسيطة، ومع الوقت اشتغل على حاجات زي نظام إدارة مستخدمين أو تطبيق شات متكامل.

———

https://www.linkedin.com/posts/dev-guide_frontend-backend-frontenddeveloper-activity-7241452113187274752-llWk

عايز تفهم الـ Hooks في React بشكل واضح وبسيط؟

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


في كورس React Hooks Simplified هتتعلم كل حاجة عن الـ Hooks الأساسية اللي هتحتاجها في تطوير أي تطبيق بـ React. وهتتعلم إزاي تعمل Custom Hook خاصة بيك ✅

https://www.linkedin.com/posts/dev-alisamir_react-reactdeveloper-reactjs-activity-7241493457658105856-Ce_4

The Most Important Skill You Never Learned 💯

- Basic Debugging Tips
- How To Use A Debugger
- Breakpoint Deep Dive
- Watch Tab
- VSCode Debugger Setup/Features
- Network Tab
- Performance Tab
- Application Tab
- Lighthouse Tab

https://youtu.be/l8pe_MSX4Lc

An Interactive Guide to CSS Container Queries 🔻

- Learn how to use CSS container queries today.

https://ishadeed.com/article/css-container-query-guide

JavaScript: 5 Useful Web APIs 🔥

https://www.instagram.com/p/DABMND6iraN/

💡 Bye Bye Try/Catch, Meet New ECMAScript Operator 💡

Benefits of using ?= operator instead of try/catch:

✅ Simplified Error Handling: Streamline error management by eliminating the need for try-catch blocks.

✅ Enhanced Readability: Improve code clarity by reducing nesting and making error handling flow more intuitive.

✅ Consistency Across APIs: Establish a uniform approach to error handling across various APIs, ensuring predictable behavior.

✅ Improved Security: Reduce the risk of overlooking error handling, thereby enhancing the overall security of the code.

رحلة البحث عن وظيفة كـ مهندس برمجيات 🔻

رحلة البحث عن وظيفة في مجال البرمجة مش مقتصرة فقط على إنك تدخل على أي منصة وظائف سواء LinkedIn أو Indeed أو غيرهم وتفضل تبعت الـ CV في أي وظيفة تقابلك، وفي الآخر هتكتشف إن مفيش رد خالص ولا حتى بالرفض!

https://www.linkedin.com/posts/dev-alisamir_softwareengineer-softwareengineering-softwaredeveloper-activity-7242215176932868096-96dV