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

Во Vue 3 / Vite проектах переменные окружения обычно хранят в .env файлах и получают к ним доступ через import.meta.env.VITE_BACKEND_URL.

Избавиться от ошибок, если вы используете TypeScript, можно через создание src/types/vite-env.d.ts файла с содержимым:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_PUBLIC_URL: string;
  readonly VITE_BACKEND_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Также, часто хранить конфигурацию удобней в древовидном формате, и использовать для этого json или js:

// src/config/appSetings.ts

export default {
  baseURL: import.meta.env.VITE_BACKEND_URL,
  publicUrl: "https://mysite.com",
};

//...

import axios from "axios";
import { baseUrl } from "@/config/appSetings"

const instance = axios.create({
  baseURL,
});

#tip #vite #env

Запретить или заменить контекстное меню в браузере (при нажатии правой клавиши "мыши") довольно несложно.

Для этого служит событие contextmenu, слушатель на которое можно повесить на конкретный элемент или весь document

document.addEventListener( "contextmenu", function(e) {
  if ( checkClickInsideTargets(e) ) {
    e.preventDefault();
    toggleCustomMenuOn();
  } else {
    toggleCustomMenuOff();
  }
});

Применение: свое контекстное меню, легкий запрет загрузки картинок или копирования текста

#tip

12 марта 2024 года в Core Web Vitals (основные показатели качества вебсайта) заменят
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.

В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.

В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.

#webvitals #nuxt #google

ESlint плагин eslint-plugin-vuejs-accessibility поможет подсказками для доступности

#a11y #eslint