Душный Вуй @stuffy_vuejs Channel on Telegram

Душный Вуй

@stuffy_vuejs


Немного душные, но ламповые заметки о Vue.js

#vuejs #vue #nuxt #vuex #pinia #вью

Душный Вуй (Russian)

Душный Вуй - это Telegram-канал, который предлагает немного душные, но ламповые заметки о Vue.js. Если вы увлечены этим JavaScript-фреймворком и хотите узнать больше о его особенностях, то этот канал для вас. Здесь вы найдете полезные советы, инсайты и обсуждения о Vue.js, Nuxt, Vuex, Pinia и многом другом. Размещаются не только технические статьи, но и интересные факты о мире разработки веб-приложений с использованием Vue.js. Подписывайтесь на канал "Душный Вуй" и оставайтесь в курсе всех новинок и трендов в мире Vue.js! #vuejs #vue #nuxt #vuex #pinia #вью

Душный Вуй

20 Nov, 16:59


Допустим видео, простихоспаде

Создаём сайт на Vue.js, Nuxt Studio, Nuxt Content, and Nuxt UI

https://www.youtube.com/watch?v=llnFaQqEM8E&ab_channel=ThisDotMedia

Душный Вуй

20 Nov, 16:51


Ну вы гляньте на них, надонатили почти бакс 🤩 😅

Душный Вуй

20 Nov, 14:59


https://masteringnuxt.com/blog/controlling-when-components-are-loaded-in-nuxt?friend=MOKKAPPS

Контролируем загрузку компонентов в Наксте ребятушки

Душный Вуй

20 Nov, 11:59


https://dev.to/jacobandrewsky/using-cache-control-in-nuxt-to-improve-performance-565o

Про кеширование в Наксте

Душный Вуй

20 Nov, 09:35


Немного про авторизацию в Наксте
https://soubiran.dev/posts/nuxt-going-full-stack-how-to-handle-authorization

Душный Вуй

20 Nov, 09:35


https://github.com/hsa00000/Urocissa

Галерейка на Вую

Душный Вуй

19 Nov, 07:06


Еще одно интервью Эвана о Vue, Vite, VoidZero будущем JavaScript Tooling

#evanyou #video #interview

Душный Вуй

15 Nov, 10:04


В чате vuejs_ru вчера прошла короткая дискуссия о вредности и ненужности :deep(). Типа его можно заменить на установление путем JS в 2 строчки класса на внутреннем компоненте.

Попросил привести пример в случае, если container query во внешнем компоненте меняет flex-direction во внутреннем - абсолютно реальный use-case.

Возможно, конечно, но две строчки CSS превращаются в кучу громоздкого уродливого JS с огромными потерями в производительности.

:deep() - это инструмент, пользоваться им надо умело, и не будет никаких проблем. Если ты постоянно пытаешься, ограничивая инструментарий, сделать защиту от дурака, то ты этих дураков и плодишь.

CSS - это уровень представления вашего приложения, его функционал давно выходит за пределы только простенькой адаптивности, анимации и цветовых тем. В CSS тоже есть логика, и перекладывать её работу на JS нецелесообразно.

CSS
всегда на порядки быстрей JS в браузерах. И поэтому использование JS вместо CSS как минимум очень сильно бьет по производительности, да еще и замусоривает скриптовую секцию вашего SFC.

Когда мне надо в проекте сделать свой небольшой UI kit, я обычно size=large в BaseButton передаю не пропсом, а CSS классом. Потому что эта штука принадлежит именно уровню представления - то есть, CSS. И потому что приложение так будет работать быстрее, а SFC получается проще, чище и понятней.

Да, это нельзя TS типизировать для получения подсказочек в IDE. Но мир не сошел с ума на этих подсказках, кому-то надо просто писать производительные читабельные приложения, и заглядывание во внутреннюю документацию или исходник компонента вполне решает проблему подсказок.

TS для разработчика, а не разработчик для TS.

#css

Душный Вуй

12 Nov, 05:37


