Samariddin Developer

Bugun Dependency Injection pattern haqida maqola chiqadi ⏳ Quyidagi savollarga javob topamiz: 1. Dependency nima? 2. Kod dependency ni qanday yo'llar bilan qo'lga kirita oladi? 3. Biz o'zimiz dependency create qilishimizni minuslari. 4. DI frameworksiz…

Dependency nima va necha turga bo'linadi? Dependency - bu kod ishlashi uchun tashqaridan kerak bo'ladigan barcha narsa: function total(items: Item[]): number { return items.reduce((sum, i) => sum + i.price, 0); } Masalan shu funksiyada dependency yo'q…

Dependency nima va necha turga bo'linadi? Dependency - bu kod ishlashi uchun tashqaridan kerak bo'ladigan barcha narsa: function total(items: Item[]): number { return items.reduce((sum, i) => sum + i.price, 0); } Masalan shu funksiyada dependency yo'q, bu funksiyaga kerak bo'ladigan barcha narsa argument sifatida keladi. function total(items: Item[]): number { const rate = TaxConfig.currentRate; // needs something outside logger.debug('calculating total'); // needs something outside return items.reduce((sum, i) => sum + i.price, 0) * (1 + rate); } Ushbu funksiyada 2ta dependency bor(TaxConfig va logger), bu funksiya bularsiz run bo'la olmaydi. Dependency 2turga bo'linadi: Package dependency - proyekt run bo'lishi uchun kerak bo'ladigan library. Masalan: ("@angular/core") Code dependency - funksiya ishlashi uchun kerak bo'ladigan value yoki obyekt Dependency o'zimizni tilga tarjima qiladigan bo'lsak bog'liqlik degan ma'noni beradi, shu tarjimadan ham tushunib olsak bo'ladi) @samariddin_dev

Bizga ham nasib qildi ) @samariddin_dev

#Savol Bu kodda aria-hidden true nimani anglatadi? <img [src]="card().imgPath" class="h-16 w-16 sm:h-20 sm:w-20 xl:h-28 xl:w-28 object-contain absolute bottom-0 right-0" alt="Image" aria-hidden="true" /> @samariddin_developer

#tips #programming #ai Ko‘pincha avtomatlashtirish deganda murakkab kodlar va uzoq vaqtli ishlanmalar ko‘z oldimizga keladi) Lekin n8n degan platforma buni juda sodda qilib qo'ygan ekan. n8n — bu turli servislarni bir-biriga bog‘laydigan va ishlarni avtomatik…

#tips #programming #ai Ko‘pincha avtomatlashtirish deganda murakkab kodlar va uzoq vaqtli ishlanmalar ko‘z oldimizga keladi) Lekin n8n degan platforma buni juda sodda qilib qo'ygan ekan. n8n — bu turli servislarni bir-biriga bog‘laydigan va ishlarni avtomatik bajaradigan ajoyib "open-source" platforma. Men u orqali o‘zimga shaxsiy yangiliklar botini yasab oldim: Trigger: Har kuni ertalab soat 8:00 da jarayonni avtomatik ishga tushiruvchi soat o‘rnatdim. (requirement`ga qarab customize qilsangiz bo'ladi) AI Agent: n8n ichida Gemini AI modelini uladim va unga aniq prompt berdim: "Dasturlash va AI dunyosidagi eng muhim yangiliklarni topib, saralab ber". Telegram integratsiyasi: Bot Father orqali bot yaratib uni apiKey`ni oldim, guruh yaratib guruh id`sini oldim. Buni ikkisini ham ilovaga kiritib qo'ydim. @samariddin_dev

AI yozgan postlar, menimcha yomon emas, ustida yana ishlansa bundanda kuchli bo'ladi deb o'ylayman) AI, telegram bot va guruhni qanday qilib integratsiya qilganim qiziqmi?

