Saif Mohamed - Dev, Alexandria (2026)

29/09/2024

لو أنت لسه مبتدئ و محتاج توجيه أو محترف و حابب توجه الشباب الي بيتعلم فا ركز معايا 🚀

كلنا محتاجين mentor او community يكون في ناس عندهم نفس أهدافنا و نقدر نستفيد من بعض و نتعلم من بعض.

أو حتي نشاركهم مشاكلنا و نحاول نلاقي حلول ليها زي ما بيحصل علي reddit او stackoverflow
و دا بيخلينا نتعلم أكتر حاجات مختلفه سواء كنا بنساعد أو بنطلب المساعدة.

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

أنهردا أنا جيلك ب نسخه جديدة من السيرفر دا و هيكون اسمه Egyptian CS Hub في أكتر من 700 طالب و في ناس تقيله زي Ahmed Metwally و CODEZILLA بنرتب معاهم أنهم يكونوا متفاعلين مع الطلاب و نقدر نستفيد من بعض قدر الأمكان.

و أنا بحاول أنشر بشكل مستمر البوستات الي بنزلها هنا و احسن كمان من جوده المحتوي و اخليه مفيد أكتر للمطورين الجدد.

السيرفر مقسم بشكل كويس جدا عير النسخه القديمه و في discussions لكل تراك تقريبا تقدر تنزل عليه بوستات مختلفه لو أنت creator أو تتابع البوستات دي لو أنت مهتم بل تراك دا ✅

هحب جدا أن عدد كبير يدخل و نبدأ نبني مجتمع CS كبير ينافس السيرفرات الأجنبيه الي انا عن نفسي موجود فيها لأني بتعلم منهم جدا و مفيش زيهم مصري و عربي تقريبا للأسف 💔

دا لينك السيرفر : https://lnkd.in/dHVe2THN

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development
خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd
Join telegram: https://t.me/sm4webchannel
Follow for more useful posts: hashtag

سلام 🙋‍♂️

23/09/2024

السلام عليكم, 👋
لو عايز تكون مهندس برمجيات شاطر و تكون مؤهل لسوق العمل بدري كمل معايا للأخر 🚀

شويه خواطر و نصائح للمقبلين علي الكليات التقنية 👇

✅ أفهم اكتر عن التخصصات مختلفة

حاول تجرب أو تتعلم حاجه من الفروع الي حاسس انك حابب تكمل فيهم مثلا زي ال Mobile, Frontend, Backend

لأن الكليه مش هتعرفك الفروقات ما بينهم ولا حتي هتتعمق ف أي فرع منهم كفايه, أيا كان تخصصك في الكليه

حاول تلاقي شغفك بدري و متضيعش وقت كبير.

المحتوي بكل المستويات و اللغات في جميع التخصصات الحمدلله متوفر جدا.

✅ الكلية مش هتديك كل حاجه

كلية زي حاسبات و معلومات مثلا هتديك أساسيات العلم دا ( خلينا نعتبر انك هتتعلم الأساسيات دي بجوده كويسه و مش محتاج تتعلمهم تاني من برا 😃 )

زي مثلا ال Networks - Operating Systems - Data Structures - Algorithms و غيرهم.

و طبعا دي حاجات مهمه جدا و لا غني عنها ولو أنت مش كويس فيهم فا في الغالب مش هتكون مهندس برمجيات شاطر.

بس حط في بالك أن دي مش مؤهلات لسوق العمل, دول مجرد أساسيات العلم و أنت محتاج تحدد التخصص الي هتمشي فيه و تبدأ بجانب الأساسيات دي تتعلمه و تجرب ب أيدك.

يعني لو انت عايز تشتغل Frontend Developer مثلا فا كل الي فوق دا بيخليك مطور اشطر من واحد تاني مش كويس فيهم, لكن مش هيخلوك frontend developer لازم تمشي علي roadmap خاصه بل تراك دا.

✅ الاستمرارية

