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

من فترة دخلت انترفيو وكانت كل الاسئلة عبارة عن جافا سكريبت بروبلمز .. ف رح ابلش بسلسله جافا سكريبت من البسيط للمتطور🧑🏼‍💻 اختبر نفسك في الجافاسكربت, اتذكر شغلات كنت ناسيها, او جهز نفسك لمقابلة عمل ! 💪 🚀

بتشتغل بـ React؟ لازم تكون بتعرف هي المعلومة ...😁 كلنا منعرف إن السرعة والأداء مفتاح النجاح لأي ويب أبليكيشن . 💡 من اكتر المفاهيم يلي بتساعدك بتحسين الأداء في تطبيقات React: Lazy Loading . شو هو الـ Lazy Loading؟ 🤔 ببساطة هو تأخير تحميل الأجزاء اللي مالك محتاجها في اللحظة الحالية من التطبيق، المكونات بتتحمل بس وقت ما المستخدم يحتاجها أو يشوفها. 🕵️‍♂️ شو الفائدة ؟ 🌟عد معي... 1 - تحسين سرعة التحميل الأولية: لما تحمل بس الأجزاء اللي محتاجها، الصفحة بتفتح أسرع، والمستخدم بحس إن التطبيق أخف وأسرع. ⚡️ 2 - تقليل استهلاك الموارد: ما بتحمل شغلات مالا لازمة ف بوفر من استهلاك الرام 3 - أفضل تجربة مستخدم: الناس بتحب التطبيق السريع، ولما تحس إن تحميل العناصر بيتم بشكل سلس بناءً على حركتهم، طب شو العيوب؟ 🤔 التأخير في التحميل: لو المكون اللي بيتحمل متأخر مهم جداً، ممكن يحصل delay لحظي كيف بستخدمه في React؟ 👨‍💻 React وفرت لنا حاجة سهلة وبسيطة مشان نعمل Lazy Loading باستخدام ()React.lazy و Suspense، خلاصة الموضوع: استخدم Lazy Loading لما يكون عندك مكونات كبيرة أو صفحات مالا ضرورية في البداية فيديو شرح للفكرة https://www.youtube.com/watch?v=BMC1dLdUsPM

