Behzod | IT blog
@seniorDevBlog
1 subscriber
21 photos
2 videos
28 links
Software Engineer at @realsoftuz

⚡️Veb dasturchilar uchun amaliy ma'lumotlar
⚡️Eng ko'p so'raladigan intervyu savollari va javoblari

Shaxsiy blog: @behzodjonBlog

Boshqa sahifalar: solo.to/behzodjon
Download Telegram
About
Blog
Apps
Platform
Join
Behzod | IT blog
1 subscriber
Behzod | IT blog
#js #interview

HTML DOM nima?

HTML DOM - bu HTML uchun standart obyekt modeli va dasturlash interfeysi. U belgilaydi o'zida:

HTML elementlarnii obyektlar sifatida
Barcha HTML elementlarining xossalari
Barcha HTML elementlariga kirish usullari
Barcha HTML elementlari uchun eventlar
Boshqacha qilib aytganda: HTML DOM HTML elementlarini olish, o'zgartirish, qo'shish yoki o'chirish uchun standartdir.
83 viewsedited  
Behzod | IT blog
#js #interview

DOM Content Loaded hodisasi nima?

DOMContentLoaded hodisasi qachonki DOM kontenti yuklanganda ishga tushadi, rasm va stylesheetlarni yuklanishini kutib o'tirmaydi.

DOMContentLoaded hodisasini faqat, qachonki body qismidagi elementlarga havola qiluvchi JavaScript kodini head tegiga joylashtirganingizda ishlating!


Misol:

<!DOCTYPE html>
<html>
  <head>
    <title>JS DOMContentLoaded Event</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let btn = document.getElementById("btn");
        btn.addEventListener("click", () => {
          // handle the click event
          console.log("clicked");
        });
      });
    </script>
  </head>

  <body>
    <button id="btn">Click Me!</button>
  </body>
</html>

P.S
Bu yerda DOM Content Loaded hodisasini ishlatmaganimizda, button bilan ishlay olmasdik
90 viewsedited  
Behzod | IT blog
#js #interview

Data attributelar nima❓

✅ Data attributelar orqali biz HTMLda data saqlashimiz mumkin.

Masalan:

<div
id="test-div"
data-first-name="Kyle"
data-last-name="Cook"
data-active
></div>

Uni quyidagicha o'qib olishimiz mumkin

const div = document.getElementById("test-div")

console.log(div.dataset)

{
active: ""
firstName: "Kyle"
lastName: "Cook"
}

Real misol sifatida esa quyidagi kodga e'tibor bering:

<button data-modal-id="modal-1">Open Modal 1</button>
<button data-modal-id="modal-2">Open Modal 2</button>

<div id="modal-1">Modal 1</div>
<div id="modal-2">Modal 2</div>


const buttons = document.querySelectorAll("[data-modal-id]")

buttons.forEach(button => {
button.addEventListener("click", () => {
const modalId = button.dataset.modalId
const modal = document.getElementById(modalId)
modal.classList.add("show")
})
})

Yuqorida biz 2 ta turli xil modalni ishga tushirish uchun data attributelardan foydalanib , yagona eventListener funksiya yozdik.

@seniorDevBlog
👍2
125 viewsedited  
Behzod | IT blog
https://t.me/vuejs_uz/51466
Telegram
Mirjalol Norqulov in VueJS_uz
Esimda boricha yozaman

HTML
- Semantik elementlar
- div va span teglarining farqi
CSS
- flex va grid layoutlar esimda qolgani shuni so'ragandi
JavaScript
- O'zgaruvchilar turlari
- Funksiyalar, objectlar
- Higher order functions, currying…
151 viewsBehzod, 
Behzod | IT blog
#js #interview

Qanday qilib Javascript obyektlarga yangi propertylar qo'shishni taqiqlash mumkin❓


✅ const myObj = { a: 1, b: 2 };
Object.defineProperty(myObj, 'a', { writable: false });

myObj.a = 3; // error: cannot assign to read only property 'a'



@seniorDevBlog
162 viewsBehzod, edited  
Behzod | IT blog
"Code is like humor. When you have to explain it, it's bad." — Cory House

@seniorDevBlog
388 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#js #tips

Javascriptda "default exports" ishlatishni oldini olgan afzal


