У элемента <img> можно установить фон:

.item-image {
    background-color: grey;
}

Он будет показываться, если картинка по какой-то причине не загрузится.
Это полезно когда, например, на фоне картинки есть надписи, и без неё они будут нечитаемыми

#css #tip

Vue transitions используются для анимации, и тригеррятся в следующих случаях:

- Условный рендеринг через v-if
- Условное отображение с помощью v-show
- Переключение динамических компонентов с помощью специального элемента <component>
- Изменение специального key атрибута

Последний вариант позволяет управлять transitions программно:

<script setup lang="ts">
import { ref } from 'vue';
const show = ref(false);
const animationTrigger = ref(0);
</script>

<template>
<Transition name="slide-fade">
  <p v-if="show" :key="animationTrigger">Hi</p>
</Transition>
<button @click="show = !show">Toggle</button>
<button @click="animationTrigger += 1">Re-trigger animation</button>
...

#tip #animation

Development plan:

1. Make it work
2. Make it right
3. Make it fast

#tip

JSDoc комментарии на пропсах позволят IDE показывать более информативные всплывающие подсказки.

defineProps<{
  /** The name of the user. */
  name: string
  /** The age of the user. */
  age: number
}>()

Аналогично комментарии работают на TypeScript интерфейсах, которые в последующем передаются в defineProps<Props>()

P.S. В WebStorm не работает

#tip #jsdoc

Рекомендации по задаванию вопросов во @vuejs_ru и других технических сообществах.

Данные правила нужны в первую очередь спрашивающему, чтобы он мог получить ответ, а не игнор.

1. Перед обращением с вопросом в сообщество - прогугли его (включая ChatGPT и другие AI). Если ты в сообществе задаешь банальный легко гуглящийся вопрос, отношение к тебе сразу становится негативным как к глупому ленивому и самовлюблённому человеку.

2. Учись формулировать вопросы. Если ты загуглил вопрос уровня джун-мидл и не получил ответа на первой странице, скорей всего ты плохо его сформулировал. Искусство гуглить не имеет верхней границы и его надо развививать. В интернете есть статьи и советы о том как правильно составлять запросы поисковикам и AI.

3. Формулировка вопроса должна быть краткой, точной и понятной. Никто не будет изучать 10 запощенных тобой скриншотов и простыню описания что на них происходит. Лаконично опиши, что ты пытаешься сделать, и что не получается. Сфокусируйся на том, чтобы объяснить задачу, которую ты решаешь, а не текущее поведение программы. Объясняй своими словами, не старайся всё завернуть в знакомые умные термины.

4. Формулировка вопроса должна быть полной. Это значит, в ней должна содержаться вся необходимая для решения задачи информация. Из тебя не должны выуживать данные по крупицам.

5. Если ты создашь "песочницу" с проблемным кодом, шансы на быстрое получение ответа и других полезных советов возрастают на порядок. Это не преувеличение, и "на порядок" - это в 10 раз.

6. Для больших блоков кода используй gist или аналоги. Небольшие можно поместить в сообщение с вопросом, но обязательно используй встроенное форматирование:

console.log("use ```");

7. Не отправляй свой вопрос одновременно в несколько групп - это раздражает. Отправь в одну, подожди ответы. Не понравятся - спроси в другой.

8. Задавай вопрос в спокойной манере культурного взрослого человека, без сленга и кривляний.

Когда вы помещаете картинку в блок с заданными размерами, если их соотношения сторон отличается, картинка исказится. Иногда из-за адаптивности подобрать их одинаковыми в принципе невозможно.
В таких случаях поможет object-fit: cover;, который обрежет края, но оставит картинку неискаженной.

.card-image {
    object-fit: cover;
}

Можно, в принципе, повесить на все картинки эти два правила:

img {
    max-width: 100%;
    object-fit: cover;
}

#css #tip

В школьном учебнике истории, помню, был такой вопрос, на который я тогда не смог найти ответа, хотя и очень пытался:

Конституция СССР менялась всего три раза, а Конституция США - 27. Как вы думаете, почему?

Внимание, вопрос: Vue сменила три версии, React - 18, Angular - 17. Как вы думаете, почему?

#quiz

Расширение для IDE Volar проапдейтилось до версии v.2.0 и стало называться Vue - Official (название так себе для ссылок, конечно)

Много изменений и много уже зарепортировано проблем
Ушел Takeover mode, теперь расширение работает через TypeScript language service

Расширение TypeScript Vue Plugin (Volar) предлагается удалить

#volar

Уже несколько дней некоторые компоненты на официальной документации Vuetify в примерах поломаны

Выглядит уныло

#ui #vuetify

На сайте Vue есть раздел Examples в котором представлены примеры простых реализаций различных задач, например список с Transition анимацией, таймер на AnimationFrame, древовидный список, TodoMVC и другое

#tip

Deno запустило в open-source 5 дней назад и продвигает свой реестр для JavaScript и TypeScript пакетов - jsr.io

Основные отличия:

- Суперсет для npm
- Поддержка Node, Bun, Deno, Cloudflare Workers и других сред выполнения js
- Автоматическое создание документации
- Рейтинг пакетов
- Встроенная поддержка TypeScript
- Отсутствие необходимости в сборке (ESM формат только)
- Безопасная публикация

#jsr #npm

Число issues у Volar 2.0, он же Vue - Official уже пошло на десятки. Пока вышло четыре патча.

Если у вас что-то сломалось, в VS Code можно откатить расширение на 1.8.27 версию и включить обратно TypeScript Vue Plugin (Volar) расширение

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

#volar

Что означает ACID?

Атомарность
Записи в транзакции выполняются все сразу и не могут быть разбиты на более мелкие части. Если при выполнении транзакции возникают сбои, записи в транзакции откатываются назад.
Таким образом, атомарность означает "все или ничего".

Согласованность
В отличие от "согласованности" в теореме CAP, которая означает, что каждое чтение получает последнюю запись или ошибку, здесь согласованность означает сохранение инвариантов базы данных. Любые данные, записанные транзакцией, должны быть действительными в соответствии со всеми определенными правилами и поддерживать базу данных в валидном состоянии.

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

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

#db

Жесткий наезд на разработчиков GitLab

В этой статье проводился анализ тяжеловесности сайтов в плане JavaScript кода. В общем зачёте первое место заняли Slack с 55Мб (в несжатом виде), а также react.dev, который при скроле подгружается скриптами и был доведен до 100Мб. Для справки, дистрибутив всего Windows 95 занимал 50Мб.

В конце статьи в разделе "лендинги" похвалили сайт jquery.com, который использует всего 100Кб скриптов, и опустили сайт gitlab.com, который грузит 13Мб JavaScript-a для своего статичного лендинга, и по этому параметру занимает первое место в разделе.

Напомню, GitLab частично написан на Vue. На главной странице обнаруживается Nuxt.js.

Стыд и позор...

#jquery #gitlab #facepalm #benchmark #video

Кто выбирает OS для разработки, Linux в среднем на одном и том же железе чуть быстрей Windows, а Win 10 быстрей Win 11

#benchmark