Что-то захотелось редактируемый профиль пользователя на странице сделать через html contenteditable

Потратил кучу времени, что-то получилось, но в итоге переделал на input

Очень неудобно, особенно с системой байндинга и реактивности Vue
Не делайте так.

#html

Проверьте качество кода своего сайта

https://frontenddogma.com/tools/check/

#tool

Options API - это FSD
Composition API с composables - модульная архитектура.
(аналогия)

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

Можно провести аналогию c физиологией человека

Можно изучать человека разбивая его на руки, ноги, тело, голову и внутри уже по органам, тканям и т.д.

FSD же на верхнем уровне разбивает сперва по органам и тканям - кровеносная система, ЖКТ, мышечные ткани, и внутри уже разбивает по доменам - рот и кишечник внутри ЖКТ

Так же и с переходом от Options API к Composition API. Было разбиение по фичам (options), стало - по бизнес / доменным сущностям (композициям).

Так лучше.

#fsd #architecture

Про Container size queries уже все знают. но про Container style queries еще далеко не все

Целью их является стилизация элементов в зависимости от контекста родительского контейнера.

Они позволяют создавать правила, которые применяются только при выполнении определенных условий относительно стиля контейнера.

Это дает возможность создавать более адаптивные и контекстно-зависимые стили и стилизовать компоненты в зависимости от их окружения.

.card {
  /* ...стили для карточки... */
}

@container style(--background-color: #333) {
  .card {
    /* Стили для карточки, когда у ее родителя темный фон */
    color: white; 
  }
}

В планах поддержка проверки функцией style() не только CSS custom properties, но и простых - style(color: green).

Caniuse везде, кроме Firefox

#css

Вчера пришла в голову мысль пересмотреть "Малхолланд Драйв", а сегодня умер Дэвид Линч

#offtop #kino

Для Linux:

"count:sfc": "find . -type f -name '*.vue' ! -path '*/node_modules/*' | wc -l"

Для Windows:

"count:sfc": "Get-ChildItem -Recurse -Include *.vue -Exclude '*/node_modules/*' | Measure-Object -Line"

Добавьте в скрипты своего package.json.

Считает число компонент в проекте.

#tip

Немного визуальной эзотерики в праздник

#offtop #video

Написал vite-plugin-json-md

Заменяет в JSON/JSON5 файлах markdown на сконвертированный HTML

Удобен при i18n (интернационализации), когда текст перевода лежит в json файлах, но иногда бывает на странице сложное форматирование и разбивать по ключам очень хаотично. Можно записать тогда через markdown.

Обрабатывает как инлайн вставки markdown, так и ссылки на внешние md файлы

#lib #i18n #markdown

Infinity scroll vs. Virtual scroll


Infinity scroll

Загружается дополнительный контент по мере прокрутки страницы. Используется AJAX или аналогичные методы для подгрузки данных с сервера и добавления их в конец списка по мере достижения пользователем конца страницы.

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

Производительность ухудшается с увеличением объема данных в DOM, поскольку все данные рендерятся одновременно.

Virtual scroll

Улучшение производительности больших списков происходит за счет рендеринга только видимой части данных. Поддерживается фиксированное количество элементов в DOM, контент которых обновляется динамически в зависимости от позиции прокрутки.

Пользователи также прокручивают список, но рендерятся только видимые элементы, что значительно улучшает производительность, особенно для очень больших списков. Это снижает нагрузку на память и улучшает плавность прокрутки.

#scroll

Любители JSX и TS всё стремятся извратить SFC

vue-vine

#jsx #react #sfc

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай i18n

vite-plugin-i18n-json-md - берет JSON* файлы из директории локали, конвертирует markdown, если он там есть, объединяет всё в один и выводит в стандартный для i18n json, либо же в json5 или js формате. По желанию - минификация.

В конфиге указывается входная директория, выходная и локали.

import { i18nJsonMdPlugin } from "vite-plugin-i18n-json-md";

export default defineConfig({

  plugins: [
    vue(),
    i18nJsonMdPlugin({
      sourceDir: "src/app/locales",
      outputDir: "src/assets/i18n",
      locales: ["en", "ru", "gr"],
      mode: "dev",
      outputFormat: "json",
    }),
  ],

Переводы удобно держать в небольших файлах и переводить через AI - как целиком, так и автокомплитом. Добавил ключ с переводом в один файл, переходишь в аналогичный файл в другой локали - а он уже предлагает в нужном месте с нужным переводом вставить строку. Молодец.

#vite #i18n #lib

Кому нравятся джетбрейновские аннотации имен параметров, у VS Code есть расширение для этого - Inline Parameters for VSCode

#vscode

Еще одно полезное расширение для VS Code - Pretty TypeScript Errors

#vscode