​​📖 Foydali manba: JavaScript30 - JS haqida 30 ta qiziqarli va amaliy videodars
🔗 Havola: https://javascript30.com/
🔗 Havola (YouTube): https://www.youtube.com/playlist?list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH

Kecha CSS haqida 30 ta videolik turkumni tavsiya qilgan edim. Bugungi navbat JSga. Bu videolarni qunt bilan o'rganib chiqilsa, JavaScriptdagi tajribani ancha oshirib olsa bo'ladi. Misol uchun, videolarda array bilan ishlash, DevTools imkoniyatlari haqidagi soddaroq mavzulardan tortib, turli murakkablikdagi kichik loyihalarni va hatto mini o'yinni ham tuzishni o'rganish mumkin. Ba'zi videolarda ko'pchilikni o'ylantirib qo'yadigan JS mavzularini batafsil tushuntirib ham berilgan.

❓ Savol ❓
Siz uchun eng foydali yoki eng qiziqarli bo'lgan video qaysi biri bo'ldi? Izohlarda yozib qoldiring.

👉 @mayoquz 👈

#js #html #css #loyihalar #frontend #foydali_manba

Watch "Отзывчивый выход объекта за пределы сетки CSS HTML. Интересный случай с контейнером." on YouTube
https://youtu.be/NVdlfhkDAGM

Shu videoda oʻziga xos bir maketning moslashuvchan yechimi berilgan ekan. Foydali boʻlishi mumkin

​​⚒ Foydali instrument: JavaScript/CSS Code Beautifier
🔗 Havola: https://chrome.google.com/webstore/detail/iiglodndmmefofehaibmaignglbpdald

Minifikatsiya qilingan CSS yoki JavaScript faylni qiynalmasdan o'qiy olasizmi? 😁 Probel-u xatboshlar, indentatsiya olib tashlangan kodni o'qiyman deb qiynalib o'tirasizmi? Tinchgina brauzerga kengaytma o'rnatib olgan afzal, menimcha. Bugungi tavsiya qilinayotgan instrument zichlangan CSS va JS kodni o'qishga oson qilib beradi. Foydasi tegib qolar, Xudo xohlasa 😊

❓ Savol ❓
Minifikatsiya qilingan kodning loyiha uchun foydasi aynan nimada?

👉 @mayoquz 👈

#js #css #brauzer_kengaytmasi #frontend #foydali_instrument

Assalomu alaykum. Oldingi hafta dushanbadagi kabi bugun ham Mayoq Podkastni chiqaramiz. Bugungi podkast mavzusi - "Qobiliyatingizning siri nimada, sensey?". Xudo xohlasa, soat 21:00 da premyera. Faqat @mayoquz da 😁 (televizorda shunday reklama qilar edimi?)

​​🎧 "Qobiliyatingizning siri nimada, sensey?" - Mayoq Podkast 002

Yangi sohani o'rganyapsiz. Oldinroq o'rganishni boshlagan do'stlaringiz yoki ustozingiz siz soatlab bosh qotiradigan vazifani qisqa vaqt ichida tugatib qo'yishyapti. Bundan yurak siqilib, "bu soha menga emasmikin, nega men ham shunday yaxshi ishlay olmayapman" degan fikrga borishingiz mumkin. Bu holatda muhim narsa - qiziqish va shashtni pasaytirmaslik. Boshqalarning tez va yaxshi ishlashiga sabab - ularning yillar davomida yig'gan tajribalari. Siz ham bundan birmuncha vaqt o'tib "shu oddiy narsaga 1 hafta vaqt ketkazgan ekanmana, o'zi yarim soatlik ish ekanku" deydigan bo'lasiz, Xudo xohlasa.

#dasturlash #html #css #js #frontend #mayoq #podkast #podcast

@mayoquz

"Qobiliyatingizning siri nimada, sensey?" - Mayoq Podkast 002

👉 @mayoquz

​​⚒ Foydali manba: OMDbAPI - kinolar haqida ochiq ma'lumotlar ombori
🔗 Havola: http://www.omdbapi.com/

