#ui #frontend

🤩 Loyihalaringizni jonlantiruvchi trenddagi animatsion UI kutubxonalar

1. MagicUI
2. Aceternity UI
3. UI Layout
4. Cult UI
5. Eldora UI
6. Syntax UI
7. Hover.Dev
8. Svelte Animation Components
9. LunarUI
10. Animata
11. InspiraUI

*Do'stlaringizga ham ulashing!

@frontend | Happy Coding

#css #frontend

👩‍💻 CSS-da yangilangan media-query sintaksisi — "Range Syntax"

Range Syntax orqali media queries’ga kiritiladigan qiymatlarning diapazonini an’anaviy min-width va max-width qiymatlaridan ko‘ra qisqaroq va osonroq ifodalash imkoniyatini beradi.

min-width va max-width ➡️ <, >, <=, >=

Brauzerlar qo‘llab-quvvatlashi 91.9%

Misollar:

@media (width >= 80rem) {
    /* kenglik kamida 80rem bo'lganda */
}

/* Oraliq belgilash */
@media (80rem <= width <= 120rem) {
    /* kenglik 80rem va 120rem oralig'ida bo'lganda */
}

@frontend | Happy Coding

#plugin #css #frontend

🗓 CSS Peek

HTML kodingizda class yoki id'larni tahlil qilib, ularning CSS kodini tezda topishni xohlaysizmi? CSS Peek yordamida bir necha soniyada to'g'ridan-to'g'ri CSS'ga o'tishingiz mumkin.

🔗 CSS Peek

@frontend | Happy Coding

#chart #react #frontend

📊 Recharts — React uchun grafiklar kutubxonasi!

Imkoniyatlari:
- Animatsiyali grafiklar
- Responsive, Har xil ekran o‘lchamlariga moslashuvchan
- Interaktiv elementlar (masalan, tooltiplar)
- SVG asosida yengil va tezkor

GitHub | Veb sayt

@frontend | Happy Coding

#frontend

👩‍💻 Ushbu havola orqali barcha asosiy frontend texnologiyalar va ularni o'rganish bo'yicha zarur ko'nikmalarni interaktiv tarzda o'rganishingiz mumkin:

✔️ Texnologiyalar xaritasi
✔️ Asosiy tushunchalar
✔️ O'rganish uchun tavsiyalar

Havola: web-skills

@frontend | Happy Coding

#css #frontend

Faqat CSS orqali magnit havola effekti 😁

li:has(a:is(:hover, :focus-visible)) {anchor-name: --a;}
ul::before {
  left: anchor(--a left);
  width: anchor-size(--a width);
}

CSS anchor position funksiyasidan foydalanib, indikator uchun hoverda anchor positionni belgilash

CSS Anchor Positioning — bu CSS-ning yangi imkoniyatlaridan biri bo‘lib, elementlarning joylashuvini boshqa elementlarga bog‘lashga yordam beradi.

@frontend | Happy Coding

#update #nextui #frontend

👩‍💻 NextUI’da ajoyib chartlar shu haftada taqdim etiladi!

@frontend | Happy Coding

#mem #jsLibrary #frontend

😁 Bu dasturlashdagi samaradorlikka qarshi kulgili kontrastni ifodalaydi. Kutubxonalarga qaramlik ba'zi dasturchilar orasida haddan tashqari keng tarqalgan!

is-odd kutubxonasi - bir sonning toq ekanligini aniqlash. U sonni tekshirib, true (toq) yoki false (juft) qiymatni qaytaradi.

@frontend | Happy Coding

#vite #update #frontend

👩‍💻 Vite 6.0 chiqdi

Vite ekotizimi o'sishi haqida:
- Vite’ning ommaviyligi oshdi: NPM’dagi haftalik yuklashlar 7,5 milliondan 17 milliongacha o‘sdi.
- Yangi frameworklar: TanStack Start, One, Ember kabi frameworklar Vite ekotizimiga qo‘shildi.
- Vite'ni yirik kompaniyalar, jumladan, Google, Apple, Microsoft, OpenAI, va NASA kabi yetakchi kompaniyalar ishlatmoqda.