🔥 Obyektlardan nusxa olishning eng to‘g‘ri yo‘li: structuredClone() JavaScript’da obyektni "deep clone" (to‘liq nusxalash) qilish doimiy bosh og‘rig‘i bo‘lib kelgan. Ko‘pchilik hali ham JSON.parse(JSON.stringify(obj)) usulidan yoki Lodash kabi tashqi kutubxonalardan foydalanadi. Ammo JSON usulining jiddiy kamchiliklari bor: u Date obyektini shunchaki stringga aylantirib yuboradi, Set, Map, Blob kabi murakkab turlar bilan ishlay olmaydi va eng yomoni — undefined qiymatlarni tashlab ketadi. Endi bularning barchasini unitish vaqti keldi. Brauzerlar va Node.js (v17+) muhitiga native structuredClone() funksiyasi qo‘shildi. const original = { id: 1, name: "Senior Developer", skills: new Set(["Angular", "TS", "AI"]), joined: new Date(), meta: { active: true, data: undefined } }; // Eskicha va xavfli usul: // const clone = JSON.parse(JSON.stringify(original)); // Natija: skills va date buziladi, undefined yo'qoladi. // Zamonaviy va xavfsiz usul: const deepClone = structuredClone(original); console.log(deepClone.skills instanceof Set); // true console.log(deepClone.joined instanceof Date); // true console.log(deepClone.meta.data); // undefined (o'z joyida) Nega aynan structuredClone? 1. To‘liqlik: U "Circular references" (obyekt o‘ziga havola bergan holat) bilan ham muammosiz ishlaydi. 2. Native API: Hech qanday tashqi kutubxona (Lodash kabi) yuklash shart emas, bu esa bundle size'ni kamaytiradi. 3. Ishonchlilik: Murakkab JS turlarini o‘z holicha saqlab qoladi. 💡 Xulosa Loyihangizda obyektlarni chuqur nusxalash kerak bo‘lsa, velosiped ixtiro qilishni to‘xtating. structuredClone() — bu hozirgi kundagi eng samarali va standart yechimdir. Faqat shuni yodda tutingki, u Function yoki DOM nodes larni nusxalay olmaydi (chunki buni mantiqan qilish imkonsiz). #javascript #frontend #webdev #cleancode #tips #programming #coding #jsdocs

#AI AI bilan telegram post tashlash uchun workflow qildim, u har kuni belgilangan vaqtda guruhimga dasturlashga oid postlar tashlab turadi, agar post menga yoqsa, uyoq buyog'ini o'zgartirib kanalga tashlayman) Qiziq mavzular yozyabdi, misol sifatida bitta…

#AI AI bilan telegram post tashlash uchun workflow qildim, u har kuni belgilangan vaqtda guruhimga dasturlashga oid postlar tashlab turadi, agar post menga yoqsa, uyoq buyog'ini o'zgartirib kanalga tashlayman) Qiziq mavzular yozyabdi, misol sifatida bitta postini tashlab beraman👇🏻 @samariddin_dev

