Usmonovdev

@usmanov_dev

Channel's geo and language: Uzbekistan, Uzbek

Category: Blogs

TeamLead Frontend Developer at Felix IT Solutions
Admin: @usmonov_ku

Related channels

Channel's geo and language

Uzbekistan, Uzbek

Usmonovdev

30 Sep, 16:01

Negadir ChatGpt’ning o’ng tomondagi javobi g’alati🥲

59 0 0 2

Usmonovdev

9 Sep, 17:14

Forward from: Felix IT Solutions

Alibi erkaklar kiyim do’konining mobil ilovasi ishga tushirildi! 📞

📞Mobil ilova orqali:
- magazinda mavjud kiyimlar ro’yhatini;
- narxlarini;
- o’chamlarini;
- ranglarini va modellarini tanlab harid qilish imkoniyatiga egasiz!

Mobil ilovani yuklab olishingiz uchun birozdan so’ng havolalarni qoldiramiz.

Bizni ijtimoiy tarmoqlarda kuzatib boring:
Instagram | Telegram | | LinkedIn

89 0 1 2

Usmonovdev

8 Sep, 08:56

Overscroll behavior yordamida aynaltirishlar zanjiri(scroll chaining)ni oldini olish

CSSda overscroll-behavior property scroll qilish konteyner chegarasiga yetganda brauzerda nima sodir bo'lishini sozlashga yordam beradi.

