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

Люди мигрируют с 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

AI действительно ощутимо снижает надобность в мидл-левел разработчиках. Раньше, работая в команде, если мне нужно было сделать, скажем, DatePicker, я создавал задачу в таск-менеджере для кого-то. Сейчас я его сразу генерю.

И это удобней, потому что:
- Во-первых, ты получаешь результат тотчас, не выходя из своего потока разработки.
- Во вторых, если что-то не понравится, ты всегда можешь сказать: "Нет, лучше, наверно, будет на стандартных инпутах. Переделай", и в ответ слышишь: "Конечно, Вы правы! На инпутах будет лучше.", а не ощущаешь чужие мысли: "Вот мудило..."

Софт скиллы у AI повыше.

#ai #esse

Иллюстрации к принципам ООП из выдающейся книжки Graddy Booch Object-Oriented Analysis and Design with Applications

Очень полезна фронтендерам в том числе

#oop #architecture #gradybooch