Дайджест новостей фронтенда и полезных статей из мира фронтенд-разработки c 19 по 25 декабря.

🔥 Главное за неделю

Apple, Google и Mozilla объединяются для создания эталонного теста браузеров следующего поколения. Speedometer 3 будет измерять, как браузеры работают с новейшими веб-технологиями.

💫 Релизы

jQuery 3.6.2. «Вам лишь бы шутки про меня шутить. Я легенда. Ясна?»

  • починили :has().
  • починили .contains() для <template>

SvelteKit 1.0 спустя два года. npm create svelte@latest и погнали:

  • как писать структурированный код;
  • как добавить рендеринг на сервер;
  • как добавить маршрутизацию;
  • как получить и получить данные;
  • как обрабатывать ошибки.

Node 19.3.0. Npm обновился до 9.2. Если у вас npm 9.x, то лучше обновиться до 9.2, так как было много исправлений критических уязвимостей.

Wretch 2.3: обертка fetch интуитивно понятным синтаксисом.

Спецификация: API для одноразового доступа к контактной информации, сохраняя при этом контроль пользователя над тем, какие контакты являются общими.

🖌 HTML и CSS

Как работает функцияimage(). image() — url() на стероидах, которого научили:

  • показывать фрагмент изображения;
  • направленность изображения;
  • указывать сплошной цвет, в качестве запасного варианта.

Несколько примеров, когда могут понадобиться выражения от контейнера: сетка карточек, чередование размеров карточек в сетке, сохранение размеров SVG-иконки и текста в адаптиве.

Сложные селекторы: разбираемся с nth-child вместе с :has()

Четыре способа, с помощью которых CSS :has() может сделать ваши HTML-формы еще лучше

Логическийborder-radius.

🏗 JavaScript

JavaScript переживает золотой век. Всё больше крупных компаний выбирают JS.

Пять проблем при создании изоморфной JS-библиотеки

Выбираем любимый бэкенд-фреймворк: Next, Nest, Nuxt... Nust? Правда ведь не похожие друг на друга названия библиотек? Разберёмся, в чём их отличия.

«Как мы настроили pnpm и Turborepo для нашего монорепозитория».

Рендеринг писем с помощью Svelte.

Визуальное руководство по useEffect.

Можем ли мы все просто признать, что хуки React были плохой идеей?

Чем хороши контексты React (и почему мы их не использовали)

🚶 Доступность

Полезные примеры по улучшению доступности и пользовательскому взаимодействию, которые помогут улучшить ваш дизайн.

🎓 Общее

INP — оптимизируйте взаимодействие до следующей отрисовки.

Разработчики Chromium считают, что WebGPU теперь готов к выпуску — WebGPU, по сути, представляет собой API следующего поколения для работы с графическими процессорами и вычислительными возможностями графического процессора из браузера.

Interop 2022: обновление на конец года. Все браузеры молодцы. Если вначале года средняя оценка было ~72, то под конец года ~92 по тестам выбранных технологий.

Как мы используем GitHub для повышения продуктивности, совместной работы и безопасности.

Прошлые выпуски