متاخدش الحاجه من فوق الوش

مش مجرد أنك طالب في كليه الحاسبات و المعلومات فا حضرتك مبرمج بقا و كدا و تتنطط عل ناس, روق كدا عشان مزعلكش 😆

او مجرد انك حطيت كورس ال html بتاع الزيرو في ال watch later دا معناه انك بقيت مطور مواقع خطير. 🧐

حاول تتفادي الاحساس المزيف بل انجاز, لانك مجرد ما بتبدأ او تفهم حاجه بتحس بنشوه كدا و بتخليك تحس انك عبقري و خلاص انجزت كم كبير من العلم و ممكن تفوت الحته دي.

أنت محتاج استمراريه في التعلم سواء في محتوي الكليه او مذاكرتك الخاصه زي ما اتكلمنا فوق👆.

البرمجه مش سهله
البرمجه مش سهله
البرمجه مش سهله

✅ حاول تدور علي Mentor

المنتور دا شخص اقدم منك في المجال و معندوش مشكله انه يوجهك في الطريق الصح و لو احتجت منه أنو يشرحلك حاجه واقفه معاك يقدر يشرحهالك أو يديك مقال او كورس يفيدك في المشكله دي.

تقدر تخش هنا 👈
تليجرام: https://t.me/sm4webchannel
ديسكورد: https://discord.gg/Y8A8bCAzKr

و انشاء الله نقدر نساعدك.

✅ البيئة المحيطه بيك

حاول تخلي نفسك دايما محاط ب ناس زيك عايزين يتعلموا و يكونو احسن في المجال و عندهم شغف سواء في الحياة الواقعيه او علي السوشيال ميديا

حاول كمان تخليك دايما متابع ناس مفيده ليك في التخصص بتاعك يكونوا بيقدموا محتوي مفيد

زي ال Youtube Channels - PodCasts - Twitter و ما الي ذلك

-------

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

لو في حاجه تختلف معايا فيها ياريت تعرفني في الكومنتات عشان الكل يستفيد 👇
اعملي فولو عشان ميفوتكش اي حاجه بنزلها 🛎️
https://linkedin.com/in/saifmohamedsv

04/06/2024

جمعتلك احسن قنوات Youtube من وجهة نظري في ال Frontend 🚀
معظم القنوات دي محتواها في ال Web Dev بشكل عام و لكن انا مركز علي الي محتوي ال Frontend قوي عندهم ❤️

من كام يوم اتكلمت في بوست عن الاستمرارية و انك متوقفش تطوير من مهاراتك حتي لو بمقدار بسيط يوميا و هتلاقي الفائده كبيره علي المدي البعيد 🚀

لو مقرأتش البوست 👇
https://lnkd.in/dc5wVgAe

# 1 - ElzeroWebSchool ( HTML, CSS, Javascript, Typescript, & More )
https://lnkd.in/dwSf-6C2

# 2 - ByteGrade ( Next.js 🚀🚀 )
https://lnkd.in/dx_HtCsE

# 3 - Cosden Solutions ( React.js )
https://lnkd.in/dQJsehTc

# 4 - Web Dev Simplified
https://lnkd.in/dpFvvwMS

# 5 - Developedbyed
https://lnkd.in/dNPdDSNH

# 6 - Javascript Mastery ( React/Next.js Projects 💯 )
https://lnkd.in/d6gh6eAt

# 7 - Josh Tried Coding
https://lnkd.in/drnenJfT

# 8 - Code Evolution ( React.js Tutorials )
https://lnkd.in/ddRbw948

# 9 - Sonny Sangha ( React.js Projects )
https://lnkd.in/dHz4mtqG

# 10 - Vercel ( Next.js Tips )
https://lnkd.in/dJpUvB47

# 11 - Fireship ( Quick Tips )
https://lnkd.in/d2vVP8un

# 12 - Coder Coder
https://lnkd.in/d5xCQ_GS

# 13 - Pedro Technologies
https://lnkd.in/d-V68cGg