В прошлом посте было сразу несколько анонсов (кстати, 3.14.1 не вышел, но патч вышел — как же так?). Теперь немного подробнее

🍿12-13 ноября будет Nuxt Nation — конференция, на которой будет много знакомых лиц и немного незнакомых. Обещают рассказать про Nuxt, про Nuxt UI, про повышение перформанса, разработку мобильных и local-first приложений.

✏️Кроме того, анонсировали 45-минутную панель с core-командой Nuxt'а на тему будущего фреймворка и экосистемы. Вопросы принимаются уже сейчас, но, возможно, можно будет их задать и на самой встрече.

Надеемся на стрим без лагов в этом году!

Душный Вуй

07 Nov, 13:10


Неплохая статья о Vapor

#article #vapor

Душный Вуй

07 Nov, 05:38


В прошлом посте было сразу несколько анонсов (кстати, 3.14.1 не вышел, но патч вышел — как же так?). Теперь немного подробнее

🍿12-13 ноября будет Nuxt Nation — конференция, на которой будет много знакомых лиц и немного незнакомых. Обещают рассказать про Nuxt, про Nuxt UI, про повышение перформанса, разработку мобильных и local-first приложений.

✏️Кроме того, анонсировали 45-минутную панель с core-командой Nuxt'а на тему будущего фреймворка и экосистемы. Вопросы принимаются уже сейчас, но, возможно, можно будет их задать и на самой встрече.

Надеемся на стрим без лагов в этом году!

Душный Вуй

06 Nov, 07:51


#инструмент дня

Я, конечно, прошу прощения за неожиданную иллюстрацию к посту, но у меня примерно сейчас такие вот ощущения от либы, про которую хочу рассказать :)

И называется она, какая неожиданность, cigs.

Ну, буквально: 🚬 cigs

Сразу ссылка: https://github.com/cigs-tech/cigs

Итак, что же она делает.

А она позволяет задавать вопросы по заданной Zod-схеме обычным человеческим языком используя OpenAI-токены!

Короче, ещё более просто. Описываешь некую схему объекта, а потом спрашиваешь у системы: "А какой там любимый цвет у Джона?". И получишь ответ!

Пример:
function getUserCompliment(username: string) {
const colorMap = {
"Alice": "blue",
"Bob": "green",
"Charlie": "red",
};
return {
color: colorMap[input.username as keyof typeof colorMap] || "unknown",
};
}

const userInfoSchema = z.object({
username: z.string(),
});

// Define a cig to get a user's favorite color
const getFavoriteColor = cig("getFavoriteColor", userInfoSchema)
.handler(async (input) => {
// Simulated database lookup
return getUserCompliment(input.username);
});

// Usage example
(async () => {
try {
const result = await getFavoriteColor.run(
"What is the favorite color of Alice",
); // { color: 'blue' }
console.log(result);

const result2 = await getFavoriteColor.run(
"What is the favorite color of Susan",
); // { color: 'unknown' }
console.log(result2);

// You can also call that function with the specified input
const result3 = await getFavoriteColor.run({ username: "Alice" }); // { color: 'blue' }
console.log(result3);
// Expected output: { username: 'alice', favoriteColor: 'blue', compliment: 'You have great taste!' }
} catch (error) {
console.error("Error:", error);
}
})();


Вы вообще понимаете, что это значит для тех, кто пишет парсеры или генераторы фейковых данных? :)

Вытащить все спец предложения с "красной ценой" со страницы интернет-магазина? Да запросто! Даже если этот самый магазин обфуцирует код.

Или использует Styled Components.

Пройдите на страницу библиотеки и почитайте примеры. Это нечто потрясающее.

#ai #parser

Душный Вуй

06 Nov, 05:51


Вот такие новости. Опять новогодние подарки обещают

Возможно для небольших проектов можно будет полноценно использовать Rolldown уже совсем скоро

P.S. EOY - конец года

#rolldown

Душный Вуй

05 Nov, 11:56


#vue #критика

