Akhror Web

#JS
👩‍💻
JavaScript’dagi Primitive turlar
JavaScript’da ma’lumotlar ikki turga bo‘linadi:
➡️
Primitive (asosiy)
➡️
Non-primitive (murakkab)
Bugun primitive turlar haqida gaplashamiz
👇
1️⃣
number — raqamli qiymatlar
Matematik hisob-kitoblar uchun ishlatiladi.
📘
Misol:
let yosh = 20;
let narx = 15.5;
💬
Har ikkalasi ham number turi hisoblanadi (butun yoki o‘nlik farqi yo‘q).
2️⃣
string — matnli qiymatlar
Qo‘shtirnoq yoki backtick (`) ichida yoziladi.
📘
Misol:
let ism = "John";
let salom = 'Salom, dunyo!';
let xabar = `Bugun ${new Date().getFullYear()}-yil`;
💬
String’lar bilan ishlashda + orqali birlashtirish yoki template literal (${}) ko‘p ishlatiladi.
3️⃣
boolean — mantiqiy qiymat
Faqat ikkita qiymat oladi:
✅
true — ha
❌
false — yo‘q
📘
Misol:
let kattaYosh = true;
let kichikYosh = false;
💬
Ko‘pincha shartlarda ishlatiladi (if, while va hokazo).
4️⃣
null — bo‘sh qiymat
Ma’lumot yo‘qligini atayin ko‘rsatadi.
📘
Misol:
let natija = null; // hozircha qiymat yo‘q
💬
Bu “bo‘sh joyni” anglatadi, lekin o‘zi mavjud.
5️⃣
undefined — belgilanmagan qiymat
O‘zgaruvchi e’lon qilingan, lekin qiymat berilmagan.
📘
Misol:
let ism;
console.log(ism); // undefined
💬
Ko‘pincha “hali qiymat berilmagan” degani.
6️⃣
symbol — noyob qiymat
Har bir symbol o‘ziga xos va takrorlanmas qiymatga ega
🔑
📘
Misol:
let id = Symbol("id");
let id2 = Symbol("id");
console.log(id === id2); // false
💬
Symbol’lar maxfiy identifikatorlar yaratishda ishlatiladi (masalan, object ichida).
7️⃣
bigint — juda katta sonlar uchun
🔢
number 2⁵³−1 gacha sonlarni saqlaydi, undan kattaroq qiymatlar uchun bigint ishlatiladi.
📘
Misol:
let kattaSon = 123456789012345678901234567890n;
💬
E’tibor bering: oxirida n qo‘shiladi.
Bu sonlarni aniqlikni yo‘qotmasdan saqlashga yordam beradi.
⚙️
Xulosa
🧠
Primitive turlar — 7 ta:
number
bigint
string
boolean
null
undefined
symbol
Ular o‘zgarmas (immutable) bo‘ladi va JavaScript’ning eng asosiy ma’lumot turlaridir.
💬
Siz undefined bilan null ni aralashtirib yuborgansizmi hech?
😅
Telegram
|
YouTube

#JS
👩‍💻
JavaScript’da O‘zgaruvchilar: var, let, const
JavaScript’da ma’lumotlarni saqlash uchun o‘zgaruvchilardan foydalanamiz. Ularni e’lon qilishning 3 usuli bor:
1️⃣
var — eski usul
- ES6 (2015) gacha faqat var ishlatilgan
- Function scope ga ega (faqat funksiyada cheklangan)
- Qayta e’lon qilish ham, qiymatini o‘zgartirish ham mumkin
🔄
- Kamchilik: xotiraga “yopishib” qoladi, chalkashlik keltirib chiqarishi mumkin
📌
Misol:
var ism = "Ali";
var ism = "Vali"; // qayta e’lon qilish mumkin
2️⃣
let — zamonaviy va xavfsizroq
- Block scope ga ega ({} ichida ishlaydi)
- Qiymatini o‘zgartirish mumkin, lekin qayta e’lon qilib bo‘lmaydi
🚫
- Amaliyotda ko‘p ishlatiladi
📌
Misol:
let yosh = 20;
yosh = 21; // qiymatini o‘zgartirish mumkin
3️⃣
const — o‘zgarmas qiymat
- Block scope ga ega
- Qiymati bir marta beriladi va o‘zgartirib bo‘lmaydi
❌
- Odatda doimiy qiymatlar uchun ishlatiladi (masalan, PI, API_URL)
📌
Misol:
const PI = 3.14;
🟡
Xulosa
- var — eski, hozir ishlatish tavsiya etilmaydi
❌
- let — o‘zgaruvchan qiymatlar uchun eng ko‘p ishlatiladigan usul
🔄
- const — o‘zgarmas qiymatlar uchun doimiy tanlov
🔐
💡
Oddiy qoida:
Avval const dan foydalaning, agar qiymat o‘zgarishi kerak bo‘lsa, let ga o‘ting.
Siz odatda ko‘proq
let
dan foydalansizmi yoki
const
dan?
🤔
Telegram
|
YouTube

#JS
👩‍💻
DevTools bilan tanishish: Console va Inspector
Dasturchi uchun brauzer — oddiy internet ko‘ruvchi emas, balki qudratli laboratoriya!
Shu laboratoriyaning eng muhim asboblaridan biri — DevTools.
⛏
DevTools nima?
DevTools — bu brauzer ichida yashiringan maxsus dasturchi asboblari bo‘lib, ular orqali:
Sahifangiz qanday ishlayotganini tekshirishingiz,
Koddagi xatolarni aniqlashingiz,
Dizaynni real vaqtda o‘zgartirishingiz mumkin.
🔍
Inspector (Tekshiruvchi)
Inspector orqali siz:
HTML va CSS kodini to‘g‘ridan-to‘g‘ri sahifada ko‘rasiz
Matn, rang yoki dizaynni real vaqtda o‘zgartirasiz
Responsive rejimda turli qurilmalarda sayt qanday ko‘rinishini tekshirasiz
Masalan: fon rangini o‘zgartirib, “demo” qilishingiz mumkin — ammo bu faqat sizning brauzeringizda amal qiladi
💻
Console (Konsol)
Console esa dasturchining “sirli daftariga” o‘xshaydi:
Kod yozib sinab ko‘rishingiz mumkin
Xatoliklar (error, warning) ko‘rinadi
⚠️
console.log() yordamida ma’lumotlarni chiqarib, kuzatib borasiz
Masalan:
console.log("Salom, DevTools!");
degan kodni yozsangiz, natija konsolda chiqadi.
✨
🟡
Xulosa
Inspector
— ko‘rish va dizayn o‘zgartirish uchun,
Console
— sinash va xatoliklarni topish uchun.
DevTools — bu dasturchining birinchi yordam qutisi . Uni o‘zlashtirsangiz, dasturlash jarayoni ancha tez va qiziqarli bo‘ladi!
🚀
❔
Siz ko‘proq Inspectordan foydalanasizmi yoki Consoledan?
Telegram
|
YouTube

Huddi boshlanganiga endi 99 kun bo'lgandek o'tdi
💔

#JS
👩‍💻
JavaScriptga kirish: Nima va qayerda ishlatiladi? ✦
JavaScript — bu dasturlash tili bo‘lib, asosan veb-sahifalarga interaktivlik qo‘shish uchun ishlatiladi.
Agar HTML sahifamiz tana bo‘lsa, CSS uning kiyimi, JavaScript esa unga jon baxsh etadigan miya
🧠
hisoblanadi.
⚙️
JavaScript nima qiladi?
🔸
Tugma bosilganda animatsiya yoki hodisa chiqaradi
🔸
Formadagi ma’lumotlarni tekshiradi
🔸
Veb-sahifaga dinamik o‘zgarishlar kiritadi (masalan, yangilanayotgan vaqt, slayder, modal oynalar)
🔸
Server bilan ma’lumot almashadi (chat dasturlari, onlayn xarid savatchasi)
🔸
Ma’lumotlar bilan hisob-kitob va manipulyatsiya qiladi
🌐
Qayerda ishlatiladi?
Frontend (React, Vue, Angular kabi frameworklarda)
Backend (Node.js orqali server dasturlarida)
Mobil ilovalar (React Native orqali)
Desktop dasturlar (Electron orqali, masalan, VS Code)
O‘yinlar
🎮
(Phaser.js kabi kutubxonalar yordamida)
Sun’iy intellekt
🤖
(TensorFlow.js orqali)
IoT qurilmalari (masalan, Arduino bilan JS orqali boshqarish)
❔
JavaScript nega muhim?
1. Hamma brauzerlar uni qo‘llab-quvvatlaydi
2. Juda kuchli ekotizim (minglab kutubxonalar va frameworklar mavjud)
3. Oson o‘rganiladi va yangi boshlovchilar uchun mos
4. Dunyoda eng ko‘p ishlatiladigan dasturlash tillaridan biri
🟡
Xulosa: JavaScript — bu eng mashhur va kuchli dasturlash tili bo‘lib, uni bilgan dasturchi frontenddan backendgacha, mobil ilovadan o‘yinga qadar turli loyihalarni yaratishi mumkin.
🚀
Telegram
|
YouTube

🟡
10ta Eng Foydali Frontend UI & Animation Kutubxonalar
Bugungi frontend rivojlanishida vaqtni tejash va professional dizayn qilish uchun quyidagi kutubxonalar juda qo‘l keladi
⬇️
🎨
Design & Component Libraries
Tailark
– Shadcn UI asosida tayyor marketing bloklari (hero, pricing, testimonials). Tez landing page qilish uchun ideal.
Shadcn.io
– 200+ bepul React komponentlari (TypeScript + Tailwind + Radix UI). CLI orqali tez integratsiya.
SVGL
– Eng katta SVG logotiplar kolleksiyasi. Demo, portfolio va client loyihalarda kerak bo‘ladi.
Skiper UI
– Tailwind + Framer Motion asosidagi animatsiyali komponentlar (AI input, card carousel). Zamonaviy va “pop” effektlar.
Shadcn Extension
– Shadcn UI uchun qo‘shimcha maxsus komponentlar.
🎬
Animation & Motion
Motion Primitives
– Professional animatsiyali UI komponentlar. Ishonchli UX uchun juda yaxshi.
Animate UI
– Shadcn bilan integratsiyalashgan animatsiyali komponentlar (dynamic background, animated text).
⛏
Specialized Tools
ReactBits.dev
– React uchun komponentlar va resurslar hub’i.
Kibo UI
– Enterprise darajadagi kengaytmalar: Gantt chart, Kanban, color picker, roadmap vizualizatsiya.
Magic UI
– 150+ animatsiyali React komponentlar.
⭐️
(18k+ GitHub stars). Landing page uchun top tanlov.
❔
Nima uchun kerak?
Vaqt tejash – tayyor komponentlar
Sifat – accessibility va performance yuqori
Consistency – UI bir xil uslubda bo‘ladi
Zamonaviy standartlar – TypeScript, Tailwind, Motion
Community support – muntazam yangilanib boradi
💬
Qanday boshlash kerak?
Tez prototip → Magic UI /
Shadcn.io
Marketing sayti → Tailark + Motion Primitives
Murakkab ilova → Kibo UI + Shadcn
Animatsiya → Motion Primitives / Animate UI
💡
Xulosa: Bu kutubxonalar nafaqat trendy, balki real muammolarni hal qiladigan vositalar. To‘g‘ri kombinatsiya qilsangiz, professional va zamonaviy web loyihalarni tez va samarali yaratishingiz mumkin.
🚀
Telegram
|
YouTube

🔄
API Development o‘rganishda asosiy mavzular
Bugungi dasturlash olamida API deyarli hamma joyda ishlatiladi: web ilova, mobil ilova yoki hatto aqlli qurilma bo‘lsin. Shuning uchun API development — har bir dasturchi uchun zarur ko‘nikma.
Keling, bosqichma-bosqich mavzular xaritasini tuzib chiqamiz:
🔹
1. API Fundamentals (Asoslar)
• API nima va qanday ishlashini tushunish.
• Turlari:
• REST (eng mashhur, HTTP metodlarga asoslangan)
• SOAP (XML-based, eski tizimlarda ishlatiladi)
• GraphQL (faqat kerakli ma’lumotni olish imkoniyati)
• gRPC (Google’dan yuqori unumdor API framework)
• API vs SDK farqini bilib olish.
🔹
2. Requests va Responses (So‘rovlar va Javoblar)
•
HTTP metodlari: GET, POST, PUT, DELETE, PATCH.
•
Status kodlari:
200 OK → Muvaffaqiyatli
201 Created → Yaratildi
400 Bad Request → Noto‘g‘ri so‘rov
401 Unauthorized → Ruxsat yo‘q
404 Not Found → Topilmadi
500 Internal Server Error → Server xatosi
• Headers: Content-Type, Authentication token va h.k.
🔹
3. Authentication va Security (Xavfsizlik)
• API kalitlari (API Keys)
• Basic Auth (oddiy, lekin xavfsiz emas)
• OAuth 2.0 (Google bilan sign-in)
• JWT (stateless session tokenlari)
Qo‘shimcha: HTTPS, CORS, Rate limiting, Input validation.
🔹
4. API Design & Development
• RESTful prinsiplari:
• /users/123/orders kabi resursga asoslangan URL
• To‘g‘ri HTTP metodlar
• Stateless requestlar
• Versioning (/v1/users)
• Pagination (?page=2&limit=50)
•
Asboblar:
• OpenAPI (Swagger) – hujjatlashtirish
• Postman, Insomnia – test va eksploratsiya
🔹
5. API Testing
• Postman, cURL, SoapUI, Newman kabi vositalar.
• Test qilish: status kodlar, ma’lumot aniqligi, auth flow, xato ishlov berish, performance.
🔹
6. Deployment & Integration
• API’ni AWS, Azure, Heroku kabi platformalarda deploy qilish.
• API Gateway’lar (routing, auth, caching, rate limiting):
• AWS API Gateway, Kong, Apigee
• API iste’mol qilishni turli tillarda mashq qilish:
• JS (fetch, Axios)
• Python (requests)
• Java (Retrofit, RestTemplate)
• Mashhur public API’lar bilan amaliyot: Google Maps, Stripe, Spotify, OpenWeather.
💬
Xulosa: Agar API developmentni shunday bosqichma-bosqich o‘rgansangiz, nafaqat API yozishni, balki uni sinash, xavfsiz qilish, deploy qilish va real ilovalarga integratsiya qilishni ham puxta egallaysiz.
Telegram
|
YouTube

🧠
Kod intervyularida 7 bosqichli reja — qisqacha va amaliy
Intervyu stress? To‘g‘ri yondashsangiz natija yaxshilanadi. Quyidagi 7 bosqich men va ko‘pchilikka yordam bergan — oddiy, tartibli va samarali.
Eshitish
— Vazifani diqqat bilan tinglang. Suhbat beruvchining har bir tafsiloti muhim bo‘lishi mumkin.
— Savollar so‘rang: kutilayotgan input hajmi? chegaralar? edge-case’larni qanday ko‘rish kerak?
Misol yaratish
— Muammoni yaxshi ifodalovchi real misol tuzing (juda oddiy emas, lekin hammasini qamrab olsin).
— Intervyuerga “Bu misol muammo uchun to‘g‘rimi?” deb tekshirishni taklif qiling.
Brute force (oddiy ishlaydigan yechim)
— Avval ishlaydigan — hatto sekin — yechimni taklif qiling va uning murakkabligini ayting.
— Bu xatoliklarni kamaytiradi va keyingi optimizatsiya uchun poydevor beradi.
Optimize (BUD qoidasi)
— Bottlenecks (sekin joylarni aniqlang)
— Unnecessary work (keraksiz amallarni olib tashlang)
— Duplicated work (takror ishlarni bartaraf eting)
— Strukturalar va time–space trade-off’larni ko‘rib chiqing (hash map, stack, DP…).
Walk through (qadam-baqadam o‘tish)
— Algoritmni og‘zaki yoki qog‘ozda bir qadamdan keyingi qadamga ochib bering.
— Bu kodlashda kam xato qilishga yordam beradi va intervyuerga fikringizni ko‘rsatadi.
Kodlash
— Modular, o‘qilishi oson kod yozing; ma’noli o‘zgaruvchi nomlari; yuqori darajadan pastgacha yozish (helper funksiyalar).
— Yozish davomida izohlang — nimani va nega qilayotganingizni ayting.
Testlash
— Kodni qat’iy tekshirib chiqing: sintaksis, loop shartlari, indekslash, edge-case’lar.
— Oddiy test misollari bilan ishga tushiring va topilgan xatolarni tizimli tuzating.
Bonus: Kod ko‘rib chiqish va sifatni oshirish uchun AI yordamchilari (masalan,
CodeRabbit
) tez fikr, taklif va avtomatik tuzatishlar bilan vaqtni qisqartirishi mumkin — ochiq manbali repolar uchun bepul variantlar ham bor.
💡
Xulosa: Ha — rostan ham foydali.
Nega? Chunki strukturali yondashuv (tinglash → misol → ishlaydigan yechim → optimizatsiya → tekshirish) intervyuda sizni tartibli, ishonchli va tez moslashuvchi qilib ko‘rsatadi.
Telegram
|
YouTube

💬
HTTP Status Kodlari – React yoki Webda tez-tez uchraydiganlari
.
1️⃣
200 – OK
Hammasi joyida
✅
So‘rov muvaffaqiyatli bajarildi.
2️⃣
201 – Created
Yangi resurs yaratildi
📂
Masalan: yangi user ro‘yxatdan o‘tdi.
3️⃣
400 – Bad Request
So‘rov noto‘g‘ri yuborilgan
❌
Masalan: formani xato to‘ldirish.
4️⃣
401 – Unauthorized
Avtorizatsiya kerak
🔐
Masalan: login qilmasdan profilga kirishga urinish.
5️⃣
403 – Forbidden
Ruxsat yo‘q
🛑
Hamma narsa to‘g‘ri, lekin huquqingiz yetmaydi.
6️⃣
404 – Not Found
Topilmadi
🔍
Masalan: mavjud bo‘lmagan sahifaga kirish.
7️⃣
500 – Internal Server Error
Serverning o‘zi xatolik berdi
💥
Masalan: backend kodida nosozlik.
💡
Ushbu status kodlari frontend va backend o‘rtasida til bo‘lib xizmat qiladi.
React’da ham API chaqirganda eng ko‘p shu kodlarni ko‘rasiz.
Telegram
|
YouTube

#Redux
👩‍💻
Redux – Katta React Ilovalarida Davlatni (State) Boshqarish
React’ning o‘zida ham state bor. Lekin ilova kattalashsa — komponentdan komponentga prop uzatish, global state boshqarish
😵‍💫
juda chalkash bo‘lib ketadi.
👉
Shu joyda Redux sahnaga chiqadi.
💠
Redux nima?
• Ilovaning butun state’ini bitta joyda (store) saqlaydi.
• Komponentlar o‘sha state’ni olishi yoki yangilashi mumkin.
• Predictable (bashorat qilinadigan) — qayerdan qanday o‘zgarish kelayotganini ko‘rasiz.
⚙️
Asosiy tushunchalar
• Store → barcha state shu yerda.
•Action → nima qilish kerakligini bildiruvchi obyekt.
• Reducer → action kelganda state qanday o‘zgarishini aniqlaydi.
• Dispatch → action’ni ishga tushirish.
• Selector → store’dan kerakli qiymatni olish.
🚀
Redux qachon kerak?
• Katta loyihalar, ko‘plab komponentlar global state’dan foydalanadigan joylarda.
• Auth (foydalanuvchi login/logout)
• Shopping cart, chat ilovalari
• Ko‘p joydan bir xil ma’lumotga murojaat qilish kerak bo‘lsa.
✅
Redux Toolkit – hozirgi kunda Redux’ni osonroq va qisqaroq kod bilan yozish uchun ishlatiladigan eng mashhur yechim.
💡
Xulosa: Redux — katta va murakkab React loyihalari uchun state boshqaruvining kuchli quroli.
Telegram
|
YouTube