IIFE (Immedately invoked function expressions), bu funksiya ES6 dan oldin nima maqsadda ishlatishganini bilasizmi? ES6dan oldin local scope yo'q edi, shuning uchun var bilan declare qilingan har bir o'zgaruvchi global bo'lib qolgan, buni natijasida o'zgaruvchilar bir-birini override qilib yuborishi, o'zgaruvchi aynan qayerda declare qilinganini bilish qiyin bo'lib ketgan: var a = 10; function declareVar() { if(true) { var a = 20; // oops, 10 qiymatli o'zgaruvchi override qilib yuborildi } } Aynan shu muammoni yechish uchun va private environment va o'zgaruvchilar yaratish uchun, dasturchilar IIFE dan foydalanishgan, o'zlariga "scope" yaratishgan desak ham bo'ladi: (function () { var myPrivateVar = 0; .... })() @samariddin_dev

"Over-shared state" haqida gaplashamiz. Ko‘plab loyihalarni kuzatib, bitta umumiy xatoga guvoh bo‘laman: "Over-shared state" yoki state`ni haddan tashqari ko‘p joyda ulashish. Ko‘pincha bitta modul ichida yashashi kerak bo‘lgan ma’lumotlar, sababsiz ravishda butun loyiha bo‘ylab "global" darajaga chiqarib yuboriladi. Buni bir qancha muammolari bor, ketma-ketlik bilan sanab o'taman: - Memory Leak - State globalga chiqqach, u o‘sha modul`ga umuman kerak bo‘lmagan joyda ham xotirada saqlanib qoladi. Bu esa ilovaning sekinlashishiga va keraksiz xotira sarfiga olib keladi. Boshqaruvning qiyinlashishi (Unpredictable state): Global state qancha ko‘p bo‘lsa, uni debug qilish shuncha qiyinlashadi. "Qaysi qism bu qiymatni o‘zgartirdi?" degan savolga javob izlab soatlab vaqt ketkazasiz. To'g'risini aytaman, men ham bu xatoni ko'p qilganman) Avvallari Angular'da service yozsam, o‘ylamay providedIn: 'root' deb ketaverardim. "Ishlasa bo‘ldi" deb o‘ylardim. Keyinchalik bu qanday oqibatlarga olib kelishini tushunib yetib, yondashuvni to'liq o'zgartirdim) O'zingizga o'zingiz savol bering, bu service (yoki state) menga faqat shu modul yoki komponent doirasida kerakmi? Xulosa: Iloji boricha global state`larni kamaytirishga harakat qiling, ma'lumotni faqat kerak joyda ishlating. @samariddin_dev

Design systemga qat'iy amal qiling. Unicon softga boshida ishga kirganimda, katta loyixani designi to'liq o'zgartirish topshirilgan edi. U payt endi ishga kirgandim, + design systemdan uncha xabarim yo'q edi. Ishni olib, uni analyse qilmasdan, componentlar`ga…

Design systemga qat'iy amal qiling. Unicon softga boshida ishga kirganimda, katta loyixani designi to'liq o'zgartirish topshirilgan edi. U payt endi ishga kirgandim, + design systemdan uncha xabarim yo'q edi. Ishni olib, uni analyse qilmasdan, componentlar`ga ajratmasdan, shosha-pisha ishni boshlagan edim. Design implement qildim, lekin proyektda "design consistency" yo'q edi. Masalan bitta sahifaga kirsangiz padding 20 px berilgan, boshqasiga kirganingizda 30 px berilgan, "layout shift" bo'ladi, user uchun juda noqulay. Bu oddiy "padding" va "margin"ku deb past nazarda qarash kerak emas ekan. Spacing bu kichkina muammolardan biri desak ham bo'ladi, select va inputlar, button`lar bir-biridan farq qilib ketgan, masalan bir sahifaga kirsangiz boshqacha select, boshqa sahifaga kirsangiz boshqa stildagi select) Bu barchasi design consistency`ni buzadi, agar ushanda design system`ga rioya qilib yozganimda, UI consistent, ishlatishga qulay bo'lgan bo'lar edi. Hozir endi migration qilib chiqyabman, select, input, button va boshqa elementlar uchun shared UI component yaratib chiqdim, eskilarini shu shared componentga migrate qilib chiqyabman, vaqtim ko'p ketayabdi) @samariddin_dev

