#tailwindCss #frontend

🖱️TailwindCSS tugmalari to'plami

Yoqqanini tanlaysiz Copy & Paste ishingiz hal!

https://devdojo.com/tailwindcss/buttons

@frontend

#update #frontend

🔄 Loyiha versiyasidagi #.#.# (2.4.1) formati nimani anglatishiga qiziqib ko'rganmisiz?

Web sayt versiyalarini belgilashda ko'p hollarda Semantic Versioning (SemVer) standarti qo'llaniladi.

SemVer standarti uch qismdan iborat versiya raqamlarini qo'llaydi:

MAJOR.MINOR.PATCH

1. MAJOR (katta yangilanishlar)
- Texnologiya stekini yangilash (masalan, yangi frameworkga o'tish).
- Dizayn yoki struktura qismida kattaroq o'zgarishlar.

2. MINOR (kichik yangilanishlar)
- Mavjud sahifalar yoki funksiyalarga yangi imkoniyatlar qo'shish.
- SEO optimizatsiyalari

3. PATCH (kichik tuzatishlar)
- Bug'larni tuzatish
- Xavfsizlik yangilanishlari

@frontend

#vue #frontend

🅰 Vue 3 loyihasiga xalqaro tillarni qo'shish (vue-i18n)

Bugungi kunda web-ilovalar global foydalanuvchilar uchun mo'ljallangan bo'lib, turli tillardagi qo'llab-quvvatlash juda muhim ahamiyatga ega. Vue 3 ilovangizga xalqaro tillarni qo'shish orqali siz kengroq auditoriyaga xizmat qilishingiz mumkin. Bu jarayonni "Vue I18n" yordamida oson amalga oshirish mumkin.

👀 Batafsil bu yerda o'qing

@frontend

#react #frontend

⚙️ React bilan PDF yaratish

Onedoc dasturchilari tomonidan ishlab chiqilgan React Print deb nomlangan UI to'plami. U React va TypeScript yordamida PDF-fayllarni yaratish uchun mo'ljallangan. Uning yordamida turli hujjatlar uchun shablonlarni tayyorlashingiz mumkin.

Getting started | GitHub

@frontend

#frontendWeekly

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

1. TailwindCSS tugmalari to'plami
2. Loyiha versiyasi
3. Vue 3 loyihasiga tillarni qo'shish (vue-i18n)
4. JavaScript cheatsheet
5. React bilan PDF yaratish

@frontend | Happy Coding

#vue #frontend

Vue'da "v-if" va "v-show" orasidagi farq 📍

v-if - o'zgaruvchining qiymati true bo'lsa, elementni DOM-da yaratadi, false bo'lsa, elementni DOM-dan o'chiradi va uni yashiradi.

v-show - o'zgaruvchining qiymati false bo'lsa, DOM elementini CSS display stilini none qilib o'zgartiradi. Buning natijasida, DOM elementi sahifada qoladi, ammo ko'rinmaydi.

🔗 LearngVue , Vuejs.org

P.S: Agar yuklanishi ko'p vaqt oladigan bo'lsa, v-if yaxshi tanlov. Chunki element DOMdan olib tashlanadi va faqat kerak bo'lganda qayta yaratiladi. v-if va v-show loyihalarda ishlatilishi xavfsizlik, yuklanish tezligi kabilarga qarab ishlatish tavsiya qilinadi!

@frontend | Happy Coding

#it #frontend

IT tushunchalarini o'zbek tilida o'rganish uchun NimaU nomli ochiq kodli loyiha qilishibdi.

🔗 https://www.nimau.uz

@frontend | Happy Coding

#JsLibrary #frontend

🩸 Barba.js

Barba.js sahifa o'tishlari va animatsiyalarni oson amalga oshirish uchun ishlatiladigan JavaScript kutubxonasi. U AJAX texnologiyasidan foydalangan holda sahifalar o'rtasida silliq o'tishlarni ta'minlaydi.

🔗 Saytga o'tish

@frontend | Happy Coding

#meme #frontend

Dunyodagi eng yaxshi CSS dasturchisi uchun kubok 😏

@frontend | Happy Coding

#meme #frontend

Frontend easy 😟

@frontend | Happy Coding

#vscode #frontend

🗓 VS Code uchun tasodifiy ma'lumotlar generatori

Foydalanish uchun extension'ni o'rnatib, buyruqlar palitrasini oching (Cmd+Shift+P / Ctrl+Shift+P) va “random” deb yozing, bu sizga mavjud ma’lumotlar generatorlarini ko’rsatadi.

🔗 Plaginni o'rnatish

@frontend | Happy Coding

#html #frontend

JavaScript-ni talab qilmaydigan 5 ta kuchli HTML atributlari

1️⃣ Spellcheck - spellcheck attributi matnni imlo qoidalari bo'yicha tekshirish vazifasini bajaradi.

2️⃣ Download - download yuklab olish atributi foydalanuvchilarga havolani bosganida to'g'ridan-to'g'ri resurslarni yuklab olish imkonini beradi.

3️⃣ Video eskizi (Poster) - poster atributi bu video ijro etilmagan vaqtda foydalanuvchiga ko'rsatiladigan rasmni(poster) belgilaydi. Bu esa foydalanuvchi tajribasini yaxshilayi.

4️⃣ Translate - translate atributi, veb-sahifa boshqa tilga tarjima qilinganda element tarkibini tarjima qilish kerakligini belgilashingiz mumkin. Uni "no" ga o'zgartirish orqali brend nomlari yoki muayyan shartlar uchun foydali bo'lgan asl tarkibni saqlab qoladi.

5️⃣ Autocomplete - autocomplete avtomatik to‘ldirish atributi kiritish maydonlari uchun avtomatik to‘ldirish funksiyasini yoqadi yoki o‘chiradi, bu esa brauzer avval kiritilgan qiymatlarni taklif qilishi kerakligi ustidan nazoratni ta’minlaydi.

@frontend | Happy Coding

#intervyuSavol #frontend

🎙 Kecha bir intervyu bo'ldi, unda ko'pchiligimiz eshitgan, lekin uncha aniq farqiga bormay ikkita terminni ham bir narsa deb o'ylaydigan savol bo'ldi, shuni sizlar bilan ulashmoqchiman.

Savol: "Responsive" va "adaptive" verstka tushunchalari bor, ular orasidagi asosiy farqni tushuntirib bering.

Javob: responsive verstka har qanday o'lchamdagi ekranlarga moslashuvchan bo'lib, ekran o'lchamlarining uzluksiz diapazonini qamrab oladi, adaptive verstka esa ma'lum ekran o'lchamlari uchun maxsus dizaynlarni taqdim etadi.

Batafsil:
1. Responsive Verstka:
— Bu turdagi verstka barcha ekran o'lchamlariga moslashadi. CSS media queries yordamida turli ekran o'lchamlari uchun moslashuvchan layoutlar yaratiladi.
— Masalan, biror elementning kengligi ekran o'lchamiga ko'ra foizda belgilanishi mumkin, shunda u har qanday ekran kengligida to'g'ri ko'rinishda bo'ladi.

2. Adaptive Verstka:
— Bu turdagi verstka ma'lum ekran o'lchamlari uchun maxsus dizaynlarni ishlatadi. Bu yerda ham media queries ishlatiladi, lekin har bir ekran o'lchami uchun alohida layoutlar tayyorlanadi.
— Masalan, 768px, 1024px va 1440px kabi aniq o'lchamlar uchun alohida dizaynlar tayyorlanishi mumkin, va bu o'lchamlarga mos keladigan qurilmalar uchun alohida ko'rinishlar yaratiladi.

@frontend | Happy Coding

#tavsiya #frontend

Ko'pchiligingiz tanigan Akhror Soliyev (Akhror Web) Frontend yo'nalishida yangi loyiha, video darslar chiqarmoqda.

Video darslar haqidagi yangiliklar, Frontend dasturlashga oid foydali kontentlar uchun telegram kanallarini tavsiya qilamiz.

📱 Frontend darslar

📱 Kanal: @akhror_web

#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 belgilab chiqarish imkoniyatini beradi.

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

@frontend | Happy Coding