🖼️ Vue.js axios basic configuration:

/src/composable/useApi.ts

import axios from 'axios'

export const axiosIns = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
})

axiosIns.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    const lang = localStorage.getItem('locale') || 'uz'

    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }

    config.headers.lang = lang

    return config
  },
  (error) => {
    throw error
  },
)

axiosIns.interceptors.response.use(
  (response) => {
    if (response?.data?.result?.token) {
      localStorage.setItem('token', response?.data?.result?.token)
    }

    return response
  },
  (error) => {
    const token = localStorage.getItem('token')
    const status = error?.response?.status

    if (status === 401 && token) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }

    throw error
  },
)

🌐 WebBrogramist

OOP (Object-Oriented Programming) — bu dasturlash uslubi bo‘lib, unda dastur obyektlar orqali tashkil etiladi. Har bir obyekt — bu ma’lumot (state) va funksiya (behavior) ni o‘zida saqlovchi birlik.

Uning 4 asosiy tamoyili:
1. Encapsulation — Ma’lumot va funksiyalarni tashqi ta'sirdan yashirish.
2. Abstraction — Keraksiz tafsilotlarni yashirib, faqat muhim xatti-harakatlarni taqdim qilish.
3. Inheritance — Bir klass boshqa klassdan xususiyat va funksiyalarni meros qilib olish.
4. Polymorphism – Bir xil funksiyani har xil obyektlarda har xil ishlatish.

OOP terminlari:
Class — Obyektlar uchun shablon (qolip).
Object — Klassdan yaratilgan individual nusxa.
Method — Klass ichidagi funksiya.
Attribute — Klass ichidagi o‘zgaruvchi (field/property).
Constructor — Obyekt yaratilayotganda ishga tushadigan metod.
Destructor — Obyekt yo‘q qilinayotganda ishga tushadigan metod.
Access Modifiers — public, private, protected — tashqaridan kirish darajasi.

OOP bilan:
1. Katta dasturlarni modullarga bo‘lish oson.
2. Kodni qayta ishlatish (reuse).
3. Kengaytirish va parvarishlash oson.
4. Real hayotdagi modelni kodga tushirish tabiiy.

🌐 WebBrogramist

📖 "Grokking Algorithms" bilan algoritm nazariyasini oson tushunish.

👨‍💻 Ushbu kitob — algoritmlarni matematika bilan emas, balki oddiy hayotiy misollar va chizmalar bilan tushuntiradi.

Hech qanday “akademik bosh og‘ritish” yo‘q. Faqat haqiqat:
➡️ Nega binary search ishlaydi?
➡️ Stack qayerda kerak bo‘ladi?
➡️ Recursiondan qanday qo‘rqmaslik kerak?

✅ Array, Linked List, Stack, Queue, Tree, Graph kabi asoslarni tushunish.
✅ Har bir algoritmni qayerda, qanday ishlatish kerak — o‘zlashtirish.
✅ Leetcode Easy’ni bemalol yecha boshlash.

🌐 WebBrogramist

🎯 Dofaminni arzon narsalarga sovurmang!

Har kuni bizga ma'lum miqdorda dofamin “beriladi” — miyamiz shunchaki ishlab chiqaradi. Uni ertalabdan boshlab arzon narsalarga — musiqa, ijtimoiy tarmoqlarga — ishlatib yuborsak, kun davomida foydali ishlarga motivatsiya qolmaydi.

Shaxsiy fikrim:
Masalan, kimdir ertalab ishga yoki o‘qishga musiqa eshitib, Instagramda reels ko'rib boradi. “Mazza qiladi” — dofamin chiqadi. Lekin bu o‘ziga xos mukofotni foydasiz narsaga sarflab bo‘ldi — endi o‘qish va mehnatga miyya "nima keragi bor" deydi. Birinchi qiyinchilikda charchaydi, fokus yo‘qoladi. Miyya fikrlaydi: “Menga dofamin kerak bo‘lsa, mehnatga qiynalib o‘tirmayman, yana musiqa tinglayman”.

