Чем порадует EcmaScript 2023?
Иммутабельные методы массивов
- toReversed, toSorted, toSpliced – аналоги одноименных методов за исключением иммутабельности.
- with – аналог выражения array[0] = value без изменения исходного массива.
Обратный поиск по массивам
- findLast, findLastIndex – снова аналоги существующих методов, но перебор начинается с конца массива.
Hashbang Grammar #!
Синтаксис, являющийся частью многих языков программирования, теперь доступен и в JS. Шебанг комментарий ведёт себя точно также, как и однострочный // комментарий. Вместо этого, он начинается с #! и действителен только в самом начале скрипта или модуля.Шебанг комментарий определяет путь к JavaScript интерпретатору, скрипт которого вы хотите выполнить. В любых других случаях используйте // (или многострочный комментарий).
Пример:
#!/usr/bin/env node
your code...Символы как ключи WeakMap
Данное новшество расширяет WeakMap, позволяя использовать уникальные символы (Symbols) в качестве ключей.
Как изменился Chrome?
Анимирование дискретных свойств
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;
}
}Медиа-выражение 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: Указывает, что пользователь включил на своем устройстве настройку, позволяющую минимизировать количество эффектов прозрачного или полупрозрачного слоя.
Медиа-выражение update
Медиа-запрос update дает возможность адаптировать пользовательский интерфейс к частоте обновления устройства. Функция сообщает значения fast, slow или none, которые относятся к возможностям различных устройств.
Электронные книги и такие устройства, как платежные системы с низким энергопотреблением, могут иметь низкую частоту обновления. Информация о том, что устройство не поддерживает анимацию или частые обновления, позволяет сэкономить заряд батареи или избежать ошибочных обновлений.
Более того, существуют такие сценарии, как печатная бумага или дисплеи с электронными чернилами, которые не поддерживают анимации и имеют единственный проход рендера. Подобный вывод вообще не может обновляться и называется none.
Отображение потребляемой памяти при удержании курсора на вкладке
Просто полезное обновление в браузере. Теперь не обязательно открывать консоль разработчика для просмотра такой метрики.
Зарождение идеи дополнительной оптимизации нашего компонента Picture
Используемая для оптимизации технология в данный момент является экспериментальной доступна только в браузерах: Chrome, Opera и Edge. В Safari и Firefox она не поддерживается.
Проверить совместимость можно здесь. Идея заключается в том, чтобы отдавать пользователю изображение с качеством, соответствующим качеству его связи.
Рассмотрим пример.
Человек едет в поезде. Между городами сигнал слабый, если вообще есть. Соединение очень медленное и едва способно загрузить текстовый формат сайта. В таком случае можно и не надеяться, что изображения отобразятся. Казалось бы, ничего страшного, можно и без картинок обойтись. А если пользователь открывает онлайн-магазин или какой-то маркетплейс? Он хочет найти какой-то определенный товар, например, новое платье для мамы. Можно ли это сделать без визуальной составляющей? Ответ очевиден.
Свойство navigator.connection.effectiveType поможет в определении скорости интернета пользовательского устройство. Что делать с этой информацией? Расскажем в нашей новой статье!
Стоит ли использовать Leaflet вместо Yandex maps?
Один из наших фронтов, плотно поработав с разными картами, пришел к выводу, что для реализации простых задач Yandex.maps не нужны.
На практике мне не приходилось решать задачи связанные с такими вещами, как маршрутизация, пробки, поиск и т.д. В основном это было: Добавить маркер на карте, Постоить кластер, Открыть попап по клику на маркер
Leaflet (react-leaflet):
Плюсы:
- Проще и понятнее документация в сравнении с Yandex.maps
- Базовых возможностей Leaflet достаточно для реализации вышеперечисленных задач. React-Leaflet может легко интегрироваться с большим количеством доступных плагинов Leaflet, что позволяет добавлять расширенные функции, такие как кластеризация маркеров, анимации, геопространственные операции и т.д.
- Можно легко кастомизировать. Например, очень просто интегрировать различные сторонние тайлы карт (OpenStreetMap или Mapbox). Это дает большую гибкость в выборе внешнего вида карты. Однако некоторые из них могут быть платными (я использую OpenStreetMap). Больше возможностей для кастомизации маркеров и всплывающих окон, включая использование собственных HTML-элементов. Проще в реализации popup, c которым пользователь мог бы взаимодействовать.
- Нет ограничений в использовании. У нас все больше проектов ориентированных на рынок Европы, в которых мы не можем использовать Yandex.maps.
- Вообще Leaflet – бесплатные карты. Но для реализации более сложных задач необходимо подключать дополнительные плагины. В зависимости от выбранного поставщика, те или иные функции могут быть платными. Например для реализации геокодирования и обратного геокодирования, можно использовать Google Maps (есть лимиты на количество бесплатных запросов), а можно использовать OpenStreetMap (бесплатные в использовании, но есть ограничение на количество запросов на определенный промежуток времени)
- Можно скрыть логотип «Leaflet| ©OpenStreetMapcontributors» или добавить свой префикс перед указанием авторства, если в этом есть необходимость.
Минусы:
- Нет поддержки 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 и увидим, что именно вторая библиотека в данный момент пользуется большей популярностью.
Полезные фишки и небольшие заметки, о которых вы могли не знать
- Расположение первой буквы в несколько строк:
&::first-letter {
Initial-letter: 2;
}- Глобальная функция в JS для глубокого копирования объектов:
structuredClone()Зачем устанавливать lodash, если можно использовать встроенный метод?
- Определение отступа первой строки в текстовом блоке (Отступ абзаца):
text-indent: 20px;- Возможность получить активный элемент на странице:
document.activeElement- Трансформируем SCSS-переменные в JS-переменные с помощью:export
SCSS переменная:
SCSS переменная:Трансформация:
:export { white: $white;
}Импортируем файл в наш модуль:
import variables from 'your-path/variables.module.scss';- Используем созданную переменную:
<div className={styles.arrow}> <DownArrow stroke={variables.white} /> </div>- Располагаем вертикально строки текста и направление блоков writing-mode: vertical-lr;
