Frontend

#htmx #frontend

HTMX: Frontend framework’larga alternativ

HTMX — bu HTML uchun kutubxona bo'lib, u veb-ilovalar uchun interaktiv va dinamik imkoniyatlar qo'shishga yordam beradi.

HTMX yordamida JavaScript kodini minimal darajada ishlatib, "SPA" (Single Page Application) uslubidagi ilovalarni yaratish mumkin. HTMX sizga HTML atributlari orqali server bilan bog'lanishni, AJAX so'rovlarini, WebSocket-larni va boshqalarni amalga oshirish imkonini beradi.

HTMX’ning asosiy imkoniyatlari:

🟡 AJAX so‘rovlari: HTML elementlariga maxsus atributlar yordamida serverga ma’lumot jo‘natish va natijani qaytarish.

🟡 Partial Update: Butun sahifani yangilamasdan faqat sahifaning ma'lum bir qismini yangilash.

🟡 WebSocket qo‘llab-quvvatlashi: Veb-sahifani real vaqtda yangilash imkoniyati.

🟡 Server tomonidan boshqarish: Ma'lumotni qabul qilgan server tomonidan tegishli javobni HTML shaklida qaytarish.

HTMX’ning aktualligi (dolzarbligi)

1. Monolit arxitekturaga qaytish tendensiyasi: Ko‘p yirik loyihalar va kichik startaplar "monolit+" arxitekturaga qaytmoqda, ya'ni front-end va back-end bir-biriga yaqinroq bo‘lgan arxitektura.

2. HTMX — "Server Side Rendering" (SSR) va AJAX integratsiyasini sodda qilib beradi

3. Yangi backend framework’lari bilan yaxshi moslashishi: HTMX Django, Flask, Spring Boot, Laravel kabi backend framework'lari , Node.js, FastAPI texnologiyalar bilan oson integratsiya bo‘ladi.

Misol:



Foydali manbalar:
docs / video / HTMX for Beginners

@frontend | Happy Coding

#html #frontend

👩‍💻 Html tagidagi rel="noopener noreferrer" atributi nima uchun kerak?

Web sahifadagi havolasi orqali yangi sahifani (target="_blank") ochishda rel="noopener noreferrer" atributi xavfsizlikni ta'minlash uchun ishlatiladi.

✋ noopener nima qiladi?
- Yangi oynani ochganda eski sahifani window.opener orqali boshqarishdan himoya qiladi. Bu esa saytlarni phishing yoki zararli skriptlar orqali nazorat qilishdan saqlaydi.

👁 noreferrer nima qiladi?
- Havola bosilganda yo'naltiruvchi URL ma'lumotini yashiradi. Ya'ni, qaysi sahifadan o'tilganligi haqida ma'lumot uzatilmaydi.

Qachon ishlatiladi?

Agar siz tashqi saytga havola bersangiz va "_blank" orqali ochsangiz, xavfsizlikni oshirish uchun rel="noopener noreferrer" atributini qo'shish tavsiya etiladi.

@frontend | Happy Coding

‼️ Bizning shogirdlarimiz allaqachon 300$+ maoshli ish topishdi! Siz ham ularga qo‘shilishni xohlaysizmi?

🚀 Frontend kursini tugatdingiz, lekin hali ham ish topa olmayapsizmi?
Ko‘plab joylarga rezyume yuborasiz-u, javob kelmayaptimi? Endi bu muammo emas!

3 oylik Frontend Stajirovka kursi sizni IT sohasida haqiqiy muvaffaqiyat sari olib boradi:
✅ 5 dan 15 tagacha real loyihalar ustida ishlaysiz
✅ Rezyume va portfolioni mukammal tayyorlaysiz
✅ Intervyu savollariga javob berishni o‘rganasiz
✅ Senior va Middle dasturchilar bilan tajriba orttirasiz
✅ 24/7 coworking imkoniyati
✅ Ishga joylashish kafolati bilan yangi hayotga qadam qo‘yasiz!

