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

#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

В 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