الحمد لله كرم ربنا وفضله كبير ، ربنا وفقني إني أعمل 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

بفضل ربنا وكرمه تم شرح تطبيق admin dashboard ودا لينك البلاي ليست ،، لو انت حد لسه بادئ ومبتعرفش تطبق ف صدقني البلاي ليست دي هتساعدك جدا ، شارح كل حاجة فيها بالتفصيل الممل ،
https://youtube.com/playlist?list=PLnD96kXp-_pNMQqlhvftNADK2frTt_j-0
ودا فيديو بسيط intro ليها ،
ودا لينك الlive demo لو حابب تشوفها بنفسك ..
https://admindashboardz.netlify.app/

ودي بلاي ليست تطبيق ع موقع اسلامي كامل وquran player بصوت الشيخ مشاري راشد العفاسي ،،
https://youtube.com/playlist?list=PLnD96kXp-_pMo0m5hAltTJmrTAaMdxWFF

#application

البوست دا مهم للui ux ولل frontend developers ، كتير بتشوف مواقع كتير تعجبك أوي ، رغم بساطتها ، وانك بعينك كمبرمج بتقول ان المواقع دي بسيطة مش صعبة ككودينج بس فعلا الموقع بيسيب أثر رجعي كويس في عينك ، طيب سواء انت ui أو frontend ف عاوز تعرف أكيد السر في جمال المواقع دي رغم بساطتها ، هقولك السر انك تعرف تختار values دقيقة للproperties بتاعتك ، انت عارف الproperty ووظيفتها بس مش قادر توظفها صح ، من أول تناسق الألوان مع بعضها لحد درجات الgradient والbox-shadow ودا اللي أنا جاي أتكلم عنه النهاردة جايبلك tools كتير هتسهل عليك حياتك في مجالنا ،، دا أنا حتي جايبلك tools تسهل عليك انك تcreate layout بس مش البوست دا ، بس دي مبحبذش تستعملها ، عشان لازم تكون فاهم كويس أوي ازاي تبني الlayout لموقعك ،، نبدأ في الtools ع طول بقي
_______
شاطر في التصميم بس مبتعرفش تختار ألوان متناسقة مع بعضها وتريح العين ، المواقع دي بتقدملك plattes جاهزة بالألوان اللي ممكن تكون متناسقة مع بعض
Colorhunt =>
يعتبر أشهرهم وبتلاقي فيه plattes محطوطة فيفورت عند عدد كبير من الناس وبيديك الhexacolors values للألوان بتاعتك ،

Awwwards =>
الموقع دا من أعظم المواقع اللي هتعرفها ، دايما بيهتم انه يسلط الضوء علي الweb trends وأحسن الديفلوبرز والديزاينرز ، كمان بيعمل منافسة ليهم ،،
اكتب بس في جوجل
Trendy web color plattes and color schemes and tools awwwards
هيقدملك صور لtrendy websites وبمجرد م تعمل hover ع الصورة هيجبلك الvalue بتاعة الplatte colors للموقع دا

Adobe color wheel =>
دي tool شركة adobe بتقدمهالك عشان تgenerate color platte

Coolros.co =>
الموقع دا بيقدملك features عظيمة غير انه بيجبلك list بالtrending color plattes
الموقع دا تقدر من خلاله ت customize ال
Color platte
بتاعتك تضيف ألوان وتجرب عليها وتتحكم في الhue ، saturation ، brightness دا غير
Features for blindnees
وحاجاات غيرها كتير هسيبك تستكشفها لواحدك ،
طيب أظن كدا كفاية أوي في حوار ال color plattes ،
________
الbox shadow خاصية عظيمة أوي بس مبعرفش أحددلها values كويسة ، انت متخيل ان في ديفلوبر ع موقع codepen رسم موناليزا بقيم الbox shadow !!!!!!!!!!!

Neumorphism.io =>
دا أفضلهم من وجهة نظري المتواضعة لانه بقي trendy أوي في كل الwebsites ، دا غير شكله الجميل جدا ، تخيل ان الخلفية بتاعتك كلها بيضة والعنصر اللي جوا الخلفية دي خلفيته برده أبيض هل هتقدر تفرق مكان العنصر فين ف العنصر الكبير بتاعك ؟ هقولك مستحيل ، دي اتحلت بقي دلوقتي بالموقع دا ، غير انه بيخلي شكلها جميل أوي ومريحة للعين كيوزر ، كمان أشهر الwebsites دلوقتي بقت معظمها بتستخدم الموضوع دا ، متنساش دي مجرد tool بتساعدك تgenerate قيم ، شطارتك انك تختار قيم صح
Cssmatic =>
الموقع دا مش بس boxshadow generator رغم ان دي اكتر حاجة تميزه ، لا دا فيه كمان
Gradient generator
واتقل جايبلك ليها مواقع جميلة ،
وفيه border raduis generator
و noise texture يعني اي noise texture ببساطة الtool دي بتعملك background بباترن معينة من البكسلة والnoise

