#vuejs — Public Fediverse posts

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

𝗩𝘂𝗲 𝗨𝗻𝗶𝗰𝗼𝗻𝘀:

#Vuejs #Components #Icons #SVG #VueUnicons

https://thewhale.cc/posts/vue-unicons

1000+ Pixel-perfect svg unicons for your next project as Vue components.

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Мы увязли в Feature-Sliced Design

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

https://habr.com/ru/companies/T1Holding/articles/1028836/

#react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Frontend Status: свежий дайджест фронтенда и AI — 27.04.2026

Привет! Это четырнадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра. 🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах. 🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод. 🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку. ⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений. 🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса. …и многое другое.

https://habr.com/ru/articles/1028734/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 27.04.2026

Привет! Это четырнадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра. 🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах. 🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод. 🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку. ⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений. 🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса. …и многое другое.

https://habr.com/ru/articles/1028734/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 27.04.2026

Привет! Это четырнадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра. 🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах. 🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод. 🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку. ⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений. 🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса. …и многое другое.

https://habr.com/ru/articles/1028734/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 27.04.2026

Привет! Это четырнадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Vue на развилке роста: разбираем State of Vue 2026, чтобы понять, куда вложить время сегодня и не чинить стек завтра. 🤖 AI без иллюзий, но с результатом: от генеративных UI и reasoning-RAG до правил, которые уменьшают «переписывание ради переписывания» в код-ассистентах. 🛡️ Безопасность как конкурентное преимущество: сверяем npm-практики по OWASP, кейс Context.ai и экономику фейковых звезд, чтобы не привезти риск в прод. 🎨 Новый CSS вместо старых костылей: sizes="auto" и HTML в <canvas> показывают, как делать богаче интерфейсы и проще поддержку. ⚡ JS/TS и фреймворки под давлением масштаба: читаемость кода, ускорение Angular и обновления React/Vue как ориентиры для технических решений. 🧪 Инструменты, которые сокращают путь до релиза: автогенерация E2E, Excel через WebAssembly и процедурный звук для живого интерфейса. …и многое другое.

https://habr.com/ru/articles/1028734/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Как не надо писать Store в Pinia (Vue). Разбираем на выдуманном примере

Сегодня посмотрим на вымышленный пример, как не надо делать стор. Любые совпадения - случайность. Все истории выдуманы. Представьте: есть у нас герой Алекс. Перекидывают его на проект - «поправить пару простых багов, делов на пять минут». Открывает Алекс код, а там… У него сердце замирает. Подумаешь, с кем не бывает. Но внутри начинается дилема: просто пофиксить баги и забыть этот ужас как страшный сон, либо как настоящий богатырь проектов взять и отрефакторить весь этот бардак. Сделать по-человечески, заложить нормальную основу. Да, потом спросят за новые баги - ну и что. Зато внутри тепло разольётся, что не забил на плохой код и навёл порядок.

https://habr.com/ru/articles/1028052/

#vuejs #store #pinia

𝗩𝘂𝗲.𝗷𝘀 + 𝗕𝘂𝗹𝗺𝗮 = 𝗕𝘂𝗲𝗳𝘆:

#JS #VueJS #Bulma #Buefy

https://thewhale.cc/posts/vuejs-bulma-buefy

Buefy is a lightweight and reponsive UI components for Vue.js based on the Bulma CSS framework.

Frontend Status: свежий дайджест фронтенда и AI — 18.04.2026

Привет! Это 13-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик». 🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео. 🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии. 🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус. ⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine. ⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun. 🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок. 🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем. …и многое другое.

https://habr.com/ru/articles/1025036/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 18.04.2026

Привет! Это 13-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик». 🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео. 🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии. 🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус. ⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine. ⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun. 🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок. 🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем. …и многое другое.

https://habr.com/ru/articles/1025036/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 18.04.2026

Привет! Это 13-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик». 🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео. 🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии. 🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус. ⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine. ⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun. 🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок. 🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем. …и многое другое.

https://habr.com/ru/articles/1025036/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 18.04.2026