🔰 خريطة مطور واجهات ويب Front-end Developer مع المصادر 📌ملاحظة 1 : بالبداية لازم نحتفظ بهاد الموقع كمرجع للمساعدة بتعلم لغات الويب وهو الأفضل : https://www.w3schools.com/ 📌ملاحظة 2 : يمكن الاعتماد على مصدر واحد لكل لغة من الروابط الي موجودة , ولكن رح اوضع اكتر من رابط نظراً لتنوع الاذواق او في حال موضوع معين ما كان واضح منشوفو بمكان تاني او حتى نفهمو بشكل اكبر . 1️⃣ كيف يعمل الانترنت Octo code https://www.youtube.com/watch?v=jN3Rx3VyvdU&t=185s 2️⃣ أساسيات HTML - أسامة الزيرو - HTML 2021 https://www.youtube.com/playlist?list=PLDoPjvoNmBAw_t_XWUFbBX-c9MafPk9ji Bro code - HTML for beginners https://www.youtube.com/playlist?list=PLZPZq0r_RZOOxqHgOzPyCzIl4AJjXbCYt 2️⃣ تعلم أساسيات CSS - أسامة الزيرو - CSS 2021 https://www.youtube.com/playlist?list=PLDoPjvoNmBAzjsz06gkzlSrlev53MGIKe _________ - عبد الرحمن جمال - CSS (52 فيديو) https://www.youtube.com/playlist?list=PLknwEmKsW8Os7rKViMCL8x6irVJT7McSS Bro code - CSS for beginners https://www.youtube.com/playlist?list=PLZPZq0r_RZOONc3kkuRmBOlj67YAG6jqo - Bro Code - HTML & CSS full course 2023 https://www.youtube.com/watch?v=HGTJBPNC-Gw&t=883s _________ 3️⃣ مشاريع HTML و CSS - أسامة الزيرو تصميم 1 https://www.youtube.com/watch?v=_-eh8cwGGwg&t=3373s&pp=ygUOZWx6ZXJvIGh0bWxjc3M%3D - أسامة الزيرو تصميم 2 https://www.youtube.com/watch?v=heuDmrEAgUA&t=5978s - كودزيلا - بناء صفحة Portofolio ( معرض أعمال ) https://www.youtube.com/watch?v=cARGOrtiWt4&t=681s&pp=ygUM2YPZiNix2LMgY3Nz _________ 4️⃣ تعلم أساسيات JavaScript - أسامة الزيرو - كورس جافا سكريت 2021 https://www.youtube.com/playlist?list=PLDoPjvoNmBAx3kiplQR_oeDqLDBUDYwVv - عبد الرحمن جمال - كورس جافا سكريبت كامل https://www.youtube.com/playlist?list=PLknwEmKsW8OuTqUDaFRBiAViDZ5uI3VcE - Bro code - JavaScript Course 2024 https://www.youtube.com/playlist?list=PLZPZq0r_RZOO1zkgO4bIdfuLpizCeHYKv -مشاريع HTML & CSS & JavaScript https://www.youtube.com/@CodingLabYT/videos _________ 5️⃣ تعلم الاستضافة والدومين و DNS أسامة الزيرو - معنى استضافة ودومين ورفع موقع على الانترنت https://youtu.be/_C_jeBVmH3E?si=vJy67G06tN0IGDSj - PowerCert - How DNS works https://youtu.be/mpQZVYPuDGU?si=aELnePcjDA6EafOD _________ 6️⃣ تعلم إطار Bootstrap لــ CSS أسامة الزيرو - بوتستراب 5 https://youtube.com/playlist?list=PLDoPjvoNmBAyvm7f--dc6XqkpfDcen_vQ&si=ffZEx74Yr_XbhrI3 - نور حمصي - الدليل السريع ل Bootstrap https://youtu.be/iL0IEmTTjYU?si=XvPJwXKylxI4QgXj - المرجع الاساسي ل bootstrap https://getbootstrap.com/docs/5.3/getting-started/introduction/ 7️⃣ اختيار أحد أطر جافا سكريبت التالية : React.js - Vue.js - Angular.js 🔹 React.js - نور حمصي - تعلم رياكت في فيديو واحد https://youtu.be/QDGe4emCPG0?si=347Rs6OYDtf7gFpM - يحيى تك - رياكت في 90 دقيقة https://youtu.be/fJSFus0pxZI?si=NCsoomP3KaXMcAgC - Bro code - React.js 2024 tutorial https://youtube.com/playlist?list=PLZPZq0r_RZOMQArzyI32mVndGBZ3D99XQ&si=8bjZhgqEH4iX03Pe 🔹Vue.js - أسامة الزيرو https://youtube.com/playlist?list=PLDoPjvoNmBAxr5AqK3Yz4DWYKVSmIFziw&si=kfmZvffhPKFYagqz - Net ninja - Vue.js tutorial https://youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1&si=IbrGHflD7O6pjJCK 🔹Angular.js - محمد عيسى https://youtube.com/playlist?list=PLMYF6NkLrdN_QfnvwzIQEBXwp5uCsmreu&si=4grG6v_t4dKe6DDb - Net ninja - Angular.js https://youtube.com/playlist?list=PL4cUxeGkcC9gsJS5QgFT2IvWIX78dV3_v&si=jDY3SSCABr-448ps 8️⃣ تعلم اساسيات GIT + Github - غريب الشيخ - GIT في ساعة https://youtu.be/fDkR0TDR9dI?si=a4-Y_-kzITnjZVhL - Programming with mosh - GIT in 1 hour tutorial https://youtu.be/8JJ101D3knE?si=zPXWgbO6tlFc_vHx 8️⃣ كيفية التعامل مع API 1- ما هو ال API https://www.youtube.com/watch?v=J8_DaHkqw5o 2- نور حمصي - API Step by step - Part 1 https://www.youtube.com/watch?v=bB5tpD0Y73w API Step by step - Part 2 https://www.youtube.com/watch?v=zEh311cMZjE ✅ أفضل ممارسات لتحسين اداء موقع الويب من خلال الواجهة : https://roadmap.sh/best-practices/frontend-performance