Cssgenerator.org
واللي بيقدملك خدمات كتير أوي غير الbox shadow أهمهم الfilter وال transform ، هتقولي برده انا مش فاهمك ازاي ب generate الحاجات دي ، اقولك انه بكل بساطة بيكون جايبلك box بيطبق عليه قيم ، القيم دي انت اللي بتحددها من خلال range جنبها انت اللي بتلعب فيه بالماوس لحد م توصل قدام عينك للنتيجة اللي عاوزها بتاخد القيم ، الحوار بسيط أوي ي خال ،،
_____________

Gradient color
انك تضيف الالوان بتدريج بقت تخلي شكل ألوان الموقع أجمل بكتير وعندك مثال لك لوجو انستجرام ، أنا هكتفي لك بذكر موقعين لأنهم هيغنوك عن كل حاجة مستقبلا
Uigradients =>
ودا هتلاقي فيه قيم جاهزة لgradients كتير منها المُستخدم في شركات عالمية ، زي netflix والعياذ بالله ، وانستجرام و twitch وغيرهم كتير أوي
Cssgradient.io =>
غير انه فيه generator لكن الموقع دا بيقدملك code snippets جاهزة ل
Gradient buttons
وfeatures تانية كتير جميلة ، الموقعا لما تدخله مش هتطلع من جمال الديزاين بتاعه


متنساش تسيب لايك للبيدج وتعمل فولو عشان البوست الجاي يوصلك ، ودا لينك شانل التليجرام
https://t.me/agcoding
لو حابب تتابع معانا كل حاجة بتنزل وأي tips أو tricks جديدة في الfrontend ،
ودا لينك قناة اليوتيوب عليها تطبيقات هتفيدك جدا توظف اللي اتعلمته 🖤
https://youtube.com/c/AbdoELAzizGamal

New in html6 👋
https://morioh.com/p/6d422fc49bd2

بفضل ربنا وكرمه الحمد لله ، فيديو جديد ازاي تحول الtext ل voice ، وقدامك 87
Option
كل صوت مختلف ع التاني وبلهجة دولة مختلفة ، ودا لينك الفيديو
https://youtu.be/1elwPEph2CY

ودا فيديو انترو بسيط للفيديو
ودا live demo لو حابب تجربه بنفسك
https://texttospeechz.netlify.app/
يارب انصر اخواتنا المرابطين في فلسطين 🖤

بفضل ربنا وكرمه الحمد لله ، من باب أضعف الإيمان حبيت أعمل حاجة في مجالي عن فلسطين ، شرح لموقع فلسطيني بسيط ، الموقع landing page ، بس أنا متأكد انك هتستفيد منه جدا ويعلم ربنا انه أكتر موقع تعبت في شرحه عشان أخرجه بشكل كويس ، ربنا ينصر اخواتنا في فلسطين يارب ويخسف الأرض باليهود ،
دا انترو بسيطة للموقع ودا
لينك الموقع لايف لو حابب تشوفه
https://palestinez.netlify.app/
ودا لينك فيديو الشرح
https://youtu.be/ztIiO4MfUO0

ازاي ألعب وأتعلم في نفس الوقت ؟
جايبلك ألعاب في مجال الweb development هتفيدك ، هتلعب وتتعلم في نفس الوقت ،، وكل لعبة عبارة عن levels كل م تعدي level اللي بعده بيكون أصعب عشان يعلمك أكتر ،
هنبدأ ب ألعاب ال layout ، ناس كتير بيكون عندها مشكلة ف انها تبني الlayout بتاع الموقع وعشان أبني أي layout لازم أكون فاهم كويس أوي ال flex وال grid وإيه فيهم هيسهل عليا أبني الlayout فيهم حسب المطلوب منك ف البروجكت ، ف لازم أكون فاهم عشان أختار صح ،،
___________________
نبدأ بألعاب هتعلمك الflex ،

1 - Flexbox Adventure
https://codingfantasy.com/games/flexboxadventure

2 - Flexbox defense
اللينك مش https ف بالتالي الفيس هيمنعه ف اكتب ف جوجل flexbox defense

3 - Flexbox froggy
https://flexboxfroggy.com/

4 - Flexbox Zombies
https://mastery.games/flexboxzombies/

5 - Flexbox Ducky
https://courses.cs.washington.edu/courses/cse154/flexboxducky/
_______________________


ألعاب للgrid
هي لعبة واحدة بس عشان التانية مدفوعة ف خد الfree ":(
1 - Grid Garden
https://cssgridgarden.com/

