Виртуализация адаптивной Grid разметки

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

display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));

Колонки auto-fill или auto-fit , количество зависит от того, сколько элементов, помещается в строке. Изменяем размер контейнера, меняется количество колонок, элементы переносятся построчно.

Виртуализация адаптивной Grid разметки

За скрины с багами спасибо. Видимо дальше нужно доводить до ума данный подход. Пока готовил статью, писал эти примеры, вроде сто раз все проверил, чтоб все работало. Правда проверял в Хроме и Файерфоксе. У меня нет эпловских девайсов, чтоб в Сафари проверить. Но я также проверял в Epiphany (GNOME Web), он тоже на движке WebKit, там работает.

lazy-подгрузка (в конец), в примере infinite-scroll, опять же в Хроме и Файерфоксе, корректно вроде бы все отображется, если быстро крутить, можно успеть увидеть спиннер. Как только данные прилетели, спиннер замещается новой порцией элементов. Вот с подгрузкой в начало (чат) при таком подходе есть небольшая проблемка: поскольку положение скроллбара привязано к индексам, при вставке в начало индексы смещаются.

По поводу контейнера, до текущей реализации были другие. Реализация, где полотно анимируется с помощью WebAnimations API, примерно как в Вашем проекте. Мне удалось подобрать тайминги, чтоб выглядело как нативный скролл. Но на слабом устройтве эта анимация уже не такая плавная, как нативный скролл. Хотя у кого в наше время сейчас слабые устройства?

А про Ваш проект я не знал, спасибо что поделились. Выглядит красиво с этим motion blur эффектом.

Как я с помощью ChatGPT и Midjourney браузерную игру для изучения регулярных выражений создавал

Сколько времени в целом у вас ушло от начала работы над этим проектом до конца?

Isomorphic-validation — Javascript библиотека, облегчающая валидацию пользовательского ввода

Например, вот так:

Скрытый текст

form.addEventListener(
  'input',
  Validation.group(
    // здесь могут быть валидации других полей
    // и/или группы валидаций
    // ...

    Validation.glue(
      Validation(form.password),
      Validation(form.password2),
    )
    .constraint((val1, val2) => val1 === val2)
    .validated(applyOutline(form.password))
    .validated(applyOutline(form.password2))
  )
);

Здесь обводка вокруг каждого поля отражает состояние валидности "склеенной" группы.

Состояние валидности группы зависит от каждой валидации в группе. Группа может содержать другие группы.

А еще вот сдесь есть пример валидации паролей, со схемой, поясняющей работу.

Вот тут еще один пример с паролями.

А еще вот здесь пример формы входа и формы регистрации с видео объяснением.

Вся докоментация пока только на англ.языке.

Isomorphic-validation — Javascript библиотека, облегчающая валидацию пользовательского ввода

Словом 'isomorphic' в названии библиотеки я хотел подчеркнуть то, что использовать одни и те же валидации можно на клиенте и на сервере. Пишем код валидации один раз, и этот код используется и там и там одинаково.

Наверное, такой термин, как "изоморфный Javascript" уже не используется.

Из Википедии, свободной энциклопедии
Не путать с изоморфизмом.
Изоморфный JavaScript, также известный как универсальный JavaScript, описывает приложения JavaScript, которые работают как на клиенте, так и на сервере.

Выбрать название оказалось не так то просто. Все более менее лаконичные названия, которые приходили мне в голову, оказались либо заняты на NPM либо были названиями компаний, работающих в сфере аккредитации, сертификации и т.д. Я остановился на этом. А позже, когда публиковал очередную версию библиотеки, оказалось, что точно с таким же названием тоже существовал когда-то проект. Но менять название я уже не стал. Так что, что имеем, то имеем.