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

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

تالت طريقة وهي Deleted The Property Through A Proxy Object
ايه هو ال proxy الأول
A proxy is a way to insert some middle logic between an object’s common operations, like getting, setting, defining, and, deleting properties.
حلو ؟ ال Proxy بيأخد اتنين parameters
target: The object from where we want to create a proxy.
handler: An object containing the middle logic for the operations.
يعني ببساطة بتديلها الobject وتديلها ال logic اللي عاوز تطبقه
جوا ال handler احنا بنعرف methodes لأي operations وبنسميها traps ليه بقي ؟
because they intercept the original operation and perform a custom change
والنتيجة هتكون ان constructor هي return a Proxy object
واللي هيكون identical لل target بس with the added middle logic
تعال نبص ع مثال ؟
const user = {
name : "zezo",
age: 24,
};
const handler = {
get(target, property) {
return user's ${property} is ${target[property]};
},
};
const userProxy = new Proxy(user, handler);
console.log(userProxy.name); // user's breed is zezo

console.log(userProxy.age); // user's age is 24
في المثل دا ال handler عمل modifies لل getting operation عشان ت return a custom value
طب لو عاوز أ modifie ال Deleting operation ؟
const handler = {
deleteProperty(target, property) {
console.log(Deleting property: ${property});
},
};
هتحط دي جوا ال handler ف لو جيت
const userProxy = new Proxy(user, handler);

delete userProxy.name; // Deleting property: name
هتلاقي دا ال output ولو جيت ت
console.log(userProxy) // { name : "zezo", age: 24,};
متمسحتش !
عشان إحنا ببساطة بدلنا الdelete operator’s default behavior بcustom behavior
اي اللي ييجي يلعب دور مهم هنا ؟ بقي Reflect
اي ال reflect دي؟
Reflect is a global object with a collection of all the internal methods of an object. Its methods can be used as normal operations anywhere, but it’s meant to be used inside a proxy.
بص هنستفيد من Reflect ازاي ف مثالنا
const handler = {
deleteProperty(target, property) {
console.log(Deleting property: ${property});

return Reflect.deleteProperty(target, property);
},
};
const userProxy = new Proxy(user, handler);

delete userProxy.name; // Deleting property: name
في حاجة مهمة هنا لازم أنوه ليها ؟
في بعض ال built in objects زي Math, Date, and JSON وغيرهم مقدرش أ delete منهم عشان ببساطة هما “non-configurable” object properties
يعني مينفعش أعملهم reassign or delete

رمضان مُبارك عليكم جميعًا يارب ❤️

just React 🫡

إزاي تحسن ال preformance بتاع الwebsite بتاعك وتقلل من وقت تحميله لزاوره ، وكمان تقلل ال load ع السيرفر بتاعك ؟
تعال أقولك ع تريكاية
تسمع عن ال http Caching أو ال
Http cache control
يعني إيه بقي ؟
بص هو عبارة عن إنك بتحفظ نسخة من الملفات ال static (الصور ، ملفات css ، ملفات js ) في ال Caching memory بتاعة المتصفح ،
طب دي إيه الفايدة منها ، وبتحصل إزاي أصلا ؟

في أول زيارة لليوز للموقع الbrowser بيحمل كل الfiles اللازمة من السيرفر ، وهو بيحملها بيحفظ نسخة منها في الcache عنده ، ف بالتالي أي زيارة مستقبلية ، الbrowser بيعمل check بسيط كدا الأول ، بيشوف الملفات اللي عنده في الcache صلاحيتها valid ولا ،
يعني إي صلاحيتها valid ، الصلاحية دي إنت اللي بتحطها ك developer في إعدادات ال Caching في فايل ف السيرفر بتاعك زي م هتشوف دلوقتي إزاي ، نرجع لل browser بعد م عمل الcheck ولقاه valid ، بيستخدمها بدل م يروح يحملها تاني من السيرفر !
دا بيقلل من ال requests اللي رايحة للسيرفر ويخلي موقعك كزيارة يحمل بشكل أسرع ، طب الملفات دي بتتخزن فين زي م قلت فوق كل متصفح فيه مساحة معينة مخصصة للملفات دي اسمها ذاكرة التخزين المؤقت أو ال Caching ..

طب لما هو حلو كدا وبسمسم ليه مش كل المواقع بتعمله ، هقولك لإنه ليه عيوب
لو الملفات اللي عندك ف ال cache دي اتغيرت عن اللي ف السيرفر أو حصل تعديلات ف الموقع بتاعك ، المستخدم هيشوف نسخة قديمة من الموقع بناءًا ع الملفات اللي متخزنه عنده في الcache لحد م صلاحية الملفات دي او الوقت اللي انت مديهولها كصلاحية يخلص ، العيب التاني انك بتستهلك resources من مساحة ومتصفح اللي بيزور موقعك
طب ازاي بقي أعمل الprocess دي كلها ، تعال أقولك ، لو انت الموقع بتاعك ع سيرفر apache ف الصورة رقم 1 هي اللي انت هتعمله
هتروح ع ال root بتاع الwebsite بتاعك وتكتب في ملف ال
.htaccess
اللي موجود ف الصورة رقم 1
طب أنا محتاج أفهم دا عبارة عن إيه بص هشرحلك كام حاجة وإنت هتفهم من خلالها عندك مثلا ال
max-age
بتحدد المدة الزمنية (بالثواني) اللي المتصفح يحتفظ خلالها بالملف في ال cache بتاعه

no-cache
بيجبر المتصفح على التحقق من صحة الملف مع السيرفر قبل استخدام النسخة المخزنة.
no-store:
بيمنع المتصفح من تخزين الملف في ذاكرة التخزين المؤقت

ExpiresByType
بتحدد مدة التخزين المؤقت لكل نوع من الملفات ، على سبيل المثال:
الصور (jpg, jpeg, gif, png): تخزين لمدة سنة (access plus 1 year)

طب لو السيرفر بتاعك Nginx
هتفتح ال path دا ع سيرفرك
/etc/nginx/nginx.conf

وهتحط فيه اللي ف صورة رقم 2

هنا نيجي بقي للخطوة بتاعة إزاي أتاكد أن الcaching شغال في الموقع بتاعي
هتفتح الموقع بتاعك بعدين تفتح ال developer tools =>
(Ctrl+Shift+I)
هتخش ع ال network tab حمل الصفحة بتاعة موقعك
بعد م يظهر كل الfiles اللي اتعملها load حدد أي static file زي أي صورة ،
وبص ع جزء ال headers
هتلاقي تفاصيل الcaching ف الجزء الخاص بـ Response Headers
هتشوف Cache-Control header مع القيم اللي حددتها في ملف .htaccess