_____________________
طيب بمناسبة ان البوست اللي فات وعدتك اني هجبلك مواقع تسهل عليك انك تcreate layout
بس هفضل أنصحك دايما اوعي اوعي اوعي تستعملها الا لو فاهم الgrid وال flex كويس ، دي مجرد tools عشان توفر وقتك وانت شغال مش عشان تستخدمها وانت مش فاهمها !
___
ال tools
-- Grid by exampels
بتجيبلك أمثلة لغالبية الlayouts اللي هتستخدمها بالكود جاهز
https://gridbyexample.com/examples/


-- Interactive grid generator
برضه الفيس مرضاش ينزل لينكه ف اكتب ف جوجل interactive grid layout generator


-- Flexbox layout Exampels
https://www.quackit.com/css/flexbox/examples/



-- flexbox layout Generator
https://flexbox.buildwithreact.com/

______________________
خلصنا الكلام عن الlayout هجبلك بقي
لعبة تعلمك الselectors بتاعة اللغة وازاي ت specific element بعينه وتعمله select بال css
- Css Dinner
https://flukeout.github.io/

_________________
خلصنا كدا خلاص فاضل بس جايزة اخر البوست م انت مقرأتش كل دا ومش هكافئك يعني ، دي tool بتساعدك ت generate أي حاجة محتاجها ف الcss
زي الtransform ، filter ، ال shadow
--
https://css-generator.netlify.app/
______________________

معلش طولت عليك بس أنا عاوز أفيدك وربنا يعلم ، دا لينك لبوست فيه tools تانية جميلة كنت اتكلمت عنها قبل كدا ،
https://www.facebook.com/102090001829572/posts/165976762107562/?sfnsn=scwspmo


ودا لينك لبوست فيه معظم مكتبات الjs اللي هتحتاجها ف شغلك ولسه ليه تكملة باذن الله تعالي ،
https://www.facebook.com/102090001829572/posts/162328812472357/?sfnsn=scwspmo



متنساش تسيب لايك للبيدج وتعمل فولو عشان البوست الجاي يوصلك ، ودا لينك شانل التليجرام
https://t.me/agcoding
لو حابب تتابع معانا كل حاجة بتنزل وأي tips أو tricks جديدة في الfrontend ،
ودا لينك قناة اليوتيوب عليها تطبيقات كنت شارحها هتفيدك جدا باذن الله توظف اللي اتعلمته لو انت حد لسه بادئ🖤
https://youtube.com/c/AbdoELAzizGamal

لو اطلب منك فكرة موقع زي uber أو careem أو موقع دليفري ازاي تقدر تضيف خرائط google map للموقع بتاعك ،
دا فيديو الشرح : https://youtu.be/3Cwn1-Ms-oA
دي انترو بسيطة ،،
ودا live demo لو حابب تجرب
https://abdoelazizgamal.github.io/mapboxgl/
بس متنساش تشغل اللوكيشن الأول من موبايلك 🙏

JavaScript Arrays quick sheet👇

This is an image that contains all array methods with explanations and examples

🔗https://t.co/o3XAQ4YeYw https://t.co/cJqzRmUqVN

بلاي ليست جديدة عن الproblem solving with javascript ودا intro بسيط ، ونزل لحد الآن فيديوهين بطريقيتين لحل نفس المشكلة ، الplaylist هتكون كبيرة باذن الله 🙏🌻
https://youtube.com/playlist?list=PLnD96kXp-_pNKynhx8yYhpG5B7SGKOQT4

نزل فيديوهين جداد ف البلاي ليست بتاعة الproblem solving ،
ودا لينك فيديو فيهم 🌻
https://youtu.be/Umc04NeCTt8

الحمد لله ، ازاي تبعت email لأي شخص ب استخدام pure javascript ، بدون استخدام node js أو php mailer أو أي حاجة server side ،، دا لينك الفيديو ، https://youtu.be/d9KyTarmRiY
والplaylist دي بص عليها بصة سريعة بس متأكد انها هتفيدك باذن الله 🌻❤
https://youtube.com/playlist?list=PLnD96kXp-_pNqlUDk72ugJ7UQYQHypS0e

الحمد لله ، نزل فيديوهين جداد ف الproblem solving ،
ودي اللينكات 🌻
https://youtu.be/OsSrsTr0DQI
https://youtu.be/xXo5tcqT8J4

الحمد لله ، ازاي تعمل google search by voice ، https://youtu.be/3WlNQgCx5-8
دا انترو بسيط 🌻
ودا لينك بلاي ليست تطبيقات هتفيدك جدا باذن الله تعالي 🙏

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

ودا لينك playlist للproblem solving by javascript
https://youtube.com/playlist?list=PLnD96kXp-_pNKynhx8yYhpG5B7SGKOQT4