في أي 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

تعال أقولك ازاي نعمل face detector api
بال native javascript
من غير م نستخدم face -api اللي مبني ع tensorflow.js
أول حاجة هتخش ع متصفح Chrome وهتكتب دا في الAddress bar
chrome://flags
وهتعمل سيرش علي Experimental web platform features
وهتعملها enabled
وهتعمل relaunch للمتصفح
هتبدأ بقي تكتب كود ال js
const faceDetector = new FaceDetector();
أو

// Pass options:
const faceDetector = new FaceDetector({
maxDetectedFaces: 5,
fastMode: false
});
الموضوع بسيط أوي زي م انت شايف بت init detector جديد ولو عاوز وانت بتcreate new detector تpass ليها options
ف من ضمن ال options انك تحددله أقصي عدد من الوجوه اللي عاوزه يعملها detect
أو ال fast mode
انك تركز ع سرعة الDetect ع حساب ال accuracy
ودا demo لو عاوز تشوف output
https://codepen.io/rebelchris/pen/JjEzxMX

Detecting if the user is online with JavaScript
عندك شات أبلكيشن وعاوز تضيف فيه feature اذا كان الشخص أونلاين ولا بأسهل طريقة ؟
هنستخدم ال navigator.onLine web api
window.addEventListener('load', () => {
const status = navigator.onLine;
});
وهنا ال status هترجع boolean value
بس خلي بالك دا هيبقي عظيم ك أول load لل page
بس لو الnetwork status اتغيرت هنا الحل انك تعمل Subscribe لل offline and online events
عشان ت listen ع أي تغيير و ت update Status
window.addEventListener('offline', (e) => {
console.log('offline');
});

window.addEventListener('online', (e) => {
console.log('online');
});

Removing Object Properties in Js

فيه أكتر من طريقة عشان أقدر أحقق دا ؟
عندي اتنين object والهدف بتاعي إني أخليهم similar
let object1 = {
a: "hello",
b: "world",
c: "!!!",
};

let object2 = {
a: "hello",
b: "world",
};
عشان أحقق الهدف بكل بساطة ه delete the c property
ودي الطرق اللي هنجربها عشان نحقق الهدف بالترتيب ، والترتيب دا هيوصلنا لحاجة أهم من الهدف
- هجرب إني أعمل set c to undefined
- هستخدم ال delete operator
- هستخدم ال proxy built in object عن طريق إني هعمل deleted c property through a Proxy object
- فاكر ال MUTATION إتكلمنا عليها قبل كدا هجرب إني أتجنبه عن طريفق اني أستخدم object destructuring
- هستخدم JSON.stringify and JSON.parse
- rely on Lodash
يبقي هنجرب كل دول بالترتيب ونشوف هنوصل لإيه
//I Set c To undefined
أول طريقة دي بالرغم من سطحيتها إلا أني هجربها لسبب ما تعال نعرفه مع بعض
لو قلتلك تعال ن
console.log(object1.d); // undefined
عشان مفيش عندي property إسمها d أصلا طب م تيجي نجرب ن Set c ل undefined
object1.c = undefined;
الoutput بقي ؟
let object1 = {
a: "hello",
b: "world",
c: undefined,
};
زي م انت شايف ال c هتفضل موجودة جوا ال object1 رغم ان قيمتها undefined
الapproach دا مش بيعمل actually delete إنما بيغير القيمة بتاعة ال property نتأكد بحاجة بسيطة
const propertyExists =object1.hasOwnProperty("c");
console.log(propertyExists); // true
طب لو بجرب access property مش موجودة أصلا زي object1.d
مش المفروض ت throw an error زي accessing a non-existing variable بيجيب ايرور زي دا
// Uncaught ReferenceError: اسم المتغير اللي مش موجود is not defined
طب ليه لما بأكسس object1.d بيجيب ليا undefined ؟
الإجابة بكل بساطة هي انك تفهم ازاي الReferenceError بيbehaves وإيه هو أصلا ؟
A reference is a resolved name binding that indicates where a value is stored. It consists of three components: a base value, the referenced name, and a strict reference flag.
عشان نفهم الكلام دا تعال نطبقه ع مثال لو عندك object of user وجواه name property
فال user.name reference دي ال baseValue بتاعتها ال user Object وال referenced name is the string, name وال strict reference flag دي بتبقي boolean value حسب انت في ال ٍstrict mode ولا لا
ال Variables بقي بت behave بطريقة مختلفة تماما لإنها معندهاش parent object ف بتكون ال base value هي قيمة ال environment record ف انت ال base value دي بيحصلها assigned كل مرة الكود بيتنفذ
ف عشان كدا لما بتحاول تaccess أي حاجة ملهاش base value ال JavaScript هتديك ReferenceError ومع ذلك لو ال base value موجودة بس referenced name مبيعملش point لقيمة موجودة
ال , JavaScript بكل بساطة هت assign ال value ل undefined
ودا من ال ECMAScript Specification
“The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.”

—————————————————
تاني طريقة وهيdelete Operator
ودي هتمسح ال property فعلا بس فيه بعض التحفظات لازم تأخدها ف الإعتبار قبل م تستخدمها
أول تحفظ انك لو بتستخدمها مع ال array
const movies = ["Interstellar", "Top Gun", "6 underground", "V for Vendetta"];

delete movies[2];
console.log(movies) //["Interstellar", "Top Gun", empty , "V for Vendetta"];
هتلاقي بكل بساطة ان هي بتسيب مكانه فاضي ودا unexpected behavior هيسببلك مشاكل لو بتستخدم بعض ال properties كlength
console.log(movies.length); // 4
ألتحفظ التاني وهو
const user = {
name: "Zezo",
birthday: {day: 2, month: 11},
};
لو حاولت انك delete ال birthday property هتشتغل كويس بس فيه misconception هنا مهم جدا وهو انك لما تعمل كدا دا frees up the memory allocated for the object ودا مبيحصلش
ليه بقي ؟ ببساطة كلنا عارفين ان ال JavaScript بت behave بشكل مختلف مع ال Objects مقارنة ب primitive values (e.g., numbers, strings, and booleans) بالذات ازاي بيتم تخزينهم ف الميموري
يعني لو انت بت Assign variable ب variable تاني ف الاتنين مش هيكونوا related ببعض وهيكونوا كل واحد منهم له independent space in memory
ع عكس لما بت Assign object ب object تاني وبعدين تعدل property في ال onbject دا بتلاقيها اتعدلت ف الاتنين واتأثرت عشان كل اللي بتعمله انك duplicating its reference
و Under the hood, JavaScript looks at the actual object in memory and performs the change, and both references point to the changed object
طبعا الكلام دا انت عارفه دلوقتي نقدر نفهم ازاي delete operator doesn’t free space in memory
بص ي سيدي العملية اللي لغات البرمجة بت free memory بيها اسمها garbage collection
في ال JavaScript العملية دي بتتم مع الobject لما ميكونش فيه أي حاجة بت reference له "is not needed anymore"
عشان كدا using the delete operator مش هخيكون مناسب معايا ف بعض لالحالات وكمان ف بعض التحفظات ان هي بت impact on performance

استنوا التكملة ..