Mohamed Salih

  • Home
  • Mohamed Salih

Mohamed Salih Web developer |
مبرمج شغوف 💙
أبني، أتعلم، وأتطور كل يوم
رحلتي في البرمجة بدأت… والقادم أجمل 🚀

الليلة جاي اتكلم عن معاناتي مع تعلم react 😅انا كنت من البداية راسم الخطة الحامشي عليها:اساسيات البرمجة → وبعداك اساسيات ...
08/04/2026

الليلة جاي اتكلم عن معاناتي مع تعلم react 😅

انا كنت من البداية راسم الخطة الحامشي عليها:
اساسيات البرمجة → وبعداك اساسيات الويب → وبعديها اخش في react وكدا

المهم عصرت نفسي في JavaScript لمن عيني طلعت 😅
وبعديها عملت لي كم مشاريع كدا عشان اطبق عملي شوية

وبعداك بديت ياهو اخد فكرة عن react هو شنو وكدا
وبعداك بديت افتش لي عن كورس كدا لاساسيات رياكت

مشيت الdocumentation ويعني فهمت
بس كنت داير شرح اكثر وكدا
وفتشت لي كورس ولقيت واحد وقلت الحمد لله ح ابدا طوالي

وبديت الكورس كدا…
تاني يوم شاشة الابتوب اتكسرت 😅😅
المهم بي جاي بي جاي جبت لي شاشة كمبيوتر عشان اجاسف بيها وكدا

وتاني رجعت للكورس
ومشيت فيهو شوية كدا…
وبرضو بعد فترة كدا الشبكة كان شالوها 🤣🤣
(دا ايام كان بيقطعو الشبكة داك)

المهم قدر الاتعلمتو في الفترة ديك بقيت اطبق عليهو وكدا
وبعد فترة الشبكة جات قلت الحمد لله 🙏
ورجعت للكورس
وبرضو بعد شوية كدا… الكيبورد خرب 🤣🤣

قلت في نفسي:
والله الشغلة دي بعد دا فيها إن 😂 المهم مشيت في نفس اليوم جبت كيبورد وجيت قلت بس اشوف نهاية الموضوع دا شنو وبعداك جيت واصلت الكورس في امان الله لمن مبسوط واي شي 😅

المهم بعد كم يوم كدا حصل تدوين عشوائي تدوين شديد وكان قريب شديد من البيت وضرب سلك الكهرباء الجمبنا والكهرباء فصلت من الحلة ٣ يوم 😭 والتدوين شغال الوقت كلو 🚨

المهم بعد الوضع راق شوية وصلحو الكهرباء قلت والله الشغلة دي م مطمنة 😅 هسي الواحد يرجع لي الكورس تقوم تحصل كارثة تاني

بس اتوكلت علي الله ورجعت تاني 🙏 ومشيت كويس المرة دي خلصت الاساسيات حقت رياكت 🎉 ولمن عملت مشروع والدنيا ماشة فل فل 😎

وبعداك بديت ياهو اطبق عملي واجيب مشاريع من frontend mentor واعملها بي react
وشوية شوية بديت اتعود عليهو وكدا 😅
والكوارث الحمد لله وقفت 😂🤲

وبقيت بعداك كل م اجي ابدا لي مشروع react بقول:
ربنا يجيب العواقب سليمة 😂😂

.forEach😅🤙---الـ "forEach" دي عبارة عن method بتستخدم مع الـ arrays وظيفتها الأساسية إنها تمر على كل عنصر جوة الـ array ...
07/04/2026

.forEach😅🤙

---
الـ "forEach" دي عبارة عن method بتستخدم مع الـ arrays وظيفتها الأساسية إنها تمر على كل عنصر جوة الـ array وتنفذ عليه كود معين

مثال بسيط

const numbers = [10, 20, 30];

numbers.forEach(num => {
console.log(num);
});

الناتج:
10
20
30

👉 هنا نحنا بس مرّينا على العناصر وطبعناها

مثال عملي (real-life):