# 14 - قناه العبد الفقير علي التليجرام 🥰
بنشر محتوي عن ال حاجات دي 👇
🔔 Javascript - React - Nextjs - React Native - Frontend Development 🔔

Join Telegram ➡️: https://t.me/sm4webchannel
Follow Hashtag ➡️: hashtag hashtag
Discord community to mentor you ➡️: https://lnkd.in/dSgCpAit

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd

02/06/2024

العادات الذريه للمبرمج 👀🚀
تعالي اقلك تخلص المشروع الي انت معلقه بقالك قرن ازاي 😅

🙏 لا تنسوا اخوانكم في ف-لسطي-ن من الدعاء

كنت بقرأ في الكتاب الشهير atomic habits من كام يوم و استوقفني جزئ في بدايه اول شابتر، وهو كان بيكلم عن الاستمراريه!

تعالا نسقط شويه كلام علينا في مجالنا و نستعرض بعض المشاكل الي بيواجهها بعض المطورين ✅

هو انا ليه مبتطورش بسرعه؟
او انا ليه بكسل اشتغل المشروع الي بدأت فيه ؟

هديك شويه نصايح بناء علي ما تعلمته الفتره دي 🤝

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

في الكتاب James Clear بيقول لو انجزت ١% فقط كل يوم بأستمرار من مشروع او عاده او كورس او اي حاجه عايز تخلصها
فا انت بعد سنه هتكون احسن في الحاجه دي ب ٣٧ ضعف 🚀

🤔 طب اعمل ايه بقا عشان اخلص الكورس الطويل الي ماخروا؟
لو شفت كل يوم ١٠ دقائق منو ف انت بتشوف اكتر من ساعه اسبوعيا فا في الشهر حوال ٥ او ٦ ساعات
ودا جزئ كبير من اي كورس بل فعل 🤷‍♂️

💯 نفس الشئ بنسبه لتطوير مهاراتك بشكل عام
متستناش تتعلم حاجات خطيره و best practices محصلتش مرا واحده
خلي عندك كل يوم ساعه او نص ساعه حتي بتشوف فيها فيديوهات فيها محتوي مفيد بنسبه لشغلك
لو انت مثلا Frontend Developer فا في قنوات كتير اوي بتعلمك حاجات مفيده في مواضيع كتير ممكن اجمعهم في بوست منفصل

استمر ي صديقي نص ساعة كل يوم احسن من ساعتين كل اسبوع
تأثير الحاجات الصغيره علي المدي البعيد كبير جدا مش زي ما انت متخيل

👇👇👇
Join Telegram ➡️: https://t.me/sm4webchannel
Follow Hashtag ➡️:
Discord community to mentor you ➡️: https://lnkd.in/dSgCpAit

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React.js - Next.js - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd

31/05/2024

ال hook دي واحده من اهم hooks الي بتحسن ال performance لو استغلتها صح ✅

السلام عليكم, البوست رقم 4 من سلسله ال React.js Hooks للمبتدئين 💯
هنتكلم عن ال useCallback ✅

ايه هي ال useCallback ⁉️
شبه ال useMemo شويه لو كنت مشفتش البوست دا ارجعله هيساعدك تفهم ال useCallback 👇
بأختصار يصديقي هي hook بتاخد callback function و ترجع نسخه memoized او مجمدة منها
ايه الكلام دا ؟؟
بص, لو انت عندك component اسمه Search في input بس و بياخد onSearch فانكشن في ال props تمام ؟
و أنت عاملو memoize عشان ميحصلش re-render كل مرا و يحصل بس لو ال props اتغيرت. و ازاي تعملو memoize دي ممكنت تقرأ عنها.

المهم, انو ال parent component كل ميعمل re-render ال Search هيعمل معاه رندر render برضه.

