#vue #frontend

💚 v-for ichida destrukturizatsiya qilish

🟡 ES6 destrukturizatsiyasidan foydalanmasdan v-for'dan foydalanish

<div v-for="car in cars" :key="car.id">
  <h2>{{ car.make }} {{ car.model }}</h2>
</div>

cars[] avtomobillar ro'yxati va har bir avtomobil quyidagi tuzilishga ega:

interface Car {
  make: string; // Avtomobil markasi
  model: string; // Modeli
  id: string; // id
}

🟡 ES6 destrukturizatsiyasidan foydalanib, kodni toza va tushunarli qilish mumkin:

<div v-for="{id, make, model} in cars" :key="id">
  <h2>{{ make }} {{ model }}</h2>
</div>

@frontend

#charts #ui

📈 Recharts orqali yaratilgan shadcn/ui chartlarini loyihangizda ishlatishingiz mumkin. Chiroyli va moslashuvchan dizayn, bepul Open Source.

https://ui.shadcn.com/charts

@frontend

#ai #gemini

📱 Gemini o'zbek tilida ham yaxshi muloqot qila olmoqda , muammoga duch kelsangiz yoki biror narsa haqida ma'lumotga ega bo'lmoqchi/o'rganmoqchi bo'lsangiz yaxshi ai assistant bo'la oladi.

Gemini AI - Google Search asosida ma'lumotlarni qayta ishlaydi, shuning uchun bu sizning vaqtingizni anchagina tejaydi.

https://gemini.google.com/app

@frontend

#miniProject #frontend

📱 HTML, CSS va JavaScriptdan foydalanib yaratilgan mini-loyihalar

HTML, CSS va JavaScriptdan foydalanib yaratilgan turli xil mini-loyihalari to'plangan. Ushbu loyihalar yangi boshlovchilar uchun o'zlarini sinab ko'rish va asosiy tushunchalarni o'rganish uchun ajoyib manbadir.

Har bir loyiha uchun HTML, CSS va JavaScript kodlari, shuningdek, loyihaning jonli demosi mavjud.

GitHub sahifaga havola

@frontend

#javascript #library #frontend

🦶 Driver.js

Bu JavaScript kutubxonasi foydalanuvchilarni interfeys bilan tanishtirish, yo'l-yo'riq berish imkoniyatini beradi. U kichik hajmli (taxminan 5kb), moslashuvchan , har qanday elementni ta'kidlab chiqarish imkoniyatini beradi.

doc : https://driverjs.com/docs/installation

@frontend

#js #library #frontend

🔔 Top JavaScript bildirishnoma kutubxonalari

— SweetAlert
— React-Toastify
— Toastr
— Essential JS 2
— chakra-ui/alert
— Vue Toastification
— Sonner
— Awesome Notifications

@frontend

#portfolio #frontend

Frontend dasturchining portfolio saytida
"Nimalar bo'lishi kerak ?"

🔘Shaxsiy ma'lumotlar:

- Qisqa tarjimai hol
- Ta'lim va sohadagi tajribangiz
- Shaxsiy fotosurat yoki avatar qo'shing

🔘Ko'nikmalaringiz:

- Frontend dasturlashda foydalanadigan barcha texnologiyalar ro'yxatini kiriting.
- Har bir texnologiya uchun sizning tajriba darajangizni ko'rsating.
- Qo'shimcha ko'nikmalarni, masalan, dizayn yoki UX/UI

🔘Loyihalaringiz:

- Eng yaxshi ishlaringizni joylang.
- Har bir loyiha uchun qisqa tavsif, ishlatilgan texnologiyalar va loyihada sizning rolingiz.
- Loyihalarni filtrlash yoki qidirish imkoniyatini.

🔘Aloqa ma'lumotlari:

- Siz bilan bog'lanishga qulay bo'lgan elektron pochta/telegramga havola, manzilingiz va telefon raqamingiz.
- Ijtimoiy media profillaringizga havolalarni kiriting.

Saytingiz vizual jihatdan qiziqarli va foydalanish uchun oson bo'lishi kerak. Mobil qurilmalar uchun moslashuvchan dizayndan foydalaning.

Portfoliongizni muntazam yangilab boring. Eng yaxshi loyihangizni namoyish qilish uchun yuqori sifatli tasvirlar ishlating.

Ba'zi namunalar:
1. https://sarkar.fr
2. https://henryheffernan.com

@frontend

#frontendWeekly

🗓 @Frontend telegram kanalida 📆 hafta davomida joylangan postlar ro'yxati:

1. JavaScript va Leetcode'da masala ishlash
2. Maz-UI — Vue.js uchun yuqori sifatli komponentlar kutubxonasi.
3. v-for ichida destrukturizatsiya qilish
4. #100DaysOfFrontend | 4 - kun
5. shadcn/ui chartlari
6. Gemini AI
7. #100DaysOfFrontend | 5 - kun
8. HTML, CSS va JavaScriptdan foydalanib yaratilgan mini-loyihalar
9. Driver.js - interfeys bilan tanishtirish
10. #100DaysOfFrontend | 6 - kun
11. Top JavaScript bildirishnoma kutubxonalari
12. #100DaysOfFrontend | 7 - kun
13. Frontend dasturchining portfolio saytida "Nimalar bo'lishi kerak ?"
14. Vue.js cheatsheet
15. #100DaysOfFrontend | 8 - kun

@frontend

#css #frontend

🎲 CSSda Divni Markazlash

Html struktura:

<div class="container">
    <div class="centered-div">Markazlangan kontent</div>
</div>

1️⃣ Flexbox yordamida markazlash:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

2️⃣ Grid yordamida markazlash:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

3️⃣ Absolyut yordamida markazlash:

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4️⃣ Margin Auto yordamida markazlash:

// Gorizontal markazlash uchun, margin: auto
.centered-div {
    width: 50%;
    margin: 0 auto;
}

5️⃣ Inline-block bilan markazlash:

// Inline yoki inline-block elementlari uchun
.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

@frontend