const users = [
{ name: "Mohamed", age: 22 },
{ name: "Amal", age: 22 }
];
// الناس م تركز في الnames 👀😅

users.forEach(user => {
console.log(`Hello ${user.name}`);
});
هنا استخدمنا forEach لتنفيذ logic علي كل عنصر وهو طباعة الاسم وقبله hello
📌
أهم نقطة لازم تفهمها انو forEach ما بترجع قيمة لاكنها بتنفذ كود علي كل عنصر (زي الطباعة او اي logic تاني)

ما بتديك array جديدة وما بتنفع في transformation، الmap بتعمل كدا لو متذكرين

طيب نستخدمها في شنو؟ 🤔
✅ داير تنفذ كود بس (side effects)
زي:

- "console.log"
- تعديل DOM
- API calls
- تحديث variable خارجي

مثال على side effect

let sum = 0;

[1, 2, 3].forEach(num => {
sum += num;
});

console.log(sum); // 6

👉 هنا عدلنا متغير خارجي

---

الفرق بينها وبين map

- "forEach" → تنفيذ كود فقط
- "map" → تحويل البيانات وإرجاع array جديدة

المرة الجاية؟
"filter" 👀🔥




أحيانًا استخدامك للـ AI بخلّيك تنسى الأساسيات… ودي حاجة مفروض ما نفرّط فيها أبداً والله الواحد من فترة لي فترة مفروض يرا...
04/04/2026

أحيانًا استخدامك للـ AI بخلّيك تنسى الأساسيات… ودي حاجة مفروض ما نفرّط فيها أبداً
والله الواحد من فترة لي فترة مفروض يراجع الأساسيات ويشوف الحاصل فيها شنو، عشان لو ضاعت منك… أمورك بتجاط شديد 😅
فعشان كدا اليوم قلت أراجع وأشارككم معاي
اليوم حنتكلم عن map في JavaScript.

خلينا نبسّطها كدا…
الـ map دي function بتستخدمها مع الـ arrays، وظيفتها إنك تمر على كل عنصر جوة الـ array وتعمل عليه تعديل، وفي النهاية ترجع array جديدة.

بمعنى تاني:
بتاخد البيانات، تعدّلها، وترجع نسخة جديدة منها
الحاجة المهمة جداً هنا إنو map ما بتغيّر الـ array الأصلية، بتخليها زي ما هي وتديك واحدة جديدة

مثال بسيط:

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
الناتج [2, 4, 6, 8]
هنا نحنا مرّينا على كل رقم وضربناه في 2، والنتيجة كانت array جديدة فيها القيم بعد التعديل

مثال عملي أكتر:
JavaScript
const users = [
{ name: "Ahmed", age: 20 },
{ name: "Sara", age: 22 }
];

const names = users.map(user => user.name);

console.log(names);
البيظهر معاك ["Ahmed", "Sara"]

في المثال دا، نحنا أخدنا بس الأسماء من كل object جوة الـ array

طيب ليه تستخدم map؟
لأنها بتخلي كودك أنضف وأسهل في القراءة، وبتختصر عليك loops كتيرة، وكمان مفيدة جداً في شغل الـ frontend خصوصاً لما تكون بتعرض بيانات

وبرضو في نقطة مهمة:
لو داير تعدّل علي قيمة داخل array وترجع قيمة جديدة استخدم map.

لكن لو داير بس تمر على العناصر بدون ما ترجع حاجة استخدم forEach ودي ح نراجعها المرة الجاية انشاء الله

في النهاية، حاول ترجع للأساسيات دي كل فترة… لأنو أي حاجة متقدمة في JavaScript مبنية عليها

لو جاك تاسك في الشغل وقالوا ليك:“عاوزين نعرض بيانات من API في الموقع” 👨‍💻إنت كـ frontend developer…أول حاجة بتعمل شنو؟وش...
03/04/2026

لو جاك تاسك في الشغل وقالوا ليك:
“عاوزين نعرض بيانات من API في الموقع” 👨‍💻

