#web #frontend
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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍3
#nuxt #css #frontend
Nuxt 4 bilan yaratilgan loyihalarda dasturchilar orasida kichik muammo ya'ni style(css) fayllarni ulashda muammoga duch kelishmoqda. Yangiliklarni kuzatib bormagani uchunmi yoki AI'ga bog'lanib qolib docs/google search qilmaslik natijasida muammoni hal qilishlari uchun ko'p vaqt sarflab qo'yishmoqda.
Endi esa muammoga yechimcha berib ketsam.
Styles fayllarini noto‘g‘ri joyga joylashtirish va noto‘g‘ri yo‘l bilan import qilish orqali css'laringiz ishlamayotgan.
- Style fayllarni app/assets/ ichida saqlang
- nuxt.config.ts → css: ['~/assets/scss/main.scss']
Nuxt 4 da kodlaringiz “app/” papkasida bo'lishi kerak. Ya’ni barcha UI bilan bog‘liq papkalar: assets, components, composables, layouts, middleware, pages, plugins, utils — endi app/ ichida yozing.
“~” alias endi app/ ni ko'rsatadi
Batafsil docs: havola
@frontend
🔥8
#nuxt #upgrade #frontend
Qisqacha yangiliklar:
- Build qilish jarayoni tezlashdi
- Hash/chunk yaxshilandi → 404’lar kamayadi
- Rolldown bilan tezroq bundling
- Nuxt 3.19 ham shu yangiliklarning ko‘pini oldi
---
Nuxt 4.1 is out!
Brief updates:
- The build process has been accelerated
- Hash/chunk has been improved → 404s will decrease
- Faster bundling with Rolldown
- Nuxt 3.19 also received most of these updates
Read more: https://nuxt.com/blog/v4-1
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
#css #tools #frontend
150+ bepul, zamonaviy fon patternlari va gradientlar to'plami bor ajoyib resurs. “live preview” va bitta click'da CSS/Tailwind kodini nusxalab olsangiz bo'ladi. Hero va card'lar uchun juda qulay.
-----
An awesome resource with a collection of 150+ free, modern background patterns and gradients. It offers a “live preview,” and you can copy the CSS/Tailwind code with one click. Super handy for hero sections and cards.
Link: https://patterncraft.fun
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍6
#ai #prompt #frontend
OpenAI tomonidan, turli rollar uchun tayyor prompt to‘plamlari taqdim etildi. “ChatGPT for Engineers” paketi arxitektura vizualizatsiyasi, debugging, hujjatlashtirish va tezkor tahlillarni soddalashtiradi.
ChatGPT prompt packs: link
@frontend
🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
#trend #css #frontend
To'liq kod: https://codepen.io/jh3y/pen/qEbYRVg
Siz ham loyihalarda sinab ko'rdingizmi?
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#VsCode #update #frontend
Endi murakkab vazifalarni (masalan, autentifikatsiya qo'shish yoki testlar yozish) AI yordamida avval rejalashtirib olasiz. U loyihangizni tahlil qiladi, qadamlarga bo'ladi va "to-do" ro'yxatini avto yangilaydi. Natijada kod sifati oshadi, xatolar kamayadi va ishlash samaradorligingiz tezlashadi.
Hozircha VS Code Insiders'da qo'shilgan. Tez orada barcha versiyalarda ko'rinadi.
EN
New "Plan" Feature Added to VS Code
Now you can plan complex tasks (like adding authentication or writing tests) in advance with AI assistance. It analyzes your project, breaks it down into steps, and automatically updates the "to-do" list. As a result, code quality improves, errors decrease, and your productivity speeds up.
Currently added to VS Code Insiders. It will appear in all versions soon.
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#css #ux #frontend
Oddiy CSS:
button[aria-label="Next slide"] {
cursor: url(chev-right.png), auto;
}
button[aria-label="Previous slide"] {
cursor: url(chev-left.png), auto;
}
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17👍5
#update #nuxt #frontend
- TS'ni to'liq qo'llab-quvvatlash($img, useImage())
- IPX v3 - ishlash tezligi yaxshilandi
- Server tomonida ishlatish - useImage()
- Yangi Shopify va GitHub provayderlari
Nuxt Image v2 versiyasi 3.1 va undan yuqori versiyalarda ishlaydi.
Batafsil: Nuxt image v2
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#ts #webGpu #frontend
🎚 TypeGPU kutubxonasi yordamida yaratilgan "jelly slider" animatsiyasi
TypeGPU - bu TypeScript-ga asoslangan kutubxona, u JavaScript kodini WebGPU uchun WGSL ga aylantiradi. "use gpu" direktivasi JavaScript funksiyalarini GPU-da bajarish imkonini beradi.
const add = (a, b) => {
"use gpu";
return a + b;
}
Slider: Kodga havola
@frontend
🔥9👍4
#githubCopilot #chatGpt #frontend
OpenAI'ning GPT-5.2 modeli GitHub Copilot'da ishga tushdi!
Kuchli tomonlari:
- Uzun kod va matnlar bilan ishlash
- Interfeyslar (UI) yaratish
Yangi model pullik foydalanuvchilar uchun ochildi ya'ni Copilot Pro va undan yuqori ta'riflarda.
Batafsil: GitHub blog
@frontend
🔥9👍2
#cursor #ui #frontend
Cursor yangi 2.2 verisyasida vizual muharrir "Cursor Browser" qo'shdi.
Imkoniyatlar:
- Elementlarni drag-and-drop bilan joylashtirish
- React komponentlari props'larini to'g'ridan-to'g'ri tahrirlash
- Flexbox, grid, tipografiya uchun vizual kontroller
- Point-and-prompt: elementni tanlab, natural language bilan o'zgartirish
Endi design-to-code jarayoni ancha tezlashadi.
Batafsil: Cursor blog
@frontend
🔥13👍1