UI для мультиплеерного мода M&B:Bannerlord
Без адаптива (не нужен)
Авторизация через Steam/Xbox/Epic (чтобы увидеть все разделы)
Много unit-тестов

Автор: @zohan333

Web: https://c-rpg.eu/

https://c-rpg.eu/strategus/ - WIP режим глобальной карты

GitHub: https://github.com/namidaka/crpg

Душный Вуй

04 Nov, 17:28


Это наша последняя гонка...
Вышел Nuxt 3.14 и прям в релиз-ноутах сделали анонс предстоящего Nuxt 3.15

🐊 В сборщиках пополнение — добавился rspack. Если вы использовали webpack до этого, дайте шанс новичку
🌿 Новая папка shared для переиспользуемого кода между server- и app-частью вашего приложения. Держите видеообъяснение.
🥳Подкапотные инструменты тоже обновили. Свежий Nitro 2.10, Jiti v2 сделают ваш проект выше, быстрее, сильнее бесплатно.

В композаблах добавили useResponseHeader (понятно, для чего) и useRuntimeHook (чтобы хуки регистрировались и разрегистрировались вместе с жизненным циклом)

Для модулей в этот раз немного — добавили только addServerTemplate, чтобы генерировать файлы из кода, которые потом будут использоваться в Nitro

❗️Ну и пара изменений для будущего v4 (ожидается, что его покажут на конференции Nuxt Nation) 12 ноября: изменили названия для автоимпортируемых компонентов, и поменяли принцип сканирования метадаты на страницах, которая описана в definePageMeta(). Чтобы это у вас сработало, не забудьте выставить в конфиге { future: { compatibilityVersion: 4 } }

Будет 3.14.1?

Душный Вуй

02 Nov, 06:29


#vue #критика

Это конешна не опенсорс, но что прислали, то и показываю)

Автор: @Alexshir1993
Сайт: https://vib-online.ru

Душный Вуй

01 Nov, 10:14


#vue #критика

Продолжаем, на очереди у нас приложенька для подсчета стоимости вашей работы)

Автор: @z1kYz3r
Web: https://time2money.zq.lt
Chrome extension:
https://chromewebstore.google.com/detail/time-to-money-calculator/hmlelnagnhidpaifchocofnbikmpipmb
Github: https://github.com/zikju/time-to-money-calculator

Душный Вуй

31 Oct, 06:58


#vue #критика

Продолжаем смотреть ваши проектики, на очереди у нас кнопочка поделиться в соц. сетях с гигантским количеством вариантов 👀

Автор: @webistomin
Код: https://github.com/webistomin/vue-socials
Сайт: https://vue-socials.vercel.app/

Душный Вуй

30 Oct, 11:53


#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-swipe-sheet
Github: https://github.com/CodeXiD/vue-swipe-sheet

Душный Вуй

30 Oct, 11:51


#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-histogram-dual-range
Github: https://github.com/CodeXiD/vue-histogram-dual-range#readme

Душный Вуй

29 Oct, 06:15


#vue #критика
Продолжаем обозревать ваши проекты, на очереди у нас целое радио)

Автор: @AlAstroMoody
Код: https://github.com/AlAstroMoody/radio
Приложение: https://alastromoody.github.io/radio/

Душный Вуй

28 Oct, 08:23


Так, шобы не заспамливать канал, буду по 2-3 проекта ваших в день выкидывать постами сюда 🙏

Душный Вуй

28 Oct, 07:37


#vue #критика

Автор: @Gitm4n
Ссылка: https://github.com/GitM4n/rick-and-mory-v2/tree/master
Сайт: https://rick-morty-v2.netlify.app/

Душный Вуй

28 Oct, 07:35


#vue #критика

Автор: @sultondev
Ссылка: https://www.npmjs.com/package/vue-hover-effect
Ссылка на борду: https://volta.net/sultondev/vue-hover-effect

Душный Вуй

28 Oct, 07:04


