AG Coding

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

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

فيديو جديد javascript for react part 2 https://youtu.be/BdugA2RSz2Q نبذة عن كواليس ما وراء الفيديو ":(

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

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

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

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

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

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

معلومة غلط قلتها في يوم ف فيديوهات ليا وجب إني أنوه عن الصح بتاعها وأعتذر وأتمني إن ربنا يغفرلي تقصيري وقتها ، قلت ان ال 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

في البرمجة لما تتعامل مع ال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/

كلنا عارفين ان ال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

Animated icons

لو انت 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 دعواتكم ❤️

الحمد لله ، التطبيق العملي ع دورة ال tailwind نزل كشرح ، التطبيق عبارة عن twitter clone https://youtu.be/bAzPWddA_90 __________ الدورة بفضل الله مش هتخليك تحتاج أي حاجة ف ال tailwind ودا لينك الدورة كاملة Tailwind CSS: https://www.youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP