Время прочтения — 13 минут

Family Frontend Meetup #2

Новшества EcmaScript 2023, как изменился Chrome, дополнительная оптимизация логики компонента Picture, обзор leaflet maps и полезные фишки, о которых вы могли не знать.

Содержание

Чем порадует EcmaScript 2023?

1
Иммутабельные методы массивов
• toReversed, toSorted, toSpliced – аналоги одноименных методов за исключением иммутабельности.
• with – аналог выражения array[0] = value без изменения исходного массива.
2
Обратный поиск по массивам
• findLast, findLastIndex – снова аналоги существующих методов, но перебор начинается с конца массива.
3
Hashbang Grammar #!
Синтаксис, являющийся частью многих языков программирования, теперь доступен и в JS. Шебанг комментарий ведёт себя точно также, как и однострочный // комментарий. Вместо этого, он начинается с #! и действителен только в самом начале скрипта или модуля.
Шебанг комментарий определяет путь к JavaScript интерпретатору, скрипт которого вы хотите выполнить. В любых других случаях используйте // (или многострочный комментарий).
Пример: 

#!/usr/bin/env node
your code...
4
Символы как ключи WeakMap
Данное новшество расширяет WeakMap, позволяя использовать уникальные символы (Symbols) в качестве ключей.

Как изменился Chrome?

1
Анимирование дискретных свойств
CSS свойство transition-behavior указывает, будут ли запускаться переходы для анимаций, поведение которых является дискретным.
Значение transition-behavior может быть включено как часть сокращенного transition объявления:

transition: all 0.35s allow-discrete;
Что такое дискретная анимация? Такая анимация проходит от одного ключевого кадра к другому без промежуточных значений.
Приведем пример.
Анимировать display свойство можно следующим образом:

.button {	
	display: block;	
	opacity: 1;
	transition: all 0.5 allow-discrete;
}
Теперь при переключении CSS-свойств элемент плавно исчезнет:

display: none;
opacity: 0;
Без использования allow-discrete, элемент исчез бы мгновенно за счет переключения display свойства в значение none.
Так же allow-discrete можно использовать и для анимаций @keyframes

.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
2
Медиа-выражение prefers-reduced-transparency
Непрозрачные интерфейсы могут вызвать головную боль или стать проблемой при различных нарушениях зрения. Вот почему во многих операционных системах и приложениях существуют настройки, которые уменьшают или удаляют прозрачность пользовательского интерфейса.
С помощью этого нового медиа-запроса в браузере CSS адаптирует интерфейс для пользователей, желающих снизить прозрачность:

.card {
	background: hsl(none none 100% / 20%); 

 @media (prefers-reduced-transparency: reduce) {
	background: hsl(none none 0% / 80%);
 }
}
Данное выражение имеет два значения:
no-preference
Указывает, что пользователь не указал никаких предпочтений на устройстве. Значение этого ключевого слова оценивается как ложное в логическом контексте.
reduce
Указывает, что пользователь включил на своем устройстве настройку, позволяющую минимизировать количество эффектов прозрачного или полупрозрачного слоя.
3
Медиа-выражение update
Медиа-запрос update дает возможность адаптировать пользовательский интерфейс к частоте обновления устройства. Функция сообщает значения fast, slow или none, которые относятся к возможностям различных устройств.
Электронные книги и такие устройства, как платежные системы с низким энергопотреблением, могут иметь низкую частоту обновления. Информация о том, что устройство не поддерживает анимацию или частые обновления, позволяет сэкономить заряд батареи или избежать ошибочных обновлений.
Более того, существуют такие сценарии, как печатная бумага или дисплеи с электронными чернилами, которые не поддерживают анимации и имеют единственный проход рендера. Подобный вывод вообще не может обновляться и называется none.
4
Отображение потребляемой памяти при удержании курсора на вкладке
Просто полезное обновление в браузере. Теперь не обязательно открывать консоль разработчика для просмотра такой метрики.

Зарождение идеи дополнительной оптимизации нашего компонента Picture

Используемая для оптимизации технология в данный момент является экспериментальной доступна только в браузерах: Chrome, Opera и Edge. В Safari и Firefox она не поддерживается.
Проверить совместимость можно здесь.
Идея заключается в том, чтобы отдавать пользователю изображение с качеством, соответствующим качеству его связи.
Рассмотрим пример.
Человек едет в поезде. Между городами сигнал слабый, если вообще есть. Соединение очень медленное и едва способно загрузить текстовый формат сайта. В таком случае можно и не надеяться, что изображения отобразятся. Казалось бы, ничего страшного, можно и без картинок обойтись. А если пользователь открывает онлайн-магазин или какой-то маркетплейс? Он хочет найти какой-то определенный товар, например, новое платье для мамы. Можно ли это сделать без визуальной составляющей? Ответ очевиден.
Свойство navigator.connection.effectiveType поможет в определении скорости интернета пользовательского устройство. Что делать с этой информацией? Расскажем в нашей новой статье!