طب ليه بقا ⁉️
والله دا تصرف طبيعي بيحصل من JS و React انو لو انت عامل arrow function مثلا زي كدا
const handleSearch = () => {}
قيمه ال handleSearh كل render بتكون مختلفه
حتي لو مفيش اي حاجه dynamic جواها
حقيقة معرفش السبب بس هي حاجه بتحصل under the hood اكيد فهمها هيفرق معانا.

ايه دور ال useCallback بقا ⁉️
const handleSearch = useCallback((text: string) => {
const filteredUsers = allUsers.filter(user => user.includes(text));
}, []);

مجرد بس انك تديها الفانكشن بتاعتك, هترجعلك منها نسخه memoized مهما حصل مش بتتغير.
ألا طبعا لو حطيت قيمه معينه في ال dependency array ول موضوعه اتكلمنا عنو في البوستات الي فاتت ارجعلهم لو متعرفش يعني ايه dependency array.

امثله: https://lnkd.in/dCzKxp36

Join Telegram ➡️: https://t.me/sm4webchannel
Follow Hashtag ➡️:
Discord community to mentor you ➡️: https://discord.gg/NRtaCtEQpe

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://saifmohamedsv.github.io

27/05/2024

تعمل ايه عشان تطلع من فتره الكليه عندك خبره كويسه ⁉️
تعالا اقلك شويه حاجات تعملها عشان تكتسب خبره كبيره في الفتره دي 💯

لا تنسو اخواننا في فلسطين من دعائكم 🤲

اولا انا مش هتكلم علي منهج الكليه لو انت بل فعل بتدرس CS
الي هقوله حاجات عامه لو انت لسه مبتدأ و عايز تطور من نفسك في الفتره الي مفهاش شغل لسه او تدريب

متأسس كويس ✅
لازم تكون متأسس كويس و بتعرف تكتب علي الاقل لغه برمجه واحده
لازم تدي اساسيات البرمجه حقها اوي متخشش علي الخطوه الي بعدها ونت لسه مش فاهم اساسيات اللغه الي انت مختارها
يعني لو مثلا انت بتتعلم Javascript
متفوتش حاجه زي ال event handlers او ال async/await & promises او مثلا OOP paradigm و ما الي ذلك
و تشمر و تقول فين React.js بقا الكلام علي ايه ❌
ادي الاساسيات وقتها و اتعلم براحه و خد وقتك 💯

عديت مرحله ال Fundementals و قاعد محتار بقا 👇

مشاريع بسيطه ✅
ابدأ ابني مشاريع صغيره زي Todo - Calculator - Basic Game ( Tic Tac Toe )
او اي افكاره خاصه عموما بل تخصص الي بتذاكره سواء كان Web - Mobile - AI ...etc
سواء كانت المشاريع دي ورا Tutorial معين او لوحدك
المهم تبني حاجه ب أيدك و تغلط و تصلح و تعمل Debug و تشوف المشروع بيتبيني ازاي

مرشد (Mentor) او تدريب في شركه ✅
دور علي حد يكون المرشد بتاعك في رحله التعلم سواء حد صديق ليك او حد هتديله مقابل مادي من اجل ارشادك
وهي كل وظيفته انك تسأله لما تكون في حاجه مش فاهمها او محتاج توضيح او نصيحه في حاجه معينه
ودا مش ضروري يعني بس يفضل ان يكون ليك منتور
و تقدر تخش سيرفر الديسكورد بتاعنا و تسألمي ف اي حاجه و ان شاء الله مش هتأخر عليك 👇
هسيب رابط في اخر البوست

و طبعا لو حصلت علي تدريب كويس في شركه و معاك ناس seniors فا هيغنيك عن المنتور بنسبه كبيره 👍

مشاريع مفتوحه المصدر ✅
في حاجه اسمها ال open source contributions
و كان بشمهندس Ahmed Saber عامل عنها playlist كويسخ جدا 💯
https://lnkd.in/dVQbpaaZ

