اليوم بعلمكم على كنز معظمكم مايدري عنه وانا ما اكتشفته الا مؤخرا وبنقل لكم تجربتي فيه 😍
متخيلين اني حصلت على github pro ومنه جاني اشتراك مجاني ل copilot وقدرت اخذلي دومين و200 دولار هوستنق في digital ocean واشتراكات مجانية لكورسات وغيرها كثير وكلها من ايميلي الجامعي!
من الأشياء البسيطة اللي ممكن تضيفها في تطبيقك وأثرها راح يكون كبير كل ما كبر حجم تطبيقك اللي هي الـ React Lazy Loading ولكن قبل ما أشرح الحل خلوني أطرح المشكلة من الأساس عشان يكون الحل منطقي بالنسبة لك فتابع معي:
بعلمكم اليوم طريقة تسمحلك انك تشوف النتيجة على جوالك من الـ localhost بدون ماتحتاج انك تسويله deployment والفكرة بسيطة جدا فإذا مهتم بالموضوع تابع معي:
من أكثر الأشياء المحيرة في بداية رحلتك بتعلم الـ CSS هي الـ Specifity لأن الـ CSS ما تهتم بأنت وين كتبت كودك! على العكس في لغات البرمجة متعودين أن اخر قيمة تسندها للمتغير هي اللي راح تنحفظ!. ثريد اليوم راح يبسط لكم الموضوع بحول الله
موضوع اليوم ماراح يكون له علاقة بالـ Web وإنما طريقة لحساب الوقت المتوقع لإنجاز المشروع وهي طريقة من طرق الـ Software Project mangement.
اذا أنت تستقبل مشاريع من عملاء وتمر عليك حاجات جديدة ما تعرف بالضبط قد ايش ممكن تاخذ منك وقت ف الموضوع هذا راح يفيدك إن شاء الله فتابع معي
من المواضيع المحيرة واللي مالها قاعدة معينة تمشي عليها وتحتاج شوية تدريب وخبرة هي الـ CSS units ولكن ي صديقي اليوم راح اشرحلك الفروقات اللي بينهم وايش مشكلة الـ px وراح اعطيك ملخص بسيط أو best practices راح يساعدك باختيار الـ unit أو الوحدة المناسبة.
اذا مروق تعال تابع معاي
مطورين الـ front end هذي library ما فيه icon بحثت عنه وما حصلته عندهم وميزتها انهم جامعين لك باقي المكتبات زي fontsAwsome و bootstrab icons بمكان واحد 👌
ثريد: React vs Next js
خلال رحلتك التعليمية راح تمر عليك تقنيات ومصطلحات كثيرة وتقنية تجي ورى تقنية وتحل مشكلة كانت موجودة وتستمر الحياة على هذا المنوال. فخلونا نعرف اليوم وش سالفة الـ next مع الـ react وخلال هذا الثريد راح اوضح كم مفهوم باذن الله
اليوم بتكلم عن Bootstrap grid system والموضوع مهم جدا لانك راح تتعلم مفهوم والمفهوم هذا نفسه موجود بباقي مكتبات الـ css مع اختلافات بسيطة جدا
@PrograminLovers
كيف تشتغل الجافا سكربت بالمتصفح ووش هو ال event loop والربط مابين موضوع ال single thread وال async كل هذي الاسئلة اجوبتها بالفديو وشرحها بشكل رهيييب جدا يستحق المتابعة 👇🏻
للناس اللي ودها تبدا بالرياضة بس مو عارفة كيف؟
جبت لكم الحل✅
CoachAI💪🏼
موقع يقترحلك جدول تمارين معين ويحسب سعراتك ويعطيك اقتراح وجبات بناء على معطياتك عشان تكون الأجوبة أكثر دقة.
وبحكم خبرتي بالرياضة النتايج اراها جيدة وفيها مجال للتحسين اكيد👇🏻
الـ masking هي أحد خواص الـ css الرهيبة اللي ممكن تصلح فيها تأثيرات حلوة وماهي معروفة للجميع.
من خلالها تقدر تسوي mask أو hide لصورة أو فديو وتخليه يتشكل بشكل الـ svg او الصورة اللي تعطيها الخاصية
من أكثر الأشياء المكلفة عليك في برمجيات الويب وخصوصا لما تجي تتكلم عن خاصية البحث عن شيئ هو الـ Request أو بعبارة أخرى Request is always expensive!
فخلونا نتعرف على الـ debounce function اللي من خلالها راح تساعدك أنك تقلل الضغط على سيرفرك وبالتالي بينتج عنه منتج بجودة افضل
بتكلم اليوم عن ميزة في الـ use Effect الكثير قد يغفل عنها وبدونها ممكن تدخلك في أخطاء قد تكون غير منطقية بالنسبة ولك وحلها بسيط جدا.
فخلوني أعرفكم على الـ cleanup function :
مع زحمة الرياض وبكرا العودة للمدارس فضروري تشوفلك شي يونسك وانت تسوق.
فجبت لكم حلقة من بودكاست أحمد الإمام اشوفها مميزة ومفيدة تشرح لكم الفرق بين الـ فرونت اند frameworks بشكل مبسط من دون مايدوخك بالتفاصيل وبنفس الوقت يستعرضلك تاريخ وتطور المجال.
الصور من الأشياء المزعجة واللي ممكن تسببلك تجربة مستخدم سيئة او بطئ في موقعك اذا صار كبير وفيه أكثر من صورة.
ففي هذا الثريد راح اتكلم عن بعض الـ best practices اللي راح تفيدك في هذا الموضوع إن شاء الله
من الأشياء اللي ممكن تمر عليك وتسمعها اذا صرت تشتغل مع تيم بس ما تدري وش معناها هي الـ DRY principle. وفكرته ماهي جديدة ولكن المسمى ممكن يمر عليك ف خليني اعطيك فكرة بسيطة عنه
باذن الله في هذا الحساب راح اشارككم رحلتي التعليمية في مجال الويب واللي راح تكون الكثيير من ال Front-end وقليلا من ال Back-end لان هذا اهتمامي في هذه الفترة✋🏻😂😂
أنا من الناس اللي تعلمت على class component واخذت وقتي فيه بعدين تعلمت على functional compoenet وأخذت وقتي فيه وبعد كذا سألت نفسي ايش الفرق! وش استخدم طيب وش مميزات هذا وعيوب هذا وقعدت ابحث وخلوني اشارككم الخلاصة ولكن قبل كذا لازم اوضح أكثر من شي
جيب قهوتك وتابع معي
للي يدور logos أو icons لموقعه flaticon فيه خيارات أكثر بكثير من font awsome وغيرها ومرة محترمين صراحة حملت من عندهم كثيير بعدين اخر شي قالولي لو سمحت سوي حساب وسجل دخول😂😂
ـ Error Lens: وهذي من الاضافات اللي ماحسها مشهورة ابدا ولكنها جميلة تخلي لك الـ الاخطاء والتنبيهات بخط أكبر زي متغير ما استخدمته او امبورت سحبت عليه ...الخ
بما أن الترم صار قصير واسبوعين ثلاثة بتلقى نفسك بزحمة اختبارات وفيه طلاب مستجدين كثير وبما أني خريج ف خلوني ألخص لكم تجربتي الجامعية وكيف أنا أجيب درجات زينة بأقل جهد ممكن بدون ما أقولك رتب وقتك وذاكر أول بأول ولا تراكم على نفسك لان الأشياء ذي كلنا نعرفها بس مو دايما تقدر تسويها
مطورين رياكت موضوعنا اليوم عن الـ keys اللي دايما تلقاه بالـ console في كل مرة تسوي لوب على مصفوفة وممكن كثير منا يخلي الـ key عبارة عن الـ index وتمشي اموره ولكن ما قد تساءلت ليش رياكت يحتاج الـ key وليش ان الـ index مايعتبر خيار جيد وممكن حتى يسببلك مشاكل؟
اذا مهتم تابع معي
الحمدلله على الذي تتم بنعمه الصالحات والحمدلله على التمام والكمال
معالي الخريج يمسي عليكم بالخير بعد تخرجه رسميا من جامعة الملك سعود بتخصص هندسة البرمجيات 🙏😍
الحمدلله حمدا كثير طيبا مباركا فيه🙏
اليوم خلصت اخر اختبار لي في مسيرتي الجامعية 😍
مسيرة فيها مرتبة شرف أولى ومليئة بالA+
راح يكون اول رمضان يجي من سنوات بدون اي اختبارات الله يبلغنا اياه يارب
ماراح اقولك لا تشتري مواصفات اعلى من كذا لان الموضوع يرجع لميزانيتك والمواصفات ذي تلقاها بحدود ٢٠٠٠-٢٥٠٠
هذا كم اقتراح EDDY عندهم تخفيضات وترى مو اعلان ولا شي فلو حاب شف اللاب واشتريه من مكان ثاني 😂😂
صراحة استخدامي لايميلي الجامعي كان بس عشان اجيب منه microsoft office وكم برنامج تعطيك اياه الجامعة غالبا ماتحتاجهم بس ما استوعبت قوته الا لما شفت الـ github student developer pack!
بسرد لكم أهم المزايا اللي استفدت منها فيه وفيه غيرها كثييير
معلومة سريعة:
اذا عندك form وتهمك تجربة المستخدم في الجوالات ففي أغلب المتصفحات عندهم خاصية الـ auto zooming وهذي ممكن تسببلك scrolling وتخفي أجزاء مهمة من تطبيقك.
حلها انك تخلي حجم الخط 16 لل inputs لان الديفولت 11 واقل من 16 راح يخلي المتصفح يسوي zoom 👇
بما أنه كان فيه فايدة وتفاعل على الـ extension تبع قوقل كروم اللي نزلتها قبل كم يوم
فخلوني اليوم استعرض لكم أهم ثلاث اختصارات بسيطة استخدمها في الـ vs code بتوفر عليك كثير وبعضها ممكن تكون جديدة عليك
عندي سؤال غبي اذا سوي موقع بلغتين عربي وانجليزي لازم اسويه مرتين مرة عربي مرة انجليزي او فيه طريقة اخرى؟ — ماهي سوال غبي
هذي طريقة انك تسوي صفحة مطابقة
الطريقة اللي افضلها انه يكون عندك ملف فيه اوبجكت يحتوي على الترجمة باللغتين وت…
ـ code spell cheker: وهذي ياما انقذتني من typo ماتنتبه عليه ومع الاضافة اللي فوقها صرت اطلع الـ typo قبل مايكون موجود😂
ويمديك تحط بالـ configuration كلمات استثنائية ماينبهك عليها
هل تعلم ان حجم لعبة ماريو هو فقط 31 كيلوبايت! 🤪
هذه اللعبة التي قضينا وقتنا بلعبها والاستمتاع بها فقط 31 كيلوبايت، والصورة في التغريدة 103 كيلوبايت.
بحثت في الانترنت وتفأجات بهذه المعلومة، واستمتعت جداً بقراءة التحليل التقني
طريقة التسجيل بسيطة :
روح لاعدادات الـ github ومن الsettings ضيف ايميلك الجامعي وخليه ايميل ثانوي
روح للـ github education ومن فوق روح للـ student developr pack
معلومة عالسريع:
الـ for of تسمحلك انك تسوي loop على أشياء iterable زي الـ array بينما الـ for in من خلالها تقدر تسوي loop على objects بطريقة مباشرة على عكس الـ for of اللي تحتاج تستخدم معها object.keys على سبيل المثال لو حبيت تسوي loop على object من خلالها
شيك على الصورة👇
عشان تكون الصورة أوضح خلونا نقسمهم إلى أقسام من الأضعف إلى الأقوى
1ـ الـ all selctor (*) وهذي تعتبر الأضعف ووزنها صفر
2ـ elements وهذي وزنها 1
3ـ classes وهذي وزنها 10
4ـ id ووزنه 100
5ـ inline style ووزنه يعتبر 1000 ! وهو بكل بساطة انك تكتب الـcss وسط الـhtml عن طريق style!
@PrograminLovers
قناة معاذ الخلف هو دكتور في جامعة الملك سعود وكان يقولنا ادرس بالبيت واذا عندك سؤال اسال وهذي قناته بلاي ليست ١ و٢ بتعلمك اساسيات البرمجة وعندك قناة عبدالله عيد بعد بتفيدك
2ـ digital ocean : راح يعطونك 200 دولار مجانية صالحة لمدة سنة كاملة
3ـ domains : تقدر تشتري دومين بشكل مجاني من name cheap أو name com
4ـ browser stack وتقدر منه تسوي test على تطبيقك بأجهزة وجوالات حقيقية
5ـ scrimba: يعطونك شهر مجاني على جميع كورساتهم و
@nuf1ii
من كثر ما يحبهم حمسني اخذ كورس من عندهم
6ـ mailgun : يعطونك 20 الف عملية ارسال ايميل مجاني كل شهر لمدة سنة!
وغيرها كثييير ماقدر اغطيها كلها ولكن هنا الأشياء اللي ممكن تحصل عليها
@nuf1ii
ماتوقع صراحة ولا اظن فيه شهادات احترافية في الدفلوبمنت اصلا. اذكر مرة اللي سوالي المقابلة شاف ان عندي شهادة من free code camp وكانت بونص واخذ انطباع جيد عني ولو اني ماتوقعتها تفيد بس عموما ماتوقع انه اساس يبنى عليه
معلومة سريعة:
الـ picture tag تستخدمه اذا تبي تعرض صور مختلفة بناء على حجم الشاشة بدال ما تعرض صورة وحدة لجميع الاحجام وممكن جودة الصورة تقل.
ولا تنسى في الأخير بعد ما تضيف الـ source تحط الـ img لانه يعتبر fallback في حال ماصار match للـ source حسب الحجم اللي حطيته
مريت اكسترا اخذ لي كم غرض و لمحت بعض اللابتوبات اللي اسعارها ممتازة مقارنة بمواصفاتها و اشوفها مناسبة جداً لطلاب الحاسب..
ملاحظة:
ركزت على معالجات i5 و تحديداً الجيل الحادي عشر ممتازة جداً و سريعة و تتفوق على i7 الجيل العاشر 👍🏼🥸