#html #css #chrome

🔍 Chrome 125 beta haqida

Google Chrome 125 beta versiyasi hozir beta sifatida mavjud. Bu versiya bir nechta yangi CSS xususiyatlari va o'zgarishlarni o'z ichiga oladi.

#️⃣CSS Anchor Positioning: Bu xususiyat JavaScript ishlatmasdan, sahifadagi boshqa elementlarga joylashtirilgan elementni bog'lashga imkon beradi.
#️⃣CSS stepped value functions—round(), mod(), and rem()
#️⃣ HTML Keyboard-focusable scroll containers
#️⃣ Web APIs
#️⃣ Chrome Apps

Bu va boshqa xususiyatlar haqida batafsil ma'lumot: https://developer.chrome.com/blog/chrome-125-beta

@frontend

👆 Vue yoki React bo'yicha real loyihalarda tajribaga ega Strong Juniorlar uchun vakansiya.

@frontend | @frontendVacancy

Ayrim dasturchi va boshliqlar o'rtasida bo'lib turadigan holat🔫

@frontend

#css

↔️ CSS-da “specificity”

Bir html elementiga bir nechta stil berilgan bo'lsa(cascading), brauzerlar tomonidan elementga eng mos keladigan CSS xususiyatlarni aniqlash uchun ishlatiladigan algoritmdir.

Css-da prioritet:

inline styles > id (#) > class (.) va attribute ([]) > tag (<>)

@frontend

#git

⚙️ Git haqida o'zbekcha kitob.

Git-ning rasmiy saytida kitob bo'limida git haqida batafsil ma'lumot beruvchi , o'rganish uchun qo'llanma mavjud va buni o'zbek tilida tarjimasi bor.

Qo'llanmaga o'tish: https://git-scm.com/book/uz/v2

Qo'llanmaning 10/3 qismigina tarjima qilingan :(

Git haqida foydali manbalar:
- GIT CHEAT SHEET
- Learn Git
- Using Git

@frontend

#react

⚙️ React 19 Beta

React 19 yangilanishlari haqida ma'lum qilindi:

#️⃣ React Compiler: Yangi kompilyator React kodini oddiy JavaScript kodiga aylantiradi, bu esa ishlash tezligini ikki baravarga oshirishi mumkin. Hozirgi paytda, Instagram ushbu texnologiyadan foydalanmoqda va bu texnologiya Reactning kelgusi versiyalarida chiqariladi.

#️⃣ Server Components: Ko'p yillik rivojlanishdan so'ng, React server komponentlarini taqdim etdi, ulardan endi Next.js bilan foydalanish mumkin.

#️⃣ Actions: DOM elementlari bilan oʻzaro munosabatni oʻzgartirish uchun amallar oʻrnatiladi.

#️⃣ Document Metadata: dasturchilarga kamroq kod bilan ko'proq ish bajarishga imkon beradi.

#️⃣ Asset Loading: bu, aktivlarni fon rejimida yuklashga imkon beradi, bu ham ilovaning yuklanish vaqtini ham, foydalanuvchi tajribasini ham yaxshilaydi.

#️⃣ Web Components: React kodi endi bizga veb komponentlarni kiritishga imkon beradi.

#️⃣ Yangi React Hooks: Kodlash tajribasini oshirish uchun yangi imkoniyatlar.

use()
useFormStatus()
useFormState()
useOptimistic()

React 19 hali ham ishlab chiqish jarayonida.

🔗 React 19 beta haqida batafsil: https://react.dev/blog/2024/04/25/react-19

@frontend

#vue

💚 Vue 3 ilovasiga Google Maps’ni integratsiya qilish

1. Google Maps API kalitini olish
2. Vue Google Maps paketini o’rnatish
3. Vue Google Maps komponentini ishlatish

🔗 Batafsil maqolada o'qing

@frontend

#github #git

⚙️ Githubga loyihani yuklash:

1. Github o'zi nima?
2. Githubda ro'yxatdan o'tish
3. Kompyuterdan Gitni va unga bog'langan login parollarni o'chirib tashlash
4. Kompyuterga Gitni o'rnatish va undagi global sozlamalarni yangi profilga moslashtirish
5. Git asoslari
6. Git asoslarini demo loyiha asosida ishlatish

@frontend

#responsive

📱 Mobile FIRST

Saytingizni moslashuvchan (responsive) testlar uchun eng yaxshi chrome extension.

U 52 ta qurilma taklif etadi. Bu qurilmalar orasida Android & Google smartfonlari, Apple smartfonlari, planshetlar va maxsus qurilmalar kabi 16 ta model bor.

📱 O'rnatish

@frontend

#css

🎲 Saytingizni yanada jozibali qilish uchun bepul vositalar

1. Box-shadow examples
2. Checkboxes examples
3. Buttons examples
4. CSS shapes examples, click to copy

Frontendchilarga yuborib qo'yamiz 🚀

@frontend

#ui

👩‍💻 React uchun Headless UI v2.0

Headless UI kutubxonasining yangi versiyasi - v2.0 for React chiqdi!

Yangi qo'shilgan funksiyalar:

#️⃣ Built-in anchor positioning: Floating UI kutubxonasi Headless UI kutubxonasiga integratsiya qilindi.

#️⃣ New checkbox component: Yangi headless Checkbox komponenti qo’shildi.

#️⃣ HTML form components: HTML form komponentlari qo’shildi.

#️⃣ Improved hover, focus and active state detection: Hover, focus va faol holatni aniqlash takomillashtirildi.

#️⃣ Combobox list virtualization: Combobox ro’yxati virtualizatsiyasi qo’shildi.

#️⃣ Yangi veb-sayt va takomillashtirilgan hujjatlar

🖇️Yangilanish haqida batafsil

@frontend

#vscode

Plagin "px to rem"

Bu plagin px ni rem ga va aksincha aylantirish imkonini beradi.

Alt+Z Px - rem, rem - px.

🗓 Plagin: havola

@frontend

🌟 Iltimos, BOOST orqali kanalimizni qo'llab quvvatlang!

https://t.iss.one/boost/frontend 💧

Error'ni zo'ri 😭

@frontend

#react

👩‍💻 react-pdf - Reactda pdf fayllarni yaratish

React-PDF kutubxonasi yordamida siz o’z loyihangizda PDF hujjatlarni yaratish, ko’rish va saqlash uchun komponentlarni ishlatishingiz mumkin.

React-PDF kutubxonasi quyidagi imkoniyatlarni beradi:

🔴PDF hujjatlarni yaratish uchun deklarativ API.
🔴Server va mijoz tomonida PDF hujjatlarni yaratish.
🔴CSS xususiyatlari va Flexbox layout orqali ularni stil berish uchun API.
🔴Hujjatni saqlash, oqish va DOM-da ko’rsatish.

npm install @react-pdf/renderer --save

⚙️ GitHub | 📄 Doc

@frontend

#javascript

ApexCharts.js - dinamik grafiklar yaratish 📊

ApexCharts.js – bu JavaScript kutubxonasi bo‘lib, u orqali interaktiv va chiroyli grafiklar yaratishingiz mumkin. U kuchli va foydalanishga juda oson!

Batafsil ma'lumot va qo‘llanma: apexcharts.com

@frontend

#vscode

🗓 2024 yilda mahsuldorligingizni oshirish uchun VS Code extension'lari ⚡️

Quyidagi havolalar orqali kirib tanishishingiz/o'rnatishingiz mumkin:

— Better Comments - koddagi sharhlarni barcha uchun tushunarli qilib yozishga yordam beradi.
— Bookmarks - kodlarni belgilash, xatcho'p yaratib beradi.
— Code Spell Checker - kod bazasida imlo xatolarini topish va tuzatish uchun asosiy imlo tekshirgich
— CodeSnap - kodning skrinshotlarini olish uchun.
— CodiumAI - sun'iy intellektga asoslangan bepul kodlar to'plami.
— Error Lens - nosozliklarni tuzatish va xatolarni oldini olish uchun ajoyib vosita.
— Git History - versiya boshqaruvi, Git tarixi, qidiruv ...
— GitLens - kuchli Git vositasi bo'lib, u juda ko'p xususiyatlarni bitta kengaytmaga jamlagan. Jamoa bilan ishlashda juda foydali.
— GitHub Copilot - ChatGPT bilan integratsiyalangan kuchli AI yordamchi ($10/oyiga)
— Icon Themes - vizuallikni yaxshilash uchun: Material Theme Icons, vscode-icons, file-icons.
— Indent Rainbow - chiziqlar orqali kod o'qilishini yaxshilaydi.
— Live Share - kodni real vaqtda boshqalar bilan hamkorlikda tahrirlash va disk raskadrovka qilish.
— Multiple Cursor Case Preserve - kodni tez tahrirlashga yordam beradi.
— Path Intellisense - dinamik ravishda fayl yo'llari va katalog nomlarini taklif qiladigan aqlli avtomatik to'ldirishga ega.
— Prettier - kodni formatlash.
— TODO Highlight - kodingizdagi TODO, FIXME va boshqa izohlarni ajratib ko'rsatadi.

Tanishlarga ham yuborib qo'ying✅

@frontend