وهو بأختصار انك تشارك في مشاريع كبيره مبنيه بل فعل و لكن تقدر انك تساهم مع المطورين انك تكتشف مشكله ما في الابلكيشن دا و تحلها
و دا طبعا في البدايه كويس جدا ليك لأنو هيعرضك لكود غريب بنسبالك و طرق مختلفه في تصميم المشاريع
انصح به و بشده 👍

اوعي توقف كورسات و تعلم ✅
دايما طور من نفسك و اعرف اكتر عن التكنولوجي الي بتستخدمها و ال ecosystem بتاعها سواء مثلا كنت بتتعلم React.js - Angular - .NET - Node.js - Vue - Next.js

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

حاوط نفسك ب ناس او صفحات علي linkedin او تويتر في نطاق الحاجه الي انت شغال فيها عشان دايما تسمع و تشوف اخر الاخبار 💯

مشاريع كبيره ✅
لزوم ال showcase 😊

عدت فتره من ممارستك الحاجات الي فوق دي و لسه مشتغلتش او دخلت تدريب ⁉️

تعمل ايه عشان تطلع من فتره الكليه عندك خبره كويسه ⁉️
تعالا اقلك شويه حاجات تعملها عشان تكتسب خبره كبيره في الفتره دي 💯

لا تنسو اخواننا في فلسطين من دعائكم 🤲

اولا انا مش هتكلم علي منهج الكليه لو انت بل فعل بتدرس CS
الي هقوله حاجات عامه لو انت لسه مبتدأ و عايز تطور من نفسك في الفتره الي مفهاش شغل لسه او تدريب

متأسس كويس ✅
لازم تكون متأسس كويس و بتعرف تكتب علي الاقل لغه برمجه واحده
لازم تدي اساسيات البرمجه حقها اوي متخشش علي الخطوه الي بعدها ونت لسه مش فاهم اساسيات اللغه الي انت مختارها
يعني لو مثلا انت بتتعلم Javascript
متفوتش حاجه زي ال event handlers او ال async/await & promises او مثلا OOP paradigm و ما الي ذلك
و تشمر و تقول فين React.js بقا الكلام علي ايه ❌
ادي الاساسيات وقتها و اتعلم براحه و خد وقتك 💯

عديت مرحله ال Fundementals و قاعد محتار بقا 👇

مشاريع بسيطه ✅
ابدأ ابني مشاريع صغيره زي Todo - Calculator - Basic Game ( Tic Tac Toe )
او اي افكاره خاصه عموما بل تخصص الي بتذاكره سواء كان Web - Mobile - AI ...etc
سواء كانت المشاريع دي ورا Tutorial معين او لوحدك
المهم تبني حاجه ب أيدك و تغلط و تصلح و تعمل Debug و تشوف المشروع بيتبيني ازاي

مرشد (Mentor) او تدريب في شركه ✅
دور علي حد يكون المرشد بتاعك في رحله التعلم سواء حد صديق ليك او حد هتديله مقابل مادي من اجل ارشادك
وهي كل وظيفته انك تسأله لما تكون في حاجه مش فاهمها او محتاج توضيح او نصيحه في حاجه معينه
ودا مش ضروري يعني بس يفضل ان يكون ليك منتور
و تقدر تخش سيرفر الديسكورد بتاعنا و تسألمي ف اي حاجه و ان شاء الله مش هتأخر عليك 👇
هسيب رابط في اخر البوست

و طبعا لو حصلت علي تدريب كويس في شركه و معاك ناس seniors فا هيغنيك عن المنتور بنسبه كبيره 👍

مشاريع مفتوحه المصدر ✅
في حاجه اسمها ال open source contributions
و كان بشمهندس Ahmed Saber عامل عنها playlist كويسة جدا 💯
https://lnkd.in/dVQbpaaZ

وهو بأختصار انك تشارك في مشاريع كبيره مبنيه بل فعل و لكن تقدر انك تساهم مع المطورين انك تكتشف مشكله ما في الابلكيشن دا و تحلها
و دا طبعا في البدايه كويس جدا ليك لأنو هيعرضك لكود غريب بنسبالك و طرق مختلفه في تصميم المشاريع
انصح به و بشده 👍