إنت كـ frontend developer…
أول حاجة بتعمل شنو؟
وشنو الخطوات الحتمشي بيها عشان تنفذ المطلوب دا؟

دي واحدة من المهام الأساسية
الحتقابلك في أي شغل كـ frontend

لكن الفرق الحقيقي ما في إنك “تكتب fetch”
الفرق في طريقة تفكيرك قبل ما تكتب أي سطر كود ✅

لو إنت فعلاً داير تطور نفسك…
التحدي دا ليك 👇

اكتب في التعليقات كيف ح تمشي خطوة خطوة





01/04/2026

اليومين دي العالم التقني علي صفيح من نار 😅🔥
قبل كم يوم كان موضوع تسريب Claude code وامس كمان برضو الصباح الباحثين الأمنيين اكتشفوا حاجة خطيرة في مكتبة Axios

(وهي واحدة من أشهر مكتبات الـ Node.js والـ Frontend للتعامل مع الـ API)

لقوا إضافة جديدة اسمها plain-crypto
والغريبة… الإضافة دي ما كانت موجودة نهائي في الإصدارات القديمة وده خلاهم يشكوا إنو في Backdoor ممكن يكون اتزرع في المكتبة
يعني باختصار كدا في تهكير في الموضوع

المكتبة المشبوهة plain-crypto-js بتعمل شنو؟

بتفك تشفير أكواد خفية وقت التشغيل (runtime)
بتستدعي modules زي fs و os و execSync بطريقة ذكية عشان تهرب من التحليل
بتشغل أوامر shell بعد فك التشفير
بتنسخ ملفات خبيثة في الجهاز (temp folders و ProgramData)
وبتحذف آثارها بعد التنفيذ عشان تصعّب تتبعها

يعني لو المكتبة دي عندك انت عرضة للهكر والاختراق

الخلاصة:
نحنا ك frontend devs بنتعامل مع مكتبات زي دي عشان الapi fetch وكدا ف لو انت بتستخدمها حاليا :

ما تخلي النسخة latest او تكون اخر اصدار
وما تعمل update هسي لحدي ما تتوضح الصورة
ولو بتستخدم أدوات vibe coding أو أي حاجة راجعها لانها بتستعمل اخر اصدار

#برمجة

لو إنت بتتعلم Frontend وعامل مشاريع يبقي لازم تراعي فيها الحاجات دي1. م تستخدم ألوان عشوائية:خلي عندك نظام الوان واضح وي...
31/03/2026

لو إنت بتتعلم Frontend وعامل مشاريع يبقي لازم تراعي فيها الحاجات دي

1. م تستخدم ألوان عشوائية:
خلي عندك نظام الوان واضح وي ريت تستخدم variables عشان لي قدام تعديل الالوان يكون ساهل بالنسبة ليك.

2. مسافات واضحة ومتناسقة:
Padding و margin يكون معروف ومحسوب

3. خطوط مناسبة (fonts) :
خلي الخطوط تكون معروفة وسهلة للقراءة، ابعد عن نوع الخطوط البتكون قرايتها صعبة وبتخلي الموقع يظهر بشكل غير احترافي.

4. ركز في التفاصيل الصغيرة دي :
لانو دي بتجمل تجربة المستخدم للموقع
(Hover effects / Transitions / States)

5. لازم واهم شي يكون الموقع متجاوب مع كل احجام الشاشات.

المشاريع حقتك حتي لو كانت مشاريع م لي عميل، اهتم بيها وظبطها وخليها مرتبة لانو بيجي يوم وتجيب ليك اول عميل بي سببها

الاحتراف ما في الكود بس…
في التفاصيل الصغيرة

إنت شايف أكبر مشكلة في مشاريعك شنو؟ 👇





29/03/2026

موقع واحد ممكن يغير مستواك في الـ Frontend 👀🔥

واحدة من الحاجات اللي كنت مركز عليها الفترة الفاتتوأنا ببني Form لإدخال بيانات Users…إنو أي Input بيطلب رقم لازم تتوفر ف...
28/03/2026

