👩‍💻 Ko’pchilik dasturlashda daromad qilishni xohlashini va frontendga qiziqish bildiradi.

Avvalambor nima uchun o’zi Frontendni o’rganish kerak?

1️⃣Frontend dasturchilari dizaynerlar bilan yaqindan hamkorlik qilishlari kerak, bu ularning ijodiy qobiliyatlarini rivojlantirish va noyob va estetik jihatdan yoqimli web-interfeyslarni ishlab chiqarish imkonini beradi.

2️⃣ Frontend dinamik va tez rivojlanayotgan sohadir. Yangi texnologiyalar va vositalar muntazam ravishda paydo bo'lib, ishlab chiquvchilarga eng so'nggi tendentsiyalardan xabardor bo'lish va o'z bilim va ko'nikmalarini doimiy ravishda kengaytirish imkonini beradi.
• Nima uchun men Frontendni tanlaganman va sizga ham shuni maslahat beraman.👇

3️⃣Frontend rivojlanishi analitik fikrlash va muammolarni hal qilish qobiliyatini rivojlantiradi. Dasturchilar doimo ijodiy fikrlashni va optimal yechimlarni topishni talab qiladigan muammolarga duch kelishadi.

4️⃣Aksariyat biznes va shaxsiy aloqalar onlayn rejimga o'tgan zamonaviy dunyoda frontend rivojlantirish mashhur va istiqbolli sohadir. Yaxshi karyera istiqbollari va yuqori maoshni ta'minlovchi malakali frontend dasturchilarga talab ortib bormoqda.

👨‍💻Turli hisob-kitoblarga ko'ra, dunyoda bir necha milliondan 10-15 milliongacha frontend dasturchilari bor.
💰 O’zbekistondagi frontend dasturchilarining o’rtacha oyligi
esa $350 dan $2.000+ gacha yetadi.

📌 Umuman olganda agar siz tezroq natijaga chiqishni xohlasangiz Frontendni o’rganganingiz ma’qul.

🌐 WebBrogrammist

👩‍💻 Vue.js-da toza va sifatli kod yozish uchun tavsiyalar:

🔴 Kod Yozish Standartlarini Amal Qilish: Kod yozishda yaxshi amaliyotlarni (best practices) o'rganing va ularga amal qiling. Misol uchun, eslint va prettier kabi vositalardan foydalaning.

🔴 Modularlikni Ta'minlash: Kodni komponentlarga bo'ling va har bir komponentning mas'uliyatini aniq belgilab qo'ying. Shu tarzda, kodni o'qish va qo'llash osonroq bo'ladi.

🔴 Vue.js Dokumentatsiyasini O'rganish: Vue.js rasmiy dokumentatsiyasini doimiy ravishda o'rganib boring. Unda yangi xususiyatlar va eng yaxshi amaliyotlar haqida ma'lumotlar mavjud.

🔴 Testlarni Yozish: Kodning sifatini ta'minlash uchun testlarni yozing. Vue.js uchun Jest yoki Vue Test Utils kabi vositalardan foydalaning.

🔴 Kodni Refaktoring Qilish: Kodni muntazam ravishda qayta ko'rib chiqing va refaktoring qiling. Bu kodning o'qilishi va qo'llanilishini yaxshilaydi.

🔴 Kodni Kodeks Tizimiga Yozish: Git kabi versiya nazorati tizimidan foydalaning va kodni boshqarish amaliyotlarini o'rganing.

🔴 Qayta Kod Yozish (Code Review): Hamkasblaringizning kodini ko'rib chiqing va o'z kodingizni ham boshqalarga ko'rsating. Bu sizga yangi tajribalar va takliflar olish imkonini beradi.

🔴 Yangi Texnologiyalarni Sinab Ko'rish: Vue.js ekosistemasidagi yangi kutubxonalar va plaginlarni sinab ko'ring. Masalan, Vue Router, Vuex, yoki Pinia.

🌐 WebBrogrammist

🕸 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