Vue-FAQ
939 subscribers
579 photos
92 videos
564 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Почти анекдот получился

Надо было сделать форму сбора данных с пользователя. Ну, заморочился на собственный степпер и валидацию, получилось неплохо

Потратил несколько дней, начальнику показываю. Он так одним глазом смотрит и говорит:

- Это все теперь не надо. У нас будет одна кнопка, пользователь на нее нажимает, и AI чатбот с него всю информацию в режиме голосового диалога собирает. Круто?

Че тут скажешь, конечно круто. Космос, ёпта...

#meme
😁6👍2
Кое-что новое

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

<!-- <MyComponent> template -->
<div>
<slot :text="msg"></slot>
</div>

<MyComponent v-slot="{ text }">
{{ text }}
</MyComponent>


Часто нужно и событие из слота переслать в ребенка. Напрямую сделать это нельзя, но можно также пропсом передать слоту ссылку на метод в ребенке, который тот и вызовет по событию:

<!--   FormField   -->
<script>
const touched = ref(false);
</script>

<template>
<div class="form-field">
<slot :touch="() => { touched = true }" />
...
</div>
</template>

<!-- использование -->
<FormField v-slot="{ touch }">
<BaseInput @input="touch()" />
</FormField>


Этот хак бывает очень полезен и не выходит за рамки правила: "Пропсы вниз, события вверх".

#tip #slots
👍19
В комментариях снова загорелись огни миниско-климовской войны, захотелось порассуждать

Курсы надо отделать от их авторов. Не полностью, но всё же.

Сравнивать Климова и Минина некорректно, потому что к Климову в техническом плане хоть и есть вопросы и несогласие с чем-то, но у него есть Curriculum Vitae ("жизненный путь") в разработке ПО. Есть определенные знание и опыт.

Минин же - это боец ММА с 2-3 годами опыта просто говорящая голова, читающая по суфлеру, что дают, и основная задача которого - получение прибыли на чем угодно и вне зависимости от последующих успехов учеников.

Так же как с начиткой художественного произведения для аудиокниг, - чтец может как подчеркнуть его красоту, так и полностью испортить впечатление от него. И зачастую, это субъективно для слушателя.

А вот сравнивать курсы и их пользу можно. Но я не буду, потому что нет статистических данных. Неоспоримая польза от миниских курсов это появление конкуренции, что на рынке всегда хорошо. И неявная польза для Климова (если, конечно, ему важней репутация, чем заработок) - избавление от конкретных вкатунов, которым милее мининский подход.

То есть, если выбирать из этих двоих что-то типа ментора, ответ очевидный. Если смотреть на курсы - уже не такой очевидный.

Как вообще учиться IT?

