Как вам такое?

#java #gwt

Почти анекдот получился

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

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

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

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

#meme

Кое-что новое

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

<!-- <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

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

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

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

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

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

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

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

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

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


#learning #minin #klimov

Компоненты Vue могут иметь статичные метаданные:

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

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

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

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

#tip

Вышла Vue 3.5.0-alpha5

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

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

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

#vuejs

Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance

const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

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

Немного JavaScript

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

#js #challenge

В комментариях меня ознакомили с Антоном Ларичевым и его PurpleSchool

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

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

Не реклама

#learning #nereklama

В стандарте HTML давно появился <dialog> элемент и относительно недавно Popover API для модальных окон и всплывающих меню.

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

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

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

#popoverapi #css

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

#popoverapi

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

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

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

#eslint #prettier #eslintconfig