Привет! Это 13-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Для тех, кто хочет делать игровые интерфейсы быстрее: видео про 2D-игры с AI и Phaser, где генеративные инструменты работают как напарник, а не как «чёрный ящик». 🤖 В AI-разделе — разбор того, что уже можно брать в прод: micro-ml на Rust/WASM, кейс крупной техкомпании с роем из 50+ агентов, Flint Alpha и практическая интеграция Claude с видео. 🛡️ По безопасности фокус на снижении рисков: прикладной XSS, бесплатная оценка уязвимостей кода от GitHub и дорожная карта крупной техкомпании по постквантовой криптографии. 🎨 CSS-блок про баланс визуала и доступности: почему box-shadow не заменяет outline в forced-colors и как сохранить корректный фокус. ⚛️ React-секция для тех, у кого интерфейсный слой растёт в сложности: управление модалками без хаоса, UI без брейкпоинтов и состояние компонентов через radio state machine. ⚡ В JS/TS — практичный набор без перегруза: Pretext для текста, k-means для палитр, модульная архитектура, Intl API и Web Audio API в Node/Bun. 🅰️ Angular-раздел посвящён Signal Forms в v21 и тому, как перейти к типизированным формам без ручных подписок. 🌐 В стандартах и дизайне — что уже можно внедрять сейчас: CSS Image Animation, Baseline за март, Liquid UI и UX-подходы для legacy-систем. …и многое другое.

https://habr.com/ru/articles/1025036/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

More Web Awesome Dropdowns

Back in February, we looked at how to use Vue.js and Web Awesome to create dropdowns. I wanted to take a moment to look at other ways we can use Vue and Web Awesome to do cool things with Dropdowns. In today’s post, we will use the data files at data.jws.app to populate dropdowns in a webform. We previously used that data while looking at how to implement an autocomplete using web components. That work used Lit to create more maintainable Web Components that could be used and reused in development projects. Instead of using Lit this time, we are going to be using Web Awesome, but since Web Awesome uses Lit, we are still kind of using Lit. For today’s demos, we will look at how to create a contact form.

Our data website has a JSON file listing counties in Wisconsin. If we get that data asynchronously in onMounted(), we can populate a Ref with the listing of counties. At that point, you just need a v-for loop.

This has minimal utility because most contact forms will be used outside the great state of Wisconsin. I created a 426KB data file that has the names of the counties in every state. If we use a computed value for both the stateNames and countyNames arrays, we can make the list of county names depend on the selected state.

If the goal is to get the user’s contact information, you are more likely to want their state, city, and zip code rather than their state and county. The problem is that the data file balloons a lot at this point. A single data file containing every state, city, and zip code is 10.5 MB, which is a lot for a slower data connection to download. For the next example, we will try to use the same pattern as the last one.

As I said above, the problem is that our data file is ridiculously large. A 10.5 MB dependency on a webpage is unacceptable. My rule of thumb has always been that if a webpage can’t load over a bad cellular connection, it doesn’t function. If we want to have State, City, and Zip Code dropdowns, we can’t reduce the amount of data we are working with, but we can reduce the amount of data that is loaded into memory at the same time.

To make the final demo more performant, I split the data file into one for states and another for cities and ZIP codes in each state (e.g., AL, AK, AZ, AR). Now, the data file for the states is only 5.96 KB, and the data file for cities and zip codes in Wisconsin is 215 KB. 220.96 KB is much easier for mobile data users. Let’s see what that would look like.

We still watch the state, city, and zip values, but now we use await fetch() to retrieve the city and zip code data when the selected state changes.

What’s next? The inevitable next step would be to integrate street addresses, but if the dataset for US states, cities, and zip codes is 10.5 MB, the dataset for every street address in America would be significantly larger. The better option would be to use an API connected to a GIS server.

First Example: https://codepen.io/steinbring/pen/NPrjvNx/6f7d77a802b2fb359f3432ccf3844fe5

Second Example: https://codepen.io/steinbring/pen/wBWdVYW/fc70e2d022318800492654b73559cbe7

Third Example: https://codepen.io/steinbring/pen/xbOWqdN/ebbd160959669145be5a28f53f3f4e9e

Fourth Example: https://codepen.io/steinbring/pen/jErzBvK/cb69e49c7402268053845a0abd0f1f84

