#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

#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

#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

#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

#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

#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

#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

#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

#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

#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

#chrome #frontend

🌐 Chrome 138 – Frontendchilar uchun yangi imkoniyatlar!

🤖 Brauzer ichidagi AI API'lar:
Endi siz brauzerni o'zida, foydalanuvchi qurilmasida quyidagi AI funksiyalarini ishlatishingiz mumkin:

- Translator API: veb-ilovalarga real vaqtda tarjima qo‘shish.
- Language Detector API: matn qaysi tilda yozilganini aniqlash
- Summarizer API: maqola, chat yoki sharhlar uchun qisqa xulosalar

🎨 CSS funksiyalar:
- abs() va sign(): sonning modulini va ishorasini hisoblaydi
- progress(): qiymatlar orasidagi pozitsiyani hisoblash.
- sibling-index() & sibling-count(): elementlarni o‘z o‘rniga qarab stillashtirish.

🖥 Foldable qurilmalar uchun:
Endi Viewport Segments API yordamida bukiladigan (foldable) qurilmalar uchun sayt layout’ini moslashtirish mumkin.

Batafsil: Chrome 138

@frontend

#vite #frontend

👩‍💻 Vite 7.0 chiqdi!

Vite 7 chiqarildi! Endi u haftasiga 31 milliondan ortiq yuklab olinmoqda va yangilanish bilan quyidagi o‘zgarishlar kiritildi:

- Yangi Rust-bundler – Rolldown: Vite endi yanada tezroq build bo'ladi!
- Yangi default target – baseline-widely-available: Ko‘proq brauzerlar uchun yaxshilangan qo‘llab-quvvatlash.
- Node.js 20.19+ talab etiladi (Node 18 qo‘llab-quvvatlanmaydi).
- Vitest 3.2 bilan to‘liq mos
- Vite DevTools: NuxtLabs bilan hamkorlikda chuqur tahlil va debug imkoniyati.

Batafsil: https://vite.dev/blog/announcing-vite7.html

@frontend

#browser #frontend

🥼 Loyihangiz Safari’da yaxshi ishlasa, demak deyarli barcha joyda mukammal ishlaydi.

Safari ko‘pincha yangi CSS va JavaScript imkoniyatlarini kechroq qo‘llab-quvvatlaydi yoki o‘ziga xos "bug"lar bo‘ladi. Shu sababli, har qanday responsiv dizayn yoki yangi texnologiyalarni Safari’da alohida sinovdan o‘tkazish zarur.

-----

If your project works well on Safari, it will likely perform flawlessly almost everywhere.

Safari often lags behind in supporting new CSS and JavaScript features or has its own unique bugs. Therefore, it’s essential to test any responsive design or new technologies separately on Safari.

@frontend

#nuxt #frontend

👩‍💻 Nuxt 4.0 chiqdi!

- Kodni tartibli saqlash uchun yangi app/ direktoriyasi
- useAsyncData va useFetch da aqlli keshlash
- Tezroq CLI va socket aloqasi
- TypeScript uchun yaxshilangan integratsiya

-----

Nuxt 4.0 is out!

- New app/ directory for organized code
- Smart caching with useAsyncData and useFetch
- Faster CLI with socket communication
- Improved TypeScript integration

Upgrade guide and detailed overview

@frontend

#skills #frontend

👂 Overstatement of skills - ko‘nikmalarni bo‘rttirib ko‘rsatish

LinkedIn yoki CV/resume’da texnologiya va ko‘nikmalarni belgilashda oddiy, samimiy yondashuvni tanlang. Faqat o‘zlashtirgan va amaliyotda qo‘llay oladigan texnologiyalaringizni belgilang. Eng muxim va trenddagilarini yozing(5-10), ularni real loyihalaringiz orqali bilishingizni tasdiqlang. Oxiriga tez o‘rganuvchan va moslasha olishingizni yozib, bildirib keting.

*Texnologiya va skillarni to'g'ri belgilash me'yorlari haqida tajribali dasturchilar, dunyo standartlari asosida ma'lumot berishimni hohlaysizmi? (🔥)

-----

Choose a simple yet sincere approach when listing technologies and skills on LinkedIn or your CV/resume. Include only the technologies you have mastered and can apply in practice. List the most important and trending ones (5-10), and confirm your knowledge of them through real projects. At the end, add that you are quick to learn and adaptable, making it clear to others.

*Would you like me to provide information about the criteria for properly listing technologies and skills, based on world standards, from the perspective of experienced developers? (🔥)

@frontend

#web #frontend

🕸 Web dasturchilar uchun top manba!

Google'ning "Chrome developers" jamoasi tomonidan ishlab chiqilgan web.dev sayti web saytlar yaratish va optimallashtirish bo‘yicha bepul va ishonchli qo‘llanma.

- HTML, CSS, JS asoslaridan progacha
- Sayt tezligini oshirish yo‘llari
- SEO, accessibility, security bo‘yicha ko‘plab maslahatlar

Havola: web.dev

-----

A top resource for web developers!

Developed by Google’s Chrome Developers team, web.dev is a free and reliable guide to building and optimizing websites.

- From HTML, CSS, and JS basics to advanced topics
- Tips to improve website performance
- Plenty of advice on SEO, accessibility, and security

Link: web.dev

@frontend

#gpt5 #copilot #frontend

👩‍💻 GPT-5 GitHub Copilot’ga qo'shildi!

OpenAI’ning eng kuchli modeli GPT-5 Copilot’da ommaviy testda.

-----

GPT-5 has been added to GitHub Copilot!

OpenAI's most powerful model, GPT-5, is now in public preview on Copilot.

@frontend

#gemini #copilot #frontend

👩‍💻 Gemini 2.5 Pro Copilotga qo'shildi

-----

Gemini 2.5 Pro added to Copilot

@frontend