you know js ?
بعد الفيديو دا هتغير رأيك ..
javascript for react
https://youtu.be/3qjrGRvcIC0
من بلاي ليست دورة الريأكت
https://youtube.com/playlist?list=PLnD96kXp-_pNIgy_vTan2BPirx5zdUJ71

فيديو جديد
javascript for react part 2
https://youtu.be/BdugA2RSz2Q

نبذة عن كواليس ما وراء الفيديو ":(

رمضان مُبارك عليكم وكل سنة وانتوا طيبين ومتجمعين علي طاعة ربنا وعلي كل الخير والفرح ، فيديو جديد من دورة الريأكت
https://youtu.be/JHCJ4w6dkuw

https://youtu.be/57vQ3TSnskk
أخر فيديو في سلسلة js for react ، دعواتكم بقي ربنا ييسر ، السلسلة دي هتفرقلك ، بتمني ان ربنا يكون وفقني فيها ..

في أي tutorial react هيبدأ ب انه يستخدم structure جاهز ويشرحهولك ، عاوز تفهم ازاي ال structure دا أصلا بيشتغل ؟ في الفيديو دا ازاي تعمل setup أو structure ل react app عن طريق ال webpack أو vite
https://youtu.be/VPHgxaOAIPo

أنا أسف ، الدورة هتقف إلي أن يشاء الله وعارف ان بتأخر ف التنزيل ف كمان هوقفها ! حاجة مش لطيفة بس هو والله لظروف غصب عني ، هتقف بسبب "الجيش" .. دعواتكم بتيسير الحال وإن ربنا يكرمني وأنا وعد هكملها وهعلي عن المحتوي اللي حاطه ، لو كان فيه أي علم في الفيديوهات ف مكنش مني والله كان توفيق وفضل وكرم من ربنا ليس إلا ، فيديو جديد في الريأكت وربنا ييسر الحال والدورة تكمل بإذن الله .. https://youtu.be/PnsaZgYDM8Q

لو عاوز تعرف أكتر عن ال CONCURRENCY in React
https://github.com/reactwg/react-18/discussions/46

How React 18 Improves Application Performance

https://vercel.com/blog/how-react-18-improves-application-performance

10 Github repositories to achieve Javascript mastery 👇

1 - https://github.com/leonardomso/33-js-concepts
2 - https://github.com/lydiahallie/javascript-questions
3 - https://github.com/getify/You-Dont-Know-JS
4 - https://github.com/airbnb/javascript
5 - https://github.com/ryanmcdermott/clean-code-javascript
6 - https://github.com/TheAlgorithms/Javascript
7 - https://github.com/sorrycc/awesome-javascript
8 - https://github.com/denysdovhan/wtfjs
9 - https://github.com/humanwhocodes/computer-science-in-javascript
10 - https://github.com/mbeaudru/modern-js-cheatsheet

عاوز تبقي تنين في ال css وتطير بيها وتعمل أي شكل ؟
خد الموقع دا بيديك تحديات يومية جميلة
https://playcss.app/

لو بتدور علي CSS Loaders لموقعك ، خد الموقع دا وادعيلي
https://css-loaders.com/

ElysiaJS is fast
18x faster than Express
دا framework مبني ب Bun ولو متعرفش اي هي Bun js ف هي
Bun is an all-in-one JavaScript runtime
يعني ب اختصار
Package Manager
Bundler
Javascript RunTime
واتبنت ب low level language اسمها zig
أه كل دول وزي م انت شايف اتبني عليها framework أسرع من express
18 مرة !!!
https://elysiajs.com/?ref=dailydev

دا SCSS framework حاجة لذيذة كدا و مُنظمة
https://www.cirrus-ui.com/

How to Compare Objects in JavaScript
دا سؤال مهم جدا تعال نجاوب عليه in depth
لما تيجي تقارن أي primitive values في ال js ف الموضوع بسيط بتستخدم أي equality operators كمثال :
'a' === 'g' ; // => false
10 === 10 ; // => true
مع ال objects الموضوع أعقد من كدا شوية لإنهم structured data
تعال بقي نعرف ازاي نقارن بين الobjects صح
تعال الأول نعرف احنا بنقارن بناءا علي إيه ، هنقسمها ل 4 حاجات
1 - Referential equality
2 - Manual comparison
3 - Shallow equality
4- Deep equality