FiT календарь тренировок — финал трилогии пет-проекта

Год назад я опубликовал первую статью про разработку приложения календаря тренировок. Спустя 5 месяцев опубликовал рассказ о 10 обновлениях . Сейчас время финала истории - ещё 7 обновлений за 7 месяцев. Сам регулярно пользуюсь приложением - оно добавляет мотивации заниматься спортом дальше, сохраняет график тренировок, следит за объемом выполненных упражнений. На текущий момент в приложении больше 150 зарегистрированных пользователей. Времени на пет-проект уделял крайне мало, но основная функциональность была уже готова ранее. Сейчас на нём можно пробовать что-то новое - получается хороший полигон для испытаний. Исходный код Приложение в RuStore Веб-версия Frontend: Typescript, Vitest, Vite, Vue, Tanstack Query, Vue I18n, Tauri Backend: Typescript, Vitest, Esbuild, Fastify, Mongoose, MongoDB, Swagger

https://habr.com/ru/articles/1021790/

#vue #vuejs #vuejs #петпроект #петпроекты #tauri #мобильные_приложения #javascript #typescript #вебприложения

Frontend Status: свежий дайджест фронтенда и AI — 09.04.2026

Привет! Это 12-й выпуск Frontend Status - дайджеста по фронтенд-разработке. В этом выпуске: 📺 Крупные релизы и видео: Babylon.js 9.0 и доклад Таннера Линсли про TanStack Start. 🤖 AI в проде без розовых очков: как агенты «видят» веб, что не так с персонами в промптах и почему Cloudflare меняет подход к кэшу. 🛡️ Supply chain снова в фокусе: пауза bug bounty в Node.js, кейс с axios и практичные меры защиты зависимостей. 🎨 CSS-практика без магии: containment, sticky по осям, subgrid, dino game и «жидкие» анимации от Темани Афифа. ⚡ JavaScript/TypeScript: главное по JS 2026, новый JSIR от Google и утилиты для View Transitions. 🅰️ Angular-экосистема для AI-эпохи и не только: ngxtension, LLMs.txt в NG-ZORRO и MCP-страница в PrimeNG. 🌎 Веб-стандарты и браузеры: W3C про AI и голосовых агентов, JetStream 3 и MCP-коннектор в Opera Neon. 🖌️ UI/UX и доступность: WebAIM Million 2026, дизайн для людей с тревожностью и разборы про принципы дизайна. …и многое другое.

https://habr.com/ru/articles/1021402/

#javascript #typescript #react #angular #vuejs #css #браузеры

Как я выбирал стек для SaaS-мониторинга сайтов

Как в одиночку собрать полноценный сервис мониторинга с проверками из 10 точек мира, алертами в Telegram/Slack и собственным агентом? Делюсь личным опытом выбора стека: почему FastAPI выиграл у Django, как TimescaleDB справляется с миллионами строк логов и зачем писать агент на Go, если основной код на Python. Только практика, архитектурные решения и честный расчет стоимости инфраструктуры в €11/мес. Изучить стек

https://habr.com/ru/articles/1021000/

#FastAPI #Vuejs #TimescaleDB #SaaS #мониторинг_сайтов #Celery #Go #архитектура #стартап #разработка

Как мы оптимизировали компоненты во фронтенде: работа с версиями и оптимизация процессов

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье я расскажу про организацию работы с версиями и компонентами, оптимизацию рабочего процесса внутри команды, а также опишу несколько лайфхаков, которые мы применили

https://habr.com/ru/companies/kryptonite/articles/1020720/

#оптимизация #frontend #vuejs #библиотеки #packagejson #workflow #конфигурация #сборка_проекта #синхронизация_версий

#Directus layers a blazingly fast #NodeJS API on top of any existing SQL database. No schema changes needed, works with what you already have.

🗄️ Database Freedom:
#PostgreSQL, #MySQL, #SQLite, #MariaDB, MS-SQL, #CockroachDB & #OracleDB — you choose, Directus connects.

🎨 No-Code Admin Dashboard
Built with #VueJS, intuitive and secure. Non-technical users can manage content without any training required.

