<المبرمج السوري/>

مشروع سقيا الماء في غزة أفضل الصدقة سقيا الماء كما أخبرنا رسولنا الكريم ﷺ فمن يريد أن يقدم ولو شيئاً يسيرا لأحبابنا في غزة فلا يتوانى، فأقل القليل قد يكون أجره عند الله عظيم. للمشاركة من داخل سوريا تواصلو مع شباب الخير في مبادرة تحدي الخير في غزة المباركة: https://www.instagram.com/kha_irchallenge

مشروع سقيا الماء في غزة أفضل الصدقة سقيا الماء كما أخبرنا رسولنا الكريم ﷺ فمن يريد أن يقدم ولو شيئاً يسيرا لأحبابنا في غزة فلا يتوانى، فأقل القليل قد يكون أجره عند الله عظيم. للمشاركة من داخل سوريا تواصلو مع شباب الخير في مبادرة تحدي الخير في غزة المباركة: https://www.instagram.com/kha_irchallenge

خلّي الـ Debugging سلاحك السري! 🛠️ 🔹 الخطوة 1: لا تخمّن… استخدم الـ Console! كتير مطورين مبتدئين بيضيعوا وقت وهم يحزروا وين المشكلة، بينما أبسط شي ممكن يعملوه: console.log("المتغير:", myVariable); ✅ لما تستخدم console.log() صح، بتصير تعرف شو عم يصير بالكود خطوة بخطوة. ✳️ نصيحة: لا تحط مليون لوج… خليك ذكي وحدد مكان الشك. — 💡 شو أكتر شي بتستخدمو لما تواجهك مشكلة؟ تابعنا لتعرف كيف تصير محترف Debugging! ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

سمعت مرة #نصيحة من #سينيور - مقابلات العمل: ما تجاوب بسرعة! أكتر غلط بيعمله الجونيور؟ إنه أول ما يسمع السؤال، بيرد دغري… حتى لو مو متأكد. ✅ خد نفس، فكّر بصوت عالي: "ممم السؤال عن كيف بيشتغل الـ useEffect؟ طيب أنا بعرف إنو…" بيبين إنك بتفكر، مش بس حافظ. ✳️ المقابِل ما بدو الجواب الصح بس، بدو يشوف كيف بتفكر وتحلل. — 💡 تذكّر: الطريقة اللي بتفكر فيها أهم من الجواب النهائي! تابع السلسلة لتعرف كيف تجهز للمقابلة بطريقة زكية مو عشوائية

كود نظيف... شغل محترف! ✨ 🔹 الخطوة 1: سمّي متغيراتك كأنها بتحكي! ما بقى تكتب متغيرات متل: let x = true; ✖️هاد اسمو "كود غامض"... بعد أسبوع، حتى إنت ما رح تعرف شو كان قصدو! ✅ بدل هيك، خليك واضح: let isUserLoggedIn = true; ✔️ الكود صار بيشرح حالو لحالو، وهي أول خطوة إنك تكتب كود بيقروه غيرك بسهولة. — 💡 شو رأيك؟ جرب تحسّن تسمياتك، وشوف الفرق! تابعنا يومياً لتتعلم كيف تكتب كود بيحترم حالو ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

سؤال اليوم من أسئلة مقابلات الفرونت إند: ليش لازم نستخدم key لما نعمل .map() بريأكت؟ يعني متل هيك: {items.map(item => ( <li key={item.id}>{item.name}</li> ))} ✅ الجواب ببساطة: الـ key بتساعد React تميّز بين العناصر وقت تعيد رسم الواجهة، وبتقلل من الأخطاء وتحسّن الأداء. بدون key، ريأكت ممكن "تلخبط" بين العناصر وتعيد رسم أشياء ما تغيّرت أساساً!

من #جونيور ل #ميد ليفل بالفرونت إند 🚀 🔹 الخطوة 3: فكّر بالـ Features، مو بس بالصفحات! الجونيور عادةً بفكّر بالموقع كـ "صفحة رئيسية، صفحة تواصل، صفحة منتجات..." بس الميد؟ بيفكّر بالموقع كمجموعة ميزات (Features) ومكوّنات (Components) بتنعاد وتتركّب مع بعض! ✅ يعني بدل ما تكتب كود زر جديد بكل صفحة، بتعمل زر عام (Reusable Button Component) ✅ بدل ما تبني كل مودال من الصفر، بتعمل مودال واحد وتغيّر المحتوى بداخله بس ليش هالشي مهم؟ – لأنو بيعطي مشروعك هيكلية نظيفة – بتقدر ترجع لأي جزء وتعدّله بسهولة – وبصير فريقك يفهم الكود بسرعة، خصوصًا بالشغل الجماعي مثال صغير: عندك صفحة فيها أكتر من منتج، وكل منتج فيه: – صورة – اسم – زر "أضف للسلة" الميد ليفل ما بيعملهم 10 مرات! بيعمل ProductCard Component واحد وبيعطيه البيانات المطلوبة. نصيحة اليوم: قبل ما تكتب كود جديد، اسأل حالك: "هل فيني استخدم شي كتبته قبل؟ أو أعمله بطريقة تنعاد قدّام ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