—————————————————-
نمسك واحدة واحدة ونبدأ نتفاهم
أول حاجة ال Referential equality تقدر تقول عليها المساواة المرجعية
بص هفهمك الjs بتديك 3 طرق عشان ت compare values
The strict equality operator ===
The loose equality operator ==
Object.is() function
حلو ؟ لو جيت تقارن بين objects ب استخدام واحدة من دول عمرها م هتديك true إلا في حالة واحدة وهي إن ال
compared values refer to the same object instance
يعنني يكون ليهم نفس ال reference تعال نبص كدا بالأمثلة عشان الدنيا توضح
const hero1 = {
name: 'Batman'
};
const hero2 = {
name: 'Batman'
};
hero1 === hero2; // => false
hero1 == hero2; // => false
Object.is(hero1, hero2); // => false
طب تعال نعمل تعديل بسيط ف الكود كدا ؟
const hero1 = {
name: 'Batman'
};
const hero2 = hero1;
hero1 === hero2; // => true
hero1 == hero2; // => true
Object.is(hero1, hero2); // => true
مع العلم ان الjs مفيهاش pass By reference من باب العلم بالشئ مش مصدقني ؟ اقرأ دي كدا
https://t.me/agcoding/568

—————————————————-—————
متتوهش مني دي أول حاجة قارننا ع أساسها الحاجة التانية وهي Manual comparison
ودي بكل بساطة بتعملها ب ايدك بتقرأ ال properties وبتقارنهم ببعض ب إيدك كمثال
function isHeroEqual(object1, object2) {
return object1.name === object2.name;
}

const hero1 = {
name: 'Batman'
};
const hero2 = {
name: 'Batman'
};
const hero3 = {
name: 'Joker'
};

console.log(isHeroEqual(hero1, hero2)); // => true
console.log(isHeroEqual(hero1, hero3)); // => false

—————————————————-

متتوهش بقي مني تالت حاجة وركز عشان الجايين دول مهمين Shallow equality وبنستخدمها في حالات لأنها أسرع من deep equality
بص ركز معايا ف الكود دا كدا دي custom function بتعمل Shallow equality
const shallowCompare = (source, target) => {

if (typeof(source) !== typeof(target)) {
return false;
}

if (typeof(source) === "array") {
if (source.length !== target.length) {
return false;
}
return source.every((el, index) => el === target[index]);
}

else if (typeof(source) === "object") {
return Object.keys(source).every((key) => source[key] === target[key]);
}

else if (typeof(source) === "date") {
return source.getTime() === target.getTime()
}

return source === target;
}
بص هو هنا بيcheck لو ال Source والtarget نفس ال type وبعد كدا بيشوف الtype دا لو Array أو object أو date وبناءا عالtype بتقارن بين العناصر دي يعني ك Array مثلا بتشوف كل el === الEl اللي له نفس الاندكس قصاده بيساويه ولا لا وهكذا ف بافي types
بس الshallow comparison دا له عيوب تعال نبص كدا كتطبيق له
shallowCompare({a: 1}, {a: 1}) // => true
جميل وزي الفل لكن لما تستخدمه مع nested objects أو arrays تبدأ تظهر المشكلة الكبيرة
shallowCompare({a: {b: 1}}, {a: {b: 1}}) // false
وهنا هتتحل بال deep comparison اللي هو رابع حاجة معانا بس قبل م أروحله أكيد مش كل مرة هتعمل ٍshallow comparison هتكتب ال custom function دي ف بدايل كتير بتعمل نفس الشغل تقريبا زي ايه ؟
JSON.stringify
const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
بس الترتيب مهم يعني دي
JSON.stringify({a: 1, b:2}) === JSON.stringify({b: 2 , a:1})
هتدي false لأنه بكل بساطة عشان هنا انت بتحول الobjects ل ٍStrings وبتقارنهم ك Strings
و ف حل أسهل وأضمن انك تستخدم مكتبة loadash
The Lodash library provides a _.isEqual method for shallow comparisons of objects or arrays

const _ = require('lodash');
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(_.isEqual(obj1, obj2)); // true

—————————————————-

ندخل بقي لأخر حاجة وهي ال deep comparison
شايف ال custom function أللي ف shallow تعال نعدل عليها شوية هنضيف عليها recursion وحاول تتجنب تقارن nested objects هتبقي مكلفة كpreformance
const deepCompare = (source, target) => {

if (typeof(source) !== typeof(target)) {
return false;
}

if (typeof(source) === "array") {
if (source.length !== target.length) {
return false;
}
return source.every((entry, index) => deepCompare(entry, target[index]));
}

else if (typeof(source) === "object") {
if (Object.keys(source).length !== Object.keys(target).length) {
return false;
}

return Object.keys(source).every((key) =>
deepCompare(source[key], target[key])
);
}
else if (typeof(source) === "date") {
return source.getTime() === target.getTime()
}

return source === target
}
وكتطبيق عليها
deepCompare({a: {b: 1}}, {a: {b: 1}}) // true
وطبعا مش كل مرة هنستخدم custom function
ف انت هتستخدم third libraries زي loadash أو مكتبة زي deep equal