اوعي توقف كورسات و تعلم ✅
دايما طور من نفسك و اعرف اكتر عن التكنولوجي الي بتستخدمها و ال ecosystem بتاعها سواء مثلا كنت بتتعلم React.js - Angular - .NET - Node.js - Vue - Next.js

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

حاوط نفسك ب ناس او صفحات علي linkedin او تويتر في نطاق الحاجه الي انت شغال فيها عشان دايما تسمع و تشوف اخر الاخبار 💯

مشاريع كبيره ✅
لزوم ال showcase 😊

عدت فتره من ممارستك الحاجات الي فوق دي و لسه مشتغلتش او دخلت تدريب ⁉️

محتاج بقا حاليا توجه تركيزك علي بناء مشروع او اتنين حجمهم من متوسط ل كبير زي Ecommerce مثلا و يكون في بوابه دفع و مبني بطريقه كويسه و مستخدم فيه مكتبات قويه او مقسم الكود بشكل نظيف و ما الي ذلك
مطلع احسن ما عندك يعني

و يفضل يكون حاجه فيها فكره او حل لمشكله معينه مش حاجه متعارف عليها اوي
حاجه مبهره شويه فل انترفيو مل اخر

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

اتمني لكم التوفيق ❤️

Join telegram: https://t.me/sm4webchannel
Follow for more useful posts:
Discord: https://lnkd.in/dSgCpAit

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd

26/05/2024

اداء الابلكيشن بتاعك هيتحسن لو فهمت ال hook دا كويس ✅

السلام عليكم, البوست رقم 3 من سلسله ال React.js Hooks للمبتدئين 💯
هنتكلم عن ال useMemo ✅

ايه هي ال useMemo ⁉️
بص يصديقي بأختصار ال hook دي وظيفتها انها تاخد فانكشن ال فانكشن دي بتعمل return لي value معينه فا هي بتعملها cache

واحده واحده
في حاجه عندنا اسمها ال expensive functions او فانكشن بتعمل عمليات بتاخد وقت كبير جدا و ممكن تأثر علي اداء جزئ معين في الموقع بتاعك او في component معينه

تخيل مثلا فانكشن بتعمل لوب علي ٣٠ مليون رقم و ترجع اخر واحد
دي اسمها expensive function

تخيل بقا ان العمليه الكبيره دي بتحصل كل re-render 🫠
هل دا طبيعي ⁉️ اكيد لا في اغلب الحالات الا لو انت محتاجو يعمل كدا ضروري لسبب ما.

هنعرف بقا ازاي نعالج الأمر دا ب useMemo

تعالي نتعرف علي تركيب ال hook دا ✅
- بتقبل حاجتين

رقم واحد:
callback function عاديه جدا بترجع فانكشن تانيه زي كدا
const expensiveValue = useMemo(() => expensiveFunction(inputValue), [inputValue]);

رقم اتنين:
dependency array ولو اول مرا تسمع الكلمه دي يبقي محتاج تشوف بوست ال useEffect 👇
https://lnkd.in/di97JVZd

وجوده هنا يعتبر نفس الأستخدام في ال useEffect
في حاله انو فاضي, فا ال useMemo هتعمل cache للقيمه الي راجعه من الفانكشن الي جوا ألي الأبد.
و لكن في حاله وجود قيمه زي state معينه مثلا, فا في الحاله دي القيمه هيعاد انتاجها لو حصل تغير في ال state دي 😃

امثله: https://lnkd.in/dek9XgEK

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd
و تدخل قناه التيليجرام عشان ميفوتكش المحتوي الي بينزل 🔔
https://t.me/sm4webchannel

و فولو للهاشتاج 🔔

ولو حابب تسألني اي حاجه ابعت هنا و هرد عليك علطول 🙏 https://lnkd.in/dSgCpAit