Bilganingizdek, JavaScriptda funksiyalarni almashishning ikki xil usuli mavjud: default exports va named exports. default exports moduldan bitta qiymatni eksport qilish uchun ishlatiladi, named exports esa moduldan bir nechta qiymatlarni eksport qilish imkonini beradi.

Funksiya yoki class kabi moduldan biror narsani eksport qilmoqchi bo'lsangiz, default exports asqotadi. Shuning bilan birga, named exports moduldan bir vaqtning o'zida bir nechta narsalarni eksport qilmoqchi bo'lganingizda juda mos keladi.
Ushbu maqolada nega default exportsdan foydalanish tavsiya etilmasligi va undan qochish kerakligini ko'rib chiqamiz.

👉 Maqola Havolasi



 @seniorDevBlog
Telegraph
JavaScriptda "default exports" ishlatishni oldini olgan afzal
Named exports  Yuqoridagi misolda biz add nomli funksiyani add.ts faylidan turib eksport qildik.Quyida esa biz app.ts fayldan turib uni funksiya nomi orqali import qilib oldik. Default exports  Endi keling yuqoridagi funksiyamizni default exports yordamida…
143 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#css #tips

Nima uchun CSS qisqa xususiyatidan foydalanmasligingiz kerak?

Boshqa odamlarning kodida tez-tez e'tibor beriladigan kichik, ammo hayratlanarli darajada muhim masala - bu CSS xususiyat qisqartmasidan foydalanish.

Masalan:

  .btn {
      background: red;
  }

Biz tugmachamiz qizil fon rangiga ega bo'lishini xohlaymiz. Ammo, aslida, biz bir qator ortiqcha qoidalarni o'rnatamiz:

 .btn {
   background-image: initial;
   background-position-x: initial;
   background-position-y: initial;
   background-size: initial;
   background-repeat-x: initial;
   background-repeat-y: initial;
   background-attachment: initial;
   background-origin: initial;
   background-clip: initial;
   background-color: red;
 }



Bu ortiqcha narsalar ko'plab muammolarga sabab bo'lishi mumkin.

@seniorDevBlog
170 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#js #tips

Call stack va task queue


JavaScriptda asinxron dasturlash uchun zarur bo'lgan 2ta muhim tushuncha mavjud: Call stack va task queue. Bu ikkalasining qanday ishlashini bilish sizga samarali va xatosiz yaxshiroq kod yozishga yordam beradi. Ushbu maqolada shular haqida gaplashamiz

👉 Maqola Havolasi



 @seniorDevBlog
Telegraph
Call stack vs task queue 
JavaScriptda asinxron dasturlash uchun zarur bo'lgan ikkita muhim tushuncha mavjud: Call stack va task queue. Bu ikkalasining qanday ishlashini bilish sizga samarali va xatosiz kod yozishga yordam beradi. Call stack Call stack - bu dasturdagi funksiya chaqiruvlarini…
🏆2
225 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#vue #tips

Vue js da watch va watchEffect , qaysi birini qachon ishlatish kerak?


Ushbu kichik maqola sizga ularni kengroq ajratib olishga yordam beradi

👉 Maqola Havolasi



 @seniorDevBlog
Telegraph
Vue js da watch va watchEffect , qaysi birini ishlatish kerak?
Demak, keling kichik eslatmadan boshlaymiz, Vueda biz reaktiv xususiyatning o'zgarib borishini kuzatmoqchi bo'lsak watchdan foydalanamiz. Bilasizmi, eng keng tarqalgan xato - bu computedni watch o'rniga muqobil sifatida ishlatish. Agar siz watch funksiyangizda…
245 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#vue #js #tips

Vue 3 nega Proxy obyektlardan foydalanadi?


Ushbu maqola sizga Proxy imkoniyatlari haqida kengroq muhim ma'lumotlarni beradi.

👉 Maqola Havolasi



 @seniorDevBlog
Telegraph
Javascript Proxy obyekti haqida
JavaScriptda Proxy boshqa(target) bir obyektni o'rab turuvchi va o'sha obyektning fundamental metodlarini kuzatib boruvchi maxsus obyektdir. Demak, yangi proxy obyekt yaratish uchun quyidagi usuldan foydalanamiz: let proxy = new Proxy(target, handler); Yuqoridagi…
👍3🏆1
355 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
#cleanCode

