JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM

Виртуализация (таблицы, бесконечные ленты и др.) может сильно навредить в плане доступности. Пока нет ничего лучше, чем классическая пагинация.

Пишем одностраничное приложение с помощью htmx

он отлично подходит и для больших проектов, сложных больших приложений. 

Интересно, как будет выглядеть на htmx реализация такой штуки: внутри формы при выборе чекбокса нужно спрятать/показать другой блок, при выборе значения в одном селекте в другом селекте показать определённый список и т.п.

Проблема в htmx в том, что он не заморачивается с сохранением визуального состояния (например, фокус на чекбоксе), так как меняет всё через innerHTML.

DRY-фреймворк: продолжение

нет, вложенность тут не главное. Конкатенация селекторов по типу `&__title` это зло.

DRY-фреймворк: продолжение

Скоро будет работать во всех браузерах:

<section id="some-id">
  <style>
    @scope {
      :scope {
        border: 2px solid;
        padding: 1rem;

        & > header {
          font-weight: 600;
        }

        & > p {
          font-style: italic;
        }
      }      
    }
  </style>

  Some Text
  <header>Section Title</header>
  <p>Section Text</p>
</section>

Гораздо читабельнее.

SOLID in React

Принцип подстановки Барбары Лисков на примере React компонента:

А где тут React?

Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

Нужно отметить, что статья является переводом https://www.cnblogs.com/coco1s/p/18358267.

CSS-классы вредны

Да, но применится только один - data-size="small"

CSS-классы вредны

Вы хотя бы не тупо переводите статьи, а делайте их редактуру/ревью. Например,

.Card:is(.big) имеет равную специфичность с .Card

Это не так.

Кратко про основные техники кеширования в браузере

res.set('Cache-Control', 'no-cache, no-store, must-revalidate');

Про must-revalidate не рассказали. А есть ли смысл использовать эти значения no-cache и no-store вместе?

Магия CSS на практике: советы по вёрстке от гика

Скажите, пожалуйста, какие ограничения есть?

Кажется, были проблемы с псевдоэлементами для input в очень старых браузерах. Но во всех современных работает хорошо.

Магия CSS на практике: советы по вёрстке от гика

как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок

Можно вообще без всяких обёрток и комбинаторов просто добавить appearance: none на нативный элемент и стилизовать почти как угодно, используя те же псевдоэлементы. К тому же такой способ позволяет использовать нативный вид фокуса.

Пример: https://codepen.io/monochromer/pen/xxyMrqQ

Анатомия StyleX

По данным 2023 JavaScript Rising Stars библиотека StyleX заняла второе место в разделе Styling / CSS in JS (первое место вполне ожидаемо занял TailwindCSS).

А TailwindCSS относится к CSS-in-JS?

Возможности JS, о которых вы возможно не знали

Из приведенных примеров не видна разница между использованием операторов ~~ и |. Выражения ниже приводят к одному результату.

20.8 | 0
~~20.8

Вам не нужен для этого JavaScript

summary не поддерживается в Safari

https://caniuse.com/details

анимации и переходы в селекторе ::before не поддерживаются в Safari.

пример можно?

Что такое генераторы статических сайтов и почему Astro — лучший фреймворк для разработки лендингов

Пока останавливает отсутствие гибкости в формировании ссылок при пагинации. Как понимаю, нельзя сделать, чтобы начальная страница была, скажем, `/articles/`, а следующая `/articles/feed/2`, используя один шаблон. В Eleventy с ссылками (permalink) можно делать почти что угодно.

Оптимизируем шрифты и ускоряем сайт на 5-12%

В URL есть hash, который обрезает часть символов

Оптимизируем шрифты и ускоряем сайт на 5-12%

У Google Fonts есть API для тонкой настройки. Например, можно указать url-параметр subset с набором глифов, характерных для того или иного языка. Или можно указать url-параметр text с нужными глифами. Если взять набор символов из вашего сервиса для русского и английского языка, то в Google Fonts также получим один файл размером 8Kb. Причем именно один формат, который сервис определил сам на основе HTTP-заголовков, а не целую россыпь из устаревших otf, ttf, woff, svg, как уже и отметил @dom1n1k.

У Google Fonts, вообщем-то, только один недостаток в плане сетевой производительности – CSS запрашиваются с одного домена, а сами шрифты – с другого домена.

Оптимизируем шрифты и ускоряем сайт на 5-12%

Внутри @font-face не нужно указывать text-rendering. Это делается на уровне селекторов, например, :root { text-rendering: optimizeLegibility; } .

Заканчивается 2023 год, поэтому форматы woff и ttf не нужны, только если вы не поддерживаете браузеры типа IE9.

Перевести SVG код в CSS вам поможет этот сервис.

Нагло скопированный с https://yoksel.github.io/url-encoder/

Удобней всего это сделать в сервисе «Оптимизация шрифтов».

Понимаю, что рекламируете свой сервис, но transfonter удобнее.

Web Accessibility в рассказе «A11Y от 0 до NaN»

удобство покрытия доступностью компонента – мерило корректности его архитектуры и масштабируемости

В рамочку и на стену

Введение в потоковую передачу данных в Вебе

Для ReadableStream не хватает примера обработки "обратного давления"