Shu sabab, ertalabki arzon dofaminga uchmang. Hech bo‘lmasa, ishgacha musiqa emas, jimlik bo‘lsin. Fikr yuriting, rejalarni ko‘zdan kechiring. Dofaminingizni maqsadli ishlarga saqlang. Aqliy mehnatga fokus bering.

O‘qishdan qaytayotganda esa — mayli, endi xohlaganingizcha dam oling. Endi haqiqatda mukofotga loyiqsiz!

📌 O‘qishda esa Pomodoro usulidan foydalaning, shunda miyya keyingi safar yana o'qishni xohlaydi, dangasalik qilmaydi:
25 daqiqa to‘liq fokus — 5 daqiqa dam (biroz mukofot).

Bu metod bilan miyangiz mukofotni aniq qoidada ko‘ra oladi. Va keyingi safar dangasalik qilish o‘rniga, ishga tayyor holatda bo‘ladi.

🌐 WebBrogramist

📍 Paradokslar: Hayot, Ilm, Fikrni Portlatadigan vosita!

Paradoks — bu bir qaraganda mantiqsiz, lekin aslida chuqur ma’no yashirgan fikr. O‘ylovchilarni aldaydi, ammo fikrlovchilarni uyg‘otadi.
Ongni silkitib, mantiqni osiltirib qo‘yadi.

Masalan, Epimenid paradoksi:
"Men yolg‘onchiman", — deydi bir odam.
Agar u rost gapirayotgan bo‘lsa, demak u yolg‘on gapirmaydi. Ammo u o‘zini yolg‘onchi deyapti.
Agar u yolg‘on gapirayotgan bo‘lsa, demak u yolg‘onchi emas. Bu esa yana ziddiyat.
👉 Bu mantiqiy paradoks.

Paradokslar — bu aqlni chalg‘ituvchi sir emas, fikrni o‘stiruvchi vosita.
Ularni tushungan inson — dunyoni chuqurroq anglaydi.

#paradoks #ilm #psixologiya

🌐 WebBrogramist

💻 C++ da kompyuter xotirasini boshqarish — Xotira manzili, pointerlar va new/delete orqali xotirani qo‘lda boshqarish.

& — Xotira manzilini ko'rish yoki alias (havola) yaratish.
* — Pointer, yani xotira manzilini saqlash yoki manzildan qiymatni ko'rish.

1. O‘zgaruvchiga alias (taxallus) yaratish.

string var1 = "Value"
string &var2 = var1; // 'var2' endi 'var1'ning boshqa nomi

2. Xotira manzilini ko'rish.

cout << &varName; // o‘zgaruvchini manzilini chiqarish

3. Xotira manzilini saqlash va ko'rish.

string varName = "Value"
string* addressVar = &varName; // manzilni saqlash
cout << *addressVar; // manzil orqali qiymatini ko'rish
*addressVar = "Value"; // manzil orqali qiymatni o'zgartirish

4. Yangi xotira ajratish va boshqarish.

int* ptr = new int; // dinamik xotira ajratish
*ptr = 35; // qiymat berish
delete ptr; // xotirani bo‘shatish

🌐 WebBrogramist

🖥 Ajoyib sayt topib oldim!

Saytni mazmuni - abadiy jang: kun bilan tun, yaxshilik bilan yomonlikning kurashi. JavaScript yordamida, biroz HTML va CSS bilan yozilgan bitta index.html faylda.

Link: Pongwars

🌐 WebBrogramist

🖥 Frontend System Design yoki Frontend Arxitekturasi.

Bu butun bir tizimni oson boshqarish. Komponentlar, state, API, caching, security kabi qismlarni bir butun qilib o‘ylash.

🔴Performance – tezlik bilan ishlash.

🔴Scalability – loyiha oson kattalashadigan bo'lishi.

🔴Maintainability – boshqa dasturchi ham oson tushuna olishi.

🔴User Experience – foydalanuvchi uchun qulay bo'lishi.

🔗 Batafsil: bu yerda.

🌐 WebBrogramist

👩‍💻 JavaScript qanday til?

