لو عايز تبدأ تعلم الذكاء الاصطناعي AI وعايز خطة فيها المصادر تبدأ من البداية
وكمان عايز تعرف هل المصدر ده صعب ولا متوسط ولا سهل عشان تعرف تبدأ بيه ولا لا

الرابط: https://github.com/ahmedbahaaeldin/From-0-to-Research-Scientist-resources-guide

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

الرابط:
‏ https://usehooks.com/

ملخص ممتاز لكيفية صياغة سطر الأوامر في ChatGPT بطريقة إحترافية و سهلة للحصول على إجابات مركزة.

تعاااالى أقولك معلومة ممكن تصدمك !!

🟡 ناس كتير بيكونوا فاكرين ال Console اللى كل يوم بنستخدمه دا جزء من من ال JavaScript!!!!

❌ حابب أصدمك و اقولك لأ ان ال Console مالوش علاقة بال JS أصلا.
✅ و لكن ال Console هو جزء من ال Web APIs

CSS Flex-box cheatsheet

إزاي تبقى تنين في JavaScript؟ 🔥


أهم المواضيع اللي ممكن تقابلها في JavaScript خلال رحلتك في النقاشة (فرونت اند) أو في السباكة (باك اند):

✅ this
✅ Closure
✅ Scopes
✅ Functions
✅ Arrays
✅ Objects
✅ ES6 and More
✅ Promise

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

رابط الريبو:
‏ https://github.com/didicodes/javascript-dev-bookmarks

لو انت Front end فاكيد سمعت عن API ....

ال API، ده اختصار لـ "Application Programming Interface"، يعني حاجة بتربط بين مكونين
بتساعد على نقل البيانات بينهم. يعني لو عايز تجيب معلومات من موقع تاني وتستخدمها في موقعك أو تطبيقك، هتستند على الـ API عشان تجيب البيانات دي.

ال API مش بس بيستقبل بيانات، لكنه بيبعت بيانات كمان.
مثال ، لو حد عنده موقع بيبيع منتجات وعنده فورم بيملاه بتفاصيل المنتج، زي الاسم والسعر وكدة، وبعد ما يملاه يضغط علشان يضيف المنتج، دور الشخص اللي خلف الكواليس (الباك إند) بيكون إنه بيأخد البيانات دي وبيبعتها للـ API.

الـ API بيرجع بيأخد البيانات دي ويخزنها في قاعدة البيانات. وبعدين الشخص اللي خلف الكواليس بيبعت الـ API للجهة اللي بتعمل الواجهة (الفرونت إند). هنا بيبقى دور الفرونت إند إنه يأخد البيانات من الـ API ويعرضها في الموقع بتاعه.

والـ Fetch هو العملية اللي بتخلِّيك تجيب البيانات من الـ API. يعني بتستخدم الـ Fetch عشان تجيب البيانات اللي بتجيلك من الـ API وتستعملها في مشروعك.

و اخيرا API من اهم الحاجات اللى هتستخدمها كتير و خصتا فى المشاريع الكبيرة فلازم تكون ملم بيها كويس و تدرب عليها كتير فانك ازاى تعرض البيانات بالشكل المطلوب و تبعت بيانات بشكل صحيح و الاهم من كل ده يكون كود منظم و مرتب مش مجرد تطلع المطلوب و بس

HTTP Status Codes

ظهراداة جديدة من أدوات الـ AI اسمها "Devin" وده ياسيدي AI Software Engineer المفروض يقوم بدورك كمبرمج زي ماهو واضح من الاسم كده وبيقدر يحل مشاكل فالكود ويعمل مشاريع بأحجام مختلفة ويدور على المشاكل اللي بتقابله على جوجل زينا بالظبط وبعد مايخلص يقوم عامل push للكود على الـ github repo كمان ويعمل pull request و new branch اذا لزم الامر.
لحد هنا الامر ممكن يبان مرعب للمبرجين خصوصا الشباب الغلابة اللي لسه بتدرس برمجة فالكلية او بيعملوا shift career لمجال البرمجة, ولكن أعلق بالكلمتين دول ونفكّر نفسنا بيهم:
أدوات الـ AI دي هتستبدل الـ Coders اللي وظيفتهم كتابة الكود ولكن عمرها ماهتستبدل الـ Engineers اللي وظيفتهم حل المشاكل وبيستخدموا الكود كأداة لتنفيذ الحل (أدوات الـ AI دي أحد هذه الادوات).
الـ Engineer بيعمل أكتر بكتيييرمن مجرد كتابة الكود اللي بييجي أخر مرحلة في الحل:
- بيتعامل مع مشاكل بتعتمد على inputs مختلفة ممكن ميكنش ليها علاقة بعض ومتنتوره في حتت مختلفة
- بيتعامل مع البني ادمين وبيحاول يفهم دوافعهم (اللي هما نفسهم مش عارفنها
) والمشاكل اللي بتواجهم لمحاولة إيجاد حلول مناسبة لها
- بيسأل الاسئلة الصح والاشخاص المناسبين اللي يسألها ليهم
- بيقدر يـ Collaborate مع ناس تانية او حتى teams تانية فالفريق حسب إحتياج المهمة او المشروع
- يقدر يشتغل في حدود الميزانية المتاحة وبناء عليها يحدد الخدمات والمكتبات اللي ممكن يستخدمها
وغيرها كتير من ال soft and technical skills اللي صعب جدا على اي اداة ذكاء إصطناعي انها تتقنها معاً