Quyida 6.0 versiyadagi eng asosiy o'zgarishlar:
1. Yangi environment API
2. Ekotizim kengayishi
3. Rollup 4’ga o‘tish
4. Hot Module Replacement (HMR) optimizatsiyasi
5. Node.js 18, 20 va 22+ versiyalari qo‘llab-quvvatlanadi
6. PostCSS va Sass bilan integratsiya yaxshilandi
7. vite.dev domeni va dizayni

👉 Vite 6.0 haqida to‘liq e’lonni bu yerda o‘qing

@frontend | Happy Coding

#component #frontend

↔️ Raqamlarni animatsiya qilish, formatlash va lokalizatsiya qilish uchun komponent

<NumberFlow/> Intl.NumberFormat va Web Animations asosida yaratilgan. qo‘shimcha kutubxonalarsiz, foydalanuvchilar uchun qulay va oson moslashuvchan.

React, Vue, Svelte uchun mavjud

GitHub | Veb sayt

@frontend | Happy Coding

#3D #frontend

🔠 Matn uchun 3D effekt kutubxonasi

ZText - 3D effektli matn yaratish uchun maxsus ishlab chiqilgan CSS va JavaScript kutubxonasi. Bu kutubxona oddiy HTML va CSS orqali matnlarga dinamik harakat, chuqurlik va 3D effektlar qo‘shishni osonlashtiradi.

Havola: https://bennettfeely.com/ztext

@frontend | Happy Coding

#ai #frontend

👨‍💻 Bolt.new — StackBlitz tomonidan yaratilgan AI yordamida veb-ilovalarni tez va oson yaratish platformasi. Sun'iy intellekt foydalanuvchining kiritgan ma'lumotlariga asoslanib, kodni avtomatik ravishda yaratadi va darhol ishga tushiradi. Bu ishlab chiqish jarayonini soddalashtiradi va yangi boshlovchilar uchun juda qulay.

👩‍💻👩‍💻 👩‍💻 👩‍💻 👩‍💻 👩‍💻 👩‍💻 👩‍💻 👩‍💻 v.h.

Havola: bolt.new / GitHub

@frontend | Happy Coding

👋 Assalomu alaykum, hurmatli obunachilar!

@frontend kanalimizni davomli rivojlanishi va foydali kontentlarni ko'proq baham ko'rishiga o'z hissangizni qo'shishingiz mumkin )

🔝 BOOST qilish

🪙 Major yulduzchalarini yuborish

💳 Donat yuborish

Eng osoni esa kanalda aktiv bo'lib, do'stlaringizga kanalimizni tavsiya qilishingiz!

Oldindan katta rahmat!

#react #update #frontend

👩‍💻 React v19 ishga tushurildi

React 19 rasmiy ravishda chiqarildi va npm orqali o'rnatib olishingiz mumkin!

🆕 Yangi Funksiyala:
• Actions: Async funksiyalar bilan optimistik yangilanishlar va xatolarni avtomatik boshqarish.
• useOptimistic: Optimistik holatlarni qulay boshqarish uchun hook.
• useActionState: Formalar uchun yangi boshqaruv hook.
• Static API-lar: HTML yaratishni optimallashtiruvchi prerender API-lar.
• Async Scripts: Skriptlarni samarali yuklash va boshqarish.
• Custom Elements: Maxsus elementlar bilan ishlash yanada oson.

🔄 Yaxshilanishlar:
• Suspense: Tezlik va moslashuvchanlik yaxshilandi.
• Formalar: Action va formAction funksiyalarini qo‘llab-quvvatlash.
• Hidratatsiya: Xatolarni aniqlash va tushuntirish qulaylashdi.

🔗 Batafsil: React 19 blog post

@frontend | Happy Coding

#practice #frontend

👨‍💻 Roadmap.sh sayti endilikda frontend dasturchilar uchun “Projects” bo‘limini ishga tushirdi. Bu bo‘limda amaliy loyihalar ro‘yxati keltirilgan bo‘lib, ular har bir bosqichda aniq ko‘rsatmalar va yo‘riqnomalar bilan berilgan.

3 xil darajadagi loyihlar mavjud:
Beginner / Intermediate / Advanced

@frontend | Happy Coding

#html #frontend

🖥 HTML popover yordamida foydalanuvchiga qo‘shimcha ma’lumot yoki interaktiv imkoniyatlar taqdim etish mumkin.

