#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

#css #frontend

CSS , Tailwind yordamida yaratilgan ochiq manbali UI elementlari.

🔗 https://uiverse.io/elements

@frontend | Happy Coding

#api #frontend

Freepublicapis.com

Bu turli hil ma’lumotlar to’plamlarini taqdim etuvchi bepul API-lar bazasi. Bu yerda ob-havo, iqtisod, geolokatsiya, audio va video kontentlar singari turli sohalarga oid API-larni topishingiz mumkin.

🔗 https://www.freepublicapis.com

@frontend | Happy Coding

#vscode #frontend

VS Code uchun klavishlar kombinatsiyasi bu ish jarayonini tezlashtirishga yordam beradi.

⌨️ MacOs | Windows

@frontend | Happy Coding

🤨 Gooo

@frontend | Happy Coding

#uitools #react #frontend

👩‍💻 Material UI 6

Material UI 6-versiyasi chiqibdi! Bu versiyada mavzularni yaxshilash, rang sxemalarini boshqarish, konteyner so'rovlarni qo'llab-quvvatlash va React 19 bilan moslashish kabi o'zgarishlar mavjud. CSS o'zgaruvchilaridan foydalanish kuchaytirilib, yangi sx prop qo'llab-quvvatlanadi, shuningdek, saytning ishlash ko'rsatkichlari optimallashtirilgan.

🔗 Batafsil ma'lumot olish

@frontend

#uitools #frontend

50+ bepul chiroyli interaktiv react/nextjs komponentlari

Platforma sizga foydalanishga tayyor, moslashuvchan va professional ko'rinishdagi UI komponentlarini taqdim etadi.

🔗 https://www.ui-layout.com

@frontend | Happy Coding

#hosting #frontend

⚙️ Loyihalaringizni joylash uchun eng yaxshi bepul hosting xizmatlari

1. GitHub pages - Faqat statik sahifalar uchun; bepul .github.io domeni; asosan hujjatlar va shaxsiy bloglar uchun mos.

2. Netlify - Avtomatik deploy va HTTPS; serverless backend imkoniyatlari bilan; keng integratsiya imkoniyatlari.

3. Render - Docker konteynerlari va kengaytirilgan backend xizmatlari; ko'p tarmoqli deploy; turli xil ilovalar uchun mos.

4. Surge - Faqat statik sahifalar; tezkor qurilish va joylashtirish; custom URL imkoniyati.

5. Vercel - Next.js ilovalari uchun maxsus optimallashtirilgan; Edge Functions yordamida yuqori tezlikda ma'lumotlarni qayta ishlash; trafik oshganda avtomatik ravishda resurslarni kengaytirish imkoniyati.

@frontend | Happy Coding

#docs #frontend

DevDocs - dasturlash bo‘yicha bir nechta hujjatlarni bir joyda jamlab, tez va qulay o‘qishga imkon beradigan bepul va ochiq manbali platforma.

🔗 Havola: https://devdocs.io

@frontend | Happy Coding

#tools #js #frontend

es-toolkit — bu JavaScript uchun yengil va yuqori samarali utilit kutubxona. U lodash ga o‘xshash funksiyalarni taqdim etadi, lekin 97% kichikroq hajmga ega va 2-3 marta tezroq ishlaydi. es-toolkit zamonaviy frontend ilovalarda ma'lumotlar bilan ishlashni soddalashtiradi.

🔗 Batafsil: Veb sayt | GitHub

@frontend | Happy Coding

#vscode #frontend

👩‍💻 VS Code'ni professional darajada sozlash

Video: https://youtu.be/kCwZl3wo9tY?si=nfAUxoTr7CUqLTum

@frontend | Happy Coding

Albatta hazil 🤣

@frontend | Happy Coding