من #جونيور ل #ميد ليفل بالفرونت إند 🚀 🔹 الخطوة 2: فكّر بالـ Features، مو بس بالصفحات! الجونيور عادةً بفكّر بالموقع كـ "صفحة رئيسية، صفحة تواصل، صفحة منتجات..." بس الميد؟ بيفكّر بالموقع كمجموعة ميزات (Features) ومكوّنات (Components) بتنعاد وتتركّب مع بعض! ✅ يعني بدل ما تكتب كود زر جديد بكل صفحة، بتعمل زر عام (Reusable Button Component) ✅ بدل ما تبني كل مودال من الصفر، بتعمل مودال واحد وتغيّر المحتوى بداخله بس ليش هالشي مهم؟ – لأنو بيعطي مشروعك هيكلية نظيفة – بتقدر ترجع لأي جزء وتعدّله بسهولة – وبصير فريقك يفهم الكود بسرعة، خصوصًا بالشغل الجماعي مثال صغير: عندك صفحة فيها أكتر من منتج، وكل منتج فيه: – صورة – اسم – زر "أضف للسلة" الميد ليفل ما بيعملهم 10 مرات! بيعمل ProductCard Component واحد وبيعطيه البيانات المطلوبة. نصيحة اليوم: قبل ما تكتب كود جديد، اسأل حالك: "هل فيني استخدم شي كتبته قبل؟ أو أعمله بطريقة تنعاد قدّام؟" — تحبي بكرا نتابع بخطوة تانية؟ أو نغوص أكتر بهاي الفكرة؟