<button popovertarget="popover">Popover</button>
 
<div id="popover" popover>
  <p>Popover content</p>
</div>

@frontend | Happy Coding

#update #nextjs #frontend

👩‍💻 Next.js 15.1 versiyasi React 19 ni to'liq qo'llab-quvvatlaydi

Yangilanishda yangi after() API-si joriy etilib, foydalanuvchi javobi uzatilgandan keyin kodni bajarishga imkon beradi. Shuningdek, forbidden() va unauthorized() kabi yangi eksperimental API-lar kiritilib, autentifikatsiya xatolarini yanada aniqroq boshqarish imkonini beradi.

Batafsil: Next.js 15.1

@frontend | Happy Coding

#tailwindCss #frontend

🤓 Tayyor Tailwind CSS sinflari bilan 20+ CSS animatsiyalari.

Origin UI saytida Tailwind CSS bilan ishlaydigan loyihalar uchun tayyor "easing" funksiyalari to'plamini taqdim etdi. Funksiyalarni loyihangizga osongina qo'shish uchun kerakli sinf nomini 📄 nusxalash kifoya.

Havola: https://originui.com/easings

@frontend | Happy Coding

#css #update #frontend

🆕 👩‍💻 2024 yilda CSSga bir qator yangi xususiyatlar qo'shildi

Yangilanishlar veb dastruchilarga interaktiv foydalanuvchi interfeyslarini yaratishda yordam beradi. Quyida ushbu yangi xususiyatlarning ba'zilari va ularning kod misollari keltirilgan:

📄 Maydon o'lchami (field-sizing)

Matn kiritish maydonlarini matnning hajmiga qarab avtomatik ravishda o'lchash uchun field-sizing xususiyati qo'shildi.

```
textarea, select, input {
field-sizing: content;
}
```
Bu usul har qanday shrift, shrift o'lchami, til
va yozuv uslubi uchun mos.

🔴 height: auto ga animatsiya qo'llash

interpolate-size xususiyati yordamida height: auto yoki boshqa kalit so'zlarga animatsiyalarni amalga oshirish mumkin.

```
:root {
interpolate-size: allow-keywords;
}
```

🖋 <details> elementlari

Bir nechta <details> elementlarini guruhlab, ularni o'zaro eksklyuziv qilish uchun name atributidan foydalanish mumkin.

```
<details name="learn-css">
<summary>CSSni o'rganish</summary>
<p>...</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>...</p>
</details>
```
Bu usulda bir <details> elementi ochilganda, boshqa ochiq bo'lgan <details> elementi avtomatik ravishda yopiladi.

🗂 <details> va <summary> elementlarini uslublash

<details> va <summary> elementlariga display xususiyatini qo'llash va kengayib-yopiladigan qismni uslublash uchun ::details-content psevdosini ishlatish mumkin.

```
details {
display: flex;
flex-direction: row;
}
```

🔃 Anchorga asoslangan joylashuv

Elementlarni bir-biriga nisbatan joylashtirish uchun anchor asoslangan position joriy etildi.

```
.anchor {
anchor-name: --over-easy;
}

.positioned-element {
position: fixed;
position-anchor: --over-easy;
position-area: block-end;
}
```

📦 Hujjatlararo animatsiya

Bu usul yordamida bir sahifadan boshqasiga o'tishda silliq o'tish effektlarini qo'shish osonlashadi.

```
@view-transition {
navigation: auto;
}
```

🖼 Skrollga asoslangan animatsiyalar

Skroll pozitsiyasiga bog'liq animatsiyalarni yaratish uchun skrollga asoslangan animatsiyalar API joriy etildi.

```
@keyframes appear {
from {
opacity: 0;
scale: 0.8;
}
to {
opacity: 1;
scale: 1;
}
}

img {
animation: appear linear;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
```

💳 Skroll snap hodisalari
Usul yordamida skroll paytida foydalanuvchi interfeysining aniq joylariga o'tishni boshqarish osonlashadi.

```
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
});
```

🌝 light-dark() funksiyasi

light-dark() funksiyasi yordamida yorug'lik va qorong'ilik rejimlariga mos ranglarni belgilash mumkin.

```
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
```

Boshqa yangilanishlar haqida misollar orqali tanishib chiqish

@frontend | Happy Coding