#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

#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

#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

#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

#vue #js #tips

Vue 3 nega Proxy obyektlardan foydalanadi?


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

👉 Maqola Havolasi



@seniorDevBlog

#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

#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

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

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

🔍 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

🚀 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

💡Vue jsda template teglaridan qaysi holatlarda foydalanish va uning foydalari haqida:

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

#vuejs #frontend

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

💡Jsda Array "fill" metodi massivlarni yaratishda va ularni manipulatsiya qilishda juda qo'l keladi

#js #frontend