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

#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

#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

▶️ 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

#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

#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

#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

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

#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

#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

#devLife #frontend

git push --force

@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

#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

#tailwindcss #frontend

👩‍💻 Tailwind CSS v4.1

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

Batafsil: Tailwind CSS v4.

@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

#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

Frontend pinned «👋 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)…»