🕸 Veb-sayt tezligini oshirish.

GTmetrix veb-sayt qanday ishlashini, nima uchun sekinligini va uni qanday optimallashtirishni aytib beradi.

🔗 Havola: GTmetrix

🌐 WebBrogrammist

👩‍💻 Vue.js loyiha strukturasi.

🗂 1. Root papkalar:

src/
├── assets/
├── components/
├── composables/
├── layouts/
├── pages/
├── router/
├── store/
├── styles/
├── utils/
├── views/
├── App.vue
├── main.ts

📁 2. Ularning vazifalari:
assets - Statik resurslar saqlanadi (rasmlar, shriftlar, ikonlar va boshqalar).
components - Qayta ishlatiladigan komponentlar saqlanadi.
composables - Vue Composition API uchun use prefiksli funksiyalar (useAuth, useFetch).
layouts - Sahifa tuzilmalari (navbar, footer, sidebar).
pages/views - Sahifalar (har bir route uchun bitta fayl).
router - Marshrutlash (vue-router sozlamalari).
store - Vuex yoki Pinia ma'lumotlari (state management).
styles - Umumiy CSS yoki SCSS fayllar.
utils - Foydali funksiyalar (helperlar).
Root fayllar - App.vue: Loyiha asosiy komponenti / main.ts: Loyiha kirish nuqtasi.

🌐 WebBrogramist

🔗 GoFullPage Chrome Extention.

Bu orqali veb-sahifalarni to‘liq suratga olib, PDF yoki rasm formatida saqlash mumkin. Men veb-dasturchi sifatida ishlab chiqqan veb-sahifalarimni to'liq ko'rish uchun juda qulay ekan!

🌐 WebBrogramist

🎨 Ochiq kodli UI kutubxona

Agar veb-ilovalaringiz uchun tayyor va chiroyli UI elementlari kerak bo‘lsa, aynan kerakli manba!

🔴 Bepul va ochiq kodli.
🔴 HTML, CSS, Tailwind, React va Figma formatlarida mavjud.
🔴 Hamjamiyat tomonidan yaratilgan minglab UI komponentlari.

🔗 Havola: uiverse.io

🌐 WebBrogramist

👩‍💻 Vue.js loyiha tezligini oshirish

🔴 shallowRef va shallowReactive – Chuqur reaktivlik shart bo‘lmasa, shallowRef ishlating.
🔴 defineAsyncComponent – Katta komponentlarni kechikib yuklash.
🔴 watchEffect – watch o‘rniga avtomatik kuzatuv.
🔴 v-memo – Virtual DOM yukini kamaytirish.
🔴 Teleport – Modal va dialoglarni body'ga chiqarish.

🌐 WebBrogramist

🖼️ 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