Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022.

Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.

Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный механизм для указания состояния, описывающего поведение.

Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре.

https://habr.com/ru/post/661297/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661297

Погрузитесь глубоко в новую архитектуру React под названием Fiber и узнайте о двух основных фазах нового алгоритма согласования (reconciliation). Мы подробно рассмотрим, как React обновляет состояние и пропсы и обрабатывает дочерние элементы.

https://habr.com/ru/post/662549/?utm_source=habrahabr&utm_medium=rss&utm_campaign=662549

Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.

В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.

https://habr.com/ru/post/662355/?utm_source=habrahabr&utm_medium=rss&utm_campaign=662355

Казанская IT-компания объявила набор стажёров, которым предстоит заниматься сборкой интерактивных фильмов. Работать нужно будет удалённо, так что рассматриваются кандидаты со всей России и других стран. Основное требование - знание одного из языков: Kotlin, Android SDK / Swift, iOS SDK, UIKit / JavaScript, React. Рассматривают студентов и выпускников IT-направлений, которые находятся в поисках интересного опыта.

Почитать подробности и подать заявку до 21 апреля можно здесь: https://clck.ru/fiWYd

Movika разрабатывает IT-решения для интерактивного видео: инструменты для его создания, просмотра, монетизации и экспорта. Цель компании - сделать так, чтобы формат интерактивного контента становился повсеместным и популярным.

https://habr.com/ru/post/661635/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661635

За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.

Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand.

В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React.

https://habr.com/ru/post/661411/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661411

Привет, когда разрабатываем любой проект на React, мы, при выборе что рендерить, больше всего имеем дело с условными операторами или просто с передачей компонентов в определенный компонент, функцию или тому подобное. Но если происходит неожиданная ситуация и в React компоненте или функции случается ошибка, то, зачастую мы видим белый экран смерти. И после этого нам надо открыть инструменты разработчика, чтобы увидеть в консоли ошибку. А это точно не лучший способ обработки ошибок. Решением данной проблемы является Error Boundary.

https://habr.com/ru/post/661413/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661413

Привет, в данном посте вы найдете перевод статьи Mangabo Kolawole, в которой пойдет речь о Test-Driven Development. Мы создадим крайне простое приложение на React по всем правилам TDD.

Первое правило Test-Driven Development (TDD) – это написание тестов перед написанием кода. Это звучит более интуитивно, когда мы говорим о разработке для бэкенда, если честно, но работает ли данная схема для фронтенда, в частности для React, что же, посмотрим.

https://habr.com/ru/post/661335/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661335

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

Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке.

Для примера приложения в этом руководстве мы будем использовать Next.js.

https://habr.com/ru/post/661263/?utm_source=habrahabr&utm_medium=rss&utm_campaign=661263

Каждый день сайтом SuperJob пользуется более миллиона людей. Как построить архитектуру фронта, чтобы приложение загружалось быстро и при этом выполняло требования поисковой оптимизации? Как мы можем это измерить?

Значительно повысить производительность можно при помощи серверного рендеринга, но какая будет цена у такой оптимизации? Какой инструмент выбрать — готовую библиотеку или собственное решение? Какие ограничения в дальнейшем могут быть вызваны выбором того или иного подхода?

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021. Он рассказал о серверном рендеринге на примере приложения SuperJob. Читайте под катом, как SuperJob пришли к своей реализации серверного рендеринга, узнав по пути много интересного. Узнаете, когда хорош SSR и как он работает, из чего он устроен, чем может быть полезен и кому.

https://habr.com/ru/post/660681/?utm_source=habrahabr&utm_medium=rss&utm_campaign=660681

https://habr.com/ru/post/660819/?utm_source=habrahabr&utm_medium=rss&utm_campaign=660819

https://habr.com/ru/post/660573/?utm_source=habrahabr&utm_medium=rss&utm_campaign=660573

Эта статья — перевод основных изменений версии реакта 18.0.0 https://github.com/facebook/react/releases/tag/v18.0.0

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

https://habr.com/ru/post/660333/?utm_source=habrahabr&utm_medium=rss&utm_campaign=660333

В этом руководстве вы пройдете через процесс создания и публикации собственной библиотеки компонентов React и размещения ее на Github.

От переводчика: в статье автор демонстрирует как создать библиотеку с React компонентом внутри, подготовить её к публикации с помощью Rollup, опубликовать через npm, настроить StoryBook, настроить тестирование с использованием React Testing Library и Jest. В оригинальной статье есть ссылка на видеоверсию текущего урока.

https://habr.com/ru/post/660285/?utm_source=habrahabr&utm_medium=rss&utm_campaign=660285

Мы делаем Discord доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре.

Далее по катом.

https://habr.com/ru/post/659731/?utm_source=habrahabr&utm_medium=rss&utm_campaign=659731

В нашем последнем посте мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 18. В текущем посте мы дадим обзор того, что нового появилось в React 18, и что это означает для будущего.

Наша последняя основная версия включает в себя такие улучшения, как автоматическое пакетирование, новые API, такие как startTransition, и потоковый серверный рендеринг с поддержкой Suspense.

Многие функции в React 18 построены на основе нашего нового конкурентного рендеринга - закулисного изменения, которое открывает новые мощные возможности. Concurrent React является опциональным - он включается только при использовании concurrent функционала - но мы считаем, что он окажет большое влияние на то, как люди создают приложения.

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

https://habr.com/ru/post/659537/?utm_source=habrahabr&utm_medium=rss&utm_campaign=659537

https://habr.com/ru/post/659483/?utm_source=habrahabr&utm_medium=rss&utm_campaign=659483