واحدة من الحاجات اللي كنت مركز عليها الفترة الفاتت
وأنا ببني Form لإدخال بيانات Users…

إنو أي Input بيطلب رقم لازم تتوفر فيهو الشروط دي:

✔️ يسمح بإدخال أرقام فقط
✔️ ويظهر كيبورد أرقام في الموبايل

لأنو ببساطة لمن تطلب input رقم من الuser تسهل ليهو انو يكتب ارقام بس عن طريق انو تخلي الكيبورد فقط يظهر كيبورد ارقام بس في التلفون ولو كان في كمبيوتر او لابتوب, لو كتب اي شي غير ارقام م بتظهر والحاجة دي مهمة جدا في تجربة المستخدم ونحنا ك frontend developers مفترض ننتبه للحاجة دي
المستخدم ما مفروض يفكر…
إنت المفروض تسهّل عليه.

وشكل الinput مبدئيا بيكون كدا :


inputmode="numeric"
بيخلي الكيبورد في الموبايل يتحول لأرقام
pattern="[0-9]*"
بيحدد إنو الإدخال يكون أرقام فقط
⚠️ نقطة مهمة

كتير من الناس تستخدم:

type="number"

لكن ده غلط في أرقام الهاتف…
لأنو بيسمح بحاجات زي (+ - e)

التفاصيل الصغيرة زي دي مرات بتفرق جدا في استخدام الuser للموقع

في وقت الحرب…والإنترنت كان قاطع أغلب الوقت…كنت يدوب مكمل JavaScript بعد ما اتعلمت HTML و CSS.في الفترة دي كنت بقرأ كتب إ...
11/02/2026

في وقت الحرب…
والإنترنت كان قاطع أغلب الوقت…
كنت يدوب مكمل JavaScript بعد ما اتعلمت HTML و CSS.
في الفترة دي كنت بقرأ كتب إنجليزي عشان أطور لغتي، لكن كانت في مشكلة مضايقاني شديد:
في كلمات نطقها صعب عليّ…
وما في إنترنت أرجع أسمع النطق منو.
الموضوع دا كان محبطني فعلًا.
يوم قعدت أفكر…
قلت طيب أنا بتعلم برمجة لي شنو؟
ليه ما أستخدمها أحل مشكلتي أنا؟
بدأت أشتغل على موقع بسيط جدًا: مجرد input…
أكتب فيه الكلمة أو الجملة…
والموقع ينطقها لي مباشرة.
أول ما اشتغل قدامي؟

والله استمتعت من نفسي استمتاع شديد 😅🔥
إحساس إنك بنيت حاجة بتحل مشكلة حقيقية عندك… إحساس مختلف.
بعد فترة ظهرت مشكلة تانية:
الكلمات البسمع نطقها ما كنت بحفظها.
هنا دخلت localStorage 👨‍💻
عملت section يحفظ الكلمات. أضفت زرين لكل كلمة:

🔁 زر يعيد نطقها
❌ زر يحذفها

وفي النهاية طلع شكلو زي تطبيق بسيط كدا
معمول بـ HTML + CSS + JavaScript بس.
من اليوم داك…
بقيت أستخدم موقعي أنا عشان أتعلم النطق.
يمكن المشروع بسيط…
لكن بالنسبة لي كان إنجاز عديل ❤️😅
لأنه حل مشكلة كانت مأثرة عليّ فعلًا.
البرمجة ما بس شغل وعملاء…
أحيانًا هي وسيلة تنقذ نفسك بيها وتستمتع كمان

لو عملت قبل كدا مشروع ليك شخصيًا،
حاجة صغيرة لكن فخور بيها…
شاركنا قصتها تحت هاشتاق:

خلونا نشوف إبداعاتكم 👏🔥

Address


Website

Alerts

Be the first to know and let us send you an email when Mohamed Salih posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

  • Want your business to be the top-listed Advertising & Marketing Company?

Share