Hozirda dasturchilar orasida mashhur bo'layotgan AI xizmatlar:

1. v0.dev
2. deepseek.com

Siz qandaylarini bilasiz? 💬

@frontend | Happy Coding

Читать полностью…

#FrontendHumor

Frontend dasturchi ChatGPT ishlamay qolgach, o'zining sevimli framework'iga murojaat qildi:

🧑‍💻 "Ey, React, meni tushunasanmi?"
👩‍💻 Men faqat state ni o'zgartiraman, seni emas 😅

Keyin u Vue ga murojaat qildi:

🧑‍💻 "Vue, sen meni qutqarasanmi?"
👩‍💻 Men reactive bo'lsam ham, bu muammoga reactive emasman!

Nihoyat, u vanilla JavaScript ga qaytdi:

🧑‍💻 "JavaScript, sen meni tushunasanmi?"
👩‍💻 console.error('Men ham tushunmayapman, lekin hech bo'lmaganda undefined qaytaramiz!

🧑‍💻 Frontend dasturchi: "Xo'sh, endi nima qilamiz?"
👩‍💻 Kodni qayta yozamiz, lekin bu safar TypeScript bilan! 😄

not so funny

@frontend | Happy Coding

Читать полностью…

#beginner #frontend

Web-Dev-For-Beginners — Microsoft tomonidan yangi boshlovchi dasturchilar uchun tayyorlangan bepul o'quv kurs!

24 ta dars, 12 hafta davomida: HTML, CSS va JavaScript asoslarini o'rganing.

Litsenziya: MIT — foydalanish bepul va ochiq manbali.

👩‍💻 Havola

@frontend | Happy Coding

Читать полностью…

#sotiladi

🍏 MacBook Air M3 – 2024

Display: 13.6 inch
RAM: 8 GB
SSD: 256GB
Rang: Midnight
Chip: Apple M3 – tezkor va quvvatni tejovchi.
Akkumulyator: 59 sikl, 100% yomkost
Ishlash davomiyligi: 15 - 18 soat

Qo‘shimcha ma’lumotlar:
- Hech qanday nosozlik va nuqson yo‘q.
- Original qutisi va quvvatlagichi mavjud.
- Frontend, UI/UX ishlarida foydalanilgan va sinovdan o'tgan.
- Bir qo'l ishlatilgan.
- Shoshilinch sotiladi, naxtga.
- Toshkent shahar

Narx: 870$ (oxirgi narx)
Aloqa: #sotildi

Читать полностью…

#html #frontend

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

Web sahifadagi <a> 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

Читать полностью…

#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!

Читать полностью…

#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

Читать полностью…

#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

Читать полностью…

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

Читать полностью…

#animation #js #css #frontend

📝 JavaScript orqali, har bir harfni alohida animatsiyalash va sekinlik bilan paydo bo'lish effektini yaratish mumkin.

Kodlar izohda 💬

@frontend | Happy Coding

Читать полностью…

Sizlarga Uzum.uz kompaniyasining Frontend Team Lead lavozimida ishlovchi professional dasturchining Telegram kanalini tavsiya qilaman! 😁

U yerda siz:
✅ Frontend texnologiyalarining amaliy qo'llanmalari;
✅ Zamonaviy freymvorklar va kutubxonalar (React, Vue.js, Angular) bo'yicha tajribalar;
✅ Performance optimization, testing va deployment bo'yicha qimmatli maslahatlar;
✅ Dasturlashda kerakli soft skill larni rivojlantirishga oid tavsiyalarni topasiz.

Kanal manzili 👉 @shahzodcodes

Читать полностью…

#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

Читать полностью…

#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

Читать полностью…

#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

Читать полностью…

👋 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!

Читать полностью…

#Rivojlanish #DasturchilarHayoti #IlmVaTexnologiya

💻 Dasturchilar uchun!!!

🌐 GitHub – Loyihalaringizni saqlang va boshqalar bilan ulashing.
🔗 LinkedIn – Professional aloqalar o‘rnating va yangi ish imkoniyatlarini toping.
🚀 Upwork – Mijozlar bilan ishlash orqali tajribangizni oshiring.
🎨 Behance – Dizayn va kreativ ishlaringizni namoyish qiling.

uzbekdevs.uz / @uzbekdevs

Читать полностью…

#FrontendHumor

CSS va JS o‘rtasida janjal chiqibdi:

CSS:
— Men saytni chiroyli qilib ko‘rsataman, hammaga yoqtiraman!

JS:
— Ha, lekin men ishlamasam, sening chiroying hech narsaga yaramaydi!

HTML kelib:
— Bola-chaqalarim, ortiqcha bahslashmanglar. Asosiy ishni men qilaman, sizlar shunchaki mening libosim va qobiliyatim!

Joke by: chatgpt

@frontend | Happy Coding

Читать полностью…

#react #pdf #frontend

👀 React uchun 4 ta eng yaxshi PDF Viewer

Ilovalaringizda PDF hujjatlarni ko‘rish funksiyasini qo'shmoqchi bo'lsangiz, quyidagilardan foydalanashingiz mumkin:

1. React-PDF
2. PDFKit
3. pdfme
4. Nutrient

@frontend | Happy Coding

Читать полностью…

#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:

<div id="natija"></div>

Foydali manbalar:
docs / video / HTMX for Beginners

@frontend | Happy Coding

Читать полностью…

#react #frontend

⚡️ React Bits — React uchun animatsiyali komponentlar kutubxonasi

Havola: https://www.reactbits.dev

@frontend | Happy Coding

Читать полностью…

#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

Читать полностью…

#css #flexbox #frontend

🔢 Flexbox Labs - Praise ismli dasturchi tomonidan yaratilgan, animatsiyalar bilan Flexbox Playground. Loyiha CSS Flexbox yordamida maketlar yaratishingizga yordam beradigan vizual vositadir

React, TypeScript, Sass va Framer Motion texnologiyalari orqali ishlab chiqilgan.

Havola: demo

@frontend | Happy Coding

Читать полностью…

#vsCode #frontend

GitHub Copilot'dan bepul foydalanish imkoniyati quyidagilarni taqdim etadi:

- Oyiga 2 000 ta kodni to'ldirish
- Oyiga 50 ta chat xabari
- Claude 3.5 Sonnet yoki GPT-4o kabi modellardan foydalanish

@frontend | Happy Coding

Читать полностью…

#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. 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

Читать полностью…

Agar siz 2025-yilda Frontend Dasturchi bo'lishni maqsad qilgan bo'lsangiz, bu maslahatlar sizga ancha yordam beradi 🤝

- JavaScript, HTML va CSS ni o'rganish - bu web-dasturlashning asosiy texnologiyalari va bu sohaga aloqador so'nggi yangiliklardan xabardor bo’lib turing.

- React, Vue.js, Angular kabi zamonaviy frontend freymvorklari va kutubxonalari bilan tajriba orttirish. Murakkab, dinamik foydalanuvchi interfeyslarini yaratish uchun bu juda muhim.

- Testing, deployment va performance optimization ga oid ko'nikmalarni rivojlantirish. Bular hozirda murakkab ilovalar ishlab chiqarish uchun muhim omillar hisoblanadi.

- Frontend dasturlash ko'nikmalaringizni namoyish etadigan loyihalar portfelini yaratish. Bu ish topish uchun sizga ancha yordam beradi.

- Frontend sohasi bilan bog'liq yangi tendensiyalar va texnologiyalar haqida xabardor bo'lib turish. Ular tez-tez o'zgarib turadi, shuning uchun doimiy o'rganish va moslashish kerak bo'ladi.

Va albatta communitylarda faol bo'ling, bu sizga qo'shimcha tarzda soft skill larni oshirishga yordam beradi va o'rganishingizni tezlashtiradi.

@shahzodcodes

Читать полностью…

#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

Читать полностью…

#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

Читать полностью…

#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

Читать полностью…

Videodagi "Kiril-lotin tarjimon" dastur kod fayli.

Читать полностью…