‏شوية اسئلة Interview Front End ممكن تتسالها لو عندك مقابلة قريب
‏و لو معندكش هتفيدك برضو لو فى حاجه واقعه منك او حاجه اول مرة تسمع عنها ممكن تاخد الاسئلة تبحث عنها و تزود معلوماتك

‏1 - What is the difference between dom and bom
‏2 - What is the event loop?
‏3 - What is the difference between callback and promise
‏4 - What is the react helmet?
‏5 - What is nextjs?
‏6 - What is the difference between SPA & SSG & SSL & SSR
‏7 - How to improve performance in the react app
‏8 - What is the reaction cycle?
‏9 - What is the lazy function?
‏10 - How do we use the design pattern in CSS?
‏11 - How to ensure the best SEO experience
‏12 - What are the solid principles?
‏13 - What is the difference between var & let & const
‏14 - What is the difference between asynchronous function and synchronous function
‏15 - What is the difference between async and await and when to use them?
‏16 - What is the promise and what should I use?
‏17 - What is the difference between context and redux
‏18- What is the difference between next js and react helmet in seo
‏19 - What is the react query?
‏20 - What is the difference between formik and yup?
‏21 - What is usememo?
‏22 - What is hosting?
‏23 - What is call stack?
‏24 - What is it set data type ?
‏25 - What is the difference between use memo and use callback?
‏26 - What is the higher order function?

What is the output of the following code in js ?

The JavaScript Tree:
|
|── Variables
| ├── var
| ├── let
| └── const
|
|── Data Types
| ├── String
| ├── Number
| ├── Boolean
| ├── Object
| ├── Array
| ├── Null
| └── Undefined
|
|── Operators
| ├── Arithmetic
| ├── Assignment
| ├── Comparison
| ├── Logical
| ├── Unary
| └── Ternary (Conditional)
|
|── Control Flow
| ├── if statement
| ├── else statement
| ├── else if statement
| ├── Switch statement
| ├── for loop
| ├── while loop
| └── do-while loop
|
|── Functions
| ├── Function declaration
| ├── Function expression
| ├── Arrow function
| └── IIFE (Immediately Invoked Function Expression)
|
|── Scope
| ├── Global scope
| ├── Local scope
| ├── Block scope
| └── Lexical scope
|
|── Arrays
| ├── Array methods
| | ├── push()
| | ├── pop()
| | ├── shift()
| | ├── unshift()
| | ├── splice()
| | ├── slice()
| | └── concat()
| └── Array iteration
| ├── forEach()
| ├── map()
| ├── filter()
| └── reduce()
|
|── Objects
| ├── Object properties
| | ├── Dot notation
| | └── Bracket notation
| ├── Object methods
| | ├── Object.keys()
| | ├── Object.values()
| | └── Object.entries()
| └── Object destructuring
|
|── Promises
| ├── Promise states
| | ├── Pending
| | ├── Fulfilled
| | └── Rejected
| ├── Promise methods
| | ├── then()
| | ├── catch()
| | └── finally()
| └── Promise.all()
|
|── Asynchronous JavaScript
| ├── Callbacks
| ├── Promises
| └── Async/Await
|
|── Error Handling
| ├── try...catch statement
| └── Throw statement
|
|── JSON (JavaScript Object Notation)
|
|── Modules
| ├── import
| └── export
|
|── DOM Manipulation
| ├── Selecting elements
| ├── Modifying elements
| └── Creating elements
|
|── Events
| ├── Event listeners
| ├── Event propagation
| └── Event delegation
|
|── AJAX (Asynchronous JavaScript and XML)
|
|── Fetch API
|
|── ES6+ Features
| ├── Template literals
| ├── Destructuring assignment
| ├── Spread/rest operator
| ├── Arrow functions
| ├── Classes
| ├── let and const
| ├── Default parameters
| ├── Modules
| └── Promises
|
|── Web APIs
| ├── Local Storage
| ├── Session Storage
| └── Web Storage API
|
|── Libraries and Frameworks
| ├── React
| ├── Angular
| └── Vue.js
|
|── Debugging
| ├── Console.log()
| ├── Breakpoints
| └── DevTools
|
|── Others
| ├── Closures
| ├── Callbacks
| ├── Prototypes
| ├── this keyword
| ├── Hoisting
| └── Strict mode
|
|____________ END ______________

