Фронтенд-новости №6. Интернет сломан, бесплатный VPN в Edge, State of CSS 2022

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая.

Спецификации

• Этические принципы и принципы конфиденциальности при разработке веб-платформы. 

HTML

• Узнайте очередное доказательство того, что интернет сломан.

• «Волшебные техники SVG». 

• Узнайте, как использовать видео с прозрачностью.

CSS

• STATE OF CSS 2022.

• Узнайте важен ли порядок CSS-свойств в блоке правил.

• Взгляд в прошлое, чтобы оценить то, что изначально в CSS сделано правильно.

• PurgeCSS и styled-components. PurgeCSS не работает?

JavaScript

• Создайте музыкальный инструмент с помощью Web Audio API.

• Давайте разберемся почему вендорные префиксы в JavaScript нужно указывать с заглавной буквы, например, button.style.WebkitFilter или button.style.MozFilter.

• Jest переехал в OpenJS Foundation.

• У TS вышел новый релиз кандидат 4.7.

• В защиту SPA. (это шутка)

React

• Узнайте про хук useEvent для того, чтобы более точно работать с событиями. Сейчас фича на стадии сбора обратной связи.

• Чем является и чем не является хук useEvent.

• Узнайте почему атрибут key не так уж и не важен.

• Подробно про свойство "as".

• Сравнение webpack и vite для storybook.

Angular 

• Продолжаем обновляться до v13.3.7 или даже v13.3.8.

• и пробовать бету 14.0.0-rc.0, кстати уже релиз кандидат.

Node.js

• Используйте 2FA для npm.

• JavaScript вне браузеров. Новая инициатива Cloudflare, Vercel, Shopify по вопросам совместимости и разработки веб API для небраузерных сред.

• Узнайте про программы-вымогателей в модулях node.js.

• Nodenext и TS. Узнайте про поддержку модулей ES в TS.

• Про Github Pulls AP для управления пулреквестами.  

• Управление OAuth учётными данными в node.js приложении.

Vue

Я видел ваши просьбы добавлять информацию про Vue. Спасибо вам за обратную связь. В следующем выпуске добавлю.

Производительность

• Повлияйте на то, как браузеры извлекают ресурсы.

• Сравните производительность JavaScript-фреймворках с помощью Google CrUX.

• Узнайте как работать с профилировщиком производительности в DevTools.

Инструменты

• reagraph — визуализация сетевых графов, в которой используется WebGL для 2D и 3D-рендеринга.

• Babylon.js 5.0 — движок для рендеринга 3D.

• Ещё не используете AVIF? Тогда узнайте список инструментов, которые помогут вам создать AVIF.

• crypto-random-string — для генерации криптографически стойкой случайной строки. Работает в браузере и node.js.

• Motion DevTools для отладки анимаций в DevTools.

Браузеры

• В Edge появится бесплатный встроенный VPN.

Общее

• Улучшайте UX с помощью дизайн KPI.

• Исправьте UX вашего окна согласия на использование cookie.

• Решите проблему жёлтого цвета для цветовых палитр.

• Зацените новый Roboto Flex с огромным диапазоном веса и ширины.

• Не выгорайте. Узнайте как компании помогают своим сотрудникам.

• Apple, Google и Microsoft объединились, чтобы создать вход в систему без пароля.

• Узнайте 101 принцип дизайна.

• Узнайте как создать лучший компонент по переключению языка.

Как читать статьи на английском языке

В дайджесте много статей и видео на английском языке, чтобы это не стало препятствием: в Google Chrome есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.