🔌 Fully Extensible & White-Label Ready

Frontend Status: свежий дайджест фронтенда и AI — 03.04.2026

Привет! Это одиннадцатый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Плейлист по отладке Next.js с Sentry. 🤖 Рэйчел Эндрю и Эдди Османи — два взгляда на AI: когда использовать, а когда координировать целый оркестр агентов. 🛡️ GlassWorm: атака через невидимые Unicode-символы в npm-пакетах и расширениях VS Code. 🎨 CSS Anchor Positioning: два круга, стрелка и ноль строк JS от Темани Афифа. ⚛️ Storybook MCP для React, data-testid как признак недоступности и пошаговые туры через React Joyride. 👁️ Vue Devtools не работает в продакшене? QA-инженер написал свой инспектор. 🌎 Chrome 147 с scoped view transitions, Safari TP 240 и дайджест веб-платформы за март. 🖌️ Осмысленное трение в UX, ARIA-роли для дизайнеров и тест масштабирования шрифтов в Figma. …и многое другое.

https://habr.com/ru/articles/1018828/

#javascript #typescript #react #angular #vuejs #css #браузеры #ux #ui

How to use wa-radio-group with Vue

Previously, we went over how to use wa-card, wa-grid, wa-dropdown, and wa-relative-time. The next post in the Web Awesome/Vue series will be about the wa-radio-group component. This could be useful for wiring up a web form or for writing the interface for a results listing (like the “Buy Now,” “Make an Offer,” or “Auction” interface on eBay). Let’s see what is possible with Web Awesome.

For our first, let’s look at the simplest possible example. There is a horizontal radio button group, a vertical radio button group, colorOptions and foodOptions arrays to control what the radio button groups consist of, and ref objects for selectedColor and selectedFood.

If you add an appearance="button" attribute to the wa-radio blocks, it changes it from looking like a group of buttons instead of radio controls.

You will notice, though, that Vue variables for defining the options and what is selected are fine, but the value for what is selected doesn’t change when you change what is selected. So, how can you do that?

The only change in this final example is the addition of an @change="selectedColor = $event.target.value" attribute. Whenever the selection changes, it fires that and changes the value.

Please feel free to drop a comment if you have a question about any of this.

First example: https://codepen.io/steinbring/pen/WbxweXR/e045e86b81364eca311b9c0982b711c5

Second example: https://codepen.io/steinbring/pen/YPWqKpM/f47bd1b7334c432dc9ad5de93a281adc

Third example: https://codepen.io/steinbring/pen/dPXMWog/9d4c39becfdd948bd43eacc80cca0428

Building a Real-Time Todo App With Jazz and Vue 3, by @alexvue.bsky.social:

https://alexop.dev/posts/building-real-time-todo-app-jazz-vue/

#functionality #vuejs

Building a Real-Time Todo App With Jazz and Vue 3, by @alexvue.bsky.social:

https://alexop.dev/posts/building-real-time-todo-app-jazz-vue/

#functionality #vuejs

Building a Real-Time Todo App With Jazz and Vue 3, by @alexvue.bsky.social:

https://alexop.dev/posts/building-real-time-todo-app-jazz-vue/

#functionality #vuejs

Building a Real-Time Todo App With Jazz and Vue 3, by @alexvue.bsky.social:

https://alexop.dev/posts/building-real-time-todo-app-jazz-vue/

#functionality #vuejs

Building a Real-Time Todo App With Jazz and Vue 3, by @alexvue.bsky.social:

https://alexop.dev/posts/building-real-time-todo-app-jazz-vue/

#functionality #vuejs

Frontend Status: свежий дайджест фронтенда и AI — 27.03.2026

Привет! Это юбилейный десятый выпуск Frontend Status — дайджеста по фронтенд-разработке и AI. В этом выпуске: 📺 TanStack AI генерирует картинки, а не только чат-ботов. 🤖 Почему ИИ выдаёт глупый код — и трёхуровневая архитектура, которая это исправляет. 🎨 Математическая модель masonry-раскладки на Flexbox — с алгеброй, а не «работающим примером». ⚡ TypeScript 6.0, обновления безопасности Node.js, петиция против AI-кода в ядре Node.js и Kafka из Node.js по-взрослому. ⚛️ TanStack улучшил пропускную способность SSR в 5 раз, а Strawberry Browser переписал 130 000 строк с React на Svelte за две недели. 🅰️ Angular выпустила официальные скиллы для AI-агентов. 💚 Компоненты визуализации звука для Vue.js на Web Audio API. …и многое другое. Читать

