Все браузеры кроме
#animation
Firefox
поддерживают View Transitions API - это примерный аналог анимаций Transition
во Vue.js
#animation
MDN Web Docs
View Transition API - Web APIs | MDN
The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app…
Распространенные ошибки при работе с Vue
- Упущение
-
- Неправильное наблюдение (
- Замена реактивного состояния неправильным способом
- Изменение пропсов
- Забывание ручной очистки
- Ожидание, что изменения в нереактивных зависимостях вызовут обновления в реактивных переменных
- Не рассматривание для использования
- Деструктуризация
- Вызов
- Использование
- Ненужные ручные манипуляции с
#tip
Omitting the Key Directive on v-for
Prop Drilling
Watching Arrays the Wrong Way
Replacing Reactive State the Wrong Way
Unintentionally Mutating Props
Forgetting to Clean Up Your Manual Event Listeners
Expecting Changes to Non-Reactive Dependencies to Trigger Updates
Not Considering TypeScript
Destructuring Reactive Data
Calling Composables in the Wrong Place
Using v-html with User Provided Data
Unnecessary Manual DOM Manipulation
- Упущение
key
директивы для v-for
-
Prop Drilling
- Неправильное наблюдение (
watch
) за массивами - Замена реактивного состояния неправильным способом
- Изменение пропсов
- Забывание ручной очистки
Event Listeners
- Ожидание, что изменения в нереактивных зависимостях вызовут обновления в реактивных переменных
- Не рассматривание для использования
TypeScript
- Деструктуризация
Reactive
данных - Вызов
composables
в неправильных местах- Использование
v-html
с данными, полученными от пользователя- Ненужные ручные манипуляции с
DOM
#tip
👎4👍2🔥2❤1
В решениях Избиркома РФ попадаются такие фразы:
Вот так. Теперь мы, значит, программные изделия точим...
#meme
...обеспечить возможность использования специализированного программного изделия для подготовки документов на бумажном носителе и в машиночитаемом виде, представляемых в избирательные комиссии при проведении выборов депутатов...
Вот так. Теперь мы, значит, программные изделия точим...
#meme
😁2🤮1💩1
Я полез по форумам и документации. Начал натягивать это все на глобус конкретного проекта и столкнулся с тем, с чем сталкивается, кажется, 100% (??) команд – что такое фича? чем фича отличается от энтити? А вот этот вот конкретный кусок кода – это что? Куда его положить? На форумах горели костры священных войн. Одни говорили, что в документации все написано, другие кричали, что определения некорректны. Третьи спорили, что куда и в каком виде можно вкладывать.
В итоге, сложилось ощущение, что FSD к нам пришел, как Троянский конь к воротам Трои и за красивой оберткой скрывается потенциальный портал в ад и бесконечные споры в команде. Это мне точно не подходило.
Бесценный опыт IT команды Спортмастера с
FSD
#fsd #architecture
🔥12🤔2💯2🤷♂1👍1🌚1
Почти анекдот получился
Надо было сделать форму сбора данных с пользователя. Ну, заморочился на собственный степпер и валидацию, получилось неплохо
Потратил несколько дней, начальнику показываю. Он так одним глазом смотрит и говорит:
- Это все теперь не надо. У нас будет одна кнопка, пользователь на нее нажимает, и AI чатбот с него всю информацию в режиме голосового диалога собирает. Круто?
Че тут скажешь, конечно круто. Космос, ёпта...
#meme
Надо было сделать форму сбора данных с пользователя. Ну, заморочился на собственный степпер и валидацию, получилось неплохо
Потратил несколько дней, начальнику показываю. Он так одним глазом смотрит и говорит:
- Это все теперь не надо. У нас будет одна кнопка, пользователь на нее нажимает, и AI чатбот с него всю информацию в режиме голосового диалога собирает. Круто?
Че тут скажешь, конечно круто. Космос, ёпта...
#meme
😁6👍2
Кое-что новое
В отношениях родитель-ребенок-слот содержимому слота ребенок может передавать пропсы, как указано в документации:
Часто нужно и событие из слота переслать в ребенка. Напрямую сделать это нельзя, но можно также пропсом передать слоту ссылку на метод в ребенке, который тот и вызовет по событию:
Этот хак бывает очень полезен и не выходит за рамки правила: "Пропсы вниз, события вверх".
#tip #slots
В отношениях родитель-ребенок-слот содержимому слота ребенок может передавать пропсы, как указано в документации:
<!-- <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
В комментариях снова загорелись огни миниско-климовской войны, захотелось порассуждать
Курсы надо отделать от их авторов. Не полностью, но всё же.
Сравнивать Климова и Минина некорректно, потому что к Климову в техническом плане хоть и есть вопросы и несогласие с чем-то, но у него есть
Минин же - этобоец ММА с 2-3 годами опыта просто говорящая голова, читающая по суфлеру, что дают, и основная задача которого - получение прибыли на чем угодно и вне зависимости от последующих успехов учеников.
Так же как с начиткой художественного произведения для аудиокниг, - чтец может как подчеркнуть его красоту, так и полностью испортить впечатление от него. И зачастую, это субъективно для слушателя.
А вот сравнивать курсы и их пользу можно. Но я не буду, потому что нет статистических данных. Неоспоримая польза от миниских курсов это появление конкуренции, что на рынке всегда хорошо. И неявная польза для Климова (если, конечно, ему важней репутация, чем заработок) - избавление от конкретных вкатунов, которым милее мининский подход.
То есть, если выбирать из этих двоих что-то типа ментора, ответ очевидный. Если смотреть на курсы - уже не такой очевидный.
Как вообще учиться IT?
Хорошие проверенные временем книжки. Хорошие бесплатные курсы от проверенных авторов, в том числе, университетов типа МГУ и MIT (#learning). Сообщество, где можно задать вопрос. Желание познавать.
#learning #minin #klimov
Курсы надо отделать от их авторов. Не полностью, но всё же.
Сравнивать Климова и Минина некорректно, потому что к Климову в техническом плане хоть и есть вопросы и несогласие с чем-то, но у него есть
Curriculum Vitae
("жизненный путь") в разработке ПО. Есть определенные знание и опыт. Минин же - это
Так же как с начиткой художественного произведения для аудиокниг, - чтец может как подчеркнуть его красоту, так и полностью испортить впечатление от него. И зачастую, это субъективно для слушателя.
А вот сравнивать курсы и их пользу можно. Но я не буду, потому что нет статистических данных. Неоспоримая польза от миниских курсов это появление конкуренции, что на рынке всегда хорошо. И неявная польза для Климова (если, конечно, ему важней репутация, чем заработок) - избавление от конкретных вкатунов, которым милее мининский подход.
То есть, если выбирать из этих двоих что-то типа ментора, ответ очевидный. Если смотреть на курсы - уже не такой очевидный.
Как вообще учиться IT?
Хорошие проверенные временем книжки. Хорошие бесплатные курсы от проверенных авторов, в том числе, университетов типа МГУ и MIT (#learning). Сообщество, где можно задать вопрос. Желание познавать.
#learning #minin #klimov
👍5❤1🤔1
Компоненты
Варианты использования:
- Сохранение номеров версий для отдельных компонентов
- Пользовательские флаги для инструментов сборки, чтобы по-разному обрабатывать компоненты
- Добавление кастомного функционала к компоненту, помимо стандартного из Options API и т.д.
#tip
Vue
могут иметь статичные метаданные:// LiveUsersWidget.vue
<script setup>
defineOptions({
columns: 3,
});
</script>
import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;
Варианты использования:
- Сохранение номеров версий для отдельных компонентов
- Пользовательские флаги для инструментов сборки, чтобы по-разному обрабатывать компоненты
- Добавление кастомного функционала к компоненту, помимо стандартного из Options API и т.д.
#tip
🔥11
Forwarded from 🧊 siberiacancode x IT-ХОЗЯЕВА
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
🔥 Смотрим с Денисом izede "Обзор на обзор на курс по Vue JS" от @VladilenMinin
izede - https://www.twitch.tv/izede
Поддержка автора 🧊
boosty - https://boosty.to/siberiacancode
donatealerts - https://www.donationalerts.com/r/siberiacancode
Социальные сети 🔥
boosty: https://boosty.to/siberiacancode
telegram: https://t.me/siberiacancode…
Поддержка автора 🧊
boosty - https://boosty.to/siberiacancode
donatealerts - https://www.donationalerts.com/r/siberiacancode
Социальные сети 🔥
boosty: https://boosty.to/siberiacancode
telegram: https://t.me/siberiacancode…
Вышла
В ней уже есть
Основные проблемы старой реализации - неочевидность привязки переменной в скрипте по имени к элементу в шаблоне и неудобство использования шаблонного рефа в
Теперь привязка будет по строковому ключу
#vuejs
Vue 3.5.0-alpha5
В ней уже есть
useTemplateRef
- функция, заменяющая нынешний способ определения шаблонного рефа (template ref
).Основные проблемы старой реализации - неочевидность привязки переменной в скрипте по имени к элементу в шаблоне и неудобство использования шаблонного рефа в
composable
функциях.Теперь привязка будет по строковому ключу
#vuejs
👍10🔥1
– А потом отрубили Youtube
– Почему?
– В том-то и дело, что непонятно. В этот раз даже объяснять ничего не стали. Раньше в таких случаях хотя бы про тлетворное влияние Запада или импортозамещение говорили из уважения к публике. А теперь вообще никакой подтанцовки. Иноагенты особо не шалили, Google, что просили, блокировал. Просто женщина-теледиктор в синем жакете объявила тихим голосом, что с завтрашнего дня Youtube-a не будет. И никто не посмел возразить.
#esse
🤡7😢5💩3😁2
Красивые симуляции на
Статья
#js #performance
JavaScript
с целью изучения его возможностей по производительностиСтатья
#js #performance
YouTube
Particle Simulation Javascript
Multi-threaded web worker sim using shared array buffers in javascript.
#javascript #simulator
#javascript #simulator
👍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, то как?
Судя по опросу, половина пользователей ESlint как и я доформатирует еще по надобности и Prettier-ом. Второй вопрос - если вы используете ESlint, то как?
Anonymous Poll
74%
Через `eslint-config`
22%
Настраиваю плагины вручную
5%
Другое (комментарии)
This media is not supported in your browser
VIEW IN TELEGRAM
В комментариях меня ознакомили с Антоном Ларичевым и его PurpleSchool
На
Есть курсы, цены на них копеечные (по сравнению с одним бойцом ММА)
Не реклама
#learning #nereklama
На
Youtube
много видео, оставляет приятное впечатление компетентного человека. Vue
почти нет, но много фронтенда (HTML
, CSS
, JS/TS
, сопутствующие технологии)Есть курсы, цены на них копеечные (по сравнению с одним бойцом ММА)
Не реклама
#learning #nereklama
🔥19🤣3💯2😁1
Предыстория к картинке выше: в
Эта, другие слова нежели "истеричка" на находятся, заявила, что он прекращает разработку и поддержку расширения в
Это далеко не первый раз, когда
Честно говоря, для меня дико, что кто-то, выпускающий плохой, но распространенный продукт, постоянно обвиняет в своих неудачах инструменты, которыми он пользуется.
Почему нельзя использовать только стабильный функционал
Почему стратегические решения для
Почему бОльшая часть времени разработки жутко баггованного и нестабильного
И бранная лексика в твитах допустима только для людей уровня Линсуса Торвальдса. По крайней мере, в цивилизованном мире. Этот твит выглядит кринжово для представителя серьезной организации или бизнеса.
Это цитата Джонсона. Не в этом ли причина?
И, кстати,
#volar #jetbrains #vscode
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 давно появился
Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.
Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через
Тут пример создания CSS анимации для всплывающих элементов через
#popoverapi #css
<dialog>
элемент и относительно недавно Popover API
для модальных окон и всплывающих меню. Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.
Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через
transition
.Тут пример создания CSS анимации для всплывающих элементов через
keyframes
.#popoverapi #css
Frontend Masters
Animating the Dialog Element
When the <dialog> element became widely available in 2022, I was thrilled. Opening a dialog? Easy. Closing a dialog? Even easier. Nested dialogs and keyboard interactions? Built-in, for free. It’s like living in the future.
👍10