JavaScript — bu interpreted va just-in-time compiled til. Ya’ni, kodni avval butunlay mashina tiliga o‘girib keyin ishga tushirmaydi, balki kerak bo‘lsa tezda tarjima qiladi. Dastlab faqat browserda ishlagan. Hozir Node.js orqali serverda ham ishlaydi.

⚙️ U qanday ishlaydi?

🔴Kodni o‘qish
Brauzer HTML va CSS bilan birga JS kodini ham yuklab oladi.

🔴Parsing (tahlil qilish)
JS Engine (masalan, Chrome’da – V8) kodni satrma-satr tahlil qilib, uni AST (Abstract Syntax Tree) ga aylantiradi.

🔴Compiling (JIT – Just In Time)
Kod AST’dan mashina tiliga tarjima qilinadi. Bu jarayon tezroq ishlashi uchun JIT Compiler qo‘llaniladi.

🔴Event Loop va Call Stack
JavaScript single-threaded (bitta oqimda ishlaydi).

— Call Stack: bajarilishi kerak bo‘lgan funksiyalar navbati.
— Event Loop: asinxron ishlarni (setTimeout, fetch va h.k.) navbatga qo‘shib, bo‘sh paytda ularni bajaradi.

🔴Execution
Natijada, kod ekranda JS Engine orqali bajariladi.

🌐 WebBrogramist

🔺 Atomic Design metodologiyasi.

Bu Frontendda UI komponentlarini tabiiy tuzilma printsiplariga ko‘ra bosqichma-bosqich tashkil qilish metodologiyasi. Uni 2013-yilda Brad Frost taklif qilgan.

Maqsad — katta loyihalarda izchillik, qayta foydalanish va tizimlilikni ta’minlash.

U 5 ta asosiy bosqichdan tashkil topgan:

🔴 Atoms — eng kichik birliklar: button, input, icon.
🔴 Molecules — bir nechta atomning birlashmasi, masalan: SearchBar, InputWithLabel.
🔴 Organisms — mustaqil, murakkab bloklar: Header, Card, Navbar.
🔴 Templates — komponentlar joylashuvi va tuzilmasi.
🔴 Pages — real kontent bilan to‘ldirilgan tayyor sahifa.

Atomic design metodologiyasi bilan:

✔️ Kod va dizayn tartibli bo‘ladi.
✔️ Qayta foydalanish osonlashadi.
✔️ Kengaytirish (scalability) yengillashadi.

🌐 WebBrogramist

— Modular structure arxitekturasi

Bu loyihani kichik va qayta ishlatiladigan modullarga bo‘lib tashkil qilish usuli. Modullar o‘zaro import/export orqali bog‘lanadi, lekin biri boshqasiga qaram bo‘lmaydi.

Afzalliklari:
✔️ Kod tartibli va oson boshqariladigan bo‘ladi.
✔️ Qayta ishlatiladigan komponentlar.
✔️ Katta jamoalarda ishlash uchun qulay.

E'tiborli jihati:
🔴Kichik loyihalarda bu yondashuv qiyinroq tuyilishi mumkin.
🔴Tuzilmani boshidanoq strategik rejalashtirish kerak.

🗂 Struktura (Vue.js misolida)

src/
├── modules/
│   ├── auth/
│   │   ├── components/LoginForm.vue
│   │   ├── store/useAuthStore.ts
│   │   ├── api/authApi.ts
│   │   └── index.ts
│   ├── user/
│   │   ├── components/ProfileCard.vue
│   │   ├── store/useUserStore.ts
│   │   └── api/userApi.ts
│
├── shared/
│   ├── components/Button.vue
│   ├── utils/formatDate.ts
│   └── types/index.ts
│
└── main.ts

🌐 WebBrogramist

🖼️ TypeScript Utility Types

Bu tayyor yordamchi tiplar bo‘lib, ular mavjud interfeys yoki tiplarni o‘zgartirish, filtrlash yoki ulardan yangi tip hosil qilish uchun ishlatiladi.
Ular TypeScript'ning eng kuchli va foydali qismlaridan biri.