Mastering the fundamentals of JavaScript is like building a solid foundation for a skyscraper! 🌐💡 Dive deep into variables, data types, control flow, functions, arrays, objects, and more before venturing into frameworks like React, Angular, or Vue.js. 📚💻 Strengthen your core skills first, and you'll be empowered to conquer any framework effortlessly

كــنــز APIs

أكثر من 300 API مجاني هيساعدوك في المشروع بتاعك...⭐️

———

‏300+ FREE APIs Every Developer Needs to Know 🔥

‏ https://dev.to/falselight/300-free-apis-every-developer-needs-to-know-3j76

عزيزي مبرمج الموبايل والويب
انا جبتلك اكستنشن هتبنيلك Ui بتاعك كامل بستخدام Ai
هتديله لينك ديزاين figma وهو هيتعامل
ومش Flutter بس لا Web كمان ك
‏React
‏Html
‏Vlue
‏Anglar
‏Svelte
‏React Native
‏Code parrot Ai Figma to code

هام جدا

كل كتب البرمجه موجودة هنا متقسمه ع حسب المجال في الريبو دي ❤️

‏ https://github.com/EbookFoundation/free-programming-books/blob/main/books/free-programming-books-langs.md

عايز أكلمكم عن حاجة جديدة في CSS يمكن ما سمعوش عنها ناس كتير، اسمها CSS Houdini.

إيه هو CSS Houdini؟

CSS Houdini هي مجموعة من الـ APIs اللي بتديك تحكم غير مسبوق في تصميم الواجهات الأمامية.

ببساطة، بتسمح لك بكتابة أكواد JavaScript عشان تتحكم في طريقة رسم المتصفح للعناصر، وتعمل تأثيرات وتعديلات مخصصة متقدمة.

إيه اللي بيميز CSS Houdini؟

تحكم متقدم: بتقدر تعمل تأثيرات وتعديلات مخصصة جداً اللي كان صعب أو مستحيل تعملها قبل كده باستخدام CSS فقط.

أداء عالي: بفضل التقنيات الحديثة، Houdini بيسمح لك تحافظ على أداء ممتاز حتى مع التأثيرات المتقدمة.

مرونة كبيرة: بيديك القدرة على استخدام JavaScript عشان تتحكم في خصائص CSS، وده بيفتح أبواب جديدة للإبداع في التصميم.

إزاي تبدأ؟
عشان تبدأ مع CSS Houdini، ممكن تزور الموقع ده
https://houdini.how/
اللي فيه شرح كامل ودروس عملية عن التقنية دي.

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


‏javascript cheatsheet 💥

رابط التحميل : https://drive.google.com/file/d/1wqPX6UIeS5Gi74iemT7RPzpa1EfGUvXK/view?usp=drivesdk

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

‏جايبلك اداة رايقة جدا بتعمل ليك color shade بشكل جميل
‏لو انتا شغال علي مشروع ومحتاج تناسق الالوان يكون جميل تقدر تدخل اللون وهو هيديك قائمة الالوان تسخدمها مباشر
‏ودي بعض المميزات الموجوده في الموقع تميزه عن غيره:
‏👈 بيدعم hexcode and HSL
‏👈 بيديك امثلة تقدر تشوفها في الموقع مباشر
‏👈 تقدر تعمل save ل color palett (اكتر من 3 لازم تشترك)
‏👈 تقدر تعدل براحتك في التدريج بتاع الالوان
‏👈 بيخليك تعمل copy لالوان تسخدمها علطول في اغلب المشاريع المختلفه زي ما موجود في الصوره تحت في التعليقات مع 👇
‏الرابط: ⁦ uicolors.app/create ⁩

‎أفضل مستودعات github لازم وحتما تحفظهم عندك ايا كان تخصصك في البرمجة

1 - Tech Interview Handbook
https://github.com/yangshun/tech-interview-handbook

2 - The Algorithms
https://github.com/TheAlgorithms

3 - Free Programming Books
https://github.com/EbookFoundation/free-programming-books

