Фронтенд дайджест #209 Лучшее за неделю Подкаст Команда CS | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #209
Лучшее за неделю
Подкаст

Команда CSSSR опубликовала первый выпуск видеосерии «История фронтенда». В нем авторы рассказали о предпосылках появления браузеров и зарождении Всемирной Паутины. 

В 1990 году Тим Бернерс-Ли опубликовал описания HTML, URI и протокола HTTP, на основании которых была создана библиотека libwww, предназначенная для интерпретации веб-страниц. Она вдохновила разработчиков создавать свои браузеры.
Среди прочих, был браузер ViolaWWW, который уже тогда мог на стороне клиента рендерить апплеты, написанные на языке Viola, поддерживал таблицы стилей, аналоги iframe, закладки, историю посещений и быстрый поиск.
Но, в итоге, по популярности его и все другие обошел гораздо менее функциональный, но более простой в установке браузер Mosaic, который привел к интернет-буму девяностых и, в дальнейшем, вошёл в основу того самого Netscape Navigator.

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

[EN] Когда речь заходит о производительности JavaScript, в первую очередь сравнивают размер бандла. Но помимо этого размера, производительность также определяется рядом других метрик, которые не так-то и просто замерять. В статье рассказано о способах и нюансах измерения каждой их них.
Если кратко:
- Парсинг, компиляцию и исполнение можно замерять через вкладку Performance в Chrome DevTools. Можно использовать mark-loader, чтобы декомпозировать результаты по отдельным модулям, а User Timing API - для более точечных измерений.
- Потребление CPU можно измерить в Performance Monitor в Chrome или Energy Impact в Safari.
- Потребление памяти можно изменить, с помощью нового api performance.measureUserAgentSpecificMemory.
- Потребление диска — с помощью утилиты Playwright, указав путь для сохранения нужного кэша и затем замерив его размер.

[EN] Оказывается, можно отслеживать положение курсора мыши на чистом CSS. Достаточно заполнить страницу сеткой из элементов, например, с помощью гридов.
При наведении курсора на элементы сетки, у элемента устанавливаются CSS-переменные, соответствующие позиции в сетке:
.cell:nth-child(1):hover ~ .target {
  --positionX: 1;
   --positionY: 1;
}

Чем больше элементов, тем точнее будет отслеживание, но тем развесистее будет HTML и CSS. Значения этих свойств можно использовать для любой динамичной стилизации.
В статье приведены примеры использования этого приёма для создания анимации, следующей за курсором мыши, а также параллакс-анимации фона.

[EN] В Chrome 89 добавили поддержку “import maps”, которые позволяют импортировать JS-модули в браузере по названию модуля, вместо его относительного пути.
Соответствие имени модуля к пути производится в специальном инлайн-скрипте с типом importmap.
Прямо как paths в конфиге requirejs.

Это позволяет сохранять кэш модулей, при инвалидации кэша их зависимостей, а это, в свою очередь, позволяет оптимизировать загрузку скриптов, при инкрементальном обновлении веб-приложений.

[EN] Зачастую, разработка веб-приложения начинается с вёрстки по предоставленному дизайну. Автор статьи считает, что такой подход ведёт к переусложнению и предлагает взглянуть на разработку со стороны создания бизнес-процессов.
А именно — определить, какую информацию пользователи хотят получить и какую информацию они должны для этого предоставить.
Исходя из этого, уже формируется структура состояния приложения и создаются классы, необходимые для взаимодействия.

Показателем правильной реализации такого приложения может служить возможность работы с ним, как если бы это было cli-приложение. Такой подход позволит более четко отделить UI от бизнес-логики и не зависеть от фреймворка, на котором построено приложение.