💡 Eng yaxshi tomoni:
Kurs uchun to‘lovni faqat kursni tugatgandan so‘ng amalga oshirishingiz mumkin. Bu – moliyaviy xavfsizlik va haqiqiy kafolat!

📩 Ro‘yxatdan o‘tish:
https://forms.gle/9pgosqRJ4Vbt7Gox8

👉@it_time

#yilSarhisobi #frontend

YANGI YILDA YANGI YUTUQLAR!

2024-yilda @frontend kanali yutuqlari bilan bo'lishamiz!

2024 - yilda kanalimiz:
➕ 2,526 obunachiga yetdi!
👀 0.5+ millon ko‘rishlar!
⭐️ Eng mashhur post: 359 ta ulashish!
🔝 Umumiy 8.7k marta ulashishlar!

Bu yutuqlarni qo‘lga kiritishda siz obunachilarning hissangiz katta 😀

🎄 Yangi yil muborak, Frontendchilar! Kodlaringiz faqat "success" bo‘lsin! ☕️

Hammangizga rahmat!

#update #nuxt #frontend

👩‍💻 Nuxt 3.15 chiqdi!

👩‍💻 Vite 6 integratsiya:
Yangilanish Vite 6 bilan ishlaydi, bu esa server muhitini yaxshilashga yordam beradi.

🌐 Chromium devtools yaxshilanishlari:
Endi brauzer devtools'ida nuxt hook vaqtlarini ko'rish mumkin.

🗺 callOnce uchun navigatsiya rejimi:
Kodni har bir navigatsiyada bir marta ishlatish uchun yangi 'navigation' opsiyasi qo'shildi.

🥵 Shablonlar, sahifalar va sahifa metama'lumotlari uchun HMR

📄 Sahifa meta yaxshilanishlari:
definePageMeta ichida lokal funksiyalarni qo'llab-quvvatlash qo'shildi.

🔥 Ishlash samaradorligi oshirilgan:
Brauzer ilova manifestini oldindan yuklaydi va vue-router'ning hash rejimi tarixini paketdan chiqarib tashlaydi.

Yangilash uchun:

npx nuxi@latest upgrade --force


Batafsil o'qish: Nuxt blog

@frontend | Happy Coding

#alert #frontend

🗯 Top JavaScript bildirishnoma kutubxonalari

1. SweetAlert
2. React-Toastify
3. Toastr
4. Essential JS 2
5. chakra-ui/alert
6. Vue Toastification
7. Sonner
8. Awesome Notifications

Siz qaysi biridan ko'proq foydalanasiz?

@frontend | Happy Coding

Asoschilar Club Website 🎯

📈 Yaqinda asoschilar-club.uz saytini muvaffaqiyatli yakunladim. Endilikda ushbu loyihani yosh dasturchilarga real loyiha sifatida dars sifatida o‘tib bermoqchiman. Bu ularga a'lo darajadagi portfolio yaratishda yordam beradi.

💼 Qo'shilish narxi:
➖ Bugun: 47 ming so‘m
➖ Ertagadan: 68 ming so‘m

Nima uchun qo‘shilishingiz kerak?

➖ Real loyiha ustida ishlash tajribasiga ega bo‘lasiz
➖ To‘g‘ri va samarali kod yozishni o‘rganasiz
➖ Qo'shimcha savollaringiz uchun javoblar
➖ Loyihaning tayyorlanishi to‘liq yozib olinadi, istalgan vaqtda ko‘rib chiqishingiz mumkin

🚀 Qo'shilish uchun:

9860346603554947 (Abdulvahob Abdullayev) ushbu kartaga ,

Tolovni qilganizdan keyin men sizni yopiq kanalga qoshaman ⚡️

To'lov chekini @A_Abdulvahob ga yuborishingiz mumkin 😃

🎬 Loyihani yaratishni juma kunidan boshlaymiz.