JavaScriptni o'rganayotganda odamning nisbatan amaliyroq, o'rtoqlarga, ish beruvchiga faxr bilan ko'rsatsa bo'ladigan loyiha qilgisi keladi. Masalan, hozir karantin paytida kino va seriallar ko'rish imkonini beruvchi platformalar ommalashdi, KinoPoisk HDning o'zi birinchi uch oy obuna uchun oyiga deyarli 600 so'mgina olyapti. Shunga o'xshash saytni tuzmoqchi bo'lsangiz, kinolar haqidagi har bir ma'lumotni internetdan qidirib, "copy-paste" qilishingiz shart emas. OMDbAPI.com saytidan IMDb.com kinolar saytidagi deyarli hamma ma'lumotni olishingiz mumkin: kino nomi, reyting, chiqarilgan yili, qaysi aktyorlar o'ynagan, janri qanday va boshqalar. Bu sayt APIsida izlash va filtrlash imkoniyatlari ham bor. Ha, aytgancha, kinolarning posterlarini 🖼 ham topib bera oladi.

❓ Savol ❓
Dasturchilar uchun ko'rib foydali bo'lgan qaysi kino yoki seriallarni bilasiz? Izohlarda yozib qoldiring.

👉 @mayoquz 👈

#html #js #css #dom #frontend #foydali_instrument #kinolar

Hozir TexnoGapning 3-soni ketyapti. Qiziquvchilarni taklif qilib qolaman

​​⚒ Foydali manba: FunFunFunction kanalining JavaScriptdagi funksional dasturlash bo'yicha darslari
🔗 Havola: https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84

JavaScriptda forEach, map, filter, every, some, reduce kabi yuqori daraja funksiyalari bor. Ular sizga for loop da yozilgan, lekin o'qilishi qiyinroq bo'lgan kodni tushunish oson bo'lgan ko'rinishga keltirishga yordam beradi. O'zim aynan shu videolarni ko'rgandan so'ng bu tushunchalarni aniq tushuna boshlaganman. Mattias Peter Johansson (MPJ - videolar muallifi) ham odamni zeriktirmaydigan, qiziq usulda o'rgatgan. Uning boshqa videolar ham maza qilib ko'rishli.

❓ Savol ❓
JavaScriptda siz uchun eng qiyin tushuncha/mavzu qaysi?

👉 @mayoquz 👈

#js #dom #frontend #foydali_manba #functional_programming

​​⚒ Foydali manba: FrontendMentor.io - frontend bo'yicha mashq va vazifalar
🔗 Havola: https://frontendmentor.io

HTML, CSS va JavaScriptni qaysidir darajagacha o'rgangandan so'ng odam bir maza qilib mashq qilgisi keladi. O'zi uchun mashq shartini tuzib, keyin bajarmoqchi bo'lsa, biroz zerikarliroq bo'ladi: maket juda sodda, o'ziga moslashtirilgan, tajriba o'sishiga katta yordam bera olmaydi. Shunday holatlarda turli tayyor maketlar bo'yicha mashq qilib malakani oshirish mumkin. FrontendMentorda turli murakkablikdagi maketlardan birini tanlab, uning yechimi kodini yuborishingiz ham mumkin. Vazifani eng yaxshi bajarganlarni ham davomiy e'lon qilib turishadi. Agar maketning manbasi (isxodnik) kerak bo'lsa, premium darajadagi maketlarni olishingiz mumkin.

❓ Savol ❓
Siz odatda mashq uchun maketlarni qaysi saytdan yoki manbadan topasiz?

👉 @mayoquz 👈

#html #css #js #mashq #frontend #foydali_manba

​​🎧 Angular, React Yoki Vue? Qay birini tanlash kerak? - Mayoq Podkast 003