Ma'noli o'zgaruvchi nomlaridan foydalaning

Kodni o'qish va tushunish oson bo'lishi uchun o'zgaruvchilar nomlari ma'noli va tushunarli bo'lishi kerak.

@seniorDevBlog
👍5
310 viewsBehzod Xudoyberdi 🇵🇸 (work), edited  
Behzod | IT blog
#tips

Javascriptda eventlarni boshqarishda Event Delegation texnikasidan foydalanish.

Event Delegation parent elementdan turib eventlarni boshqarishga ruxsat beradi, shunda bola elementlarga bittalab event bog'lashga hojat qolmaydi.

@seniorDevBlog
⚡1
304 viewsBehzod Xudoyberdi 🇵🇸, edited  
Behzod | IT blog
#sharing

Javascriptni chuqur mustahkamlab olish uchun 100 ta amaliy loyiha, ochiq kodlari bilan.

https://dev.to/shantanu_jana/100-javascript-projects-with-source-code-59lo?ref=dailydev

@seniorDevBlog
DEV Community
100+ JavaScript Projects With Source Code
Are you looking for the best JavaScript Projects to increase your JavaScript knowledge with source...
👍1
113 viewsBehzod Xudoyberdi, 
Behzod | IT blog
This media is not supported in your browser
VIEW IN TELEGRAM
Sahifani yangilash uchun ajoyib animatsiya

#design
👍1
84 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
Moslashuvchan sahifada turli xil rasmlarni yuklashning oson yo'li

"<picture>" teg elementi orqali brauzer uchun ko'plab rasm variantlarini kiritish mumkin. Adaptiv sahifalar yaratish uchun qulay usul

#html #tips
👍2
88 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
This media is not supported in your browser
VIEW IN TELEGRAM
Forma inputida parolni yashirishni sodda yo'li

Barchasi oson: shunchaki input turini "password" dan "text" ga o'zgartirib qo'yish kerak



const input = document.getElementById('passwordInput');
const eye = document.getElementById('passwordEye');

eye.addEventListener('click', function() {
    input.type = input.type === 'password' ? 'text' : 'password';
});


#js #dom
84 viewsBehzod Xudoyberdi, 
Behzod | IT blog
🔍 Ko‘pchilik Jsda array filter metodini ishlatib, fallback uchun bo‘sh arrayga tekshirib qo‘yishadi.

Aslida bunga umuman hojat yo‘q.
Chunki, Javascript filter doim array qaytaradi.

Hattoki filtrlanayotgan array bo‘sh bo‘lsa ham.
Hattoki hech qanaqa natija topilmasa ham.

PS: Eslint ham bu keraksiz tekshirishlarni payqamas ekan

#js
👍1
93 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
This media is not supported in your browser
VIEW IN TELEGRAM
🚀 Figma dizaynni kodga aylantirish reallikka aylandi!

🤖 Replit AI jamosi Figma uchun , dizaynni statik React app ga aylantirib beradigan plugin ishlab chiqishdi.

💻 Figmada hohlagan dizayningizni oching, pluginni o'rnating va shunchaki, kodga o'giring.


#figma #css #html #AI
116 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
💡Vue jsda template teglaridan qaysi holatlarda foydalanish va uning foydalari haqida:

https://telegra.ph/Template-teglari-haqida-03-12

#vuejs #frontend
Telegraph
Vue jsda template teglari haqida
"template" tegini xohlagan joyingizda ishlatishingiz mumkin. Ayniqsa, tartibli kod yozish uchun ayni muddao. Eng ko'p holatlar "v-if" va ba'zan "v-for" direktivlaridan foydalanganmizda to'g'ri kelishi mumkin. Quyidagi misollarga diqqat qiling: Yuqoridagi…
106 viewsBehzod Xudoyberdi, edited  
Behzod | IT blog
Typescriptda Omit

Typescriptda biror bir tipni tushirib qoldirmoqchi bo'lsangiz Omit juda ham asqotadi. 🌟

Ushbu kalit so'zisiz, qo'shimcha interfacelar yaratishingiz va extendsdan foydalanishingizga to'g'ri keladi.

Yuqorida ajoyib misollar bilan tushuntirilgan. 🔥

#ts #typescript
176 viewsBehzod Xudoyberdi,