الحمد لله ، التطبيق العملي ع دورة ال tailwind نزل كشرح ، التطبيق عبارة عن twitter clone

https://youtu.be/bAzPWddA_90

__________

الدورة بفضل الله مش هتخليك تحتاج أي حاجة ف ال tailwind
ودا لينك الدورة كاملة
Tailwind CSS: https://www.youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP

لو انت frontend developer ،
ف دي playlists هتفيدك باذن الله❤️

دورة لشرح tailwind css و في أخرها تطبيق عملي ع الكورس عبارة عن twitter clone

https://www.youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP

____


شرح Bootstrap 5 + تطبيق كامل ف أخر الكورس ع كل حاجة اتشرحت

https://www.youtube.com/playlist?list=PLnD96kXp-_pMJp3stPetkN76AJ2mmeah7

__

تطبيق موقع إسلامي بتfetch api ل قرآن وأحاديث

https://youtube.com/playlist?list=PLnD96kXp-_pMo0m5hAltTJmrTAaMdxWFF


عمل تطبيق quran player

https://youtu.be/eEzwCcON-PQ


___
تطبيق عملي علي بناء
Admin Dashboard

https://youtube.com/playlist?list=PLnD96kXp-_pNMQqlhvftNADK2frTt_j-0


____

js Problem solving
وهينزل فيها قريب باذن الله تحديات جديدة وتقيلة
https://youtube.com/playlist?list=PLnD96kXp-_pNKynhx8yYhpG5B7SGKOQT4

____

ازاي تضيف google map في موقعك بال js

https://youtu.be/3Cwn1-Ms-oA

____

Speech recognition web Api ( google search)
https://youtu.be/3WlNQgCx5-8
___

Text to speech
دا هيفيدك لو بتعمل موقع لذوي القدرات الخاصة

https://youtu.be/1elwPEph2CY

__

Firebase Crud operation

https://youtu.be/NYlthz0_wyo

_

تطبيق موقع فلسطيني

https://youtu.be/ztIiO4MfUO0


دعواتكم ❤️

Animated icons

كلنا عارفين ان الstring في الjavascript عبارة عن primitive type ، عمرك سألت نفسك ازاي بتقدر تستخدم معاها methods ؟؟
طب اي السبب؟
السبب process بتعملهالك الjs ،
Behind the scene
اسمها ال " Boxing "
لما بتعمل call لأي method علي ال string ،
الjs بتعمل wrapped
للprimitive value لل string بتاعك وتحطها جوا object وال object دا له
built in prototyping
خاص بالmethods اللي انت بتستعملها مع ال string زي substr و slice وغيرها من ال methods الخاصة بالstring، ولما ال operation اللي انت بتعملها بالmethods الخاصة بال string object بتخلص ، الstring object دا بيحصله converted back
لل string primitive data type
عشان كدا أي string method
بت return primitive data type
يعني لو استخدمت
String method
مع string primitive data بتتحول ل object له
Prototype methods
خاصة بالتعامل مع الstring
وف الآخر خالص الmethod دي ال return value بتاعها بيكون primitive

في البرمجة لما تتعامل مع الfunctions عندك two terms مهمين جدا ،،
passing by value , passing by reference
أكيد عارف الفرق بينهم ، بس بما انك js developer لازم تكون عارف حاجة مهمة ان الjs مفيهاش passing by reference مفيهاش إلا
passing by value
هتقولي إزاي بس دا عماد صاحبي مأكدلي إن فيها passing by reference بالذات لما بتتعامل مع ال objects ! هقولك لا هي مش بت pass by reference ، أومال الصح اي ؟؟؟
هي بت pass ال reference ك value
يعني اي أنا مفهمتش ؟ هقولك بتباصي الreference بتاع ال object في الميموري ك value لكن مفيهاش pass by reference ، هتقولي ي عم أنا مش فاهم منك حاجة هقولك بص ع الكود دا كدا ؟