إذا حابب تفوت عالم الـ Frontend، في شوية مصطلحات لازم تكون سمعان فيها عالأقل، خصوصي لو كنت لسه بالبدايات: HTML: Tag: وسم متل <p> أو <a> Element: العنصر الكامل (الوسم والمحتوى) Attribute: خصائص الوسم، متل href للرابط أو src للصورة Semantic HTML: عناصر بتوصف معناها لحالها متل <header> و<footer> CSS: Selector: كيف بتحدد العنصر (مثل .btn أو #header) Property: خاصية بتتحكم بشكل العنصر متل color, margin Flexbox / Grid: أنظمة ترتيب العناصر Media Queries: لتخلي التصميم متجاوب مع الشاشات الصغيرة والكبيرة JavaScript: Variable: متغير (بيخزن بيانات) Function: دالة بتناديها لما بدك تنفذ شغلة Event: حدث متل الضغط أو التحويم (click, hover) DOM: الشي اللي بيسمحلك تتفاعل مع عناصر الصفحة وكم مصطلح مهم بالشغل: Responsive Design: موقع بيمشي عكل الشاشات Accessibility (a11y): إنك تراعي الناس اللي عندن صعوبات استخدام Performance: سرعة واستجابة الموقع Component: جزء مستقل من الواجهة (كتير بتشوفيه بريآكت أو فيو) Framework: متل React, Vue Library: مكتبة جاهزة بتريحك، متل Tailwind أو jQuery ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

💡 بتعرف إنك فيك تطلع "بالونة شرح" عالسريع بس باستخدام HTML؟ يعني متل التولتيب (Tooltip) يلي بيطلع لما توقف الماوس عزر، بدون ما تكتب ولا سطر JS! ✅ جرب هيك: تأكيد بس توقف الماوس عالزر، بيطلعلك شرح صغير فوقه! مفيدة إذا عندك أيقونات أو أزرار مو واضحة، وبدك تشرح للمستخدم شو بتعمل.

💡 بتعرف إنك فيك تطلع "بالونة شرح" عالسريع بس باستخدام HTML؟ يعني متل التولتيب (Tooltip) يلي بيطلع لما توقف الماوس عزر، بدون ما تكتب ولا سطر JS! ✅ جرب هيك: تأكيد بس توقف الماوس عالزر، بيطلعلك شرح صغير فوقه! مفيدة إذا عندك أيقونات أو أزرار مو واضحة، وبدك تشرح للمستخدم شو بتعمل.

💡 بتعرف إنك فيك تطلع "بالونة شرح" عالسريع بس باستخدام HTML؟ يعني متل التولتيب (Tooltip) يلي بيطلع لما توقف الماوس عزر، بدون ما تكتب ولا سطر JS! ✅ جرب هيك: تأكيد بس توقف الماوس عالزر، بيطلعلك شرح صغير فوقه! مفيدة إذا عندك أيقونات أو أزرار مو واضحة، وبدك تشرح للمستخدم شو بتعمل. بدك شغلات أكتر من هالنوع؟

😁😁

🔹 مثلاً، عندك تطبيق To-Do List، والـ DOM فيه هيك:

• مهمة 1
• مهمة 2
• مهمة 3

لو أضفت مهمة جديدة، React ما بيعيد تحميل كل القائمة! بدل هيك: 1️⃣ بيعمل نسخة جديدة من Virtual DOM. 2️⃣ بيقارنها مع النسخة القديمة، وبيلاحظ إنه فقط عنصر

الجديد هو يلي تغير. 3️⃣ بيرسل تعديل بسيط للـ Real DOM فقط بهالمكون الجديد، بدل ما يعيد تحميل القائمة كلها. ✅ النتيجة؟ تحديث أسرع، وأداء أفضل، وبدون إعادة تحميل غير ضرورية! 🚀 💡 بكلمات بسيطة: React ما بتحدّث كل شي، بس بتغيّر العناصر يلي اتعدلت أو انضافت أو انحذفت! 🥳

سؤال لمقابلات الفرونت إند 🎯: 🧐 كيف يعمل الـ Virtual DOM في React؟ وليش هو أسرع من الـ DOM العادي؟ 🔹 الإجابة: الـ Virtual DOM هو نسخة خفيفة من الـ DOM الفعلي، مخزّنة في الذاكرة. لما يصير تغيير بالمكونات، React ما بتحدّث الـ DOM مباشرة، بل بتعمل الآتي: 1️⃣ تُنشئ نسخة جديدة من الـ Virtual DOM. 2️⃣ تقارنها مع النسخة السابقة (Diffing Algorithm). 3️⃣ بتحدد التغييرات الضرورية فقط. 4️⃣ بتطبّق التعديلات على الـ DOM الحقيقي بأقل تحديثات ممكنة (Reconciliation). ✅ ليش أسرع؟ لأنه بدل ما يعيد تحميل كل الصفحة، بيعدّل بس العناصر المتغيرة، مما بيحسّن الأداء بشكل كبير. 💬 كنت بتعرف هالآلية ولا جديدة عليك؟ 😁 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

من #جونيور ل #ميد ليفل بالفرونت إند 🚀 🔹 الخطوة 2: فكّر كمطور، مو بس كاتب كود! الجونيور همّو يشغّل الكود بأي طريقة، بس الميد ليفل بيركّز على جودة الكود وقابليته للتطوير. كيف بتوصل لهالمستوى؟ 👇 ✅ 1. اكتب كود مرتب ونظيف (Clean Code) سَمّي المتغيرات والدوال بأسامي واضحة وسهلة الفهم. خلي كل دالة تعمل شغلة وحدة بس، لا تكبّرها عالفاضي! استخدم map, filter, reduce بدل for loops الطويلة يلي بتعجّق الكود. ✅ 2. افهم كيف المتصفح بيعرض الصفحة (Rendering & Performance) ليش أحيانًا الصفحة بتصير بطيئة؟ شو علاقة Repaint و Reflow؟ كيف بيشتغل الـ Virtual DOM وليش React بتستخدمو؟ كيف بتسرّع موقعك؟ (Lazy Loading, Code Splitting, Caching) ✅ 3. تعلّم Git بطريقة أعمق استخدم git rebase بدل merge حتى يكون عندك commit history نظيف. إذا بدك تحفظ تغييراتك بدون commit، جرّب git stash. افهم الفرق بين origin و upstream، خصوصي إذا عم تشتغل بفريق. 📌 الميد ليفل ما بيكتب أي كود وخلص، بيكتب كود نظيف، سريع، وقابل للتطوير! 💬 بأي مهارة حاسس حالك بدك تطوّر أكتر؟ 🚀 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

من جونيور لميد ليفل بالفرونت إند 🚀 🔹 الخطوة 2: فكّر كمطور، مو بس كاتب كود! الجونيور همّو يشغّل الكود بأي طريقة، بس الميد ليفل بيركّز على جودة الكود وقابليته للتطوير. كيف بتوصل لهالمستوى؟ 👇 ✅ 1. اكتب كود مرتب ونظيف (Clean Code) سَمّي المتغيرات والدوال بأسامي واضحة وسهلة الفهم. خلي كل دالة تعمل شغلة وحدة بس، لا تكبّرها عالفاضي! استخدم map, filter, reduce بدل for loops الطويلة يلي بتعجّق الكود. ✅ 2. افهم كيف المتصفح بيعرض الصفحة (Rendering & Performance) ليش أحيانًا الصفحة بتصير بطيئة؟ شو علاقة Repaint و Reflow؟ كيف بيشتغل الـ Virtual DOM وليش React بتستخدمو؟ كيف بتسرّع موقعك؟ (Lazy Loading, Code Splitting, Caching) ✅ 3. تعلّم Git بطريقة أعمق استخدم git rebase بدل merge حتى يكون عندك commit history نظيف. إذا بدك تحفظ تغييراتك بدون commit، جرّب git stash. افهم الفرق بين origin و upstream، خصوصي إذا عم تشتغل بفريق. 📌 الميد ليفل ما بيكتب أي كود وخلاص، بيكتب كود نظيف، سريع، وقابل للتطوير! 💬 بأي مهارة حاسس حالك بدك تطوّر أكتر؟ 🚀 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

من جونيور لميد ليفل بالفرونت إند 🚀 🔹 الخطوة 2: فكّر كمطور، مو بس كاتب كود! الجونيور همّو يشغّل الكود بأي طريقة، بس الميد ليفل بيركّز على جودة الكود وقابليته للتطوير. كيف بتوصل لهالمستوى؟ 👇 ✅ 1. اكتب كود مرتب ونضيف (Clean Code) سَمّي المتغيرات والدوال بأسامي واضحة وسهلة الفهم. خلي كل دالة تعمل شغلة وحدة بس، لا تكبّرها عالفاضي! استخدم map, filter, reduce بدل for loops الطويلة يلي بتعجّق الكود. ✅ 2. افهم كيف المتصفح بيعرض الصفحة (Rendering & Performance) ليش أحيانًا الصفحة بتصير بطيئة؟ شو علاقة Repaint و Reflow؟ كيف بيشتغل الـ Virtual DOM وليش React بتستخدمو؟ كيف بتسرّع موقعك؟ (Lazy Loading, Code Splitting, Caching) ✅ 3. تعلّم Git بطريقة أعمق استخدم git rebase بدل merge حتى يكون عندك commit history نظيف. إذا بدك تحفظ تغييراتك بدون commit، جرّب git stash. افهم الفرق بين origin و upstream، خصوصي إذا عم تشتغل بفريق. ✅ 4. لا تهرب من الـ Debugging! بدل console.log() جرّب console.table() لترتيب البيانات بشكل أوضح. استخدم Breakpoints بالـ DevTools بدل ما تعبي الكود console.log(). لا تتجاهل رسائل الخطأ، غالبًا هي بتعطيك الحل! 📌 الميد ليفل ما بيكتب أي كود وخلاص، بيكتب كود نظيف، سريع، وقابل للتطوير! 💬 بأي مهارة حاسس حالك بدك تطوّر أكتر؟ 🚀

💡 معلومة اليوم في الفرونت إند "هل CSS أسرع من JavaScript في التفاعلات؟ 🤔" ✅ نعم! التفاعلات يلي بتنعمل بالـ CSS (مثل الـ :hover, :focus, :active, و الـ transition) أسرع من التفاعلات يلي بتتم بالـ JavaScript، لأن المتصفح بيقدر يعالجها مباشرة بدون الحاجة لمحرك JavaScript. 🔹 ليش هاد مهم؟ الأنيميشن يلي بتنعمل بالـ CSS بيكون أخف على الأداء وما بيستهلك كتير من CPU. بيشتغل بشكل سلس حتى لو الموقع فيه حمل كبير. المتصفحات بتحسن أدائه تلقائيًا باستخدام GPU Acceleration. 📌 النصيحة: قبل ما تستخدم JavaScript لأي تأثير بصري، جرّب إذا فيك تنفذه بالـ CSS أولًا! 🚀 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

💡 CSS أسرع من JavaScript بالحركات؟ 🤔 أكيد! الأنيميشن يلي بتنعمل بالـ CSS (متل :hover, :focus, transition) بتشتغل أسرع وأخف من يلي بتنعمل بالـ JavaScript، لأن المتصفح بيعالجها مباشرة بدون تأخير. ✅ ليش CSS خيار أفضل؟ أداء أسرع وما بيضغط عالجهاز. حركات سلسة حتى لو الموقع فيه عناصر كتيرة. المتصفح بيستخدم كرت الشاشة تلقائيًا لتحسين السرعة. 📌 النصيحة: إذا بدك أنيميشن بسيط وسريع، استخدم CSS. بس إذا كان الأنيميشن معقّد وبدك تحكم كامل، وقتها JavaScript بيكون خيارك! 🚀 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