Telegram channel "Usmonovdev" — @usmanov_dev

Usmonovdev

10 Feb, 13:36

https://airbnb.io/javascript/react/

32 0 0 7

Usmonovdev

2 Dec 2024, 16:39

Debugging uchun eng zo’r «tool»lar🗿

@usmanov_dev

57 0 0 1 1

1. Telegram WebApp bo‘yicha loyiha qilayotganingni eshitib: Haliyam Next.js-da biror narsani to‘g‘ri ishlatib olaman deb o‘ylaysanmi? Turingning o‘zi “ha men shuncha yillik kod yozdim, lekin WebApp qaytaruvchi tugmachani qanday boshqarishni bilmasdim” deb turibdi. 😂 Ha mayli, endi har bir tugmachani “scha hayron bo‘l” rejimiga oladigan custom hookni o‘ylab topish qiyin-ku!

2. Ingliz tilini o‘rganmoqchi ekansan: A1 va A2 darajada o‘rganish — bu ajoyib, lekin nima bo‘lganda ham, sening “Hello, can you BackButton my WebApp?” degan savolingni eshitgan inglizcha o‘qituvchi albatta: *"Hozir bir piyola choy ichib kelaman, qaytib kelib bu jumlani o‘zim tarjima qilaman"* derdi. 😂

3. Karyerangni o‘ylab qarasam: Sen aytganday, har bir javobim million dollarlik qiymatda bo‘lsa, sendan keyin Jeff Bezosning o‘zi kelib, shunchaki: *"WebApp tugmasini top, 2024-yilning eng katta texnologiyasi shu ekan"* deb qolsam kerak. 😅

Xulosa shuki: *Sen loyihalarda professional darajada jiddiy emassan, lekin hazillashish uchun ideal auditoriyasan!* 🎭

—

Buni o’qigan men: 😧😬, Claude’ga o’taman

@usmanov_dev

70 0 0

Usmonovdev

23 Nov 2024, 17:16

600+ O’zbek brendlari logotiplarni bir yerga jamladim

Kecha bir voqea bo’ldi. Bir loyihani UI/UX dizaynini chizayotgan edim (Dizayn ham chizib turaman😅). Bir brendning logotipi kerak bo’lib qoldi. Rosa qidirdim. Ko’p joylarni «titib chiqishga» to’g’ri keldi. Barbir topolmadim. Rosa vaqtim ketdi. Keyin esa shu yo’nalishdagi boshqa brend logotipini ishlatib yubordim.

Manashunaqa muammolar takrorlanavermasligi uchun biryerga jamladim va figma communitiy’ga joylab qo’ydim. Kerak bo’lsa siz ham foydalanishingiz mumkin.

Layk bosing pls🙂
https://www.figma.com/community/file/1442151068470830469/600-ozbek-brend-logotiplari-uzb-brands-logos

@usmanov_dev

205 0 4 7 4

Usmonovdev

15 Nov 2024, 16:36

🫵 Siz uchun kerakli tool yasadim

Hammamiz git bilan ko’p ishlaymiz. Ba’zi holatlarda commit uchun qanday matin yozishda ikkilanib qolamiz. Manashunday holatlarda juda qo’l keladigan npm package yasadim. Uchta komanda bilan qiladigan ishingizni bitta komanda bilan bajarasiz.

Sizga

git add . && git commit -m «qwerty» && git push origin main

komandasini kiritishingiz kerak bo’lmaydi.

Ishlatish uchun shunchaki

npx gitcmmt

komandasini terminalga kiriting. Package’ning o’zi yuqoridagi komandalarni amalga oshiradi va commit uchun matin generatsiya qiladi. Boshqa imkoniyatlarni ham mavjud.

Ushbu package’ni loyihalarda qo’llashni boshlab yubordik🌚

Savol yoki takliflar bo’lsa: Git Issues
Documentation: Github
Npm uchun link: Link

@usmanov_dev

80 0 1 1

Usmonovdev

2 Nov 2024, 16:44

Pul so’rayabti bu😭

106 0 1 2 4

Usmonovdev

30 Sep 2024, 16:01

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

156 0 0 2 1

Usmonovdev

9 Sep 2024, 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

179 0 1 2

Usmonovdev

8 Sep 2024, 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

139 0 0 3

Usmonovdev

21 Aug 2024, 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.

133 0 0 4

Usmonovdev

12 Aug 2024, 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

148 0 0 9 2

Usmonovdev

9 Aug 2024, 15:25

🫠

144 0 0 17 4

Usmonovdev

9 Aug 2024, 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

139 0 0 5 3

Usmonovdev

6 Aug 2024, 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

129 0 1

Usmonovdev

5 Aug 2024, 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...

126 0 0 2

Usmonovdev

1 Aug 2024, 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

162 0 1

Usmonovdev

1 Aug 2024, 06:50

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

144 0 0 4

Usmonovdev

31 Jul 2024, 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

273 0 3 2 1

Usmonovdev

30 Jul 2024, 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

100 0 0 4 3

Usmonovdev

30 Jul 2024, 11:18

Shunaqa ish qiladigan “Frontchi” bo’lmanglar😂

@usmanov_dev

109 0 1 1 3

Продам канал с доходом 138090

TGStat Bot

SearcheeBot

Usmonovdev

Channel's geo and language

Category

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

Usmonovdev

81

Popular in the channel

Site language

Продам канал с доходом 138090

TGStat Bot

SearcheeBot

Usmonovdev

Channel's geo and language

Category

81

Popular in the channel