Azizbek aka
Shunga qo'shimcha qilib, kichik namuna qoldiraman.
Ya'ni, agar siz sahifada ichida vertikal juda uzun kontenti bo'lgan modalni ochsangiz, kontentni oxirigacha ko'rib chiqish uchun, vertikal skroll qilasiz, shunda kontent tagiga yetganingizda, asosiy sahifadagi skroll ham ishlab ketadi. Bu rostan juda noqulay holat. Yechim sifatida modal stiliga
Quyidagi namuna orqali kengroq tushunib olasiz, CSS bo'limiga e'tibor qarating:
Namuna havolasi
#css
ovescroll-behavior: contain haqida juda foydali ma'lumot berganlar. Shunga qo'shimcha qilib, kichik namuna qoldiraman.
Ya'ni, agar siz sahifada ichida vertikal juda uzun kontenti bo'lgan modalni ochsangiz, kontentni oxirigacha ko'rib chiqish uchun, vertikal skroll qilasiz, shunda kontent tagiga yetganingizda, asosiy sahifadagi skroll ham ishlab ketadi. Bu rostan juda noqulay holat. Yechim sifatida modal stiliga
ovescroll-behavior: contain qo'yish kifoya.Quyidagi namuna orqali kengroq tushunib olasiz, CSS bo'limiga e'tibor qarating:
Namuna havolasi
#css
codepen.io
ovescroll-behavior: contain
...
👍2
Mashhur Vue Mastery platformasi kelayotgan dam olish kunlari uchun barcha pullik kurslarini tekin qilmoqda.
Juda sifatli kurslarni ko'rib chiqish uchun ajoyib imkoniyat. Ushbu havola orqali, joyingizni band qilishingiz mumkin.
https://www.vuemastery.com/free-weekend/#thank-you
#vue
Please open Telegram to view this post
VIEW IN TELEGRAM
Vue Mastery
Free Weekend May 10-12 2024
Join me to watch all of @VueMastery’s courses free through May 10-12
👍2
Frontend nation
4-7 iyun kunlari keng miqyosli, 40 dan ortiq speakerlarni o'zida jamlagan frontend sohasi bo'yicha katta onlayn event bo'lishi kutilmoqda.
Ko'plab freymvork mutaxassislaridan muhim bilimlarni olish uchun yaxshi imkoniyat.
Ro'yhatdan o'tish: https://frontendnation.com
#frontend
4-7 iyun kunlari keng miqyosli, 40 dan ortiq speakerlarni o'zida jamlagan frontend sohasi bo'yicha katta onlayn event bo'lishi kutilmoqda.
Ko'plab freymvork mutaxassislaridan muhim bilimlarni olish uchun yaxshi imkoniyat.
Ro'yhatdan o'tish: https://frontendnation.com
#frontend
⚡2
Shartli qiymatlar o'rniga default parametrlardan foydalaning
Default parametrlar kodlarni tozaroq ko'rinishiga yordam beradi.
Lekin, ular faqat
❌ Yomon:
✅ Yaxshi:
#JavaScript #CodingTips #WebDevelopment #CleanCode
Default parametrlar kodlarni tozaroq ko'rinishiga yordam beradi.
Lekin, ular faqat
undefined argumentlarnigina o'rnini bosa oladi. Boshqa "falsy" qiymatlar '', false, null, 0, va NaN qiymatga ega argumentlarga ta'sir qilmaydi.❌ Yomon:
function createMicrobrewery(name) {
const breweryName = name || "Hipster Brew Co.";
// ...
}✅ Yaxshi:
function createMicrobrewery(name = "Hipster Brew Co.") {
// ...
}#JavaScript #CodingTips #WebDevelopment #CleanCode
👍1
Muammo: Array.reduce tushunishga sal qiyinroq
Yechim: Tushunarli nomlar tanlang doim.
#JavaScript #CodingTips #WebDevelopment #CleanCode
Yechim: Tushunarli nomlar tanlang doim.
#JavaScript #CodingTips #WebDevelopment #CleanCode
✅ Intervyudan savol
Javanoscriptda Pure funksiya nima?
Javob:
Javanoscriptda Pure funksiya shunday funksiyaki, unga bir xil input qiymatlar berilsa, doim bir xil natija qaytaradi va hech qanaqa side-effectlar(ya'ni global tashqi state ma'lumotlarini o'zgartirmaydi) yuzaga keltirmaydi.
Impure funksiya esa yuqoridagi namunada, o'zining scopedan tashqaridagi stateni o'zgartirgan, ya'ni side-effect kelib chiqqan.
#interview #js
Javanoscriptda Pure funksiya nima?
Javob:
Javanoscriptda Pure funksiya shunday funksiyaki, unga bir xil input qiymatlar berilsa, doim bir xil natija qaytaradi va hech qanaqa side-effectlar(ya'ni global tashqi state ma'lumotlarini o'zgartirmaydi) yuzaga keltirmaydi.
Impure funksiya esa yuqoridagi namunada, o'zining scopedan tashqaridagi stateni o'zgartirgan, ya'ni side-effect kelib chiqqan.
#interview #js
👍2
Yuqorida farqni ko'rishingiz mumkin.
#js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Foydali repozitoriy.
Bu yerda veb-dasturlash uchun 100 dan ortiq loyihalarni o'z ichiga olgan tayyor kodlar(html+css+js) to'plami bor ekan.
Turli xil interfeyslar yaratish uchun yaxshi asos bo'lib xizmat qilishi mumkin.
🔗 Havola: https://github.com/solygambas/html-css-javanoscript-projects?tab=readme-ov-file
#resource
Bu yerda veb-dasturlash uchun 100 dan ortiq loyihalarni o'z ichiga olgan tayyor kodlar(html+css+js) to'plami bor ekan.
Turli xil interfeyslar yaratish uchun yaxshi asos bo'lib xizmat qilishi mumkin.
#resource
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - solygambas/html-css-javanoscript-projects: 100+ mini web projects using HTML, CSS and JavaScript.
100+ mini web projects using HTML, CSS and JavaScript. - solygambas/html-css-javanoscript-projects
✅ Intervyudan savol
Javanoscriptda function declaration va function expression o'rtasida qanday farq bor?
Javob:
function declaration:
• Kod kalit so'zi bilan boshlanadi.
• Contextda hohlagan yerda e'lon qilinishi mumkin va bo'lish xususiyatiga ega, ya'ni funksiya e'lon qilinganidan avvalroq ham chaqirilishi mumkin
function expression:
• Bunaqa funksiya o'zgaruvchiga qiymat sifatida tayinlanadi.
• Bunaqa funksiyalar bo'lmaydi va ularni faqat o‘zgaruvchiga tayinlangandan keyingina chaqirish mumkin.
#interview #js
Javanoscriptda function declaration va function expression o'rtasida qanday farq bor?
Javob:
• Kod
function• Contextda hohlagan yerda e'lon qilinishi mumkin va
hoistedfunction expression:
• Bunaqa funksiya o'zgaruvchiga qiymat sifatida tayinlanadi.
• Bunaqa funksiyalar
hoisting#interview #js
event.preventDefault() va event.stopPropagation() orasida qanday farq bor?
1.event.preventDefault()
Vazifasi: Brauzerning standart xatti-harakatini bekor qiladi.
Amaliy misol:
Natija:Forma yuborilmaydi, sahifa qayta yuklanmaydi.
2.event.stopPropagation()
Vazifasi: Hodisaning DOM bo'ylab tarqalishini(bubbling va capturing) to'xtatadi.
Amaliy misol:
Natija:Child elementiga bosilganda faqat oʻsha elementning click hodisasi ishlaydi, parent elementigacha ko'tarilmaydi.
#interview #js #DOM #EventHandling
1.event.preventDefault()
Vazifasi: Brauzerning standart xatti-harakatini bekor qiladi.
Amaliy misol:
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('Forma yuborilishi to'xtatildi');
});Natija:
2.event.stopPropagation()
Vazifasi: Hodisaning DOM bo'ylab tarqalishini(bubbling va capturing) to'xtatadi.
Amaliy misol:
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
child.addEventListener('click', function(event) {
event.stopPropagation();
console.log('Faqat child elementi bosiladi');
});
parent.addEventListener('click', function() {
console.log('Parent elementi bosiladi');
});Natija:
#interview #js #DOM #EventHandling
✅ Intervyudan savol
JavaScriptda call(), apply() va bind() biri biridan qanday farq qiladi va ularning har birini qachon ishlatish mumkin?
Javob:
- call():
Funksiyani maxsus konteksti bilan ijro etadi va argumentlarni alohida-alohida uzatishimiz kerak bo'ladi.
Diqqat qiling, 1-argument yuqoridagi namunada bo'ladi.
- Ishlatish holati: Funksiyani chaqirib, argumentlarni birma bir uzatish kerak bo'lganda.
- apply():
ga o'xshash, shunchaki, argumentlar massiv sifatida yuborish kerak.
- Ishlatish holati: Argumentlaringiz massivda bo'lsa va ularni funksiyaga yubormoqchgi bo'lsangiz.
- bind():
Doimiy bog'langan konteksti bilan yangi funksiya qaytaradi.
va dan farqi, darxol chaqirilmaydi, shunchaki yangi funksiya qaytaradi, keyinroq chaqirsa bo'ladigan
- Ishlatish holati: Keyinchalik chaqirish uchun belgilangan kontekstiga ega funksiya yaratmoqchi bo'lganingizda.
#interview #js
JavaScriptda call(), apply() va bind() biri biridan qanday farq qiladi va ularning har birini qachon ishlatish mumkin?
Javob:
Funksiyani maxsus
thisDiqqat qiling, 1-argument yuqoridagi namunada
this- Ishlatish holati: Funksiyani chaqirib, argumentlarni birma bir uzatish kerak bo'lganda.
- apply():
call()- Ishlatish holati: Argumentlaringiz massivda bo'lsa va ularni funksiyaga yubormoqchgi bo'lsangiz.
- bind():
Doimiy bog'langan
thiscall()apply()- Ishlatish holati: Keyinchalik chaqirish uchun belgilangan
this#interview #js
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Ba’zida hech qanday dizaynsiz UI komponentlar yaratishga to‘g‘ri keladi.
Shunaqa paytlarda, googleda sanoqsiz komponentlarni tanlab o‘tirish ancha vaqt oladi.
Yaqinda shu muammoni hal qiladigan foydali bir instrumentga duch keldim.
Vercel Labs tomonidan ishlab chiqilgan v0.dev standart UI layout yoki komponentlarni AI yordamida avtomatik generatsiya qilib berarkan.
#tip
Shunaqa paytlarda, googleda sanoqsiz komponentlarni tanlab o‘tirish ancha vaqt oladi.
Yaqinda shu muammoni hal qiladigan foydali bir instrumentga duch keldim.
Vercel Labs tomonidan ishlab chiqilgan v0.dev standart UI layout yoki komponentlarni AI yordamida avtomatik generatsiya qilib berarkan.
#tip
👍3
"Side project" qilmoqchisiz lekin vaqt yoʻq?
Yaqinda tajribali dasturchi Povilas Koropning shu savol boʻyicha muhim tavsiya bergan videosini ko'rib qoldim.
1-tavsiya. Loyihani boʻlaklarga boʻlib tashlang.
Dam olish kunlarida agar hech bolmasa 1 soat boʻlsada boʻsh vaqtingiz boʻlsa, masalan loyihaning asosiy sahifa dizaynini chizib qoʻying, yoki database schema yaratib qoʻying, hech boʻlmaganda qogʻozda bo'lsa ham.
Shuningdek, mavjud to do list orqali keyingi vazifa ham aniq boʻlishi kerak albatta. Shu tarzda bir necha oy ichida ancha katta loyiha yaratib qoʻyishingiz mumkin
2- tavsiya. Agar rostdan vaqtingiz boʻlmasa, balki qoʻshimcha loyiha qilish siz uchun shart emasdir.
Undan koʻra oʻsha vaqtni dam olishga, fikrlarni toʻplashga sarflagan arziydi. Hamma loyiha qilayotgan boʼlsa siz ham qilishingiz shart degani emas. Sizdan haqiqatdan motivatsiya va hohish boʻlmasa , baribir yarim yoʻlda qolib ketadi.
Yaqinda tajribali dasturchi Povilas Koropning shu savol boʻyicha muhim tavsiya bergan videosini ko'rib qoldim.
1-tavsiya. Loyihani boʻlaklarga boʻlib tashlang.
Dam olish kunlarida agar hech bolmasa 1 soat boʻlsada boʻsh vaqtingiz boʻlsa, masalan loyihaning asosiy sahifa dizaynini chizib qoʻying, yoki database schema yaratib qoʻying, hech boʻlmaganda qogʻozda bo'lsa ham.
Shuningdek, mavjud to do list orqali keyingi vazifa ham aniq boʻlishi kerak albatta. Shu tarzda bir necha oy ichida ancha katta loyiha yaratib qoʻyishingiz mumkin
2- tavsiya. Agar rostdan vaqtingiz boʻlmasa, balki qoʻshimcha loyiha qilish siz uchun shart emasdir.
Undan koʻra oʻsha vaqtni dam olishga, fikrlarni toʻplashga sarflagan arziydi. Hamma loyiha qilayotgan boʼlsa siz ham qilishingiz shart degani emas. Sizdan haqiqatdan motivatsiya va hohish boʻlmasa , baribir yarim yoʻlda qolib ketadi.
To'liq video: YouTube🖤
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Javanoscript kod aslida qanday ishlaydi?
Javanoscript qanday ishlashi haqida qiziq bir video ko'rib qoldim.
Aniq va tiniq tushuntirish:
Javanoscript kod dastlab brauzerning ichki qismida ishlashi uchun ishlab chiqilgan.
Har bir brauzerning esa o'zining Javanoscript engine bor.
Masalan:
V8 Chrome uchun
Javanoscript core Safar uchun
SpiderMonkey Mozilla uchun
Chakra Microsoft Edge uchun
#js
Javanoscript qanday ishlashi haqida qiziq bir video ko'rib qoldim.
Aniq va tiniq tushuntirish:
Javanoscript kod dastlab brauzerning ichki qismida ishlashi uchun ishlab chiqilgan.
Har bir brauzerning esa o'zining Javanoscript engine bor.
Masalan:
V8 Chrome uchun
Javanoscript core Safar uchun
SpiderMonkey Mozilla uchun
Chakra Microsoft Edge uchun
#js
This media is not supported in your browser
VIEW IN TELEGRAM
VueSchool Vue js uchun eng sifatli kurs chiqaradigan platformalardan biri hisoblanadi.
Bir necha yildan buyon kuzatib kelaman, 2-3 noyabr kunlari premium kurslarini 2 kunga bepulga ocharkan.
Bilimlarni mustahkamlash uchun yaxshi imkoniyat.
https://vueschool.io/freeweekend/
#vue
Bir necha yildan buyon kuzatib kelaman, 2-3 noyabr kunlari premium kurslarini 2 kunga bepulga ocharkan.
#vue
vueschool.io
Vue School | The #1 source for learning Vue.js from experts
Basic to advanced Vue.js training from core team members & industry experts. In-depth lessons with weekly updates on Pinia, Typenoscript, Vue Use, Laravel, & more
Salom, do'stlar
Biroz muddat kanalda postlar qo'yilmadi.
Anchadan buyon Algoritmlar bo'yicha bilimlarimni yaxshilash ustida ishlamoqdaman.
Bunda FreeCodecamp platformasidan foydalanayapman. Bu platformada faqat amaliy vazifalar yechib o'rganasiz
Yana bir shunga o'xshagan lekin pulli va sifatli bo'lgan Scrimba dan esa Advanced Javanoscript kursini ham ko'rib boryapman.
Bu platformaning kuchli tomoni, bir vaqtning o'zida parallel video ko'rib kod yozishingiz mumkin.
Biroz muddat kanalda postlar qo'yilmadi.
Anchadan buyon Algoritmlar bo'yicha bilimlarimni yaxshilash ustida ishlamoqdaman.
Bunda FreeCodecamp platformasidan foydalanayapman. Bu platformada faqat amaliy vazifalar yechib o'rganasiz
Yana bir shunga o'xshagan lekin pulli va sifatli bo'lgan Scrimba dan esa Advanced Javanoscript kursini ham ko'rib boryapman.
Bu platformaning kuchli tomoni, bir vaqtning o'zida parallel video ko'rib kod yozishingiz mumkin.
www.freecodecamp.org
Learn to Code — For Free
🔥1
Intervyularda setTimeout bilan bog'liq bir qiziq savol kelishi mumkin
Tassavur qiling, bizda
Endi vazifa: 3 sekunddan keyin yashil ko'rsatsin.
Odatda ko'pchilik setTimeout-ga shunaqa argument yuboradi.
Lekin bu xato. Bu yerda funksiya 3 sekundni kutmasdan ishlab ketadi.
Ko'rib turganingizdek , darxol yashil chiqdi. Lekin bizga 1- qizil, keyin 3 sekunddan so'ng yashil chiqishi kerak.
Bu muammoga yechim,
Yechim yuqoridagi suratda.
#interview #js
Tassavur qiling, bizda
displayTrafficLight funksiyasi bor , parameter sifatida light-ni oladi. Endi vazifa: 3 sekunddan keyin yashil ko'rsatsin.
Odatda ko'pchilik setTimeout-ga shunaqa argument yuboradi.
Lekin bu xato. Bu yerda funksiya 3 sekundni kutmasdan ishlab ketadi.
function displayTrafficLight(light){
console.log(light)
}
setTimeout(displayTrafficLight('🟢'), 3000)
displayTrafficLight('🔴')
//Natija:
🟢
🔴
Ko'rib turganingizdek , darxol yashil chiqdi. Lekin bizga 1- qizil, keyin 3 sekunddan so'ng yashil chiqishi kerak.
Bu muammoga yechim,
setTimeout-ga yana bir argument jo'natishimiz kerak, funksiyadagi argumentni esa o'chirib qo'yamiz.#interview #js
👍3
Forwarded from Ayyubxon Fargʻoniy | 0.1x engineer (Ayyubxon)
Twitterda mana shu post ostiga yaxshi maslahatlar yozishgan, har birimiz uchun foyda deb o'ylayman:
https://x.com/tillkruegerDEV/status/1866749028433560049
https://x.com/tillkruegerDEV/status/1866749028433560049