Progress Bar On Scroll
code : https://youtu.be/1xq_JfqskMg
#application

Photos Gallery Pagination
code : https://youtu.be/12hf_DSvMw0
#application

Custom Animated Cursor
code : https://youtu.be/y7ms419UQEQ

Interactive Hover Button
code : https://youtu.be/tHgsdsWCR0A
#application

Amazing Hover Images Accordion
code : https://youtu.be/YNFGPPkYyZA
#application

Custom Password Validation
code : https://youtu.be/y7ms419UQEQ
#application

Glass Form With 3D Background
code : https://youtu.be/j1dPGdmNVu0
#application

QR Code Generator
code : https://youtu.be/rOps3SnacOE
#application

Custom Tabs Selector
code : https://youtu.be/izlLIXlLV_0
#application

Hamburger Menu Toggler
Code : https://youtu.be/16ohjMPsh0Y
#application

Custom label with wave Animation
Code : https://youtu.be/HvV27mX8zVA
#application

Random Ayat Genetator
Code : https://youtu.be/7jy9UzunzNA
#application

The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them
#tips

You can create a shortcut key for an element to come on focus using the "accesskey" attribute.
#tips

عشان توصل لكل حاجة بشكل أسهل وأسرع فيه هشتاجات للشانل بمجرد ما تضغط عليها هتنقلك للجزء اللي حابب تشوفه سواء تطبيقات أو tips and tricks
#application
#tips

الحمد لله كرم ربنا وفضله عليا كان كبير ، ربنا وفقني اني أعمل
موقع إسلامي فيه أحاديث نبوية ، وقرآن كريم وكل م تضغط ع صورة يظهرلك آياتها كاملة ، وأوقات الصلاة حسب اللوكيشن اللي انت عاوزه ، وكل البيانات دي من api ، كل خطوة من دول مشروحة بالتفصيل في بلاي ليست كاملة ، ازاي تصمم موقع إسلامي كامل وتقدر تعمل كل دا بنفسك وهتفهم كل سطر كود اتكتب ، البلاي ليست دي للناس اللي ف البداية ومحتاجة توظف وتطبق اللي اتعلمته ، دا فيديو intro بسيط عن محتوي الموقع ، ودا لينك الموقع لو حابب تجربه بنفسك
http://mohamedsaad2021-001-site6.itempurl.com/
ودا لينك playlist الشرح
https://youtube.com/playlist?list=PLnD96kXp-_pMo0m5hAltTJmrTAaMdxWFF

ممكن فضلا تقدر التعب والمجهود اللي اتبذل وتدخل تتفرج ع أي جزء عشوائي وتديني رأيك في طريقة الشرح ، لأنه أكيد هيفرقلي سواء ايجاب أو سلب ، شكرا لوقتك 🖤
اللهم ان هذا العمل خالصًا لوجهك الكريم
#application

الحمد لله كرم ربنا وفضله كبير ، ربنا وفقني إني أعمل QuranPlayer ودا لينك لو حابب تجربه
http://quranplayer.netlify.app
، وشارحه كامل في الفيديو دا مطبق بhtml css js
https://youtu.be/eEzwCcON-PQ
_____

لما بتضغط ع سورة بيظهرلك آيات الصورة بالترتيب ورا بعض والآية بتتغير للي بعدها بمجرد م الصوت بتاع الآية يخلص ، تقدر تتنقل بين الآية اللي قبلها واللي بعدها أول م الصورة بتخلص بيطلعلك sweet alert ان الصورة خلصت وبيرجعها تاني من أول آية لو حابب تعيدها، ودا فيديو انترو بسيط بجرب فيه كل حاجة قدامك 🖤
تقدر تاخد الفكرة من الفيديو وتطبقها ب features أكتر وديزاين أجمل وتنشرها ونشارك كلنا ف الثواب والخير 🖤
#تحدي_الخير

لو انت فرونت اند أو باك اند ف البوست دا مهم ليك ، دي أهم مكتبات javaScript هتحتاجها في شغلك بنسبة كبيرة باذن الله ،،

