🗿

@frontend

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

#vitest #frontend

👩‍💻 Vitest 3.2 chiqdi!

- Annotations API – testlarni belgilash va boshqarish
- Scoped Fixtures – kontekstga xos test muhiti
- Custom Browser Locators API – brauzerlar bilan moslashtirilgan test
- Test Signal – test holatini dinamik boshqarish
- V8 Coverage – aniqlik va tezlik oshdi

Batafsil o‘qish: havola

-----

Vitest 3.2 is out!

- Annotations API – define and manage your tests with annotations
- Scoped Fixtures – context-specific test environments
- Custom Browser Locators API – browser-adapted testing
- Test Signal – dynamic control of test states
- V8 Coverage – improved accuracy and performance

Read more: link

@frontend

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

#github #student #frontend

🧑‍🎓 Talabalar uchun GitHub bonuslari!

Agar siz talaba bo‘lsangiz — GitHub sizga ko'plab imkoniyatlar taqdim etadi! Buning uchun GitHub Students orqali o‘zingizni talaba ekanligingizni tasdiqlaysiz (student ID, .edu email yoki boshqa hujjat orqali).

✅ Tasdiqlangach, sizga GitHub Student Developer Pack ochiladi, bu orqali quyidagi imkoniyatlarga ega bo‘lasiz:

- GitHub Copilot
- Domain.com, Namecheap
- JetBrains IDE
- MongoDB Atlas, DigitalOcean, Heroku
- Canva, Figma, Notion, Educative, Replit, BootstrapStudio va boshqa ko‘plab toollar bepul yoki chegirma bilan olsangiz bo'ladi!

-----

GitHub Bonuses for Students!

If you’re a student — GitHub offers you plenty of opportunities! To access them, simply verify your student status through GitHub Students (using your student ID, .edu email, or another valid document).

Once verified, you'll get access to the GitHub Student Developer Pack, which includes:

- GitHub Copilot
- Domain.com, Namecheap
- JetBrains IDE
- MongoDB Atlas, DigitalOcean, Heroku
- Canva, Figma, Notion, Educative, Replit, BootstrapStudio, and many more tools — free or at a discounted rate!

@frontend

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

#angular #frontend

👩‍💻 Angular v20 chiqarildi!

Angular'ning 20-versiyasi rasman taqdim etildi.

Yangi imkoniyatlar:
- Server Side Rendering (SSR) endi default holatda
- TypeScript 5.4 bilan to‘liq moslik
- Vite va esbuildni qo‘llab-quvvatlash
- Zamonaviy Routing tizimi

Batafsil: Angular blog

-----

Angular v20 Released!

The 20th version of Angular has been officially announced.

What’s new:
- Server Side Rendering (SSR) is now enabled by default
- Full compatibility with TypeScript 5.4
- Support for Vite and esbuild
- Modernized routing system

More: Angular blog

@frontend

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

#ai #frontend

🤖 "Stack Overflow tarbiyalagan AI avlodi"

Yangi muammolar/yechimlar Stack Overflow, GitHub yoki bloglarda yozilmasa, hech qayerda muhokama qilinmagan bo‘lsa, AI uni bilmaydi. Shunchaki: oldingi o‘xshash muammolarga asoslanib taxmin qiladi. Logika, tajriba va o‘xshash misollar orqali yechim beradi.

@frontend

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

#animation #frontend

Raqam animatsiya komponenti - Number Flow

✓ JavaScript, React, Vue va Svelte
✓ To‘liq moslashuvchan va qulay
✓ Qo‘shimcha kutubxonalarsiz

-----

Number Animation Component – Number Flow

✓ JavaScript, React, Vue, and Svelte
✓ Fully responsive and user-friendly
✓ No additional libraries required

🔗 https://number-flow.barvian.me

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

#css #frontend

📱100vh vs 100dvh — Mobil qurilmalarda farqi nimada?

100vh – butun ko‘rinadigan viewport balandligini anglatadi (brauzerning address paneli va boshqa UI elementlari bilan birga)

100dvh – faol ishlayotgan viewport balandligini bildiradi - ya’ni foydalanuvchining ko‘ziga ayni paytda ko‘rinib turgan real ekran maydonini