JavaScript dasturlash tilining dunyosi juda katta va xilma-xil. Kundan-kunga yangi instrumentlar, freymvorklar, freymvorkda ishlashni osonlashtiruvchi instrumentlar chiqib boryapti. Shunday ko'p tanlash imkoniyati borki, odam qay birini tanlaykin, deb boshi qotadi: forumlar va guruhlarda ko'pchilikdan so'rab chiqadi, turli maqolalarni o'qiydi, YouTubedagi dasturlash haqidagi kanallar videolarini yotvolib ko'radi. Lekin oxirida baribir tugal bir to'xtamga kela olmaydi. JavaScriptning frontend va bir sahifali dasturlar (single page application - SPA)lar uchun eng mashhur freymvork va kutubxonalari - Angular, React yoki Vuedan birini tanlashda ikkilanib turganlar uchun shaxsiy tajribaga tayanib tavsiyalar berib ko'ramiz.

❗️ BUGUN SOAT 21:00 da ❗️

#frontend #angular #react #vue #freymvork #kutubxona #podkast

👉 @mayoquz 👈

🎧 Angular, React yoki Vue? Qay birini tanlash kerak? - Mayoq Podkast 003

Angular, React va Vue bo'yicha o'zbek tilidagi videodarslar

Angular (84 ta video): https://www.youtube.com/playlist?list=PL_WK6W0Gn1I7yfdRefzKcfpNIjYHPpi6G
React (hozircha 5 ta video): https://www.youtube.com/playlist?list=PLd1cTxGen2d6zeNqNFjKkHhqsXFoMYzUT
Vue (hozircha 9 ta video): https://www.youtube.com/playlist?list=PLGWzrBMoogxDrp_t7ag7sAkxphGt1j8sT

MUHIM
Bu freymvork va kutubxonalarni o'rganishdan oldin JavaScriptni puxta o'rganib olish shart. Bo'lmasa, juda sodda masalalarda ham ko'p qoqilib qolish mumkin.
JavaScript asoslari bo'yicha darslar: https://www.youtube.com/playlist?list=PL_WK6W0Gn1I7bL0pRUxYSbTj6g8tHU6Yq

Saytda biron kim scroll qilsa, scroll yo'nalishi tepaga yoki pastga ekanligini aniqlashga yordam beradigan kichik JS kod:
https://stackoverflow.com/questions/7154967/how-to-detect-scroll-direction#answer-7309786

Muhim nuqta: agar sizda sahifa ichida boshqa overflow scroll li bo'limlar bo'lsa, window ga ilingan event listener ni o'sha ichki element ichida o'chirib qo'yish esdan chiqmasin

Mana bu sayt o'zgarishini qarang 🤩
https://twitter.com/evaferreira92/status/1264929144862900229?s=20

"[ Photo ]
Assalomu aleykum kanalizda scroll bo'yicha stackoverflowga ssilka tashagan ekansiz. Eng tepadagi resheniya noto'g'ri dib xisobliyman. Birinchisi DOMMouseScroll bu standart emas va deprecated https://developer.mozilla.org/en-US/docs/Web/API/Element/DOMMouseScroll_event mousewheel bo'sa faqat sichqonchani g'ildiraki bilan ishliydi klaviatura bilan yoki telefonda scroll qisez ishlamiydi. Globalniy peremenniy bilan ishlasayam shu resheniya to'g'riroq dib xisobliyman lekin faqat var lastScrollTop = 0; mas var lastScrollTop = window.screenTop; qisa to'g'riroq bo'lardi chunki saxifani yarimigacha scroll qilib saxifani obnovit qisa noto'g'ri ishlashi mumkin. Yana bo'tta addEventListener ishlatib 3chi parametrida { passive: true } qisa performanse yaxshiroq bo'lardi https://www.afasterweb.com/2017/08/23/passive-event-listeners-scroll-performance/"

©️ Muhammadamin Ibragimov

Yaxshilikni ulashganlar sog'-omon bo'lishsin 😊

Bugungi suhbatimiz quyidagi linkda boshlandi 👇👇👇
https://www.youtube.com/watch?v=KXAalrtEdKg