Eng ko‘p ishlatiladigan Typelar:
🔴 Partial<T> — T dagi barcha property’larni optional (?) qiladi.
🔴 Readonly<T> — T dagi xususiyatlarni o‘zgartirib bo‘lmaydigan qiladi.
🔴 Pick<T, K> — T dan faqat kerakli xususiyatlarni ajratib olish.
🔴 Omit<T, K> — T dan keraksiz xususiyatlarni olib tashlash.
🔴 Record<K, T> — Barcha kalitlar uchun bir xil turdagi qiymat beradi.
🔴 Exclude<T, U> — T dan U dagi turlarni chiqarib tashlaydi.
🔴 Extract<T, U> — T dan faqat U dagi tiplarni olib qoladi.
🔴 NonNullable<T> — null va undefined ni olib tashlaydi.

Kod misoli:

interface User {
  id: number;
  name: string;
  age: number;
}

const updateUser = (user: Partial<User>) => {
  // faqat kerakli fieldlarni jo‘natish mumkin
};

updateUser({ name: "Ali" });

🌐 WebBrogrammist

👩‍💻 "XSS (Cross-Site Scripting)" veb hujumi

XSS — bu veb hujum turi bo'lib, brauzerda zararli JavaScript kodining sizning domeningiz nomidan bajarilishi.

Misol uchun: Sayt foydalanuvchilarga izoh qoldirishga ruxsat beradi. Bir kishi izohga oddiy matn yozadi — hammasi yaxshi. Biroq hujumchi izohga kichik «sirli buyruq» yozadi (masalan, <script>...). Agar siz bu izohni tozalamasdan boshqa foydalanuvchilarga ko‘rsatsangiz, brauzer o‘sha «buyruq»ni sizning sayt nomingiz ostida bajaradi.

Natijada hujumchi foydalanuvchi ma’lumotlarining o‘g‘irlashi yoki saytni manipulyatsiya qilishi mumkin.

XSS turlari:
🔹 Stored: zararli kod serverda saqlanadi (komment, profil).
🔹 Reflected: URL yoki forma orqali darhol aks etadi.
🔴 DOM-based: frontenddagi noto‘g‘ri DOM-manipulyatsiya sababli yuz beradi (innerHTML, v-html).

Asosiy himoya choralari:
✔️ v-html, innerHTML, eval, document.write — faqat zarurat bo‘lsa ishlatish va DOMPurify bilan tekshirish zarur.
✔️ Content Security Policy (CSP) o‘rnatish (script manbalarini cheklash).
✔️ Inline event handlerlardan voz kechish (onclick="..." emas, Vue’da @ click ishlatish).
✔️ Sensitiv tokenlarni HttpOnly cookieda saqlash — JavaScript orqali o‘qilmasligi kerak.
✔️ v-html/innerHTML ishlatilgan barcha joylarni review qilish, npm audit yoki Snyk bilan dependency monitoring.

Xavfli:

<div v-html="comment"></div>

Xavfsiz:

const safeComment = DOMPurify.sanitize(comment);

<div v-html="safeComment"></div>

🌐 WebBrogrammist

📊 Sentry — real vaqt rejimida xatoliklarni kuzatish va performance monitoring tizimi.

Vebsaytlarda har bir xato foydalanuvchi tajribasiga ta’sir qiladi. Browserda sodir bo‘lgan xatoliklarni foydalanuvchi ko'ra oladi, ammo dasturchi sezmaydi.

Sentry bu muammoni hal qiladi — u xatolarni real vaqt rejimida aniqlab, ularning sababi va joylashuvini ko'rsatadi.

Nimalarni kuzatadi?
🔴 Xatoliklar (Error, ReferenceError, TypeError).
🔴 Performance: sahifa yuklanish tezligi, API chaqiruv kechikishi.
🔴 Network xatolari.
🔴 Har bir xatoni foydalanuvchi, browser va URL ma'lumotlari bilan birga saqlaydi.

Afzalliklari
✔️ Email orqali real vaqt bildirishnomalar.
✔️ O‘xshash xatolarni guruhlaydi.
✔️ Xatolarni original fayldan ko‘rsatadi.

🌐 WebBrogrammist

📶 Internet nima va u qanday ishlaydi?

