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

#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

В Vite нашли и пофиксили уязвимость - чужой сайт мог обратиться на ваш dev сервер и утащить всю кодовую базу.

Attack scenario:

- The attacker serves a malicious web page (http://malicious.example.com).
- The user accesses the malicious web page.
- The attacker sends a fetch('http://127.0.0.1:5173/main.js') request by JS in that malicious web page. This request is normally blocked by same-origin policy, but that's not the case for the reasons above.
- The attacker gets the content of http://127.0.0.1:5173/main.js.

Обновление вышло сразу для трех последних мажорных версий как patch, но для некоторых может оказаться breaking change. Подробней - в релизе.

#vite #bug

Переделал прошлый плагин, сделал его удобней и опиньонейтед - полностью под конкретный случай 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

Люди мигрируют с SSR и удивляются.

Но Nuxt это, конечно, другое...

#ssr #next #nuxt

Во Vue DevTools стало легко добавлять свои плагины как отдельную вкладку (кнопка)

Это может быть просто SFC файл

P.S. У кого-то получилось заставить работать вкладку Timeline?

#devtools

Почему CSS кастомные свойства (CSS custom properties типа --color-text-1) нельзя называть "CSS переменными"?

Потому что одно и то же свойство может одновременно иметь одно значение в одном компоненте, другое во втором, и третье - в третьем.

Переменные так не умеют.

#css #learning

Немного тяжелого некромантского до-js-ного рока

#offtop #video #music

Популярность по загрузкам некоторых UI библиотек

#lib #ui #stats

WPT Dashboard - проект, направленный на мотивацию производителей браузеров придерживаться и реализовывать web стандарты

Они разработали тесты, согласно которым последний год в этом направлении прошел очень успешно

#web #browser

История, как один китайский чатбот обрушил за пару дней US экономику на триллион долларов, это, конечно, забавно...

#ai

Огромный список Vite плагинов

Vite плагин может быть просто удобной утилитой, которая делает что-то полезное во время сборки. Легко пишется самому, и необязательно его публиковать через NPM, чтобы использовать в своем проекте. Может быть просто частью проекта.

#vite

Чтобы заставить Vite HMR перегружаться при изменении конкретных файлов, иногда может понадобиться такой плагин:

// vite.config.ts

const fullReloadJson5 = {
  name: "full-reload-json5",
  handleHotUpdate({ file, server }) {
    if (file.endsWith(".json5")) {
      server.ws.send({ type: "full-reload" });
    }
    return [];
  },
};

// ...
plugins: [
    vue(),
    json5Plugin(),
    fullReloadJson5,
  ],

#vite #tip