1- Algolia Places
المكتبة دي بتُستخدم في ال
address autocomplete Search
يعني لو انت بتبحث عن مكان معين وكتبت بس أول حرف بيظهرلك كذا option بالأماكن اللي بادئة بالأول حرف دا "autoComplete" ،
مش بس كدا لو ضفت معاها مكتبة "leaflet"
انت ممكن كمان تضيف خريطة للبحث وتعرض فيها اللوكيشن اللي بتبحث عنه ،،
______________________

2- مكتبات الscroll
النقطة دي فيها أكتر من مكتبة وكلهم أجمل من بعض ، وهنقسمها لكذا نوع ،
كتير بتفتح مواقع ولما تيجي تسكرول في الموقع بتلاقي ان العناصر فجأة بتظهر من مكان ما وتبقي في مكانها الطبيعي في الموقع سواء بايفكتات كتير زي انها تيجي من اليمين للشمال و زي ال fade ، flip ، zoom ، وغيرهم ايفكتات كتير وتقدر تعمل بيهم حاجات خيالية عند الscroll والمكتبات دي أشهرهم
- Aos Animate On Scroll
- scroll Reveal
- jQuery Aniview
- wow js
- scrollissimo
- scroll me
- scroll magic ==>
ودي لو كتبت ع جوجل
scroll magic js examples
أو فتحت الdocumentation بتاعتها هتشوف حاجات خيالية حرفيًا ،،

--------------------------

وفي مكتبات بتضيفلك parallax scrolling effect ودا النوع التاني ،،
زي
- parallax js
- simple parallax Scrolling
- tilted page scroll
- parallax image Scroll
- full page js
- universal parallax

-----------------------

وف مكتبات بتخليك تعمل blur ع السكشن اللي انت بتسكرول لآخره ووصلت للسكشن اللي بعده
زي ال
- crossFade js
وتقدر تعمل كل دا بيور ببساطة من غير مكتبات لو حابب ، بس لو حابب تسهل الدنيا علي نفسك مش أكتر ،
النوع التاني دا كان عنيف وطويل أوي :"D

-----------------------

3 - عارف الadmin dashboard ؟
في معظم المواقع بتلاقي فيها charts وأشكال بيانية وبتسأل نفسك دي اتعملت ازاي ؟ المكتبات دي اسمها
data Visualization libraries
دول أشهر مكتبات بتعمل الأشكال دي وتقدر منها ت customize الداتا اللي بتظهر ع الcharts دي ،، أشهرهم ال

- chart js
- D3 js
- Apexchart js
- Rechart js
وجوجل نفسها مقدمالك الخدمة دي وعملالك charts خاصة بيها وكمان مقدمالك geo chart هتقولي يعني اي ، يعني بتقدملك خريطة لأي بلد وكمان interactive معاك وتقدر ت customize ليها الداتا اللي انت عاوزها ، اكتب بس انت google charts ،،
كل اللي عليك انك تفتح الdocumentation بتاعة المكتبات دي وهتلاقي شرح كل حاجة وازاي تبدأ تستعملها بشكل بسيط جدا ولو مستصعب الموضوع وفي حاجة واقفة معاك أو مش فاهم ازاي تستخدم مكتبة معينة وبيقابلك مشكلة فيها ، سيب كومنت وهحاول باذن الله أعمل فيديو في شرح بسيط لأي مكتبة انت محتاج تستعملها ،،
دا أول بوست باذن الله في سلسلة بوستات كتير مفيدة جدا في مجالنا هتنزل قريب باذن الله ، متنساش تسيب لايك للبيدج وتعمل فولو عشان البوست الجاي يوصلك ، ودا لينك شانل التليجرام
https://t.me/agcoding
لو حابب تتابع معانا كل حاجة بتنزل وأي tips أو tricks جديدة في ال frontend ،،
ودا لينك قناة اليوتيوب عليهم تطبيقات هتفيدك جدا توظف اللي اتعلمته ❤
https://youtube.com/c/AbdoELAzizGamal