Почти анекдот получился
Надо было сделать форму сбора данных с пользователя. Ну, заморочился на собственный степпер и валидацию, получилось неплохо
Потратил несколько дней, начальнику показываю. Он так одним глазом смотрит и говорит:
- Это все теперь не надо. У нас будет одна кнопка, пользователь на нее нажимает, и 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
И чтобы закончить с
#popoverapi
Popover API
- сайдбары и выезжающие боковые шторки можно делать тоже на нем#popoverapi
Frontendmasters
Popovers Work Pretty Nicely as Slide-Out Drawers – Frontend Masters Boost
Especially on mobile, the slide-out drawer UI/UX seems like a perfect fit for a popover, and works fine on desktop too.
👍4
В комментариях подсказали еще один
По сравнению с
Поставил - пока положительные впечатления. Форматирует везде и неплохо. Не нужно поправлять вторым форматтером.
#eslint #prettier #eslintconfig
eslint-config
, сильно упрощающий настройку линтинга и форматирования кода - @sxzz/eslint-config,По сравнению с
eslint-config
от Anthony Fu у него более строгие ESlint
правила (от unicorn и perfectionist), которые заставляют писать более эффективный код, а для форматирования используется Prettier
.Поставил - пока положительные впечатления. Форматирует везде и неплохо. Не нужно поправлять вторым форматтером.
#eslint #prettier #eslintconfig
GitHub
GitHub - sxzz/eslint-config: A opinionated ESLint config preset.
A opinionated ESLint config preset. Contribute to sxzz/eslint-config development by creating an account on GitHub.
👍8❤1
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. Кто в выигрыше? Один конкретный человек и одна компания?
На это перечисление фактов (с моей точки зрения), воспринятое как наезд, даже вынужден был ответить представитель
Неубедительно, особенно учитывая, что они с Джонсоном одновременно отреагировали на пост спустя двое суток после его публикации, но ок (c).
#volar #jetbrains #vscode
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 до 3 лет. С трудоустройством
#learning #jobs
Человек прошел Школу 21 от
Сбера
, попал туда на стажировку на 1.5 месяца с зарплатой 100К в месяц, а после предложили джуниорскую позицию на 120К.Не думал, что когда-то буду рекламировать
Сбер
, но это один из правильных способов вкатиться в IT
- то есть, когда есть желание, но нет релевантного образования, знаний и опыта.Обучение в школе очное, доступно во многих городах, бесплатное и длится от 1.5 до 3 лет. С трудоустройством
Сбер
помогает, и не только в себя.#learning #jobs
21-school.ru
Обучение программированию с нуля в «Школе 21» — бесплатные IT курсы с трудоустройством от Сбера
Программирование с нуля в «Школе 21» от Сбербанка с трудоустройством. Рассказываем, как начать учиться программированию в бесплатной школе цифровых технологий.
👎19👍7💊1