https://habr.com/ru/articles/1015700/

#javascript #typescript #react #angular #vuejs #css #браузеры

Vue.js Amsterdam 2026: будущее экосистемы Vite

Недавно в Амстердаме прошла конференция Vue.js Amsterdam 2026 — ежегодное мероприятие, посвящённое экосистеме Vite и современным инструментам фронтенд-разработки. В этом году программа оказалась особенно насыщенной. Команда экосистемы показала сразу несколько направлений развития: обновления ключевых инструментов, новые эксперименты в архитектуре фронтенд-фреймворков и попытку собрать полноценную платформу разработки вокруг Vite. В этой статье разберём основные анонсы конференции: Vite 8 , Vite+ , Void Cloud , а также обновления Vue и Nuxt .

https://habr.com/ru/companies/first/articles/1015150/

#vue #vuejs #vite #rolldown #nuxt #nuxtjs #vue3 #vapor #javascript

JMatrixPlatform: как я теперь за 5 минут загружаю данные, на которые другие тратят дни

Рассказываю, как я сделал простейший yaml сервис на Java и Vue для разовой загрузки данных, чтобы не писать тонны кода и не мучиться с JSON. Предыдущая часть: Enovia умерла, да здравствует JMatrixPlatform: пересобираю легендарную платформу на Java и Vue Начинаю короткий цикл с мини-историями разработки JMatrixPlatform. Информации очень много, но я начну с задачи взаимодействия технических специалистов с самой системой и её данными.

https://habr.com/ru/articles/1014236/

#jmatrixplatform #проектирование #программирование #управление_данными #java #vuejs

Что нового в Nuxt? Обзор новых версий

Привет, Хабр! Меня зовут Иван и я занимаюсь frontend-разработкой в компании SimbirSoft. В марте 2026 на официальном сайте Nuxt объявили о выходе новой версии Nuxt v4.4 . В ней произведена миграция на Vue Router v5, добавлена возможность создания пользовательских фабрик useFetch/useAsyncData, типизация пропсов в Layout, новый композабл и компоненты для работы с доступностью, профилирование сборки, улучшение производительности и многое другое. Также в январе вместе с выходом версии Nuxt v4.3 разработчики продлили поддержку Nuxt 3 до 31 июля 2026 года (ранее указывали срок до 31 января 2026 года). Решение было принято после открытия обсуждения , чтобы узнать у сообщества, как прошло обновление с версии 3 до версии 4. Многие отметили, что ждут новостей о сроках релиза Nuxt 5, который должен выйти вместе с Nitro 3, поэтому пока не спешат обновляться на четвертую версию. А пока мы ждем новостей, давайте посмотрим, какие интересные нововведения появились в последних релизах Nuxt. Данная статья — это краткий обзор на новые фичи и изменения, которые мне показались интересными. Жми, чтобы узнать про новые фичи Nuxt🔥

https://habr.com/ru/companies/simbirsoft/articles/1013648/

#Nuxt #nuxtjs #vuejs #обзор

Frontend Status: свежий дайджест фронтенда и AI — 18.03.2026

Привет! Это девятый выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Разговор с Машей Кондрашиной из Авито о том, что в IT больше не спорят из-за технологий. 🤖 VS Code переходит на еженедельные релизы благодаря AI-агентам, Chrome объясняет разницу между MCP и WebMCP, а Эдди Османи вводит термин «comprehension debt». ⚛️ React получает shadcn/cli v4 с режимом для агентов, SvelteKit ловит FOWL, Astro v6 подтягивает данные из API прямо в content collections. 🌎 Chrome 146, Mozilla за анонимность в вебе. 🎨 Брэд Фрост о дизайне в эпоху AI. 📦 Эмпирическое исследование утечек памяти на 500 репозиториях. ...и многое другое.