22/05/2024

السلام عليكم, البوست رقم ٢ من سلسله ال React.js Hooks للمبتدئين 💯
هنتكلم عن ال useEffect ✅

ايه هي ال useEffect ⁉️
هي hook وظيقتها انها تنفذ حاجه اسمها ال side effect
مثال: انت لما بتاخد دواء معين مش بيكون ليه اعراض جانبيه علي جسمك ؟ هي ال useEffect عامله زي الدوا في حالات معينه هتعملنا اعراض جانبية بداخل الكود.

تعالي نتعرف عليها بشكل اكبر ✅
ال useEffect بتقبل اتنين arguments
- اول واحد وهي فانكشن عاديه جواها الكود الي هيشتغل ك عرض جانبي
- تاني حاجه و هو ال dependency array
هحاول اسيب كود يبين شكل الكلام دا فل صور تحت 👇

نمسك ال dependency array دا شويه بقا عشان محتاج كلام ✅
ليه ٣ حالات في كل واحده فيهم ال useEffect بتشتغل بطريقه مختلفه

اول حالة: انو يكون فاضي - و هنا useEffect هتعمل run للكود مرا واحده اول ما الصفحه تحمل وبس كد.

تاني حالة: انو يكون في متغيرات علي سبيل المثال فيه state معينه مثلا.. و هنا بقا useEffect هتعمل run للكود مرا في اول render و مرا كل ما ال state الي حطناها دي تشتغل.

تالت حالة: و هي انو يكون مش موجود اصلا 😄
و هنا بقا useEffect هتشتغل مرا فل اول و مرا في كل render ايا كان ايه سبب ال re-render دا سواء كان تغير في state معين او تغير في props مثلا مبعوته لل component دا.

حته بونص ✅
فاكر ال function الي بنبعتها لي ال useEffect عشان ت run code معين ؟

في حاجه اسمها ال optional return او ال cleanup function
وهي بأختصار انك تعمل return لي فانكشن تانيه جوا الفانكشن دي بجانب الكود الي هيتعمله run.

طيب ايه فايدتها ⁉️
بص من اسمها كدا هي بتنضف ورا الكود من بعد كل re-render
و لكن مش اول مرا, بمعني اصح مش في ال initial render هي بس بتشتغل كل re-render جديد
اقرأ عنها شويه هنا: https://lnkd.in/dPwSV5-b

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd

و تدخل قناه التيليجرام عشان ميفوتكش المحتوي الي بنزلوا ✅ https://t.me/sm4webchannel
ولو حابب تسألني اي حاجه ابعت هنا و هرد عليك علطول 🙏 https://lnkd.in/dSgCpAit

و فولو للهاشتاج:

15/05/2024

السلام عليكم, البوست رقم ١ من سلسله ال React.js Hooks للمبتدئين⚡💯

هنتكلم عن ال useState ✅

ايه هي ال state اصلا ⁉️

هي بأختصار حاجه مخزنه داتا بتتغير مع الوقت او بمعني اصح في حالتنا -- ممكن تتغير كل render

و ال render هي حاجه بتحصل في ال React Components في بعض الحالات.

طيب ايه بقا ال useState hook دا ⁉️

const [state, setState] = useState(0)

هو ياسيدي hook وظيفته انه:

- ياخد initial value او default value و الي دايما بيرجعلها في حاله ال component mount او لو عملت رفرش يعني 😅

- بيرجع array فيه قيمتين و هما state و setter function
بل شكل دا [state, setState] و بنفس الترتيب كدا
بس تقدر تغير فل اسماء براحتك زي ما تحب المهم تفرق بينهم.

اولا ال state و هي القيمه الي بتتغير مع الوقت و في اول render بتكون القيمه ال default الي بعتناها لل useState فل أول

ثانيا ال setState او ال setter function و دي بقا function بتاخد اي قيمه تروح تبدلها في ال state و ساعتها ال component بيعمل re-render و يكون في ال state دي القيمة الجديدة