رح اشارك معكن اهم مواقع الذكاء الاصطناعي 🔴 أداة Whats GPT لإضافة الذكاء الإصطناعي للدردشة في الواتس اب و التيلجرام : https://inglezi.com/1813 🔴 اداة Microsoft Desginer ، تقدر تعدل وتصمم اي صورة بدك ياها بمجرد ما تكتب الوصف يدعم اللغة العربية : https://inglezi.com/1956 🔴 أداة ChatPDF، بستعملها شخصيًا بترفع ملف الـ PDF للأداة وبتحسن تحكي مع الملف .. مثلا اختصرلي الملف شو اهم النقاط ؟ ملخص لتواريخ معينه مفيد جدا للطلاب : https://inglezi.com/1652 🔴 أداة Hyper writeai، بتكتبلك اي موضوع بحث انت بدك ياه بمجرد كتابة العنوان : https://inglezi.com/1666 🔴 إضافة Microsoft Copilot منافس ChatGPT في الواتساب و التيلجرام : https://inglezi.com/1888 🔴 أداة Looka design تصميم اللوجو ا انا جربتها شخصيًا بتكتب اسم الشركة او اللوجو اللي بدك ياه وتفاصيل الألوان وهيطلعلك عشرات التصاميم تختار منها : https://inglezi.com/1637 🔴 أداة لتصميم الفيديوز أو الريلز بالذكاء الإصطناعي لو حابب تقدم محتوى بدون ما تظهر تمامًا الأداة هي رج تساعدك ومجانًا وبتختار الشكل اللي تحبه والصوت والأفاتار : https://inglezi.com/1659 لا تنسو تعملوا save 😁 ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

كيف بتلاقي فرص عمل ريموتلي ( شغل من البيت )؟ مع انتشار العمل عن بعد..اصبح من المهم معرفة أفضل المواقع التى يمكن من خلالها العثور على وظائف ريموتلي وعملت شوية تجميعة لا افضل المواقع للتوظيف بالتوفيق❤️ ١- موقع Remote Ok https://lnkd.in/dQhN-n95 ٢- موقع Just Remote https://lnkd.in/db55nUDy ٣- موقع AneglList Talent https://lnkd.in/duRZt8wA ٤- موقع We Work Remotely https://lnkd.in/dc59Qy6w ٥- موقع Hired https://lnkd.in/dDxuFzv2 ٦- موقع Flex Gobs https://lnkd.in/dxCftD5d ٧- موقع Upwork https://lnkd.in/ds_Ssppa ٨- موقع Job Spresso https://lnkd.in/d5cJWC5B ٩- موقع Daily Remote https://lnkd.in/dCM238jV ١٠- موقع Remote Leaf https://lnkd.in/d9Rx_Bzv لا تنسوا تشاركوا مع رفقاتكم .. الدال عخير كفاعله😄✨

هل تستعد لمقابلة عمل وتبحث عن أفضل التحضيرات؟ هذا الموقع يحتوي على مجموعة شاملة من الأسئلة الشائعة في مقابلات العمل، مما يمنحك الفرصة للتدرب والاستعداد بشكل مثاليhttps://interview-questions-puce.vercel.app/ شاركوا الموقع مع رفقاتكم يلي من نفس المجال😄✨

يحتاج مطور الـFrontend إلى التأكد من ملائمة الصفحات التي ينفذها على جميع الشاشات .. من فترة قريبة اكتشفت برنامج Responsively وهو أداة تساعدك على معاينة اي موقع على أكثر من قياس بنفس الوقت وبسهولة

‏الدرج المكسور يجعلك تصعد درجتين بخطوة واحدة.. العقبات ليست عائقاً دائماً .. أحيانًا  تكون مهمة....🔥

🔵 React Router Components🌟 🔵 مكونات جهاز التوجيه React

نصيحة JavaScript! 🚀 في JavaScript، تختلف طريقتا reverse() و toReversed() عند التعامل مع المصفوفات بترتيب معكوس: 1. reverse() 🔄 تقوم بتعديل المصفوفة الأصلية عن طريق عكس عناصرها. 🔄 تعيد المصفوفة بعد عكسها، ولكن المصفوفة الأصلية تتغير بشكل دائم. 2. toReversed() 🔹 تعيد مصفوفة جديدة مع عناصر معكوسة دون تعديل المصفوفة الأصلية. 🔹 تكون مفيدة عندما تحتاج إلى نسخة معكوسة من المصفوفة، لكنك ترغب في الحفاظ على النسخة الأصلية بدون تغيير.

#تغذية_بصرية #ويب  لتتعلم أكثر عن التصميم والبرمجة 👇🚀 ⛓️‍💥 انستجرام : hkmDesigner ⛓️‍💥 تويتر : hkmDesigner ⛓️‍💥 قناة واتساب : hkmDesign