https://habr.com/ru/articles/1012160/

#javascript #typescript #react #angular #vuejs #css #браузеры

Frontend Memory Leaks: A 500-Repository Static Analysis and Five-Scenario Benchmark Study, by (not on Mastodon or Bluesky):

https://stackinsight.dev/blog/memory-leak-empirical-study/

#memory #react #vuejs #angular #studies

Frontend Status: свежий дайджест фронтенда и AI — 12.03.2026

Привет! Это восьмой выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске — CodePen 2.0 и клон Loom на Next.js в видео; про AI: почему коллекция промптов не заменяет мышление, автоисследования на игровом PC и онбординг через Oncode. Безопасность в центре: Clinejection (4000 машин через GitHub-issue), как GitHub защищает агентские воркфлоу, укорочение срока жизни TLS-сертификатов, веб-агенты, сливающие данные пользователей, и 22 CVE в Firefox после проверки кодовой базы Claude. В CSS — все способы выбрать <html> , война z-index и подводный камень Anchor Positioning; в JS — когда пора переходить на Rust, разбор requestAnimationFrame и постмортем npm-червя Shai-Hulud. По фреймворкам: ретро-компоненты и cron-генератор в React, микрофронтенды в Angular 21. Веб-стандарты: обновление WCAG 3 и отчёт TC39 про ES2026. Браузеры: Chrome переходит на двухнедельные релизы, Edge предлагает атрибут focusgroup . Плюс VS Code 1.111 с инфраструктурой для Copilot-агентов, «убедительный дизайн» и усталость от токенов, TDD в эпоху AI, элемент <geolocation> , AT Protocol под капотом Bluesky и запуск Cursor-агентов из Telegram. Читать

https://habr.com/ru/articles/1009296/

#javascript #typescript #react #angular #vuejs #css #браузеры

Did you know that in #Vue you can pass in a whole object as a prop to a component, where the object properties match the component properties?

So given:

const post = {
id: 1,
title: 'My Journey with Vue'
}

you can do:

<BlogPost v-bind="post" />

which is equivalent to:

<BlogPost :id="post.id" :title="post.title" />

The above example is taken from the official docs:
https://vuejs.org/guide/components/props.html#binding-multiple-properties-using-an-object

I love Vue! ❤️

#WebDev #VueJS #WebDevelopment

Vue DnD Kit v2: революция в мире Drag N Drop для Vue.js

Vue DnD Kit v2: headless drag-and-drop с composable API — делай что хочешь, как хочешь Если вы когда-нибудь пробовали сделать drag-and-drop на Vue по-настоящему гибким — с кастомным overlay, вложенными зонами, multi-drag и анимацией при отпускании — вы знаете, что большинство библиотек держат вас в клетке. Vue DnD Kit v2 эту клетку сломал. И вам это понравится!)

https://habr.com/ru/articles/1007680/

#vuejs #draganddrop #библиотеки #dndkit #vuednd #frontendразработка #dnd #sortable #kanban #tree

How to use wa-relative-time with Vue

Back when we looked at how to use wa-grid with Vue, we ended up with something that had the dates the individual photos were taken.

That is cool, but Web Awesome offers a second option. There is a wa-relative-time component that gives you the amount of time that has passed since that date. Let’s see what that would look like.

Would I use that in a finished product? I’m not too sure. It is always nice to have options, though.

Example: https://codepen.io/steinbring/pen/GgqpmJp/b7435756762bd672ed8865168de94943

In almost every lesson I've watched so far, where template refs are used, the instructors just ignore #Vue's lifecycle hooks (like `onMounted`)! Instead they hack around it by returning early, if the element is not present etc.

https://vuejs.org/guide/essentials/template-refs.html#template-refs

I'm so disappointed by this... 😔

What has happened to #SoftwareEngineering!?

https://floss.social/@janriemer/116071246097861099

#VueSchool #VueJS #WebDev #Teach #Teaching

I like what I built post-2022