Стоит ли использовать Leaflet вместо Yandex maps?

Один из наших фронтов, плотно поработав с разными картами, пришел к выводу, что для реализации простых задач Yandex.maps не нужны.
“
На практике мне не приходилось решать задачи связанные с такими вещами, как маршрутизация, пробки, поиск и т.д.

В основном это было:
  • Добавить маркер на карте
  • Построить кластер
  • Открыть попап по клику на маркер
И другие задачи, для реализации которых, возможностей Leaflet вполне достаточно
Leaflet (react-leaflet):
Плюсы:
— Проще и понятнее документация в сравнении с Yandex.maps
— Базовых возможностей Leaflet достаточно для реализации вышеперечисленных задач. React-Leaflet может легко интегрироваться с большим количеством доступных плагинов Leaflet, что позволяет добавлять расширенные функции, такие как кластеризация маркеров, анимации, геопространственные операции и т.д.
— Можно легко кастомизировать.
Например, очень просто интегрировать различные сторонние тайлы карт (OpenStreetMap или Mapbox). Это дает большую гибкость в выборе внешнего вида карты. Однако некоторые из них могут быть платными (я использую OpenStreetMap).
Больше возможностей для кастомизации маркеров и всплывающих окон, включая использование собственных HTML-элементов. Проще в реализации popup, c которым пользователь мог бы взаимодействовать.
— Нет ограничений в использовании. У нас все больше проектов ориентированных на рынок Европы, в которых мы не можем использовать Yandex.maps.
— Вообще Leaflet – бесплатные карты. Но для реализации более сложных задач необходимо подключать дополнительные плагины. В зависимости от выбранного поставщика, те или иные функции могут быть платными. Например для реализации геокодирования и обратного геокодирования, можно использовать Google Maps (есть лимиты на количество бесплатных запросов), а можно использовать OpenStreetMap (бесплатные в использовании, но есть ограничение на количество запросов на определенный промежуток времени)
— Можно скрыть логотип «Leaflet | © OpenStreetMap contributors» или добавить свой префикс перед указанием авторства, если в этом есть необходимость.
Минусы:
• Нет поддержки SSR, поэтому операции с DOM, на которые опирается Leaflet для отрисовки карты, недоступны. Поэтому для работы с компонентами Leaflet нужны дополнительные манипуляции, а именно, – использование динамического импорта с next/dynamic
Yandex.maps (react-yandex-maps):
Плюсы:
Поддержка SSR, в отличие от react-leaflet.
— Больше возможностей по сравнению с react-leaflet (построение маршрутов, пробки, поиск и т.п.) (*Ограничен лимитами на количество бесплатных запросов)
— Предоставляют более точные и детальные карты России и стран СНГ, чем это доступно в большинстве стандартных тайлов карт в Leaflet.
Минусы:
• react-yandex-maps – больше не поддерживается по политическим причинам.
• Меньше возможностей для кастомизации по сравнению Leaflet. Например, добавить popup, с котором которым пользователь мог бы взаимодействовать, проще в Leaflet, чем в Yandex.maps.
• Yandex.Maps предлагает как бесплатные, так и платные функции, и их использование регулируется определенными лимитами. (*Обязательно получение API key, даже если вы не используете платные функции карт)
Выбор между react-Leaflet и react-yandex-maps зависит от конкретных требований проекта. Если нужна высокая степень кастомизации, международная поддержка и интеграция со сторонними сервисами, тогда стоит смотреть в сторону React-Leaflet.
С другой стороны, react-yandex-maps подходит для проектов, ориентированных на Россию и СНГ, особенно когда требуется реализация сложных функций, таких как построение маршрутов, поиск по карте и т.п.
Напоследок взглянем на статистику скачиваний react-yandex-maps и react-leaflet и увидим, что именно вторая библиотека в данный момент пользуется большей популярностью.

Полезные фишки и небольшие заметки, о которых вы могли не знать

1
Расположение первой буквы в несколько строк:

&::first-letter {
 Initial-letter: 2;
}
2
Глобальная функция в JS для глубокого копирования объектов:

structuredClone()
Зачем устанавливать lodash, если можно использовать встроенный метод?
3
Определение отступа первой строки в текстовом блоке (Отступ абзаца):

text-indent: 20px;
4
Возможность получить активный элемент на странице:

document.activeElement
5
Трансформируем SCSS-переменные в JS-переменные с помощью :export
SCSS переменная:

$white: #fff;
Трансформация:

:export { white: $white;
}
Импортируем файл в наш модуль:

import variables from 'your-path/variables.module.scss';
Используем созданную переменную:
 <div className={styles.arrow}> <DownArrow stroke={variables.white} /> </div>
6
Располагаем вертикально строки текста и направление блоков
writing-mode: vertical-lr;
Читайте также