Ushbu property qiymatiga contain berilsa, scroll-chaining (ya'ni ichki konteyner elementda oxirgacha scroll qilinganda, tashqi konteynerdagi scroll ishlab ketish) effekti sodir bo'lishini oldini oladi.
Aytaylik, saytda sidebar bor. Sidebarda oxirigacha scroll qilinganda asosiy kontentdagi scroll ishlab ketishi mumkin. Buni oldini olish uchun ovescroll-behavior: contain CSS kodni yozamiz.

Bundan tashqari, overscroll-behavior brauzerdagi native navigatsiyani, ya'ni pull-to-refresh yoki Chrome'dagi swipe back kabi navigatsiyalarni o'chirishga yordam beradi.

Batafsil:
https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
https://css-tricks.com/almanac/properties/o/overscroll-behavior/
https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/

#css @itsr4y

81 0 0 3

Usmonovdev

21 Aug, 06:29

Bizni qiynaydigan bir jihat

Bir loyihada ishlayotgan edim. Profi 24. Veb qismida o’zgartirish kiritdik. Shunda bir muammoga duch keldik. Xarita bilan ishlashda foydalanuvchi o’zi turgan manzilini ko’ra olishi kerak edi. Android qurilamalarda muammosiz ishlayabti lekin iOSda qandaydor muammo bor edi. Manashu funksiya ishlamadi. Xarita uchun react-leaflet npm package ishlatilgan edi.

Yechim topildi. Muammo kod tomondan emas iOSdagi permissionlar bilan bog’liq ekan. Shu sababli asosiy featurelardan biri ishlamadi. Brouserga manzildan foydalanishga ruxsat berilmagan ekan (😂).

P.s: iOSda manashu narsalar bizni qiynaydi.

99 0 0 3

Usmonovdev

12 Aug, 14:24

😡Eng yoqimsiz holat manashu. Nega kodim ishlamayabti deb yo’q bugni qidirib yuraverasan. Keyin esa shunchaki text rangi background bilan birxil bo’lib chiqadi.🤦

@usmanov_dev

111 0 0 9 2

Usmonovdev

9 Aug, 15:25

🫠

107 0 0 17 4

Usmonovdev

9 Aug, 07:26

🗂 Next.js da private folder va guruhlangan route'lar

1. Private folderlar:
- Folder nomini underscore (_) bilan boshlasangiz, u private folder hisoblanadi.
- Private folderlar va undagi fayllar routing tizimiga kiritilmaydi.
- Ular komponentlar, utilita funksiyalar va boshqa ichki logikani saqlash uchun ishlatiladi.

Misol uchun:

app/
_utils/
helpers.js
dashboard/
page.js

Bu holatda "_utils" folder va undagi fayllar route sifatida ko'rinmaydi.

2. Gruruhlangan route'lar:
- Folder nomini qavslar ichiga olish orqali guruhli route yaratish mumkin.
- Bu guruhlar URL strukturasiga ta'sir qilmaydi, lekin related route'larni birlashtirishga yordam beradi.

Misol uchun:

app/
(marketing)/
about/
page.js
blog/
page.js

Bu strukturada marketing va shop uchun alohida guruhlar yaratilgan, ammo URL'larda bu ko'rinmaydi.

Bu featurelar loyiha strukturasini yaxshiroq qilish va kodni samarali qilishga yordam beradi.

#next_js_routing | @usmanov_dev

108 0 0 5 3

Usmonovdev

6 Aug, 14:17

00:15

Video is unavailable for watching

Show in Telegram

🖱 useOutsideCloser Hook

Bu useOutsideCloser hook'ini React komponentlarida tashqaridan bosish yoki sahifa scroll bo'lsa, qandaydir funksiyani ishga tushirish uchun ishlatishingiz mumkin. Hook HTML elementining tashqarisida bosish yoki sahifa scroll bo'lganda funksiyani chaqiradi.

Bu nima uchun kerak? Bu albatta sahifamizning qandaydir kichik elementlari. Yoki dropdown shunga o’xshash componentalarni yopish uchun kerak bo’ladi. Bu orqali foydalanuvchilarga qulayliklar olib keladi.

Manashu link orqali o’tib hookdan foydalanish va batafsil tushunib olishingiz mumkin.

Ps. Postni yozishda ChatGPTni 40% hissasi bor😅. Ushbu kod Customhook sifatida o’zim tomonimdan yozilgan.

#custom_hook | @usmanov_dev

101 0 1

Usmonovdev

5 Aug, 10:06

https://www.ahost.uz/uz/news/317

Xizmatlarni tiklash bo'yicha shoshilinch texnik ishlar amalga oshirildi | aHOST

Hurmatli obunachilar 08.03.2024 soat 00:20 da serverlarimizga xakerlik hujumlari uyushtirildi, natijada bir nechta serverlarimiz buzib tashlandi. Serverlar VMware vCenter dasturiy mahsulotidagi zaiflik tufayli buzib kirilgan. Buzg'unchilar serverlarga kirish imkoniga ega bo'lib, ma'lumotlarni shifrl...

106 0 0 2

Usmonovdev

1 Aug, 15:43

Yuqoridagi «Websocket nima?» deb nomlangan post uchun misol. Uni GithubGistga joylab qo’ydim.

Loyihalaringizda kerak bo’lsa dokumentatsiya sifatida bemalol foydalanishingiz mumkin 🙂.

https://gist.github.com/usmonovdev/e49afedb5f9c41225ac58c571ab37f50

143 0 1

Usmonovdev

1 Aug, 06:50

Ha to’g’ri, kanal avatarkasi o’zgartirildi🙂

127 0 0 4

Usmonovdev

31 Jul, 20:56

Websocket nima?

Qisqa qilib aytganda bu protokol. Server va mijoz orasidagi doimiy aloqani ta’minlaydi. Websocket orqali server va foydalanuvchi orasida real vaqtda ma’lumot almashish mumkin.

React Jsda Websocket bilan ishlash

1. Websocketga ulanishimiz kerak. Buning uchun Websocket obyektini yaratamiz.

const socket = new WebSocket('ws://your-websocket-server-url');

2. Websocketga connect bo’lganimizdan so’ng, serverdan kelayotgan ma’lumotlarni qabul qilish uchun onmessage metodidan foydalanamiz.

socket.onmessage = (event) => {
console.log('Serverdan ma\'lumot:', event.data);
};

3. Websocket orqali serverga ma’lumot yuborish. Ma’lumot yuborish uchun send metodidan foydalanamiz.

socket.send('Salom, server!');

4. Aloqani uzish. Komponent o’chirilganida yoki Websocket ni yopish kerak bo’lsa close() metodidan foydalanamiz.

socket.close();

Ertaga nasib bo’lsa komponentada foydalanib ko’rsatib beraman.

Websocket dan foydalanishdan maqsad, real vaqt rejimida serverdagi ma’lumotlardan foydalanish. Chat, Video chat va hk.

Telegram ham shunga o’xshash texnologiya ustida ishlasa kerak.

Kechki payt shunaqa ma’lumotlar rosa ketadiya?😂

#websocket | @usmanov_dev

240 0 3 2 1

Usmonovdev

30 Jul, 19:58

Forward from: Javohir Bro

✨ iframe haqida to'liqroq gaplashamiz

Iframe'lar veb-saytlarda boshqa veb-saytlardan yoki kontentlardan tarkibni integratsiya qilish uchun juda foydali. Ammo, ularning ko'plab sozlamalari va ko'rinishini o'zgartirish uchun ba'zi sozlamalar va usullar mavjud. Keling, iframe'larni qanday qilib yanada chiroyli va funksional qilish mumkinligini ko'rib chiqamiz.

1.Iframe'larni xavfsizroq qilish uchun sandbox atributidan foydalanishingiz mumkin:

allow-forms. - form submitlar uchun ruxsat

allow-popups. - popuplar uchun ruxsat (uzbekchasini bilmadim)

allow-pointer-lock: Bu iframe ichida sichqoncha ko'rsatkichini to'liq boshqarishga ruxsat beradi. Agar bu parametr ko'rsatilmasa, iframe ichidagi kontent sichqoncha ko'rsatkichini to'liq boshqarolmaydi.

allow-same-origin: Iframe ichidagi kontentga o'zining domenidan (yoki uning src atributidagi domenidan) kelayotgan cookie, localStorage va boshqa resurslarga kirishga ruxsat beradi. Agar bu atribut qo'shilmasa, iframe ichidagi kontent faqat o'zining lokal xotirasiga kirish huquqiga ega bo'ladi.

allow-scripts: Iframe ichida JavaScript kodlarini bajarishga ruxsat beradi. Bu atribut iframe ichidagi interaktivlikni oshirishi mumkin, lekin xavfsizlikni hisobga olish kerak.

allow-top-navigation: Iframe ichidagi kontentga o'zini to'liq sahifaga yoki top-level navigatsiya qilish huquqini beradi. Agar bu atribut qo'shilmasa, iframe ichidagi kontent faqat o'zining ichki xususiyatlarini boshqarishi mumkin va o'zini to'liq sahifaga ko'rsatishga ruxsat berilmaydi.

2. iframeni moslashtirish (customization).

// src urldan keyin #toolbar kaliti va 0 yoziladigan bo'lsa toolbar hide bo'ladi, 1 qiymat berilsa ko'rinadi, defualt 1 bo'ladi

// src urldan keyin #page kaliti keyin page index yozilda o'sha page active bo'ladi

// src urldan keyin #nameddest kaliti keyin section nomi berilsa o'sha section active bo'ladi. Iframe’ning boshlang'ich pozitsiyasini belgilash uchun. Misol uchun, kontentda ma'lum bir sarlavhaga o'tish:

*bu kodlar brauzer turi va versiyasiga qarab ishlamasligi mumkin.
spidermonkey (FF), v8 (chrome, opera) shunga o'xshab.

shu saytdan qidirib ishlash ishlamasligini bilsangiz bo'ladi.
caniuse.com

@javohirbro

86 0 0 4 3

Usmonovdev

30 Jul, 11:18

Shunaqa ish qiladigan “Frontchi” bo’lmanglar😂

@usmanov_dev

92 0 0 1 2

Usmonovdev

29 Jul, 09:12

ChatGPT ⚔️ Claude

Bugun yangi bir loyihani boshlagan edik. Hozir dizayn chizyabman. Renglar uchun research qildim. Asosiy rang sifatida Qizil (Bordo) rangini tanladim. Unga esa ikkinchi darajali rang sifatida Ai’lardan bir foydalandim. ChatGPT va Claude’dan. Menga ChatGPT varianti yoqdi. Claude esa rang tanlashda sal no’noqroq ekan. Qisqa qilib aytganda Claude «o’tlab ketti».

Hozirda ishlarimda manashu ikkita AI dan foydalanyabman. Hozircha ChatGPT javoblari menga ma’qul kelmoqda.

#fikr | @usmanov_dev

97 0 1 3

Usmonovdev

26 Jul, 15:41

Veb saytimizni yahshilash uchun nima qilishimiz mumkin?

Prefetching - bu dasturlashda ma’lumotlarni yoki resurslarni oldindan olish (loading) usuli. Bu ma’lumotlarni yuklash vaqtini qisqartiradi.

Misol uchun: Googlega qandaydir savol yozayotgan vaqtingizda u sizga misol tariqasida boshqa so’zlarni ko’rsatadi. Manashu prefetching orqali amalga oshiriladi.

#prefetching | @usmanov_dev

144 0 1 3

Usmonovdev

24 Jul, 19:25

📱React Nativeda testing uchun debug apk build qilish

🗂️ Agar build qilish birinchi marotaba bo’lmayotgan bo’lsa avvalgi build ma’lumotlari tozalanadi
1: cd android
2: ./gradlew clean
3: cd ..

💎 Asosiy qism build qilish komandasi
1: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
2: cd android
3: ./gradlew assembleDebug

Bu komanda React Native CLI uchun. Kerak bo’ladi albatta.

P.s: Bu komandalar terminalga kiritilishi kerak. CMD, Terminal va hk.

#native | @usmanov_dev

102 0 0

Usmonovdev

24 Jul, 12:56

Yandex O’zbekistonlinliklar uchun internship ochilibti.

Link: https://yandex.ru/yaintern

@usmanov_dev

89 0 1

Usmonovdev

22 Jul, 20:46

First, solve the problem. Then, write the code. – John Johnson

Googledan topdim🙂

93 0 0 1

Usmonovdev

21 Jul, 19:09

📃 Loyihalarda type bilan ishlashning muhim ahamiyati

Loyihalarda type bilan ishlash juda muhim ahamiyatga ega. Buni men kecha isbotini ko'rdim. Type bo'yicha xatolik bo'lganligi sababli "Tushunarsiz" xatoliklar kelib chiqa boshladi. Xato ayni qayerda ekanligini topish uchun ko'p vaqt sarfladik.

Sizda bunday muammolar bo'lmasligi uchun Typescriptni o'rganing. O'rganganda ham mukammal tarzda o'rganing.

#saboq | @usmanov_dev