Behzod | IT blog

#vuejs

Vue js ilovangiz optimizatsiyasi

https://telegra.ph/Vue-js-ilovangiz-optimizatsiyasi-05-12

https://www.smashingmagazine.com/2022/11/optimizing-vue-app/?ck_subscriber_id=1959949541&utm_source=convertkit&utm_medium=email&utm_campaign=%F0%9F%94%A5+%28%23112%29+Ref+soup+and+optimizing+your+app%20-%2010733954

171 viewsedited 14:07

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 14:38

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 14:49

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 09:35

Behzod | IT blog

https://t.me/vuejs_uz/51466

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, 10:08

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 13:20

Behzod | IT blog

"Code is like humor. When you have to explain it, it's bad." — Cory House

@seniorDevBlog

388 viewsBehzod Xudoyberdi, edited 05:56

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 05:44

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 10:27

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 10:42

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 15:12

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 11:29

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 06:26

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 14:01

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, 06:39

Behzod | IT blog

0:10

This media is not supported in your browser

VIEW IN TELEGRAM

Sahifani yangilash uchun ajoyib animatsiya

#design

👍1

84 viewsBehzod Xudoyberdi, edited 10:14

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 10:14

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, 13:24

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 13:24

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 13:24

About

Blog

Apps

Platform