Batafsil: havola

-----

100vh vs 100dvh — What’s the difference on mobile devices?

100vh – Represents the full visible viewport height, including the browser’s address bar and other UI elements.

100dvh – Represents the active viewport height — the actual screen space currently visible to the user.

Learn more: link

@frontend

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

#javascript #frontend

👩‍💻 JavaScript bo‘yicha bepul trening

- 10–11-may kunlari bepul Mid-level trening!
- 48 soat davomida: amaliy mashqlar, testlar, qo‘llanmalar va sinov imtihoni!

----
Free JavaScript Training

- Free Mid-level training on may 10–11!
- For 48 hours: hands-on exercises, quizzes, guides, and a mock exam!

Link: https://certificates.dev/javascript/free-weekend

@frontend

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

#tailwindcss #frontend

👩‍💻 Tailwind CSS v4.1

- Text shadows
- Masks
- Browser compatibility
- Text wrapping
- Colored drop-shadow

Batafsil: Tailwind CSS v4.

@frontend

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

#react #library #frontend

👩‍💻 React developerlar uchun kutubxonalar ro'yxati

Quyidagi kutubxonalar bilan React loyihangizni kuchli va funksional qilishingiz mumkin

----
Library list for react developers

With the following libraries, you can make your React project powerful and functional:

🔘 Slider - Flicking
🔘 Router - Wouter
🔘 Charts - Recharts
🔘 Drag and Drop - DnDKit
🔘 Styling - TailwindCSS
🔘 Authentication - Auth.js
🔘 Tables - Tanstack table
🔘 Notifications - Sonner
🔘 Global state management - Zustand
🔘 Infinite virtual list - Virtua
🔘 Modals - React modal
🔘 UI Components - Shadcn UI
🔘 Animations - Framer motion
🔘 Working with Forms - React hook form

@frontend

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

👋 Assalomu alaykum, do'stlar!

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

🔝 BOOST qilish

💳 Donat yuborish

🪙 / 🎁 yuborish ➘

*Eng osoni esa kanalda aktiv(reaksiya, ulashish) bo'lib, do'stlaringizga kanalimizni tavsiya qilishingiz!

Oldindan katta rahmat!

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

🌜

Ramazon hayiti muborak bo'lsin do'stlar.

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

#javascript #react #vue #frontend

💡 Patterns.dev

Patterns.dev — bu zamonaviy veb-ilovalarni yaratishda dizayn, renderlash va ishlash samaradorligi bo'yicha andozalar haqida bepul onlayn manbadir.

Shuningdek, sayt foydalanuvchilarga "Learning Patterns" nomli 435 sahifalik bepul kitobni turli formatlarda yuklab olish imkoniyatini ham taqdim etadi.

✅ Sayt: Patterns.dev

@frontend | Happy Coding

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

#nuxtUI #update #frontend

👩‍💻 Nuxt UI v3 🎉

Nuxt jamoasi yaqinda Nuxt UI v3 versiyasini taqdim etdi, bu UI kutubxonasining sezilarli yangilanishi bo'lib, keng qamrovli yaxshilanishlar va yangi imkoniyatlarni o'z ichiga oladi. Ushbu yangilanish Reka UI, Tailwind CSS v4 va Tailwind Variants kabi zamonaviy texnologiyalar bilan yangilandi.

Asosiy xususiyatlar:
- Reka UI integratsiyasi
- Tailwind CSS v4 qo'llab-quvvatlashi
- Tailwind Variants

Batafsil: Nuxt UI v3

@frontend | Happy Coding

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

#git #frontend

👩‍💻 git commit xabarlarini professional Conventional Commits qoidalariga asoslanib yozish.

<type>(<scope>): <qisqa tavsif>

type (Majburiy):
• feat: Yangi funksiya yoki imkoniyat qo‘shish.
• fix: Xatolikni tuzatish
• refactor: Kodni qayta tuzish (funksionallikni o‘zgartirmasdan)
• style: Faqat kodning ko‘rinishini o‘zgartirish
• docs: Dokumentatsiyani o‘zgartirish
• test: Testlarni qo‘shish yoki o‘zgartirish
• chore: Texnik ishlar (masalan, konfiguratsiya fayllarini o‘zgartirish)