و دي امثله بسيطه: https://react.dev/reference/react/useState -basic

معلومه بونص كدا ✅

ال setState او ال setter دي تقدر تبعت ليها callback function
ول فانكشن دي بقا بترجع parameter بنسميه احنا ال prevState
يعني ببساطه بيكون اخر قيمه موجوده في ال state دي
setCount((prevState) => prevState + 1)
// setCount(42 => 43)

طب ليه بنستخدمها ⁉️

الفكره يصديقي ان في مصادر بتقول, أن لو مثلا العمليه دي هتاخد شويه وقت او مثلا انت عملت spam للزرار دا و عايز تعمل log للقيمه المتغيره دي
في بعض الحالات مش بتلحق تعمل update
فا لو استخدمنا الطريقه العاديه دي setCount(count + 1)
ممكن في مرحله ما متلحقش تعمل update و ال value تكون غير صحيحة

مثال: https://react.dev/reference/react/useState -state-based-on-the-previous-state

بس كدا يصديقي الفرونت اندر متنساش تعمل فولو عشان متفوتش البوستات القادمه 🔔 و تدخل قناه التليجرام ✅

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://saifmohamedsv.github.io

و تدخل قناه التيليجرام عشان ميفوتكش المحتوي الي بينزل ✅ https://t.me/sm4webchannel

و فولو للهاشتاج:

ولو حابب تسألني اي حاجه ابعت هنا و هرد عليك علطول 🙏 https://discord.gg/NRtaCtEQpe

سلام 👋

11/05/2024

تحديث جديد لمكتبه use-any-hook ☺️
حاليا ال codebase كلها Typescript و دا احسن منحيث الكفائه و تجنب المشاكل.
و ان شاء الله قريب هيكون في unit tests لتجنب المشاكل بشكل اكبر في ال production. ❤️

لو حابب ت collaborate اتواصل معايا

و دا البوست علي لينكد ان 👇
https://www.linkedin.com/posts/saifmohamedsv_saifabrmohamed-npm-reactjs-activity-7195107374653706240-BBUk?utm_source=share&utm_medium=member_desktop

وصلت ٨ ألاف متابع ❤️

08/05/2024

وداعا فولدر ال hooks 😅
لو انت زيي شغال React.js يبقي اكيد بتستخدم Custom Hooks في اغلب مشاريعك 👨‍💻

و طبعا اكيد محتفظ بيهم في مكان ما عشان كل ما تحتاجهم تقدر انك تعمل Copy و بعدين Paste في فولدر ال hooks بتاعك بداخل المشروع 🫠

انا جي اعالجلك جزئ من المشكله او اسهلها عليك 🤌

من فتره مش كبيره كنت نزلت اني انشأت npm package صغيره اسمها use-any-hook
وظيفتها انها بتجمعلك اغلب ال custom hooks الي بنستخدمها بشكل دوري في مكان واحد
تقدر تعملهم import عادي جدا و تستخدمهم

لو متعرفش عنها حاجه اقرأ البوست دا 👇
https://lnkd.in/dKEq6d82

تمت اضافه hook جديد مؤخرا و هو useGeoLocation 🥰

لينك ال package 👇
https://lnkd.in/dN8h2DjT

لو مهتم بل مواضيع دي متسناش تتابعني 🔔
Javascript - React - Nextjs - React Native - Frontend Development

خد لفه في مقالاتي و مشاريعي من هنا 👇
https://lnkd.in/d7THfAmd

Join telegram: https://t.me/sm4webchannel
Follow for more useful posts: hashtag
Discord: https://lnkd.in/dSgCpAit

Saif Mohamed - Dev

29/09/2024

23/09/2024

04/06/2024

02/06/2024

31/05/2024

27/05/2024

26/05/2024

22/05/2024

15/05/2024

11/05/2024

08/05/2024

Address

Website

Alerts

Contact The Business

Shortcuts

Share

Category