@abs_javascript

#github #frontend

👨‍💻 GitHub'dagi yillik faoliyatingizni qiziqarli tarzda tahlil qilib, ko'rishga arziydigan hisobot shaklida taqdim etuvchi bepul vosita.

Siz ham sinab ko'rib, 2024-yildagi holatingizni izohlarda qoldiring )

Havola: https://git-wrapped.com

@frontend | Happy Coding

‼️ Ishga kirishga GARANTIYA beradigan kurs haqida eshitganmisiz?

🚀 Frontend kursini bitirib, ishga kira olmayapsizmi? Endi bu muammo emas! 3 oylik Frontend Stajirovka kursimizda:

✅ Real loyihalarda ishlaysiz
✅ Rezyume va portfolioni tayyorlaysiz
✅ Intervyu savollariga javob berishni o‘rganasiz
✅ Senior dasturchilar bilan tajriba orttirasiz
✅ Ishga joylashish kafolati olasiz!

💡 To‘lovni kursdan keyin amalga oshirish imkoniyati mavjud!

👉 Ro‘yxatdan o‘tish: https://forms.gle/9pgosqRJ4Vbt7Gox8

Natijalar bilan tanishish: @it_time

Yaxshigina ustoz bo'la oladi 😎, qizig'i o'zbek tilida!

#ai #vscode #frontend

👩‍💻 GitHub Copilot endi bepul!

GitHub Copilot endi Visual Studio va Visual Studio Code foydalanuvchilari uchun BEPUL taqdim etiladi.

Qanday foydalanishni boshlayman?
1. VS Code yoki Visual Studio’ni yangilang.
2. 'https://t.me/frontend/1511?comment=2513' rel='nofollow'>GitHub akkauntingizni ulang.
3. Gazini bosing ☕️

Batafsil: GitHub Copilot blog posti

@frontend | Happy Coding

#report #frontend

📊 JetBrains 2024-yilgi dasturchilar ekotizimi hisobotini chiqardi.

23 000 dan ortiq dasturchilar ishtirok etgan ushbu tadqiqotda JavaScript eng ko'p qo'llaniladigan dasturlash tili sifatida qayd etildi. Shu bilan birga, TypeScriptning ommaviyligi 2017-yildagi 12% dan 2024-yilda 35% gacha oshdi.

Boshqa qiziq ma'lumotlar:

- Sun'iy intellektning dasturlashdagi o'rni oshmoqda: Dasturchilarning 18% o'z mahsulotlariga sun'iy intellekt integratsiyasini amalga oshirmoqda.

- AI vositalaridan foydalanish: Dasturchilarning 69% ChatGPT, 40% esa GitHub Copilot kabi AI vositalarini sinab ko'rgan; mos ravishda 49% va 26% muntazam foydalanadi.

- Ishlash platformalari: Dasturchilarning 58% brauzer, 53% ish stoli, 30% esa mobil platformalar uchun dasturlar ishlab chiqadi.

- Ma'lumotlar bazalari: MySQL, PostgreSQL, MongoDB, SQLite va Redis eng ommabop bo'lib qolmoqda.

- Rust tili: So'nggi besh yilda Rust foydalanuvchilari soni barqaror o'sib, C++ o'rnini egallashga intilmoqda.

- Go va Rust: Dasturchilar orasida eng ko'p o'zlashtirilayotgan tillar sifatida Go va Rust ajralib turadi.

- Ishlash muhiti: Dasturchilarning 8% VR qurilmalarda kod yozishni sinab ko'rgan, 50% esa bunga qiziqish bildirgan.

Batafsil o'qib chiqish.

@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;
}
```

🖋 elementlari

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

```

CSSni o'rganish
...


Box Model
...

```
Bu usulda bir elementi ochilganda, boshqa ochiq bo'lgan elementi avtomatik ravishda yopiladi.

🗂 va elementlarini uslublash

va 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