scope (Ixtiyoriy):
• O'zgartirish qaysi qismga tegishli ekanligini ko'rsatadi (masalan, login, auth, ui)

description (Majburiy)
• O'zgartirishni qisqacha va aniq tushuntirish

Batafsil o'rganish uchun: havola

@frontend | Happy Coding

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

#chromeDevTools #frontend

👩‍💻 Chrome DevTools’dagi sun’iy intellektli “Console Insights” funksiyasi

Endi siz console'dagi xatolik va ogohlantirishlarni tushunish uchun google qilib qidirish yoki AI'larga copy-paste qilish shart emas.

"Console Insights" orqali qanday xatolik (masalan, CORS error, TypeError, Network error) ustiga sichqoncha olib borganda “Understand this error” tugmasini ko‘rasiz. Uni bosganingizda esa Google Gemini yordamida quyidagilar chiqadi:
✔ Xatolik sababi
✔ Tavsiya etilgan yechim
✔ Stack trace tahlili
✔ Rasmiy manbalar (MDN, Google dev docs)
✔ Avtomatik kod snippet ham bor!

Kimlar uchun foydali?
✔ Junior’lar uchun — har bir xatodan o‘rganish, tezroq yechim topish
✔ Tajribali dev’lar uchun — debuggingni tezlashtirish

Docs: https://developer.chrome.com/docs/devtools/console/understand-messages

@frontend

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

#vite #frontend

👩‍💻 Vite@7.0.0-beta.0 chiqdi!

O‘zgarishlar:
🫂Node 18 versiyasi endi qo‘llab-quvvatlanmaydi
🔄 Vite endi faqat ESM (ECMAScript Modules) formatida tarqatiladi

Dasturchilar beta versiyani sinab ko'rib feedback'laringiz berishingizni so'rashmoqda.

-----

Vite@7.0.0-beta.0 has been released!

Changes:
🫂 Node version 18 is no longer supported
🔄 Vite is now distributed exclusively in ESM (ECMAScript Modules) format

The developers are encouraging you to try out the beta version and share your feedback.

@frontend

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

▶️ Bugun 29-may soat 21:00 da Angular v20 dasturchilar uchun tadbirning premyerasi bo'lib o'tadi.

-----

Today, May 29 at 9:00 PM, the premiere of the Angular v20 developer event will take place.

YouTube: https://youtu.be/FcDamOe1qxA?si=dDfcZKQpWhbcdRrn

@frontend

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

#tools #frontend

Stagewise - frontendni AI bilan bir necha klikda tahrirlovchi toolbar

Frontend'da nimadur o'zgarish qilish kerak bo'lsa, brauzer toolbar’da UI elementini tanlang, prompt yozing, AI agent shu joydagi kodni ochib, tuzatib beradi. Endi agentlarga context haqida tushuntirish shart emas.

-----

Stagewise – a toolbar that lets AI edit your frontend in just a few clicks

Need to tweak something on the frontend? Simply pick the UI element in the browser toolbar, type a prompt, and the AI agent opens and fixes the exact piece of code—no more explaining context.

⚙️ Install: VS code | Copilot

@frontend

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

#html #css #frontend

👟 Google I/O 2025: Veb dasturchilar uchun yangi HTML/CSS imkoniyatlari taqdim etildi.

Endi ayrim JS, CSS kodlari va kutubxonalarsiz ham ko‘p ishlarni bajarish mumkin.

-----

Google I/O 2025: New HTML/CSS Features Introduced for Web Developers

Now, many tasks can be done without using extra JS, CSS code, or libraries.

- Popover API
- Anchor positioning API
- Anchor Tool
- Command Invokers
- Customizable Select Menus
- CSS Carousels
- Carousel configurator
- CSS scroll-state()
- Hovercards (Interest Invokers Explainer)

🔗 Blog | 📷 Video

@frontend

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

#animation #css #frontend

⚡️ GSAP endi 100% bepul!

Endi hech qanday litsenziya cheklovisiz, barcha developerlar GSAP’ni loyihalarda bemalol ishlatishlari mumkin.

Batafsil: havola

-----