let me = { name: 'Aleksandr' };
let alias = me;

alias.name = 'Alex';

console.log(me); // { name: 'Alex' }
console.log(alias); // { name: 'Alex' }



هقولك دا مش
True pass by reference
والدليل ان المتغير اللي إسمه me والمتغير اللي إسمه alias مش بيشاركوا نفس المكان ف اليميموري ! أثبتلك ؟ بص ع الكود دا كدا ؟؟



let me = { name: 'Aleksandr' };
let alias = me;
alias = { name: 'Alex' };

console.log(me); // { name: 'Aleksandr' }
console.log(alias); // { name: 'Alex' }




وهقولك برضه ع حاجة مهمة ، انت عارف ان لغة زي ال c++ تقدر فيها تعمل pass by reference لل primitive data type
في حين مع الjs انت متقدرش تعمل إلا pass by value عن طريق انه بيcreate temporary copy للمتغير أو المصطلح الأصح ال argument ، وحتي لو الكود بيعدل ع المتغير ف هو مبيعدلش ع الأصل هو بيعدل ع الcopy بتاعته زي الكود دا



let a = 2;
function add2(num) {
num = num + 2;
return num;
}
console.log(add2(a)); // 4
console.log(a); // 2




دي مجرد بس تلخيص لموضوع كبير عاوز تفهم الموضوع ككل ؟ اللينك دا هيفيدك جدا هو طويل شوية اه نينجا بس هيفيدك جدا باذن الله
https://www.aleksandrhovhannisyan.com/blog/javascript-pass-by-reference/

معلومة غلط قلتها في يوم ف فيديوهات ليا وجب إني أنوه عن الصح بتاعها وأعتذر وأتمني إن ربنا يغفرلي تقصيري وقتها ، قلت ان
ال z-index مبيشتغلش إلا مع
ال position property in css ،
ودا مش صح إطلاقًا ، ال z index مبتشغلش مع ال flow layout algorithm ،
بص ع الصورة رقم ١ تحت دي تأكدلك كلامي
يعني اي ؟؟
بص ال css layout ليها modes أو ممكن تقول عليها مصطلح تاني وهو algorithms ،
يعني اي ال layout modes ؟
دي الطريقة اللي بيتم بيها تحديد ظهور ال html element في الlayout
بناءًا ع حجمه ومكانه بالنسبة لأشقائه "sibilings "
عندي كام mode بيتحدد بيه ظهور العناصر قدامي ؟
6 modes
___
اي هما ؟
1 - Normal flow
ودا ال default لل webpage ،،
تقدر تشبهه بنفس طريقة تخطيط الصفحة في برنامج microsoft word ،
أو تقدر تقول الmode اللي العناصر بيحصلها في displayed
Block , inline
عرفت ليه هما الdefault بتوع بعض  العناصر ؟
2- table layout
ودا اتعمل للtables ،

3- positioned layout
دا للعناصر اللي بتديلها position property
4- multi column layout
ودا للعناصر اللي بتديلها
column-count  :
Property in css

5- flexbox layout
ودا طبعا من أعظم ال layouts mode اللي حلت لينا مشاكل كتير أوي هو والmode اللي بعده ، ومش محتاج أقولك بيشتغل في حالة
display: flex
6 - Grid layout
في حالة ال display grid
___
هييجي حد هنا يسألني سؤال جميل ؟
دي ال modes اللي بيتنظم بيها الlayout اي علاقتها بقي بال position property ؟