من الأشياء المهمة بعملية ال "بحث" انو ما نضل نعتمد بشكل كلي على محرك البحث Google، مثلا احيانا في ملفات ما ممكن تحصل عليها الا على محرك البحث yandex! مهم كتير نستخدم محركات بحث تانية متل Google, Bing,  Yandex, DuckDuckGo ، هيك بتكون جمعت اكبر قدر من المعلومات و من مصادر مختلفة و طبعا احتمالية انو يكون في Bug بتكون اكبر (معلومات اكتر). مثلا اذا التطبيق مكتوب ASP محرك البحث Bing ممكن يعطيك نتائج أفضل بكتير من Google (بما انو ال asp و Bing تابعين ل مايكروسوفت) ، و ممكن يرجعلك ملفات مابتقدر توصلها عن طريق ال Fuzzing او عن طريق محرك بحث تاني.

تعلمت ريأكت وحاسس بصعوبة بانجاز مشاريع عملية او عم تحس مستواك ماعم يتطور بشكل اكبر ؟ 🤔🤔 ⭕️ أولا : لازم نحكي عنو انو ضروري جدا تتعلم TypeScript 💙 وتعتمد عليها بدل جافا سكريبت بكل مشاريعك لانو اغلب المكتبات يلي رح احكي عنها بتعتمد بشكل رئيسي على تايب سكريبت بالبداية ماضروري تتعمق فيها بكفي تعرف تعمل types وتستخدمن ومعك معك بتطور فيها تلقائيا هي لغة بسيطة جدا وفيك تعتبرا مجرد اضافات ع js يلي بتعرفها ⭕️ ثانيا : ضروري كتير تكون عم تستعمل هدول المكاتب يلي رح يوفرو عليك شغل رهيب جدا جدا 1 - React Hook Form افضل مكتبة تعاملت معها بحياتي من كل النواحي هي مكتبة بتوفرلك Hooks لتتعامل مع ال forms بشكل كتير سهل من حيث ال Validation وال state management يعني باختصار هي المكتبة رح توفر عليك انك تعرف useState لكل حقل وتقعد تحدث الحالة بايدك لكل حقل بالاضافة انو بتوفرلك امكانية تعمل فاليديشن للحقول وتعرض رسائل الخطأ وكتير قصص تانية 2 - Material Ui هي المكتبة اي حدا شافها بالبداية ارتعب منها وفكرها صعبة ، وبالعكس تماما هي حرفيا افضل مكتبة Ui ع مستوى ال Frontend Development المكتبة بتحتوي على عدد ضخم من الكومبوننتس القابلة للاستخدام بشكل مباشر مع امكانية التعديل عليهن بشكل رهيب كما بتوفرلنا طريقة بسيطة لنعمل Theming ونقدر نعمل دارك مود من خلالها 3 - React Icons . هي مكتبة بتوفرلك مجموعة ضخمة جدا من الايقونات على شكل Components بتقدر تضمنهن باي مكان وتعطيهن الحجم واللون بكل بساطة. 4 - Tanstack Query هي المكتبة بتختصر عليك كل شي بخص ال state management المتعلق بال API وبتستعمل الكاش لتخزن البيانات يلي جاي من الباك اند عن طريق Key هي بفضل تحضرولها كورس وهي من اهم المكتبات حرفيا وبتغيرلك طريقة تفكيرك وشغلك بالمشروع . 5 - Framer Motion مكتبة خاصة بالانيميشن وبتوفرلك hooks و components بساعدوك تعمل انيميشن احترافي جدا بموقعك او تطبيقك 6 - React Hook Toast مكتبة بسيطة وظريفة وسهلة بتساعدك تعمل Alerts واشعارات للمستخدم ⚠️ ملاحظة 1 : ماحطيتلكن اي روابط مشان تدخلو وتبحثو بايدكن ⚠️ ملاحظة 2 : حاولو ماتبحثو عن هالمكتبات عاليوتيوب ، بحثو عنها بغوغل وتعلموها من ال Documentation ⚠️ ملاحظة 3 : مكاتب ال Ui كتيرة كتير ورح حاول بكل مرة احكيلكن عن مكتبة تفاعلو عهالبوست لانزللكن الجزء التاني 🙄

بواسطة كود HTML بسيط، يمكنك فتح محادثة جديدة على واتساب فوراً!