Akhror Web
- Front-End
- Youtube :
https://www.youtube.com/@akhrorweb
Loyihalar:
json-api.uz
Creator: Ahror Soliyev
Muhokama uchun guruh:
@akhror_community
📍
20-video
🚪
Signout & onAuthStateChanged
🔄
Login qildik
✔️
, endi chiqishni ham o‘rganamiz!
😅
Bu darsda foydalanuvchi hisobidan chiqish (logout) va foydalanuvchi holatini kuzatishni ko‘rib chiqamiz.
🛠
Bu darsda:
✅
Firebase
signOut()
bilan tizimdan chiqish
✅
onAuthStateChanged()
orqali user kirdi yoki chiqdi — buni real vaqtda kuzatish
✅
UI’ni avtomatik yangilash (kirgan userga boshqa, chiqgan userga boshqa sahifa)
020. onAuthState & SignOut()
🎯
Endi saytimiz to‘liq
auth cycle**ga ega bo‘ladi:
**Signup → Login → Signout → State kuzatish
🔐
Telegram
|
YouTube
⚡️
“Vite 7.0 – Tezlik, Rust va Kelajak!”
🚀
Vite 7.0 chiqdi!
Frontend olami yana bir katta bosqichga qadam qo‘ydi — Vite 7.0 rasman taqdim etildi!
Nimalar yangilandi?
🔄
Node.js talabi: faqat 20.19+ yoki 22.12+. Node 18 endi qo‘llab-quvvatlanmaydi.
🎯
Yangi
build.target
: baseline-widely-available — Chrome 107+, Firefox 104+, Safari 16+, Edge 107+ kabi brauzerlar uchun.
🦀
Rolldown bundler (Rust asosida): sinov tariqasida, tezroq va samarali. Yaqinda Vite’ning asosiy bundleriga aylanishi kutilmoqda.
🔧
Vite DevTools: chuqur diagnostika, HMR kuzatuvi, modul grafigi va yana ko‘p qulayliklar.
✂️
Eskirgan Sass API va splitVendorChunkPlugin olib tashlandi — kod soddaroq va tezroq.
⚡️
Performance:
Cold start ~45% tezlashgan.
Production build vaqti 2–3 barobar qisqargan.
🗓
ViteConf 2025: Amsterdamda 9–10 oktyabr kunlari ilk bor offline formatda o‘tkaziladi.
💬
Xulosa: Vite 7 — faqat oddiy update emas, balki Rust kuchi, zamonaviy target va yangi vositalar bilan kelajak uchun katta qadam.
Telegram
|
YouTube
#Part1
👩💻
17 ta React Hook — zamonaviy komponentlarning 90% ni kuchaytiradi.
1️⃣
useState
Bu hook’dan qochib bo‘lmaydi.
Agar sizga qayta renderlar orasida saqlanib qoladigan dinamik state kerak bo‘lsa, aynan shu ishlatiladi.
const [count, setCount] = useState(0);
2️⃣
useReducer
State murakkablashganda (masalan, bir-biri bilan bog‘liq ko‘p maydonlar bo‘lsa), useReducer yordam beradi.
U useContext bilan juda yaxshi ishlaydi — faqatgina dispatch chaqirib state yangilash mumkin.
const reducer = (state, action) => {
switch (action.type) {
case "addTodo":
return { todos: [...state.todos, action.todo] };
case "removeTodo":
// TODO: Implement logic
case "toggleTodo":
// TODO: Implement logic
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, { todos: [] });
3️⃣
useContext
Prop drilling haddan tashqari ko‘payganda yordamga keladi.
Prop drilling — prop’larni bir necha qatlam orqali pastga o‘tkazish.
useContext orqali:
kichik ilovalarda global state boshqarish
foydalanuvchi ma’lumotini ulashish
prop’larni qo‘lda uzatishdan qochish mumkin.
const UserContext = createContext();
function App() {
const user = useUser();
return (
{/* ... */}
);
}
function Profile() {
const user = useContext(UserContext);
return
}
4⃣
useEffect
Aslida uni 99% hollarda ishlatmaslik kerak.
Lekin real hayotda u kerak bo‘ladi — ayniqsa tashqi tizimlar bilan sinxronlashda.
function useSetDocumentTitle(title: string) {
useEffect(() => {
document.title = title;
}, [title]);
}
Telegram
|
YouTube
#React
🤔
React Re-Renders — Qachon va Nega?
React’da komponent qayta chizilishi (re-render) — UI’ni yangilash jarayoni.
Lekin har safar state yoki props o‘zgarganda butun komponent avtomatik qayta chiziladi.
Bu yaxshi… yoki yomon bo‘lishi mumkin
😅
📌
Qachon re-render bo‘ladi?
1. State o‘zgarsa
2. Props o‘zgarsa
3. Parent komponent re-render bo‘lsa
4. Context qiymati o‘zgarsa
Oddiy misol:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
console.log("
🔄
Render bo'ldi!");
return (
{count}
);
}
export default Counter;
📍
Har safar tugmani bossangiz — count o‘zgaradi va komponent qayta chiziladi.
⚡️
Re-render’ni kamaytirish usullari:
🟢
React.memo → props o‘zgarmasa, komponent qayta chizilmaydi.
🟢
useCallback → funksiya manzili o‘zgarmasligi uchun.
🟢
useMemo → og‘ir hisob-kitoblarni kechiktirish.
🟢
State’ni minimal ishlatish → kerak bo‘lmagan joyda saqlamaslik.
💡
Maslahat: Har bir re-render yomon emas. Faqat keraksiz re-render’lar bo‘lsa optimizatsiya qiling.
Telegram
|
YouTube
📍
19-video
🔑
Login sahifasini yasaymiz!
🚪
Signup qildik, endi navbat —
kirish
!
😎
Bu darsda foydalanuvchilar email va paroli bilan saytga kirish imkoniyatiga ega bo‘lishadi.
🛠
Bu darsda:
✅
login
form yaratamiz
✅
useState
orqali inputlarni boshqaramiz
✅
Firebase
signInWithEmailAndPassword()
funksiyasidan foydalanamiz
✅
Muvaffaqiyatli login bo‘lganda foydalanuvchini
Protected Route
ichiga yo‘naltiramiz
019. Login Page
🎯
Shunday qilib, endi faqat kirgan usergina saytning maxsus bo‘limlarini ko‘ra oladi
🔒
Telegram
|
YouTube
#TS
👩💻
Type vs Interface – Qaysi birini tanlash kerak?
Ko‘pincha TypeScript fayliga qarab qolamiz: "Nega bu yerda type ishlatdim, interface emas?"
🤔
Har ikkisi ham ishlaydi, lekin farqi bor. Ketchup va mustard kabi — tanlov bor, lekin hamma ham ma’qullamaydi.
1️⃣
Extensibility (Kengaytirish)
interface qayta ochilib kengayishi mumkin:
interface User {
name: string;
}
interface User {
age: number;
}
//
✅
{ name: string; age: number }
type qayta e’lon qilib bo‘lmaydi:
type User = { name: string };
type User = { age: number }; //
❌
Error
2️⃣
Moslashuvchanlik
type murakkab kombinatsiyalarni ifodalay oladi:
type Status = "success" | "error";
type Point = [number, number];
interface asosan obyektlar uchun:
interface Point { x: number; y: number }
3️⃣
Birlashtirish
interface avtomatik birlashadi, type esa & orqali:
type A = { name: string } & { age: number };
📌
Qoidalar:
✅
interface – obyekt shakllari, API dizayni, kengaytirish kerak bo‘lsa.
✅
type – union, tuple, murakkab generiklar.
❗️
Type vs. Interface intervyuda sóraladigan mavzulardan biri hisoblanadi.
Telegram
|
YouTube
#JS
🔻
JavaScript Event Loop – oddiy tushuntirish
JavaScript single-threaded til. Ya’ni u bir vaqtning o‘zida bitta ishni bajaradi. Lekin u asynchronous kodni ham ishlata oladi. Qanday qilib? — Event Loop yordamida.
Ish jarayoni:
1️⃣
Call Stack – Barcha bajarilayotgan funksiyalar shu yerda saqlanadi.
2️⃣
Web APIs – setTimeout, HTTP so‘rovlar kabi ishlarni brauzer fon rejimida bajaradi.
3️⃣
Callback Queue – Tayyor bo‘lgan natijalar shu navbatga qo‘yiladi.
4️⃣
Event Loop – Call Stack bo‘sh bo‘lsa, Queue’dagi vazifalarni ichkariga olib kiradi.
Oddiy misol:
console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
// Natija: 1 → 3 → 2
Nega 2 oxirida chiqdi
❔
setTimeout Web APIs’ga ketdi, natija tayyor bo‘lgach Queue’ga tushdi, Stack bo‘shaganidan keyin Event
Loop uni olib kirdi.
Vizuallashtirilgan JavaScript Event Loop - yakuniy interaktiv qo'llanma
💡
💬
Xulosa: Event Loop — JavaScript’ga asinxron ishlash imkonini beradigan “dirijyor”.
Telegram
|
YouTube
📍
17-video
🧾
Signup sahifasini yasaymiz!
🎉
Endi “Welcome, Guest
👤
” davri tugadi!
😄
Bu darsda foydalanuvchi email va password orqali ro‘yxatdan o‘tadi.
🛠
Bu darsda:
✅
signup form yasaymiz
✅
useState orqali inputlarni boshqaramiz
✅
Firebase createUserWith…
#CSS
🔺
Nega Hech Kim hwb() Rang Funktsiyasidan Foydalanmayapti?
🤔
"Hech kim" deyish biroz mubolag‘a bo‘lsa-da, statistika hwb() funksiyasi juda kam ishlatilayotganini ko‘rsatmoqda.
🤔
hwb() — bu CSS’dagi ranglarni ifodalashning yangi usuli. U:
Rangning o‘zini belgilaydi
🎯
Necha foiz oq rang qo‘shilishini ko‘rsatadi
🤍
Necha foiz qora rang qo‘shilishini bildiradi
🖤
💡
Tezda: "Qaysi rang? Qancha oq? Qancha qora?" — shunchaki sezgi asosida aniqlash mumkin. Tushunishga qulay.
🔹
hsl() da siz rangni aniqlash uchun:
hsl(30, 100%, 70%)
foydalanasiz.
🔹
hwb() esa:
hwb(30 10% 20%)
ya’ni: “Ushbu rangga 10% oq, 20% qora qo‘sh.”
❓
Ammo muammo nimada?
* Ko‘pchilik uni bilmaydi ham
* hsl() va rgb() ga o‘rganib qolganmiz
* Ba’zi brauzerlar hali to‘liq qo‘llab-quvvatlamaydi
🔺
Xulosa
:
hwb() — oddiy, lekin kam tanilgan.
Ehtimol, yaqin kelajakda u yanada ommalashadi
🚀
Telegram
|
YouTube