Хорошие проверенные временем книжки. Хорошие бесплатные курсы от проверенных авторов, в том числе, университетов типа МГУ и MIT (#learning). Сообщество, где можно задать вопрос. Желание познавать.


#learning #minin #klimov
👍51🤔1
Компоненты Vue могут иметь статичные метаданные:

// LiveUsersWidget.vue
<script setup>
defineOptions({
columns: 3,
});
</script>


import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;


Варианты использования:

- Сохранение номеров версий для отдельных компонентов
- Пользовательские флаги для инструментов сборки, чтобы по-разному обрабатывать компоненты
- Добавление кастомного функционала к компоненту, помимо стандартного из Options API и т.д.

#tip
🔥11
Вышла Vue 3.5.0-alpha5

В ней уже есть useTemplateRef - функция, заменяющая нынешний способ определения шаблонного рефа (template ref).

Основные проблемы старой реализации - неочевидность привязки переменной в скрипте по имени к элементу в шаблоне и неудобство использования шаблонного рефа в composable функциях.

Теперь привязка будет по строковому ключу

#vuejs
👍10🔥1
– А потом отрубили Youtube
– Почему?
– В том-то и дело, что непонятно. В этот раз даже объяснять ничего не стали. Раньше в таких случаях хотя бы про тлетворное влияние Запада или импортозамещение говорили из уважения к публике. А теперь вообще никакой подтанцовки. Иноагенты особо не шалили, Google, что просили, блокировал. Просто женщина-теледиктор в синем жакете объявила тихим голосом, что с завтрашнего дня Youtube-a не будет. И никто не посмел возразить.


#esse
🤡7😢5💩3😁2
Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance
👍2
const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

y = y + 1;
console.log(y);


Немного JavaScript

В каких случаях результат вывода будет различным?

#js #challenge
👍3
Как вы форматируете код?
Anonymous Poll
61%
Prettier
62%
ESlint
17%
Руками
2%
Иначе (в комментариях)
Пробуем определить лучший форматтер.

Судя по опросу, половина пользователей ESlint как и я доформатирует еще по надобности и Prettier-ом. Второй вопрос - если вы используете ESlint, то как?
Anonymous Poll
74%
Через `eslint-config`
22%
Настраиваю плагины вручную
5%
Другое (комментарии)
This media is not supported in your browser
VIEW IN TELEGRAM
В комментариях меня ознакомили с Антоном Ларичевым и его PurpleSchool

На Youtube много видео, оставляет приятное впечатление компетентного человека. Vue почти нет, но много фронтенда (HTML, CSS, JS/TS, сопутствующие технологии)

Есть курсы, цены на них копеечные (по сравнению с одним бойцом ММА)

Не реклама

#learning #nereklama
🔥19🤣3💯2😁1
Предыстория к картинке выше: в issues ms/vscode кто-то написал, что падение TS Server может вызываться расширением Volar.

Эта, другие слова нежели "истеричка" на находятся, заявила, что он прекращает разработку и поддержку расширения в VS Code и переключается на JetBrains

Это далеко не первый раз, когда Volar не работает из-за каких-то "багов" в VS Code, TS плагинах и даже Node.js.

Честно говоря, для меня дико, что кто-то, выпускающий плохой, но распространенный продукт, постоянно обвиняет в своих неудачах инструменты, которыми он пользуется.
Почему нельзя использовать только стабильный функционал VS Code и TS?

Почему стратегические решения для Vue принимаются из-за нервных срывов отдельных лиц, которые, кстати, уже получают приличные деньги за свою работу, плюс известность позволяет ему работать на коммерческих проектах с повышенной ставкой?

Почему бОльшая часть времени разработки жутко баггованного и нестабильного Volar сейчас уходит на поддержку других фреймворков, а не Vue? Почему их грёбаная un-экспансия идет ценой Vue?

И бранная лексика в твитах допустима только для людей уровня Линсуса Торвальдса. По крайней мере, в цивилизованном мире. Этот твит выглядит кринжово для представителя серьезной организации или бизнеса.

Also, a big thank you to Astro and JetBrains for generously donating ten thousand dollars, allowing us to focus entirely on development without worrying about anything else.

Также большое спасибо Astro и JetBrains за щедрые пожертвования в размере десяти тысяч долларов, что позволило нам полностью сосредоточиться на разработке, не заботясь ни о чем другом.


Это цитата Джонсона. Не в этом ли причина? JetBrains, не сумев сама написать тулинг для Vue, просто переманила деньгами разработчика? Очень дерьмовая история.

И, кстати, Astro и JetBrains это не основные спонсоры Джонсона. И все равно он время от времени вылазит в медиа пространство и оскорбляет, ноет и эмоционально шантажирует миллионы пользователей.

#volar #jetbrains #vscode
😐5😱4👍1
В стандарте HTML давно появился <dialog> элемент и относительно недавно Popover API для модальных окон и всплывающих меню.

Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.

Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через transition.

Тут пример создания CSS анимации для всплывающих элементов через keyframes.

#popoverapi #css
👍10
И чтобы закончить с Popover API - сайдбары и выезжающие боковые шторки можно делать тоже на нем

#popoverapi
👍4
В комментариях подсказали еще один eslint-config, сильно упрощающий настройку линтинга и форматирования кода - @sxzz/eslint-config,

По сравнению с eslint-config от Anthony Fu у него более строгие ESlint правила (от unicorn и perfectionist), которые заставляют писать более эффективный код, а для форматирования используется Prettier.

Поставил - пока положительные впечатления. Форматирует везде и неплохо. Не нужно поправлять вторым форматтером.

#eslint #prettier #eslintconfig
👍81
1. Инструментарий Vue всегда был лучше в VS Code, чем в Webstorm. Официальная документация рекомендует именно VS Code.
2. Джонсон Чу стал мейнтенером Volar
3. Джонсон Чу получает большие спонсорские гранты от JetBrains (как минимум 10 тысяч долларов).
4. Инструментарий Vue в VS Code превращается в кошмар
5. Поддержка Volar других фреймворков становится более важной для разработчика, чем поддержка Vue
6. Джонсон Чу регулярно публикует истеричные и оскорбительные посты о том, насколько глючен VS Code и насколько безответственны и некомпетентны его разработчики.
7. Джонсон Чу официально объявляет, что он фокусируется на Webstorm, оскорбившись на небезосновательное предположение, что VS Code может сломаться из-за некоторых его расширений.
8. Кто в выигрыше? Один конкретный человек и одна компания?

На это перечисление фактов (с моей точки зрения), воспринятое как наезд, даже вынужден был ответить представитель JetBrains:

Привет, адвокат разработчиков из JetBrains. Все уже было разъяснено несколько раз, но я просто хочу поделиться своей точкой зрения на эти вещи.

Части нашего плагина Vue действительно зависят от Volar и, следовательно, неотъемлемо от работы Джонсона. Люди используют наши инструменты для разработки Vue, поэтому у нас есть несколько стимулов для поддержания Volar как проекта. В будущем от Volar будет зависеть еще больше плагинов. Именно по этой причине мы решили спонсировать Volar. Мы также спонсируем другие проекты с открытым исходным кодом, от которых мы зависим (например, Vite, ESLint, pnpm, ...).

Помимо спонсорства, мы поддерживаем активную связь с Джонсоном и другими сопровождающими Volar, чтобы обсуждать проблемы, с которыми мы сталкиваемся, или проблемы, о которых сообщают на их стороне. Мы также предоставили несколько воспроизведений или исправлений замеченных нами проблем. Такое взаимодействие также не является чем-то уникальным, у нас есть подобные каналы связи с другими проектами (например, Angular, Astro, prisma, NX, ...).

При всем этом мы никогда не поощряли Джонсона использовать WebStorm, это полностью его собственное решение. Судя по тому, как с ним обращались, я не удивлен этим решением, и это явный признак того, что нам, как сообществу, нужно гораздо лучше относиться к сопровождающим OSS.


Неубедительно, особенно учитывая, что они с Джонсоном одновременно отреагировали на пост спустя двое суток после его публикации, но ок (c).

#volar #jetbrains #vscode
👏7🤡4🤬3😐2👎1
JavaScript worker threads / Web workers — это мощный функционал, доступный в современных веб-браузерах, а также в Node.js, Deno и Bun, который позволяет создавать независимые потоки выполнения в одной JavaScript-среде. Эти worker threads работают параллельно с главным потоком, позволяя приложению выполнять ресурсоемкие операции или обрабатывать сетевые запросы без блокировки пользовательского интерфейса.

Преимущества использования worker threads:

Повышенная отзывчивость: Передавая длительные задачи на worker threads, главный поток остается свободным для обработки пользовательских взаимодействий и обновления интерфейса. Это приводит к более плавному и отзывчивому пользовательскому опыту.

Повышенная производительность: Worker threads могут использовать несколько ядер современных процессоров, что позволяет параллельно выполнять ресурсоемкие задачи.

Эффективный обмен данными: В отличие от дочерних процессов, worker threads совместно используют память с главным потоком. Это позволяет эффективно передавать большие структуры данных между потоками, снижая необходимость дорогостоящей сериализации и десериализации.

Модульный код: Worker threads способствуют модульной организации кода. Мы можем изолировать сложные задачи в отдельных worker-скриптах, улучшая поддержку и повторное использование кода.

Варианты использования:

1. Ресурсоемкие вычисления

Представьте, что у нас есть сложная математическая формула для расчета данных по нескольким точкам. Непосредственное выполнение этого на главном потоке заблокирует пользовательский интерфейс и сделает наше веб-приложение неотзывчивым. Такие задачи идеально подходят для worker threads.

2. Обработка изображений/видео

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

3. Анализ данных

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

4. Фоновые задачи

Представьте, что у нас есть веб-приложение, позволяющее пользователям сохранять свою работу в процессе. Постоянное сохранение данных на сервере во время редактирования может быть неэффективным и потенциально замедлить пользовательский интерфейс. Worker thread можно использовать для обработки фоновой функции сохранения.

5. Приложения в реальном времени

Приложения в реальном времени требуют постоянного общения с сервером для обновления пользовательского интерфейса последней информацией. Worker threads могут быть полезны для управления этими соединениями и обработки входящих данных без блокировки главного потока, ответственного за отрисовку пользовательского интерфейса.

#js #workerthreads
👍13
Интересный случай рассказали.

Человек прошел Школу 21 от Сбера, попал туда на стажировку на 1.5 месяца с зарплатой 100К в месяц, а после предложили джуниорскую позицию на 120К.

Не думал, что когда-то буду рекламировать Сбер, но это один из правильных способов вкатиться в IT - то есть, когда есть желание, но нет релевантного образования, знаний и опыта.

Обучение в школе очное, доступно во многих городах, бесплатное и длится от 1.5 до 3 лет. С трудоустройством Сбер помогает, и не только в себя.

#learning #jobs
👎19👍7💊1