Душный Вуй pinned «Ребятки, если у вас есть пет-проект (а может и не пет, сайт, библиотека, приложение, пофиг вапще) на вую или наксте и вы хотите получить критику сообщества, смело присылайте, выложу в качестве отдельного поста 😘»

Душный Вуй

28 Oct, 06:52


#vue #критика

Автор: @Indy660
Ссылка: https://github.com/Indy660/player_with_my_favorite_music
GH Pages: https://indy660.github.io/player_with_my_favorite_music/#tab=all&track=0

Душный Вуй

28 Oct, 06:51


#vue #критика
Автор: @avenikolay
Ссылка: https://github.com/avenikolay/5bukv-vue

Душный Вуй

28 Oct, 06:51


#vue #критика
Автор: @teleskop150750
Ссылка: https://github.com/oku-ui/primitives

Душный Вуй

28 Oct, 06:37


Ребятки, если у вас есть пет-проект (а может и не пет, сайт, библиотека, приложение, пофиг вапще) на вую или наксте и вы хотите получить критику сообщества, смело присылайте, выложу в качестве отдельного поста 😘

Душный Вуй

25 Oct, 14:52


Большое интервью Эвана Ю о Voidzero

Есть субтитры на русском

#evanyou #voidzero

Душный Вуй

23 Oct, 11:15


https://youtu.be/bYev7pR38o0

Душный Вуй

21 Oct, 11:28


#инструмент дня

Тут на днях разработчики библиотеки для drag-n-drop react-beautiful-dnd объявили о прекращении разработки и пометили библиотеку как устаревшую.

Это значит, что теперь при попытке установить её вы получите предупреждение от npm, а 30 апреля 2025 года будет архивирован и репозиторий.

Но было бы странно, если бы всё просто растворилось в воздухе, правда же?

Поэтому, встречайте: Pragmaric Drag&Drop от Atlassian!

react-beautiful-dnd так-то тоже от Atlassian

Репозиторий: https://github.com/atlassian/pragmatic-drag-and-drop
Документация: https://atlassian.design/components/pragmatic-drag-and-drop/about

Дока прекрасная, очень советую.

Разработчики переосмыслили весь опыт, полученный при разработке react-beautiful-dnd и применили его в новом проекте.

И, прежде всего, Pragmatic D&D — не зависит от фреймворка!

Весь рендеринг на вашей стороне, а сама библиотека щедро усыпает всё событиями и нивелирует разницу имплементаций между браузерами. А ещё онв потрясающе маленькая!

И да, естественно именно Pragmatic используется в Trello, Jira и Confluence.

В общем, король умер, да здравствует король!

#ui #dnd

Душный Вуй

08 Oct, 08:21


#видео дня


Итак, системы сборки проектов. Бандлеры, по простому. Старые и современные. От Webpack до OXC.

Зачем были нужны и как появились. Как развивались и при чём тут Rust. Почему oxc быстрее swc в пять раз, но это не всегда имеет значение.

На всё это отвечает Девон Говетт, создатель Parcel.js и разработчик проектов React Aria и React Spectrum в Adobe: https://www.youtube.com/watch?v=JUS6EPMbk0U&feature=youtu.be

Очень погружающая лекция, затрагивающая даже архитектуру проектов, чтобы было что сравнивать.

Если вы, котаны, запутались в JS-тулинге — вот самое оно.

#js #bundler #swc #webpack

Душный Вуй

08 Oct, 07:52


🎉 19 октября – последний шанс влететь на митап reWorked в 2024 в Мск.

100% ты слышал об этих тусовках. Это знак — пора наконец вписаться и тебе.

Выезжаем на сутки в загородный дом с десятками кайфовых айтишников. В неформальной обстановке под пивко слушаем пару классных спикеров, далее от организаторов – развлекательная программа, баня/сауна, бар, блюда и чилл в ламповой компании хоть до рассвета.

💬 Для друзей из MSK VUE.JS скидка 10% на билет по промокоду ВУЯЧ.


📌 В стоимость билета входит:

🔸 Аренда загородного дома
🔸 Конференц-часть: выступления спикеров
🔸Безлимитный алко/безалко бар
🔸 Горячие блюда и закуски
🔸 Интерактивы, настолки
🔸 Сауна
🔸 Караоке, дискотека и безудержный движ



🎟️ Билеты тут.
➡️ Подробнее — в группе сообщества.

Душный Вуй

04 Oct, 20:12


Анонс VoidZero — следующее поколение инструментария для JavaScript / Хабр
https://habr.com/ru/companies/first/articles/847514/

Душный Вуй

04 Oct, 19:55


https://blog.openreplay.com/event-handling-in-popular-frameworks/

Душный Вуй

04 Oct, 19:50


https://nuancesprog.ru/p/17309/

Душный Вуй

03 Oct, 14:41


Короче народ, если кто-то смотрит конфу, кидайте в комменты интересные моменты с хештегом #viteconf и я сюда их буду от вашего имени публиковать 😘

Душный Вуй

03 Oct, 14:34


Эван заявляет, что ядро Вуй 3.5 на новой обвязке бандлится за секунду 💪

Душный Вуй

03 Oct, 14:28


Хоспаде, 11 часов конференции, Эван пощади ⚡️

Душный Вуй

03 Oct, 13:48


#vite #vue

Го смотреть конфу ViteConf
https://viteconf.org/live

Душный Вуй

02 Oct, 10:49


Новость, о которой на прошлой неделе говорил Эван, и которую не угадал никто (ну и я её явно в опрос не догадался поставить)

Эван создал компанию, которая будет делать "an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem" (ну то бишь как сейчас bun или deno только без js движка), и в первом раунде поднял $4.6 млн за нее (то есть продал инвесторам процентов 10-20 её акций за эту сумму)

Это очень хорошая новость. Я давно говорил, в том числе Эвану, что Vue давно перерос уровень любительского опен-сорса, и ему нужен бэкап в форме бизнеса. Потому что смотреть на депрессивные каминг-ауты Энтони, или нытье Джонсона про mucho trabajo poco dinero, или заброшенный по той же причине Vapor совсем не комильфо.

В итоге, Эван оформил права на Oxc и Rolldown на созданную компанию VoidZero Inc и продал ее часть инвесторам. Vue экосистема не затронута вообще. То есть, работа Эвана над этими новыми проектами за прошлый год оценена рынком миллионов так в 20. Нормально.

Разработчики, работающие над Vue или Vite, скорей всего будут сотрудниками этой новой компании и будут получать там зарплату за свою работу - это и называется бэкап бизнесом.

То, что Эван никому не отдаст Vue, можно было не сомневаться. Его пост настоятельно рекомендуется к прочтению.

Кстати, посмотрите внимательно на сайт voidzero.dev. Это пример того, что может VitePress.

Ну и название зачетное.

#evanyou #vitepress #rolldown #voidzero #oxc

Душный Вуй

01 Oct, 17:15


А вот и то что анонсил эван
https://voidzero.dev
https://github.com/voidzero-dev

Душный Вуй

01 Oct, 15:35


https://youtu.be/E33R-HaXMsE

Душный Вуй

24 Sep, 12:07


🔍 С Vitest ваше тестирование в Vite станет легким и эффективным

Vitest – тест-раннер, который идеально интегрируется с Vite, делая процесс тестирования быстрым и интуитивно понятным.

Читать...

Душный Вуй

23 Sep, 18:51


Интересный Youtube канал по Vue - LearnVue

Последнее видео - про новый функционал Teleport-а во Vue 3.5

#learning #video

Душный Вуй

23 Sep, 07:26


https://vue-data-ui.graphieros.com/

Душный Вуй

21 Sep, 07:31


Динамические лейауты с Vue jsx: руководство по созданию поддерживаемых компонентов

Посмотрите, как динамические лейауты c Vue jsx могут оптимизировать процесс разработки, сделав ваши компоненты более гибкими.

https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/

Душный Вуй

20 Sep, 17:42


https://habr.com/ru/companies/ozontech/articles/844074/