4 - 1000+ Free APIs
https://github.com/public-apis/public-apis

5 - Coding Interview University
https://github.com/jwasham/coding-interview-university

6 - 30 Seconds of Code
https://github.com/Chalarangelo/30-seconds-of-code

7 - Freecodecamp
https://github.com/freeCodeCamp/freeCodeCamp

‏خريطة التعلم لكي تصبح software developer

‏لو انت Front end فاكيد سمعت عن APi

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

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

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

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

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

من اكتر الحجات الى كانت بتاخد منى وقت فى بدايه تعلمى للفرونت اند هوالبحث عن api مناسب
فعلشان كده هشارك معاكم موقع من اكتر المواقع الى عجبتنى لانه موجود عليه كل api
الخاصه بكل المشاريع الى ممكن تفكر تعملوها
الى يعتبر كنز لاى حد شغال فرونت اند الموقع
‏ https://rapidapi.com/

فرق بين PUT و PATCH في RESTful API:
مبدأيا ال REST API هو نوع من أنواع ال API التي تستخدم HTTP بروتوكول .
ومن ضمن ال Verbs ال بستخدمهم عشان اعمل Manipulation او اعمل Retrive لل Data بتاعتى:
- GET
- POST
- PUT
- DELETE
دى الـ Verbs المتعارف عليها في HTTP.
عندنا كمان Verb تانى وهو PATCH، وال بستخدمه عشان اعمل Update لل Data بتاعتى زى PUT.
طيب ايه الفرق بين PUT و PATCH طالما الاتنين بيعملوا Update؟
لو عندي Table اسمه users ووعملت Insert فيه ل New User باستخدام POST:

POST /User
{
"name": "NewUser",
"Email": "NewUser1@gmail.com",
"password": "1234"
}

لو حبيت أعمل Update لل (name) بتاع ال User دا :
لو استخدمت PUT: أنا مضطر أبعت Value لكل الـ Fields بتاعت الـ User في الـ Body حتى اللي مش هعملها Update. وده لأن الـ PUT بتروح تعمل Update للـ Record ده كله فال Database
ال هو ال User عندنا حاليا :

PUT /User/1
{
"name": "UpdatedName", // update field
"Email": "NewUser1@gmail.com",
"password": "1234"
}

وإلا لو بعت بس الـ Field اللي عاوز أعملها Update زى كدا :

PUT /User/1
{
"name": "UpdatedName", // update field
}

فاللي هيحصل إنه هيعتبر باقي الـ Fields حصلها Update برضو بس Values بتاعتها هتبقى Null ده لو بت Allow الـ Null يعني، عشان لو مش بت Allow Null فهو مش هيعمل Update أصلا.

أما PATCH ف بتشتغل على الـ Field اللي أنا عاوز أعملها Update بس:

PATCH /User/1
{
"name": "UpdatedName", // update field
}

هنا اللي هيحصله Update هو Field الـ name بس مش الـ entity او ال Record كله.

الخلاصه :
- ال PUT: بستخدمها عشان اعمل Update لل Record كله ولازم تبعت كل ال Values.
- ال PATCH: بستخدمها عشان اعمل Update ل Field معين بس فال Record وببعت بس ال Value بتاعت ال Field دا بس