Frontend arxitekturasi nima va u nima uchun kerak? Ko‘pchilik "frontend" deganda faqat chiroyli dizayn va UI`ni tushunadi) Lekin loyiha kattalashgani sari, loyihada kod yozish, uni scale qilish juda qiyinlashib ketishi mumkin. Aynan shu muammoni oldini olish uchun, bizga frontend arxitekturasi kerak bo'ladi. Frontend arxitekturasi – bu ilova kodini tashkillashtirish, uning qismlari (komponentlar, state, servislar) o‘rtasidagi bog‘liqlikni tizimlashtirish va kelajakda kodni oson o‘zgartirish imkonini beradigan tizim. Nima uchun bu muhim? Scalability (Kengayuvchanlik) - Loyihaga yangi funksiyalar qo‘shilganda eski kod buzilib ketmasligi oldi olinadi. Maintainability (Qo'llab-quvvatlash): Kodni o‘qish va xatolarni tuzatish osonlashadi. Performance: Arxitektura to‘g‘ri bo‘lsa, ilova tezroq ishlaydi. Arxitektura asoslari: Folder structure: Loyihani mantiqiy papkalarga ajratish (masalan, features, shared, entities). State Management: Ma’lumotlarni nazorat qilish (Redux, Zustand, React Query va h.k.). Data Fetching: API bilan ishlashni markazlashtirish. Qisqa qilib aytsak, frontend arxitekturasi — bu uyning fundamenti. Fundament mustahkam bo‘lsa, ustiga xohlagancha qavatli uy qura olasiz. Agar fundament noto'g'ri qurilgan bo'lsa, uy kattalashgan sari qulashi mumkin) #frontend #architecture #webdevelopment #coding #dasturlash @samariddin_dev

Oxirgi payt UI ning qadri menga juda bilinayapti. AI bilan app chiqarish osonlashdi: bir nechta prompt, biroz vibe coding, keyin qarabsizki landing ham bor, dashboard ham bor, app ham bor Lekin ko'p loyihalarda bitta narsa darrov bilinib qoladi: app ishlaydi, lekin product sifatida hali pishmagan. Layoutda ritm yo'q, elementlar bir-biriga mos tushmaydi, textlar o'z joyini topmagan, animatsiyalar esa ko'pincha keragidan ortiq ishlatilgan bo'ladi. Hammasi bordek, lekin umumiy ko'rinishda puxtalik sezilmaydi Muammo AI ishlatishda emas. Muammo AI chiqargan narsani tekshirmasdan, tartibga keltirmasdan, standartga solmasdan tayyor product deb chiqarib yuborishda. Hozir qo'lingizdagi tool boshqalarda ham bor. Siz prompt bilan qilayotgan funksional appni boshqa odam ham bemalol qila oladi Endi farq “kim app qila oladi?” degan joyda emas. Farq “kim uni sifatli product darajasiga olib chiqa oladi?” degan joyda Yaxshi UI bu faqat chiroyli rang, gradient yoki smooth animation emas. Bu consistency, spacing, typography, hierarchy, states, accessibility va mayda detallargacha bo'lgan e'tibor. Productni ko'rgan odam ichida “bu puxta qilingan” degan ishonch paydo bo'lishi kerak Shuning uchun AI bilan ishlash kerak, albatta. Lekin AI chiqargan narsaga ham odamdek qarash kerak: tozalash, moslash, keraksiz joyini olib tashlash, yetishmayotgan joyini qo'l bilan to'g'rilash kerak Vibe code qiling. Lekin shunaqa qilingki, ko'rgan odam “ha, buni AI yasagan ekan” demasin. Aksincha, “buni oddiy prompt bilan chiqarib bo'lmaydi” deb o'ylasin. @kamrondev

Angularda initial load optimizatsiya qilish Inital load bu saytimizning birinchi kirilganda yuklanish jarayoni. Bugun loyihada bir muammoni ko’rdim, juda katta loyiha. Initial load 36 mb bo’lib ketgan ekan) Bu juda katta hisoblanadi, muammolarni qarab, loyihani 16 mb ga tushirdim (yana optimizatsiya qilsa yanada kamayadi). Muammolar nimada edi?: 1. Asosiy muammo, route’ni lazy-load qilmaslik. Katta-katta route’lar shunchaki sinxron yuklab ketilgan ekan. Natijada foydalanuvchi faqat Login sahifasiga kirsada, butun boshli Dashboard va Admin panellarni ham yuklab olayotgan edi. Barcha route’larni lazy-load’ga o’tqazdim. 2. main.ts ichida kerak, kerak emas kutubxonalar import qilingan, buni ham lazy load ga o’tqazdim. main.ts loyihaning global fayli hisoblanadi. Unga yozilgan yoki import qilingan har bir ortiqcha narsa dasturning ilk yuklanish vaqtini (FCP) o'ldiradi. Keraksiz global kutubxonalar va og'ir scriptlarni dinamik yuklashga o'tkazish shart. 3. Assets. Loyihada oddiygina bitta SVG rasm naqd 2 MB joy egallab yotgan ekan) Uni compress qilib, sifatini yo'qotmagan holda 200 KB ga tushirdim. Tavfsiyalar: • SVG rasmlarni svgo yoki jakearchibald.github.io/svgomg/ orqali keraksiz metama'lumotlardan tozalang. • Oddiy rasmlar (PNG, JPEG) o'rniga zamonaviy va yengil WebP yoki AVIF formatlaridan foydalaning. • Angular'ning <img /> tegi o'rniga @angular/common ichidagi NgOptimizedImage (ngSrc) dan foydalaning. U rasmlarni avtomatik lazy-load qiladi. @samariddin_dev

Css optimization (Advanced). CSS`ni bir qancha yo'llar bilan mukammalashtirsak bo'ladi, bugun usullari bilan tanishib chiqamiz (Part 1). 1. Critical rendering & Render blocking. Agar sahifamizdagi barcha stillarni sinxron bitta faylda yuklasak rendering jarayonini kechiktirishi mumkin. Biz critical(muhim) bo'lgan stillarni sinxron yuklab, qolganini asinxron yuklasak bo'ladi. Critical CSS`ga user sahifaga kirishi bilan ko'rinadigan qismni aytsak bo'ladi, masalan user sayt yuklanganida hech qachon footer elementlarni ko'rmaydi, shuni non-critical css deb aytsak bo'ladi. Misol: <link rel="stylesheet" href="critical.css" /> <link rel="preload" href="non.critical.css" as="style" onload="this.onload=null; this.rel="'stylesheet'" /> 2. Selector performance. Browser odatda selector`larni o'ngdan chapga o'qiydi. Masalan bizda quyidagi kod bor: .nav ul li a {} Buni browser quyidagicha o'qiydi: 1. Barcha <a> teglarini qidirib topib chiqadi(kerak emaslarni ham qidirib chiqadi) 2. barcha <a> tegi <li> ichida yoki yo'qligini tekshiradi. Flow shu tariqa .nav classidagi elementgacha bo'ladi va stil elementga qo'shiladi... Ko'rib turganingizdek, browser ortiqcha ishlarni amalga oshirmoqda, agar a tegiga class berib qo'ysak, browser barcha elementlarni tekshirib o'tirmaydi, aynan usha class`li elementni topadi: .nav-link Bu performance`ni ancha yaxshilaydi, chunki browser parent elementni tekshirib o'tirmaydi, deep-searching qilmaydi. Specificity`ni ham iloji boricha pasroq saqlash kerak, bu ham css optimizatsiya bo'lishiga sabab bo'ladi. 3. Media query and feature query optimization. Masalan biz telefon uchun @media query`lar yozdik, bu saytda default holatda ham ishga tushishi kerakmi?! Albatta yo'q, bu fayl kompyuter yoki planshetlar uchun emas, aynan telefon uchun ishga tushishi kerak. Biz buni link tegidagi media xossasi bilan boshqara olamiz: // Bu faqat mobile telefon uchun ishga tushadi <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)" /> Feature query optimization Bu bizga css`da browser qo'shayotgan xossamizni qo'llab-quvvaltasagina qo'shish imkonini beradi, buni @supports query bilan amalga oshiramiz: .box { display: block; } @supports (display: grid) { .box { display: grid; } } @samariddin_dev