🔥 Dasturchilikdan keyin nima bo‘ladi?
Agar siz yillar davomida kod yozib, code review, sprint, feature, production bug va Slack xabarlari dunyosida yashagan bo‘lsangiz, bu post aynan siz uchun.

🧠 Sizda endi nafaqat texnik bilim, balki real jamoaviy tajriba ham bor. Endi "Keyingi bosqich nima?" degan savol tug‘iladi.
Shu savolga javob izlayotganlar ko‘p. Va ha, variantlar bor!

🎯 Mana siz uchun 10 ta yangi yo‘l:

1️⃣ Developer Relations (DevRel) — Kod yozish + hamjamiyat bilan ishlash
2️⃣ Engineering Manager — Dasturchilar jamoasini boshqarish
3️⃣ Technical Architect — Loyihalarning texnik yo‘nalishini belgilash
4️⃣ Product Manager — Texnika va foydalanuvchi ehtiyojlari orasida ko‘prik
5️⃣ DevOps yoki Platform Engineer — Infratuzilmani barqaror ushlab turish
6️⃣ Solutions Architect / Consultant — Yechimlarni ishlab chiqish, mijozlarga yordam
7️⃣ Technical Program Manager (TPM) — Murakkab texnik loyihalarni boshqarish
8️⃣ DevRel Manager yoki Director — Hamjamiyat strategiyasini shakllantirish
9️⃣ Startup Founder — O‘z mahsulotingizni yaratish!
1️⃣0️⃣ Director of Engineering / CTO — Kompaniyaning texnik boshqaruvi.

✍️ Xulosa:
Dasturchilik — bu sohaning boshlanishi. Sizdagi tajriba esa ko‘plab yo‘llarni ochadi.
Agar yonib ishlashdan charchagan bo‘lsangiz, balki keyingi bosqichga o‘tish vaqti kelgandir?

Telegram | YouTube

🧠 Senior dasturchilar kabi fikrlashga yordam beruvchi 5 muhim atama
Senior bo‘lish – bu faqat ko‘proq texnologiyalarni bilish emas. Ular loyihalar qanday muvaffaqiyatsizlikka uchrashini ko‘p bora ko‘rgan va bunga nom ham qo‘yishgan. Quyidagi atamalar shunday tajribadan tug‘ilgan.

🔫 1. Footgun – O‘zingga “otish” qulay bo‘lgan xato

Tushuntirish: Juda oson noto‘g‘ri ishlatilishi mumkin bo‘lgan funksiyalar.

Misol: Buyruq qatori (CLI) odatda xavfli bo‘lib, --safe degan xavfsiz flagsiz ishlab ketadi va asosiy ma’lumotlarni o‘chirib yuborishi mumkin.

🛡 Saboq: Har doim xavfsiz default sozlamalar kerak.

💀 2. Death by a Thousand Cuts – Ming kichik xato bir katta muammo bo‘ladi

Tushuntirish: Har bir kichik kamchilik vaqt o‘tib katta muammoga aylanadi.

Misol: Testlar har safar 1 soniya ortiqcha vaqt oladi, deploy 30 soniyaga cho‘ziladi...

⏳ Saboq: Kichik sekinliklar vaqt va ishchi ruhiyatini buzadi.

🧠 3. Bikeshedding – Muhim emas narsalarga vaqt yo‘qotish

Tushuntirish: Asosiy muammo o‘rniga mayda-chuyda narsalarga e’tibor berish.

Misol: 40 daqiqa tugma rangi haqida gaplashib, muhim data modeli muhokama qilinmay qoladi.

🚫 Saboq: Asosiy masalalarni rad etmaylik.

🪵 4. God Object – Hamma narsani biladigan bitta gigant obyekt

Tushuntirish: Bir Class ichida barcha logika to‘plangan, mustaqil emas.

Misol: UserManager login, billing, bildirishnomalar, tahlil – barchasini qiladi.

🧩 Saboq: Bunday obyektlar test qilishni va o‘zgartirishni qiyinlashtiradi.

💦 5. Leaky Abstraction – Tizim ichki ishlari “tashqariga” chiqib ketadi

Tushuntirish: Abstraksiyalar ichki murakkablikni yashira olmaydi.

Misol: ORM ma’lumotlarni olishda SQL xatolarini “sirtga” chiqaradi.

🎭 Saboq: Yaxshi abstraktsiya murakkablikni yashiradi.

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 createUserWithEmailAndPassword() bilan yangi user yaratamiz
✅ Muvaffaqiyatli ro‘yxatdan o‘tganidan so‘ng navigatsiya (redirect) qilamiz

🎯 Endi har bir foydalanuvchi o‘z profili bilan kiradi va loyihamiz yanada real ilovaga o‘xshay boshlaydi!

017. Signup Page

Keling, foydalanuvchilarni kutib olishga tayyorlanamiz! 🤝