بص لازم تفهم  حاجة مهمة أوي وهي الstacking context
بص هنفترض انه بُعد تالت وهمي بالنسبة لل webpage ع محور z ،
لو انت اشتغلت ع فوتوشوب قبل كدا هو هو نفس مفهوم ال layers ، بحيث الwebpage  هي الجزء الأبيض اللي بترسم فيه ، وأي layer فوقه هي جزء من ال stack context ، أبسطهالك أكتر ؟
عارف الورقة البيضة هي الwebpage او ال work flow بتاعتك اللي بتكتب عليها وبتملاها سطر بسطر ، طب تخيل انك جبت معايا ورقة شفافة وحطيت فوق الورقة الشفافة رسمة ، اللي هيظهر من ال webpage ، هو كل الورقة البيضة الا الحتة اللي فوقها رسمة الرسمة هتغطي عليها ، طب ليه قلت ورقة شفافة ! لان الورقة الشفافة محسوبة layer ، وترتيب الlayers وتحديد مين يظهر فوق مين هو ترتيبها ف الstack
وال layers هي ال stack context  ،
وفي حالات بيكون فيها لكل عنصر context خاص بيه منها
ال element لما يأخد position
مع z-index ، ودي الصورة رقم ٢ لل stack وفيها أكتر من context
عشان توضح الفكرة
لحد هنا تمام ؟

ال stacking  وترتيب الcontexts فيها  بيتحدد بطرق مختلفة ،
الأولي وهي stacking without z-index property
ودي اللي بتكون فيها الz-index propertv
Not specified
وترتيب ال stack بيتحدد كالآتي :
الroot element وبعده ال
non positioned elements
طبقا لترتيب كتابتها في الhtml وآخر حاجة ال positioned elements وبترتيب كتابتها ، خد بالك ان الترتيب دا ترتيب ظهورها ف ال stack
يعني أول حاجة بتكون ال layer اللي تحت خالص ، زي م هو متوضح ف صورة رقم ٣

التاني وهي الstacked with z-index
ودي بتتحدد بناءًا ع رقم ال z-index
وال default layer rendering هي ال 0 ،
لو ف أكتر من عنصر واخد نفس ال z-index بتترتب حسب ترتيبه ف الhtml،، بص للصورة رقم ٤ وبص ع ترتيب العناصر وقيمة الz - index ضروري ،

التالت stacking with floated blocks ،،
وترتيب ال stack بيتحدد كالآتي :
الroot element ، ال  non positioned  وال floating elements ،  وال positioned elements
بص للصورة رقم ٥ ولاحظ ان ال non positioned محطوطين تحت أي عنصر ع الرغم من ترتيبهم وان فوقهم ال floated وأعلي layer هي ال positioned ،،

اللينكات دي بقي مهمة لو عاوز تتعمق ف الموضوع in detail
أول لينك خاص بال layout modes

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode

الstacking context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

الحالات الخاصة بال stacking
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

___

لينك شانل التليجرام  وأتمني تنوروني❤️
https://t.me/agcoding

تعالوا نشوف مع بعض ليه الoutput طلع
3,3,3
الفيديو دا حاولت ع قد م أقدر أوصل فيه اللي بيحصل ورا الكواليس وف الjs engine
https://youtu.be/_t6VOEapzaQ

جرب ولو موصلتش متقلقش مش هسيبك ❤️

https://youtu.be/1eZN7aytics
الفيديو دا مش حل ل دي بس ، فيه شرح ال boxing
والunboxing

عاوز تتعلم javascript صح ؟
نصيحة خلص الكورسين دول
___
https://www.udemy.com/course/the-complete-javascript-course/
___
https://www.udemy.com/course/advanced-javascript-concepts/

مع احترامي لكل المحتوي العربي ❤️

بمناسبة تريند ال ai وال Chat GPT ،
بما إننا بنركز علي اللي ينفعنا وبس ، الفيديو دا مهم لأي ديفلوبر مهما كان مجاله ، واللي ف الفيديو دا chat GPT للديفلوبرز ... أحسن من الgithub copilot بمراحل ، متنساش تدعيلي🖤
https://youtu.be/hD4LvhXOeq8

بإذن الله هبدأ شرح react 18 ، دعواتكم بالتوفيق والتيسير
https://youtu.be/XxfHPdWq4LI