Internet — bu kompyuterlar tarmog‘i, ya’ni butun dunyodagi millionlab kompyuter, telefon va serverlar o‘zaro ulanib, ma’lumot almashadigan global tizim.

Ular orasidagi aloqa standart protokollar orqali amalga oshadi.

Ma’lumot qanday almashadi?
🔸 Brauzer so‘rov yuboradi.
🔸 Bu so‘rov IP-manzilga boradi.
🔸 Server video paketlarini yuboradi.
🔸 Brauzer ularni yig‘ib ko‘rsatadi.

IP, Domen va protokollar:
🔴 IP manzil — har bir qurilma yoki saytning internetdagi unikal raqami.
🔴 Domen — sayt nomi (google.com).
🔴 DNS — domen nomlarini IP manzillarga aylantiradi.
🔴 TCP — ma’lumot to‘liq va to‘g‘ri ketishini nazorat qiladi. Agar paket yo‘qolsa, uni qayta yuborishni so‘raydi.
🔴 HTTP — brauzer va server shu protokol orqali muloqot qiladi.

Internetda hech bir fayl to‘liq yuborilmaydi — har biri kichik paketlarga bo‘linadi.

🌐 WebBrogrammist

— 0 va 1 dunyosi

Biz har kuni ko‘radigan video, rasm, musiqa, hatto shu postning o‘zi ham — 0 va 1 lardan iborat!

🔴 Kompyuter uchun har narsa — bu signal bor (1) yoki yo‘q (0) degani.

🔴 U faqat ha yoki yo‘q deb fikrlaydi. Bu ikkilik qarorlar orqali butun Internet tuziladi.

🔴 Har bir harf, rasm, yoki ovoz ikkilik kodga — 0 va 1 lar ketma-ketligiga aylantiriladi.
Masalan, A harfi — 01000001.

Shu sababli bizning butun raqamli dunyomiz — ushbu ulkan kombinatsiyasidan iborat.

🌐 WebBrogrammist

Frontend — bu faqat vebsayt dizayni emas.

🔴 Har bir tugma bosilganda, forma yuborilganda — orqasida murakkab mantiq ishlaydi: ma’lumot tekshiriladi, serverga yuboriladi, javob olinadi va natija ko‘rsatiladi.

🔴 Frontend — bu nafaqat sayt ko‘rinishi, balki saytda foydalanuvchi o'zini qanday his qilishini boshqaradigan soha.

🔴 Dizayn chiroyli bo‘lishi mumkin, lekin mantiqsiz interfeys — ishlamaydigan go‘zallik.

🌐 WebBrogrammist

Nikola Tesla — kelajakni asr oldin yozgan daho

Nikola Tesla (1856–1943) — elektr energiyasi, simsiz aloqa va texnologiya tarixini o‘zgartirgan inson. U zamonasidan o‘nlab yil ilgarilab fikr yuritgan, lekin o‘zi yaratgan dunyoning boyligini ko‘rmay o‘tgan.

Asosiy yutuqlari:
🔴 Alternativ tok (AC) tizimini ixtiro qildi — bugungi elektr tarmoqlarining asosi.
🔴 Simsiz uzatish tajribalari bilan Wi-Fi, Bluetooth va radio g‘oyasiga yo‘l ochdi.
🔴 Dunyodagi birinchi induksion dvigatelni yaratdi.
🔴 Energiya uzatishni havodan amalga oshirishga urindi (Wardenclyffe Tower loyihasi).

🔸 Tesla shunchaki muhandis emas edi — u inson tafakkurining imkoniyatlarini o‘rganishga, hatto energiyani Yer va koinotdan olish fikriga ham jiddiy qaragan.
🔸 Afsuski, u hayotining oxirida kambag‘al va unutilgan holda Nyu-Yorkdagi kichik mehmonxonada vafot etdi. Ammo bugun butun dunyo "Tesla" ismini yangicha ma’noda — texnologiya va kelajak timsoli sifatida eslaydi.

— U bir so‘z bilan aytganda — orzulari zamonidan ilgarilab ketgan inson.

🌐 WebBrogrammist