Дайджест новинок во фронтенд-разработке

Нативный popover

Поддержка: возможность все еще экспериментальная. Не поддерживается в Firefox.

Появление новых атрибутов popover и popovertarget поможет сократить количество кода, требуемого для создания подсказки по ховеру (так, в новом поповере есть встроенное скрытие поповера по клавише Esc). А еще появление поповеров позволит нам кастомизировать выпадающие меню в селектах — смотрите новый экспериментальный нативный HTML-элемент .

Подробнее: popover в MDN

CSS

Динамические viewport units

Поддержка: поддерживается большинством современных браузеров.

Когда-нибудь сталкивались с тем, что в мобильном Safari кнопки в модальных окнах оказываются спрятаны за навигационным меню браузера? Пускай времени, проведенного на Stack Overflow, вам никто не вернет, можно наконец выдохнуть — ведь теперь у нас есть small и large viewports (svh — единица измерения высоты, включающая в себя тулбары браузера, lvh — высота без учета тулбаров, и динамическая единица измерения dvh, объединяющая две предыдущие), а также новые единицы измерения vmin/vmax.

Подробнее: The large, small and dynamic viewport units

CSS nesting

Поддержка: не поддерживается Firefox.

Писать CSS с вложенными селекторами, прямо как в SCSS? Легко! Нужно только включить Experimental Web Platform features у себя в Chrome.

Подробнее: CSS Nesting is coming

Cascade layers

Поддержка: поддерживается большинством современных браузеров.

Любите писать CSS, используя BEM? А расширять уже написанные стили так, чтобы иерархия сохранялась? Добавление новых стилей значительно упрощает появление слоев @layer. Их приоритет выше, чем у обычных селекторов, так что работают они прямо как слои в фотошопе — новые слои перекрывают собой все изменения, добавленные в предыдущих слоях. Таким образом, мы можем избежать проблем со специфичностью — больше никаких !important (надеюсь, вы и так их не использовали).

Подробнее: Привет, CSS Cascade Layers

Как преодолеть трудности в обучении

Компьютер или ноутбук: что лучше выбрать для программирования и учебы

Мой первый pet-проект

Container queries

Поддержка: поддерживается большинством современных браузеров.

Появление media queries открыло нам верстку, адаптирующуюся под разные размеры экранов. Container queries же позволяют нам писать стили элемента с оглядкой на размеры его родителя, а не всей области просмотра. Этот способ отлично подходит для написания стилей переиспользуемых компонентов, внешний вид которых меняется в зависимости от контейнера.

Подробнее: Полное руководство по Container Queries в CSS

OKLCH

Поддержка: поддерживается большинством современных браузеров.

Если обычных rgb() и hsl() вам не хватало, встречайте oklch() — новый способ определять цвета в CSS, который гораздо лучше подходит для настройки цветов (а еще более доступный). Также обратите внимание на color-mix() — новый инструмент для смешения цветов в CSS.

Подробнее: OKLCH в CSS: по­че­му мы ушли от RGB и HSL

Color fonts

Поддержка: поддерживается большинством современных браузеров.

Возможность добавлять шрифты, где в каждом глифе используется несколько цветов? В вебе? Да! Если раньше это было доступно только в виде векторной графики, теперь настроить палитру шрифта можно прямо в коде.

Подробнее: Color fonts

Javascript

Array.findLast() и Array.at(-1)

Не любите писать громоздкий код в духе array[array.length - 1]? Эта проблема была решена еще в стандарте ECMAScript 2022 с появлением Array.at(-1). В ECMAScript 2023 же появилось еще 2 метода — Array.findLast() и Array.findLastIndex().

Подробнее: Array find from last, The .at() method

Трансформации копий массива (toReversed(), toSorted() and toSpliced())

Методы reverse(), sort() и splice() мутируют исходный массив. В ECMAScript 2023 появляются аналогичные методы, которые возвращают новую копию массива — toReversed(), toSorted() и toSpliced(). Помимо этого, в стандарте был добавлен метод with(), который заменяет элемент по заданному индексу новым значением, не мутируя исходный массив.

Подробнее: Change Array by Copy

public, static, private поля классов

Если вы вдруг пропустили, в ECMAScript 2022 появился новый синтаксис для объявления свойств класса — необходимость в конструкторе отпала. Также приватные свойства и методы теперь позволяют создавать действительно защищенные слоты данных, доступные только в теле класса. Приватные свойства также можно определять через # (старое правило — добавлять _ в начале имени свойства или метода).

Подробнее: Class fields (public, static, private)

Object.hasOwn()

Стандарт ECMAScript 2022 ввел метод hasOwn(), более безопасный аналог hasOwnProperty.call(object, property).

Подробнее: Accessible Object.prototype.hasOwnProperty()

structuredClone()

Больше никаких хаков с JSON.parse(JSON.stringify()) и деструктуризацией объекта. Им на смену приходит гораздо более удобный structuredClone(), позволяющий создавать глубокие копии объектов.

Подробнее: structuredClone() в MDN

Операторы Logical Assignment

Со стандартом ECMAScript 2021 в языке появилась комбинация логических операторов (&&, || и ??) и оператора присваивания (=). Так, с ее помощью мы можем присвоить переменной a значение b только тогда, когда a НЕ истинно — a ||= b. Возможно, когда-нибудь пригодится.

Подробнее: Logical Assignment Operators

globalThis

Кое-что, что вы могли пропустить из стандарта ECMAScript 2020. Как мы знаем, глобальный объект this зависит от контекста. В браузере это window, в Node.js это global. К любому из них теперь можно получить доступ через globalThis.

Подробнее: globalThis

Оператор Nullish coalescing

Удобный оператор, определенный еще стандартом ECMAScript 2020. В отличие от оператора ||, nullish coalescing оператор ?? срабатывает лишь тогда, когда значение левой стороны строго равно нулю или не определено. Так, выражение "" ?? "default value" вернет "".

Подробнее: Nullish coalescing Operator

Optional chaining

Наверняка вам тоже приходилось писать длинные цепочки в духе const title = data && data.article && data.article.title для присвоения значения переменной (чтобы избежать ошибок). С появлением стандарта ECMAScript 2020 эта громоздкая запись может стать гораздо проще — const title = data?.article?.title.

Подробнее: Optional chaining

Прочее

Web Vitals плагин для Chrome

Используете в своей работе Lighthouse для получения статистики о перформансе веб-страниц? Правда, работать с ним не совсем удобно. С появлением плагина Web Vitals работа с оптимизацией в Chrome стала куда проще — теперь вся статистика доступна прямо из консоли.

Подробнее: Using the Web Vitals extension to debug Core Web Vitals issues

Надеюсь, вы, как и я, открыли что-то новое для себя — и кто знает, может, через 5-10 лет мы уже не сможем представить себе веб-разработку без этих концептов?