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

Shunaqa ish qiladigan “Frontchi” bo’lmanglar😂

@usmanov_dev

✨ 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
<iframe src="https://example.com#toolbar=0" style="width: 100%; height: 500px; border: none;"></iframe>

// src urldan keyin #page kaliti keyin page index yozilda o'sha page active bo'ladi
<iframe src="https://example.com#page=10" style="width: 100%; height: 500px; border: none;"></iframe>

// 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:
<iframe src="https://example.com#nameddest=qismNomi" style="width: 100%; height: 500px; border: none;"></iframe>

*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

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

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

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

🖱 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

🗂 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

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.

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

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

Pul so’rayabti bu😭