بعض أوامر ال #Run :
1- الامر ( ipconfig ) لمعرفة الـ ip الخاص بك
2- الامر ( regedit ) لفتح شاشة الريجسترى للوندوز
3- الامر ( msconfig ) أداة مساعدة ومنها ممكن توقف تشغيل أى برنامج عند تشغيل الويندوز
4- الامر ( calc ) لفتح الألة الحاسبة
5- الامر (cmd ) لفتح نافذة الدوس
6- الامر ( scandisk ) أو ( scandskw ) لفحص القرص
7- الامر ( taskmgr ) لمشاهدة كل اللى مفتوح ف التاسك بار (شريط المهام) والتحكم فيه
8- الامر ( cookies) للدخول على ملفات الكوكيز
9- الامر ( defrag )
10- الامر ( help ) وممكن F1
11- الامر ( temp ) للوصول للملفات المؤقتة
12- الامر ( dxdiag ) لمعرفة كل مواصفات جهازك وكل معلومات عنه
13- الامر ( pbrush ) لتشغيل برنامج ( الرسام )
14- الامر ( cdplayer ) لتشغيل برنامج السى دى بلير
15- الامر ( progman ) لفتح البروجرام مانجر
16- الامر ( tuneup ) لتشغيل معالج الصيانة للجهاز
17- الامر ( debug ) لمعرفة نوع كارت الشاشة
18- الامر ( sysedit ) لفتح ( محرر تكوين النظام )
19- الامر ( packager ) لاستعراض برنامج تغيير الايقونات
20- الامر ( cleanmgr ) لتشغيل برنامج التنضيف
21- الامر ( msiexec ) معلومات عن حقوق البرنامج والشركة
22- الامر ( imgstart ) لتشغيل اسطوانة وندوز
23- الامر ( sfc ) لارجاع ملفات dll إذا تم عطب أي ملف
24- الامر ( icwscrpt ) لنسخ ملفات dll
25- الامر ( recent ) لفتح الريسنت الخاص بك واستعراض الملفات اللى تم فتحها من قبل
26- الامر ( mobsync ) لفتح برنامج مهم جدا لتنزيل صفحات النت وتصفحها خارج النت فيما بعد
27- الامر ( Tips.txt ) ملف مهم فيه أهم أسرار الويندوز
28- الامر ( drwatson ) لفتح برنامج دكتور واطسون لعمل فحص شامل على جهازك
29- الامر ( mkcompat ) لتغيير خصائص البرامج
30- الامر ( cliconfg ) للمساعدة في شبكة الاتصال
31- الامر ( ftp ) لفتح File Transfer Protocol ( بروتوكول نقل الملفات )
32- الامر ( dvdplay ) وهذا موجود بس في الويندوز ميلينيوم وهذا البرنامج لتشغيل الفيديو.
33- الامر ( osk ) لاظهار الكيبورد على الشاشة
34-الامر (gpedit.msc ) تتحكم بجميع سياسات النظام او الغاء التفعيل لجميع مفاصل النظام
35-الامر(%tmp%) الوصول للملفات المؤقتة بشكل اوسع
36-الامر(perfmon.msc)لمراقبة نظامك بصورة اوسع
الامر ( sysedit ) لفتح السيستم كونفيجريشن ايديتور ( محرر تكوين النظام ) .
37-الامر ( cleanmgr ) لتشغيل برنامج التنضيف
38-الامر ( msiexec ) معلومات عن حقوق البرنامج والشركة.
39-الامر ( recent ) لفتح الريسنت الخاص بك واستعراض الملفات اللى تم فتحها من قبل.
40-الامر ( mobsync ) لفتح برنامج مهم جدا لتنزيل صحفحات النت وتصفحها خارج النت فيما بعد .
41-الامر ( drwatson ) لفتح برنامج دكتور واتسون لعمل فحص شامل على جهازك .
42-الامر ( ftp ) لفتح File Transfer Protocol ( بروتوكول نقل الملفات ) .
43-الامر ( telnet ) وهذا تابع اصلا لليونكس وبعد ذالك دخلوه علي الوندوز للاتصال بالسرفرات وخدمات الشبكات .
44-الامر ( dvdplay ) موجود بس في الوندوز ميلينيوم وهذا لبرنامج بيشغل
45-امر(soundrecorder) تسجيل الصوت
46-الامر(credwiz)طلب استعادة الكلمة السرية
47-الامر(timedate.cpl)ضبط الوقت والتاريخ
48_الامر(narrator)برنامج الراوي لقراءة أوامر القوائم ومربعات الحوار الإنجليزية
49-الامر(joy.cpl)لوحة التحكم بالالعاب و الـ Joystick
50-الامر(wmimgmt.msc)إدارة البنية التحتية - Management Infrastructure
51-الامر(dpiscaling)ضبط الشاشة
52-الامر(Standalong Update Manager (wusa

وقع قدامي الريبو ده وحقيقي حاجه عظمه اووي انا معرفش صاحبها بس ربنا يجازيه خير

Backend with NodeJS Roadmap

https://github.com/cat-backend-nodejs/nodejs-roadmap