Фронтенд-новости 46. Дайджест новостей и полезных статей о фронтенде с 27 февраля по 5 марта.

🔥 Самое важное

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

💫 Что нового

Safari Technology Preview 164 и Next.js 13.2

🧬 HTML и CSS

Руководство по проверке доступных форм — что нужно учитывать, чтобы никто не застрял на недоступном недействительном поле.

Руководство по CSS object-view-box.

Руководство по цветовым функциям CSS.

Узнайте от Рэйчел Эндрю, что было нового в феврале в веб-платформе:
- выражения от контейнера для размеров
- initial-letter — для работы с буквицей
- ReadableStream — в асинхронном формате
- AudioContext.setSinkId() — чтобы AudioContext мог направлять звук в нужное устройство
- IFrame без учетных данных
- и многое другое.

Теория. Теперь можно запрашивать у контейнера не только размеры, но и стили, и даже кастомные свойства.
Практика. Как сделать тёмную тему с помощью выражений от стилей контейнера.

О выражения от контейнера, адаптивных изображениях и JPEG-XL.

Изменение размера с помощью CSS-свойства resize, которое создает в документе область с изменяемым размером.

font-display: swap решает проблему с FOIT, но не решает всех проблем. Всё-таки если шрифт, даже с font-display: swap, загрузился не сразу, то сначала отображается дефолтный шрифт, а потом он меняется на указанный в font-family. В этот момент происходит микро, а иногда и макро, смещение макета, которое негативно влияет на метрику CLS. С помощью size-adjust, ascent-override, descent-override`и `line-gap-override можно нивелировать смещение и улучшить метрику.

Заголовки составных таблиц плохо поддерживаются средствами чтения с экрана — избегайте их (ну, в смысле, составных таблиц :)

Шесть распространенных ошибок SVG (и как их исправить)

Используйте позиционирование к якорю для расположения элементов рядом с другим

Проблема добавления пробела после псевдоэлемента ::marker.

🏝️ JavaScript

▶️ Перезапуск процессов в Node.js / Новый параметр —watch. Разбираемся на практике с новым экспериментальным параметром для CLI ‘—watch’.

▶️ Как вызвать функцию в JavaScript / 5 способов. Разбираем вопрос с собеседований.

Миграция с Enzyme на React Testing Library.

«React держит меня в заложниках» — несколько преувеличенное название, но автор под псевдонимом считает, что пришло время: «Под защитой этого нового тренда в недовольстве React я хотел бы, наконец, высказать своё» и тратит много слов и примеров кода, выражая неудовольство, признавая, что React никуда не денется.

Создание анимации в React с помощью React Spring.

Sandworm Audit: новый инструмент аудита JS для сканирования проекта и зависимостей на наличие уязвимостей, проблем с лицензией и связанных с этим проблем.

Декомпозиция и интерфейс vue-компонентов.


🦭 Общее

Chrome долгое время считался ресурсоемким на современных компьютерах Mac, но последняя версия Chrome значительно улучшила ситуацию, говорят разработчики Chrome.

WebPush в iOS изменил мир? Получается, что да.

Разрабатываем браузерное расширение легким движением руки


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

Всем привет, меня зовут Айгуль, я работаю смм в Академии.

Пользуясь своим служебным положением, я решила пройти профессию «Фронтенд-разработчик» и сменить профессию. Ближайший поток стартует в апреле, значит, у меня есть время в спокойном темпе пройти подготовительный раздел и подготовиться к обучению.

Если вам интересно посмотреть, что из этого выйдет, подписывайтесь на канал, будем учиться вместе.

Сегодня предлагаем вам чуть-чуть отвлечься от серьёзных задач и собрать своё фигма-бинго. Делайте скриншот, отмечайте свои навыки и делитесь бинго в комментариях 😁

Подборка статей по JavaScript для начинающих

Сели изучать JavaScript и хотите написать пару рабочих скриптов? В помощь публикуем подборку статей. Внутри найдёте инструкцию по типам данных, познакомитесь с React и TypeScript, узнаете про алгоритмы и посмотрите, как писать код правильно.

Зачем фронтендерам React, если есть JavaScript

TypeScript. Зачем он нужен и почему так популярен

Что такое и зачем нужны алгоритмы

Типы данных в JavaScript. Инструкция для начинающих

Кодгайд: почему, зачем и как

6 книг по JavaScript для начинающих

#htmlacademy_статьи

С 15 по 18 марта весенняя распродажа навыков и проектов для практики, скидки до 75%.

⚡Проекты для практики помогут проверить свои навыки веб-разработки, выполнив проект по вёрстке или javascript «от начала и до конца».

В комплекте:
* макет в формате figma,
* пошаговая инструкция,
* архивы с эталонным решением каждого этапа.

⚡Навыки — мини-курсы, в которых вы научитесь решать конкретные профессиональные задачи на реальных кейсах, узнаете нюансы и отработаете навык их выполнения до автоматизма.

В комплекте:
— теория и инструкции,— эталонная реализация,
— кейсы для практик.

Забрать навык или проект со скидкой.

#htmlacademy_обучение

Фронтенд-новости 47. Совершенно точно настоящий, а не отправленный случайно нажатием enter в неподходящий момент времени, пока ещё не всё оформлено, дайджест новостей и полезных статей о фронтенде с 6 по 16 марта, хотя обычно он выходит по понедельникам, а сегодня пятница, но что уж теперь.

💫 Что нового

Chrome 111
- View Transitions API
- Поддержка CSS Color Level 4
- Новые инструменты на панели стилей

Chrome 112 beta и в нём Chrome DevTools

Отчет о производительности Astro, Gatsby, Next.js, Nuxt, Remix, и SvelteKit в 2023.

В Chrome появился headless mode. Узнайте, как его использовать.

🧬 HTML и CSS

Типографить станет чуть легче с новым CSS-свойством text-wrap: balance

Нам нужен нативный .visually-hidden

Полное руководство по медиавыражениям

ARIA против HTML. `<div role="heading" aria-level="1">`— это то же самое, что `<h1>` , но что использовать лучше?

Руководство для начинающих по ручному тестированию доступности. Узнайте, как проводить ручное тестирование с клавиатурой, программой чтения с экрана и масштабированием.

Пять ошибок при написании альтернативного текста?

🏝️ JavaScript

🎥 Что почитать по JavaScript / Игорь Антонов с большим обзором книг по JavaScript

Распространенные ошибки новичков в React.

Были ли React Hooks ошибкой?

Как создать панель администратора React с помощью Mantine, Strapi и Refine

Vue 3.2 и прирост скорости.

12 самых популярных фреймворков Node.js в 2023 году


Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.