Telegram | YouTube

#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

#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

#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

📍 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

#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 (
    <UserContext.Provider value={user}>
      {/* ... */}
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Hello {user.name}</div>;
}

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

⚡️“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

#Part2

5️⃣ useRef

React’da DOM’ni to‘g‘ridan-to‘g‘ri o‘zgartirmaslik kerak.
Lekin zarur bo‘lsa (masalan: canvas, chart kutubxonalari), useRef xavfsiz yo‘ldir.

function ExampleChart({ data }) {
  const canvasRef = useRef();

  useEffect(() => {
    const ctx = canvasRef.current;
    if (!ctx) return;

    const chart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: data.map((row) => row.year),
        datasets: [{ label: "Likes", data: data.map((r) => r.count) }],
      },
    });

    return () => chart.destroy();
  }, []);

  return <canvas ref={canvasRef} />;
}

6️⃣ useMemo / useCallback

Yangi React Compiler tufayli ular keraksiz bo‘lishi mumkin, lekin hozircha foydali:
🤍 useMemo — qimmat hisob-kitoblarni qayta ishlatmaslik uchun.
🤍 useCallback — funksiyalarni qayta yaratmaslik uchun.

const total = useMemo(() => computeTotal(items), [items]);

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

7️⃣ useLayoutEffect

Kam ishlatiladi, lekin foydali.
U UI chizilishidan oldin ishlaydi va layout siljishini yoki UI miltillashini oldini oladi.

useLayoutEffect(() => {
  const height = ref.current.offsetHeight;
  setHeight(height);
}, []);

8️⃣ useSWR / useQuery

Data fetch qilish uchun standart bo‘lib boryapti.
🤍SWR — sodda va ko‘p hollarda yetarli.
🤍 TanStack Query — kuchliroq va murakkabroq.

const fetcher = (url) => fetch(url).then((res) => res.json());

const { data, error, isLoading } = useSWR("/api/user", fetcher);

Telegram | YouTube

#Zustand

⚡️ Zustand: Eng Sodda State Management Kutubxonasi 🐻

Agar Redux sizga juda murakkab tuyulsa, yoki Context bilan ishlashdan charchagan bo‘lsangiz — Zustand sizning do‘stingiz. 🐻
Zustand — bu:
✔️ Minimal (faqat 1kb)
✔️ Qulay API
✔️ Hech qanday boilerplate yo‘q
✔️ React ichida yoki tashqarida ishlaydi

❗️ Qanday ishlaydi?
O‘rnatish:

npm install zustand

❗️ State yaratish

import { create } from "zustand";

// Store yaratamiz
const useCounterStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

❗️ Komponent ichida ishlatish

function Counter() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>➕</button>
      <button onClick={decrease}>➖</button>
    </div>
  );
}

Nega Zustand❔

🤍Oddiy: Redux’dagi kabi “action”, “reducer”, “boilerplate” yo‘q.
🤍Global State: Prop drilling yo‘qoladi.
🤍Performans: Faqat kerakli komponent qayta render qilinadi.
🤍React tashqarisida ham ishlaydi (masalan, vanilla JS bilan).

🔥 Xulosa: Agar siz kichikdan tortib katta loyihalargacha tezkor va minimal state management istasangiz — Zustand sizga mos. 🐻💡

Telegram | YouTube

#React

👩‍💻 React Router DOM – SPA’da Navigatsiya Qutqaruvchisi.

React ilovalaringizni bir nechta sahifali ko‘rsatish uchun qayta yuklamasdan ishlashni xohlaysizmi? 👩‍💻
react-router-dom – aynan shuning uchun bor.
🔺 Asosiy tushunchalar:

• Router – butun ilovani o‘raydi.
• Route – path → element mosligi.
• Link/NavLink – sahifalar orasida o‘tish (reloadsiz).
• useNavigate – dasturiy navigatsiya.
• useParams / useSearchParams – URL parametrlar va query string.
• Outlet – nested yo‘llar uchun joy.

⚡️ Oddiy misol:

<BrowserRouter>
  <nav>
    <Link to="/">Home</Link> | <Link to="/about">About</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<h1>404</h1>} />
  </Routes>
</BrowserRouter>

📌 Kuchli imkoniyatlar:

• Nested routes → Layout + <Outlet>
• Dynamic params → /posts/:id → useParams()
• useNavigate → tugmadan boshqa sahifaga o‘tish
• useSearchParams → qidiruv, filter, pagination
• Protected routes → login bo‘lmasa redirect

✅ Amaliy maslahatlar

404 uchun path="*" qo‘shing.
URL’ni “haqiqat manbai” sifatida ishlating.
NavLink yordamida aktiv havolani belgilash mumkin.

💡 Xulosa:
react-router-dom – React ilovalaringizni ko‘p sahifali va tartibli qilish uchun eng muhim kutubxona.

Telegram | YouTube