I wrote a few years ago about how I future-proofed my online identity by mirroring my writing in 2018 and then moved off of centralized social media in 2022. I now have my social media on JWS.Social instead of Twitter, I have my photos on Photos.JWS and JWS Pictures instead of Instagram, Flickr, and Tumblr, and I have been off of Reddit for years. This means that I don’t need to worry about the platform I am using being used to illegally generate deep-fake child porn, but it also means that I get to control what I can do with my own content. If I decide that I want GIFs.JWS to be available through an RSS feed, Mastodon, and BlueSky, I can do that. You don’t get the ability to do that with a platform like Facebook.

There are new concerns to consider after transitioning from legacy social media. On October 30, 2025, K&T Hosting announced it would cease operations and close by January 15, 2026. As a result, I had to migrate JWS.Social from K&T to Fedihost. Others host their instances on platforms like Akamai Cloud or DigitalOcean. Many users prefer services like Mastodon.Social or Hachyderm. All these options have their advantages and disadvantages. The good thing is that decentralized social media lets you do what you want and change your mind whenever you want.

Back in 2024, I moved JWS.Dev from using VuePress to using VitePress. I also created JWS.Pictures as an experiment to explore what you can do with GitHub Actions. I’m not terribly happy with either, but I do like the automations behind JWS.Pictures, and I like the look of JWS.Dev. I have been exploring Web Awesome and Vue.js here, and I am probably going to try to use both to rewrite the front-end of both websites.

How to use wa-dropdown with Vue

So far in our Web Awesome/Vue series, we have covered wa-card and wa-grid. Two years ago, I wrote about building a photography website (that admittedly had a shitty UI). The important part was the GitHub Actions that were triggered when a new photo was added. The script behind that creates versions of the photo file and appends that photo’s data to the JSON and XML files. Those data files let us fetch the years the photos were taken, the countries where the photos were taken, the years I took photos in each country, and the countries where I took photos for each year. In this post, we will look at how to create a Web Awesome dropdown menu, how to use those values to drive it, and ultimately, how to have both a “years” dropdown and a “countries” dropdown that affect each other.

Web Awesome’s wa-dropdown component is pretty easy to drive from a computed property. Let’s start by populating a dropdown with years from 2018 through the current year.

You don’t need a computed property to populate your dropdown element, though. You can also populate it from a normal array.

In this second example, we are using static values to populate a “Countries” dropdown. I want both a “Years” dropdown and a “Countries” dropdown in the finished project. Let’s see what that would look like next.

Like the first two examples, the third one also has the years as a computed property and the countries as a static array of strings.

If we are going to use this as a display filter for photos, I’m not a prolific enough traveler to have photos from every country every year, and we want to avoid a “no photos found” result, we will need to make one dropdown affect the other. If the user selects “Italy” and I was only in Italy in 2022, it wouldn’t make sense to allow the user to select 2023. In a similar vein, if the user selects 2024 and I was only in Japan, South Korea, and Taiwan in 2024, it wouldn’t make sense to allow them to select Italy.

So, what would that look like?

In this final example, once the user selects a year, the available countries are constrained; once a country is selected, the available years are constrained. There are refs for selectedYear and selectedCountry, enabling a future version where cards display the resulting photos.

First example: https://codepen.io/steinbring/pen/xbOGPBP/ac9a54f9138ab18b67f1dbe6857a0774

Second example: https://codepen.io/steinbring/pen/OPXVzLe/bc980fc7c7c361338016dced1eb78db4

Third example: https://codepen.io/steinbring/pen/emzNypR/91c65d642cd2cbce0fbe81a847ad6fc7

Fourth example: https://codepen.io/steinbring/pen/JoKdMRZ/4215aaa4233159d617233f1084e7c069

Fifth example: https://codepen.io/steinbring/pen/PwzqEpo/192ca335ef8aaff25ca960acf1ee3809

Sixth example: https://codepen.io/steinbring/pen/XJKbQBE/eb43f6c03098dc29b86ee6cfa5e4d890

Seventh example: https://codepen.io/steinbring/pen/XJKbQoY/7892f05989247885434ff3f7e74372f5

Eighth example: https://codepen.io/steinbring/pen/ByzoWWB/f935c8c6b6ad52e1d991a386b5b57a04