GSAP is now 100% free!

Now all developers can freely use GSAP in their projects with no license restrictions.

Learn more: link

@frontend

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

#devLife #frontend

git push --force

@frontend

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

#vue #library #frontend

👩‍💻 Vue developerlar uchun kutubxonalar ro'yxati

Quyidagi kutubxonalar bilan Vue loyihangizni kuchli va funksional qilishingiz mumkin

----
Library list for vue developers

With the following libraries, you can make your Vue project powerful and functional:

🔘 Slider - Splide.js / Vueper Slides
🔘 Router - Vue router
🔘 Charts - Chart.js / ECharts
🔘 Drag and drop - Vue draggable
🔘 Styling - TailwindCSS
🔘 Authentication - Auth module
🔘 Tables - Tanstack table
🔘 Notifications - Vue Toastification
🔘 Global state management - Pinia
🔘 Infinite virtual list - virtual-scroller
🔘 Modals - Vue final modal
🔘 UI components - Element plus
🔘 Animations - Motion / vueuse
🔘 Working with forms - VeeValidate

@frontend

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

#animation #frontend

🎮 Anime.js v4

JavaScript animatsiya kutubxonalarining eng mashhurlaridan biri anime.js endi 4-versiyada!

----
One of the most popular JavaScript animation libraries, anime.js, is now on version 4!

🧩 New modular API
⚡️ Highly performant
🖱️ Scroll-linked animations
🫵 Draggables
↔️ Responsive
✨ Additive animations
🪽 WAAPI support

Yangilangan sayt: animejs.com

@frontend

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

✅ Ovoz bering va fikringizni kommentda ham yozib qoldiring — bu biz uchun muhim!

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

#css #frontend

🗯 Chrome 135 da endi <select> elementiga CSS orqali to‘liq style berish mumkin!

Endi SVG, rasm va animatsiyalarni bemalol qo‘llash mumkin.

Batafsil: Chrome for Developers

@frontend

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

#programmerHumor #frontend

Fullstack dasturchilikning qisqacha tasviri

@frontend | Happy Coding

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

#programmerHumor #frontend

Peak Career Trajectory

*Siz shuncha yillik karyeradan keyin nima qilgan bo'lar edingiz? 💬

@frontend | Happy Coding

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

😳 “ISH TOPISH QIYIN” deganlarga Diyorbekdan javob: BIRDANIGA 2TA ISHGA KIRDI! 💼💼

🔥Biz sizni 3oylik Frontend PRO Stajirovka kursiga taklif qilamiz.

Kurs davomida:
✅ 5tadan 10tagacha real proyekt
✅ Resumeni to'g'ri to'ldirish
✅ Intervyu savollariga qanday javob berish
✅ Jamoaviy ishlash
✅ Senior, Middle dasturchilardan proyekt bo'yicha support
✅ Yopiq vakansiyalar kanaliga qo'shilish
✅ Kurs to'lovini esa bitirgandan so'ng bo'lib-bo'lib to'lashingiz mumkin.

❗️Qo'shimcha
Real proyektlar qilinadi, hamma qilgan proyektlarini .uz, .com kabi domenlarga qo'yiladi. Eng asosiysi 3oy davomida to'lov qilmay, undan so'ng bo'lib-bo'lib to'lashingiz mumkin.

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

👉 @it_time

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

#tailwindCSS #frontend

👩‍💻 Tailwind'dan bepul kurs

UI dizaynlaringizni yanada optimal va chiroyli, foydalanuvchilarga qulayroq qilishni xohlasangiz, Tailwind CSS yaratuvchisi tominidan ishlab chiqilgan "Build UIs That Don’t Suck" degan 5 kunlik mini-kursni ko‘rib chiqing. Bepul!

Nimalarni o‘rganasiz?

- UI buzilmasligi uchun qanday qilib komponentlarni joylash
- Jadval va menyularni tartibga keltirish
- Mobil qurilmalarda tugmalarni to‘g‘ri joylashtirish
- Dizaynda mayda lekin muhim detallar

Qisqasi, foydali narsalar ko‘p. O‘tib ko‘ring, manzil👉 tailwindcss.com

@frontend | Happy Coding

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