Mirjalol Norqulov

Monorepo’da hamma loyihalar uchun tsconfig.base.json fayl ochilgan edi. Lekin negadur Webstorm bu fayldagi konfiguratsiyalarni olmayotgandek tuyuldi. Internetdan qarab ko’rganimda sozlamalarda Typescript config pattern’lar ro’yxatiga qo’shib qo’yish kerak ekan. Default holatda quyidagi fayl nomlari qo’shilgan ekan: - tsconfig.app.json - tsconfig.e2e.json - tsconfig.editor.json - tsconfig.json - tsconfig.lib.json - tsconfig.spec.json - tsconfig.test.json Shu ro’yxatga tsconfig.base.json ni ham qo’shib qo’ydim. Endi import qilishdagi xatoliklar yo’qoldi. Huh :))

yup orqali yaratilgan validationSchema type’ini Typescript uchun olish:

import { object, string, number, date, InferType } from 'yup';

let userSchema = object({
  name: string().required(),
  age: number().required().positive().integer(),
  email: string().email(),
  website: string().url().nullable(),
  createdOn: date().default(() => new Date()),
});

type FormValues = InferType<typeof userSchema>

userSchema’da yozilgan validatsiya qoidalariga mos ravishda Typescript type hosil bo’ladi. Buni yaxshi tomoni forma uchun type yozib o’tirmaysiz. Validation rule’larni yozib chiqasiz Typescript type ham tayyor.

Vue 3 - versiyasida Typescript bilan ishlash ancha yaxshilandi. Ma’lum bir component proplarini extend qilib yangi komponent yasab olish mumkin. Shu yerda bir holatga e’tibor berish kerak bo’lar ekan. Masalan siz Naive-UI dagi NModal componenti asosida o’zingiz yangi modal component yasamoqchimisiz va qo’shimcha userId degan prop qabul qilmoqchisiz. Quyidagi ko’rinishda yangi interface e’lon qilamiz va uni defineProps’ga beramiz:

interface UserModalProps extends  ModalProps {
  userId?: number
}

const props = defineProps<UserModalProps>();

Shu holatda ModalProps ichida e’lon qilingan proplarni props orqali ishlata olmas ekanmi. Buning uchun useAttrs() funksiyasi orqali attributlarni olishimiz kerak bo’ladi. props da esa faqat userId prop mavjud bo’ladi.

const attrs = useAttrs();

watch(() => attrs.show, () => {
  console.log(attrs.show);
});

Menimcha bu narsa extend qilinayotgan component proplari va o’zimiz e’lon qilgan custom proplarni ajratib olish va component’ga berib yuborish qulay bo’lishi uchun qilingan bo’lsa kerak.

Debounce va Throttle farqlari vizual ko’rinishda juda chiroyli tushuntirilgan ekan ushbu maqolada. Har birini qaysi holatda ishlatish haqida ham aytib o’tilgan: https://kettanaito.com/blog/debounce-vs-throttle

Chakra UI Chakra UI bilan taxminan 4-5 oylarcha ishlagan bo’lsam kerak adashmasam. Juda ko’p ishlamagan bo’lsam ham menga yoqqan va yoqmagan tomonlarini aytib o’tmoqchi edim. Chakrada ham juda chiroyli saytlar qiligan ekan deb eshitdim. Kodni yaxshi yozsangiz zo’r ishlar qilsa bo’ladi. Menga yoqqan tomonlari: - Ishlash qandaydur yoqimli Bilmadim nega unaqa, lekin componentlari customize qilish uchun qulay yozilgan. Dokumentatsiya ham yomon emas. Typescript support ham juda zo’r. O’zi Reactda Typescript yaxshi )) - Deyarli Tailwind Styling tizimi Tailwindni JS versiyasi desam ham bo’ladi. Juda o’xshaydi. Tailwind’da classlar orqali bersangiz, bunda proplar orqali berasiz. Shu tomoni juda yoqdi. Ortiqcha CSS classlar yozishga hojat qolmaydi Ba’zi noqulayliklari: - Komponentlari kam Ba’zi kerakli komponentlar mavjud emas ekan. Masalan multi-select, datepicker yoki data table. Shu kabi komponentlarni o’zingiz yozishingiz kerak yoki biror tashqi kutubxonani o’rnatib chakrani stillariga moslashtirishingiz kerak bo’ladi - Rang tizimi Ranglar bilan ishlash tizimi ozgina noqulaylik tug’dirar ekan. Menimcha colorScheme degan narsani olib tashlash kerak. Buni ham moslash imkoni bo’lsa kerak. Design tokens orqali o’zingiz xohlagan nomlarda moslashuvchan ranglarni e’lon qilib olsangiz bo’lar ekan lekin. Quyida kerak chakra uchun yozilgan kutubxonalar kimgadur kerak bo’lib qolsa: 1. Date picker https://github.com/uselessdev/datepicker 2. React select wrapper chakra uchun yozilgan https://github.com/csandman/chakra-react-select Buni ishlatib ko'rmadim lekin o'zim 3. Tanstack table orqali esa o’zingiz xohlaganday qilib data table component yasab olsangiz bo’ladi, omad ) https://tanstack.com/table/v8

Charts https://echarts.apache.org Echarts ko’rinishi chiroyli ekan, chart turlari ham ko’pga o’xshayapti. Ishlatishga qanchalik qulay bilmadim. Hozir bir kichik dashboard’chada Apexcharts ishlatilgan ekan, Echarts’ni sinab ko’raylikmikan deb o’ylab qoldim 🤔 Siz qaysi chart kutubxonalardan foydalangansiz? Adashmasam men ishlatib ko’rganlarim quyidagilar ekan: 1. Amcharts 2. Chart.JS 3. Apexcharts

Diqqat, "Josh*Podcast"ning oltinchi soni e'loni. 🎙 Podcast mavzusi 📃: “Dasturlashda muvaffaqiyatga erishish.” Mehmonimiz 👥: - Ravshan Samandarov (Senior Software Engineer at Oxagile) Sana va vaqti 🕔: 14-Oktyabr, 21:00 Jonli efir linki📍: https://www.youtube.com/watch?v=CUhE1xbS46c Savollaringizni shu post ostiga yoki video "Live chat"iga yo'llab tursangiz bo'ladi. #podcast @JoshDeveloper

Shunday ko’rinishda ishlaydigan kutubxonani ishlatgan bo’larmidingiz? Bu yerda ModalProvider faqat bir marta ishlatilinadi. Root componentni wrap qilib qo’ysangiz yetarli bo’ladi. Plugin sifatida o’rnatib konfiguratsiya qilib xohlagan UI kutubxonaga moslash imkoniyatini qilish mumkin. Bu narsa kodni ancha qisqartiradi hamda modal oynalar bilan ishlashni osonlashtiradi.

Vue da modal/dialog oynalar bilan qay usulda ishlaysiz? Ya’ni modal/dialogni ochish va yopish uchun. Agar o’zingiz ishlatgan kodlardan namunalarni izohlarda yozsangiz xursand bo’lar edim.

Vue 3 da Typescript bilan ishlayotgan bo’lsangiz Vue dokumentatsiyasida composition API da qanday qilib Typescript ishlatish misollar orqali ko’rsatib berilgan. Quyidagi havola orqali kirib ko’rishingiz mumkin: https://vuejs.org/guide/typescript/composition-api.html