Frontend

#book #frontend

📒 PROFESSIONAL JAVASCRIPT® FOR WEB DEVELOPERS

Ushbu kitob tajribali dasturchilar va yangi boshlovchilar uchun mo'ljallangan bo'lib, JavaScript'ning asosiy tushunchalari, sinflaridan tortib funksiyalargacha, asinxron dasturlash, veb-APIlargacha bo'lgan mavzularni qamrab oladi.

@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

🤨 Gooo

@frontend | Happy Coding

😏

@frontend | Happy Coding

#vscode #frontend

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

⌨️ MacOs | Windows

@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

#css #frontend

CSS , Tailwind yordamida yaratilgan ochiq manbali UI elementlari.

🔗 https://uiverse.io/elements

@frontend | Happy Coding

#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

#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

#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

#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

#Dasturchi #SaytTezligi #WebDevelopment #KodOptimallashtirish

Saytning tez ishlashi uchun quyidagi 10 ta qisqacha ko'rsatma yordam beradi:

1. Rasmni siqish: Rasm o'lchamlarini kichikroq qilish va sifatni saqlash uchun rasmni siqish vositalaridan foydalaning.

2. Keshni optimallashtirish: Brauzer va server keshini to'g'ri sozlash saytning tezligini oshiradi.

3. Minifikatsiya qilish: JavaScript va CSS fayllarini minifikatsiya qilish orqali kodning hajmini kamaytiring.

4. Tinglovchi kodlarni yuborish: Saytning asosiy qismlarini dastlabki yuklashda asosan kerakli kodlarni yuboring.

5. Serverni optimallashtirish: Serveringizni yaxshi konfiguratsiya qiling va resurslarni optimallashtiring. 🚀

6. Content Delivery Network (CDN) foydalanish: Statik fayllarni CDN orqali tarqatish saytning yuklash tezligini oshiradi.

7. Asinxron yuklash: JavaScript fayllarini asinxron tarzda yuklash orqali sahifa yuklanish vaqtini kamaytiring.

8. Agar kerak bo'lsa, HTTP/2 foydalanish: HTTP/2 protokolini qo'llash saytning yuklash tezligini yaxshilaydi.

9. Kichik kod segmentlarini ishlatish: Kodni modulga ajrating va kerakli qismlarini ishlatishga harakat qiling.

10. Sahifa optimallashtirish: Sahifaning HTML, CSS va JavaScript tarkibini yaxshilash uchun optimallashtiring.

uzbekdevs.uz / @uzbekdevs

#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

#meme #frontend

Frontend easy 😟

@frontend | Happy Coding

#meme #frontend

Dunyodagi eng yaxshi CSS dasturchisi uchun kubok 😏

@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

#it #frontend

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

🔗 https://www.nimau.uz

@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