🖥 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

📱 Nega bugun telefonga shu qadar bog‘lanib qoldik?

Har birimizda bir savol bor: nega bizning eng yaxshi do‘stimiz telefon?
Undan hech uzolasha olmaymiz, doim yonimizda.

Asosiy sabablari:
🔴 Telefon bizni tinimsiz mukofot aylanasiga bog‘lab qo‘ygan.
🔴 Har bir “like”, har bir yangi xabar — miyamizda dopamin chiqaradi.
🔴 Va shu lahzada biz o‘zimizni baxtli his qilamiz.
🔴 Lekin bu baxt sun’iy va o‘tkinchi.

Vaqt o‘tib, inson real hayotdagi sokinlik, sabr va chuqur fikrlashni yo‘qota boshlaydi.
Bo‘sh vaqtini to‘ldirish uchun — ekran qarshisida o'tqizadi.

Bunga qanday yechim qilsa bo'ladi?

✔️ Bildirishnomalarni o‘chiring.
✔️ Kuniga kamida 1 soat to‘liq erkandan uzoq bo‘ling.
✔️ Bo‘shliqni tabiat, o‘qish yoki sport bilan to‘ldiring.
✔️ Telefon sizga xizmat qilsin, siz unga emas.

👍 — Foydali bo'lsa.

🌐 WebBrogrammist

3️⃣ Dasturlash — bu fikrlash madaniyati!

Dasturlashda har bir funksiya ortida qaror va mas'uliyat turadi.

Shuning uchun asosiy ish kod yozish emas, tartib, mantiq va natijaga etibor qaratish.

Nimalarni o'rgatadi?

🔴 muammoni tahlil qilish;
🔴 yechimni bosqichma-bosqich qurish;
🔴 xatolardan qo‘rqmaslik;
🔴 va mukammallikga intilish.

Shu jihatdan dasturlash hayotga o‘xshaydi. Bitta xato butun tizimni buzadi.
Lekin xatolar — o‘sishning yagona yo‘li.

🌐 WebBrogrammist

🔺 Sun’iy intellekt: xavfmi yoki imkoniyat?

Har safar yangi texnologiya paydo bo‘lsa, odamzot shu savolni beradi: “Endi bizga ish qoladimi?”
Bugun bu savol yana dolzarb — sun’iy intellekt (AI) tufayli.

🔸 Ha, AI allaqachon ko‘plab sohalarni o‘zgartirdi.
Kod yozadi, dizayn chizadi, maqola yozadi, hattoki tibbiyotda kasallikni oldindan aniqlaydi.
Ba’zilar: “Demak, endi biz kerak emasmiz,” deydi.

Ammo masala bunchalik oddiy emas.

🔸 AI odamni almashtirish uchun emas, uni kuchliroq qilish uchun yaratilgan.
U takroriy ishlardan ozod qiladi, lekin ijod, strategiya va tafakkur — hali ham inson qo‘lida.
Kelajakda g‘olib bo‘ladiganlar — AI’dan qo‘rqmay, uni ishlatishni bilganlar bo'ladi.

🔴 Xavf — agar biz o‘zgarmasak.
🔴 Imkoniyat — agar biz undan o‘z foydamizga foydalansak.

🌐 WebBrogrammist

Learning Mindset — Dasturchining eng katta ustunligi.

🔻 Bu — yangi narsadan qo‘rqmaslik, xatodan saboq olish va doimiy o‘sishga intilish.

🔹 Asoslarni tushunish. Har yangi framework ortidan quvish emas, ildizni chuqur bilish muhim.
🔹 O‘rganish — jarayon. “Hammasini bilaman” degan dasturchi yo‘q.
🔹 Kundalik o‘sish. Har kuni kichik narsa o‘rganing — shu sizni uzoqqa olib boradi.

✔️ Texnologiyalar o‘zgaradi, lekin o‘rganishga bo‘lgan munosabat — sizni haqiqiy kuchli dasturchiga aylantiradi.

🔥 - Foydali bo'lsa

🌐 WebBrogrammist

🛡 VPN aslida nima qiladi?

🔐 VPN (Virtual Private Network) — sizning internet trafigingizni shifrlaydi va IP manzilingizni yashiradi.
Natijada, sizning onlayn faoliyatingizni hatto Wi-Fi egasi yoki kuzatuv tizimlari ham ko‘ra olmaydi.

VPN sizni:
🔴 Xakerlardan himoya qiladi.
🔴 Saytlarning kuzatuvidan saqlaydi.
🔴 Geoblokirovkalarni aylanib o‘tishga yordam beradi.

⚠️ Ammo bepul VPN’lar ko‘pincha foydalanuvchi ma’lumotlarini yig‘ib, o'g'irlaydi. Shuning uchun ishonchli va pullik xizmatlardan foydalanishni tavfsiya qilaman.

👍 — Foydali bo'lsa

🌐 WebBrogrammist