دي شويه extensions في الـ visual studio code ممكن تساعدك


🔹Rainbow Tags
بيلون الـ HTML Tags فشكل الكود بيكون منظم اكتر


🔹 Color Highlight
بيعمل Heighlight للـ variables او الـ hex بتاعة الألوان باللون بتاعها

🔹 Todo Highlighter
بتساعدك تقسم مهامك ف الكود.

🔹 Auto Renametag
و دي من خلالها لو هتعدل اسم الـ Tag تقدر تغير إسمه في الـOpen tag و هيسمع في الـClose tag تلقائي.

🔹 Bookmarks
بتقدر تميز بيها الأجزاء المهمة بتاعتك علشان تعرف ترجعلها ف أي وقت بسهولة.

🔹Image preview
بيحط صوره مصغره للصوره جنب رقم الـ Line اللي موجوده فيه فبيساعدك تتأكد انك من الصوره اللي عاوزها

🔹 Auto Import
بيعملك Auto Import وبيحطلك ال Path كمان

🔹Project Manager
بيساعدك توصل للـ Projects اللي شغال عليها بسهوله بغض النظر عن المكان اللي هما موجودين فيه

🔹SQL server
بتحول VS Code لسيرفر قواعد بيانات كامل عن طريق إنك تجرب الـQueries و تتأكد منها قبل ما تضيفها ف البرنامج بتاعك.

🔹 SVG Viewer
تقدر من خلاله تشوف الصور الـSVG من غير ما تحتاج لبرامج خارجيه ، و كمان تقدر تحولها لـPNG أو تعملها URL

🔹Material Icon Theme
بيعملك الـFile Icon علشان تكون عارف ال file دا الـ Extension بتاعه ايه

🔹IntelliSense for CSS class names in HTML
بيشوف كل فايلات الـ CSS اللي ف ال project بتاعك وبيعملها Cash وانت شغال بيبدأ يعملك auto complete لاسماء ال classes

🔹 ESLint
بتستخدم مجموعة من القواعد و تحلل الكود بتاعك بهدف إنها تحسنه.

🔹 CSS Peek
و دي من خلالها بتقدر تشوف كود ال CSS إللي بيأثر على الـTag إللي إنت عنده.

🔹 Faker
بتوفرلك بيانات وهميه للتجربة زي أسماء أو أرقام أو صور و حاجات تاني.

🔹Live Server
و دي بقى بتعمل تحديث لبيانات المتصفح تلقائي من غير ما تعمل Refresh.

🔹HTML Boilerplate
بتسهل علينا بدال ما نكتب تاج head و body ف بنكتب html بس و بنلاقي هيكلة صفحة html كاملة إتبنت.


🔹Code OCR - Extract Code from image VS Code Extension
من خلاله تقدر تعمل Extract للـ Code لو موجود في صوره

🔹 CodeSnap
بيخليك تعمل Screenshot الكود بتاعك بسرعة و بشكل حلو

🔹Change Case
بتقدر من خلالها تغير الـtext بتاعك من Small لـCapital أو العكس.


🔹One Monokai Theme
بتقدر من خلالها تغير الوان VS Code و لون الكود بتاعك.

🔹 Minify
بتساعدك تعمل ملفات صغيره لملفاتك و بتدعم HTML, CSS, JS.

🔹 Auto CloseTtag
و دا علشان لو بتنسى تقفل الـTag بتاعك فدا بيقفلك الـTag تلقائي.


🔹 Open in Browser
من خلاله تقدر تفتح البروجكت على الـ Browser من و انت في VSCode بمجرد ما تعمل Alt + B