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

????‍♂️Доступность

???? Частично визуально скрытый текст. Частично визуально скрытые тексты могут быть удобны для людей, использующих скринридеры, но могут быть проблематичными для тех, кто использует программное обеспечение для голосового управления.

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

???? Mozilla о лицензиях спецификаций. ECMAScript разработана в Ecma International, а HTML и CSS разрабатываются в W3C. Эти учреждения имеют разные лицензионные соглашения по умолчанию, что создает проблемы.

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

???? W3C станет некоммерческой организацией, представляющей общественные интересы с января 2023 года.

????️ CSS

???? Mobile-first: что пора переосмыслить? У подхода mobile-first есть как недостатки так и преимущества, но что поменялось за столь долгое существование этого подхода? Рассмотрите использование подхода в 2022, а также узнайте другие решение, которые могут работать лучше.

???? Напишите свой лучший CSS с:

• лёгкой кодовой базой,

• современными CSS-свойствами,

• линтерами,

• маленьким размером,

• и применением любой методологии.

Либо познакомьтесь с критериями качества вёрстки.

???? Полное руководство по использованию CSS-фильтров в SVG. С помощью фильтров можно размыть, настроить контрастность и насыщенность, изменить оттенок, уменьшить непрозрачность изображений.

???? Одна CSS-строчка для добавления базового тёмного/светлого режима. color-scheme: dark light;, а также узнайте как поменять режим в DevTools.

???? Как найти предыдущий элемент с одним родителем? p:has(+ hr) a:only-child находит <a>, которая лежит в <p>, которому предшествует <hr>.

???? Defensive CSS. Справочник практических советов по CSS и дизайну для интерфейсов.

???? Выражения от стилей. Логическое продолжение выражений от контейнера. Выражения от стилей вычисленном значении контейнера. Может пригодиться при темизации, ховер-эффектах, ненаследуемых значениях, связанных стилей.

@container style(color: hotpink) {
  .card {
    /* если у элемента цвет текста hotpink */
    /* то измени цвет фона на белый	 */
    background: white;
  }
}

???? Доводы в пользу использования Sass в 2022 году. Работает вне браузера, работает совместно с CSS, добавляет много полезных дополнительных функций, хорош для повторно используемого кода, подходит для крупных проектов.

???? Сложные и составные селекторы. Простой селектор — класс, тег, идентификатор. Составной селектор — последовательность простых селекторов, не разделённых комбинатором.

img#hero { … }
a:focus { … }
.only.with.all.of.these.classes { … }

Сложный селектор — последовательность одного или нескольких составных селекторов, разделённых комбинаторами.

#hero img { … }
a:focus > .icon { … }
.only.with ~ .all.of ~ .these.siblings { … }

???? Scrollbar в современном CSS.

????️ JavaScript

???? State of GraphQL.

???? Большое обсуждение, что использовать в prettier — табы или пробелы.

???? 10 лет Meteor.

???? Безопасное повторение XHR. Если при XMLHttpRequest произошла ошибка, то как повторить запрос?

???? Как не дать устройству перейти в спящий режим с помощью JavaScript? С помощью wakelock.

???? Как проверить заполненность localStorage?

????React

???? Комбинация MDX и MJML для работы с электронными почтой. Создавать письма на HTML — достаточно трудоёмкая задача, которую можно упростить с помощью MDX и MJML.

???? Как написать свой стейт-менеджер, аналогичный MobX, но в 2 раза меньше и в 2 раза быстрее, который решит большинство типичных проблем ReactJS компонент. Реализация своего ReactJS с точечным рендерингом минуя VDOM. И даже создание полифила наделяющего обычный DOM реактивными свойствами, минуя какие-либо фреймворки.

???? Node.js

???? Работа с файловой системой. Обзор API и рецепты для различных задач.

???? Должен ли node.js поддерживать веб-воркеры? Мнение: все нынешние веб-воркеры, либо давно не поддерживаются, либо несовместимы со стандартом. Предложение: поддерживать стандарт.

???? Предложение по улучшению по поиску в npm. Исключить активность ботов, уменьшить значимость звёдочек и количества скачиваний, увеличить значимость работы в issue и PR.

???? Vue

???? Вышел Vue 2.7 «Naruto».

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

???? Early Hints. Узнайте, как ваш сервер может отправлять браузеру подсказки о критически важных подресурсах.

???? Наказание CLS за прогрессивное улучшение? Бургерное меню иногда может ухудшить показатели Lighthouse.

????️ Инструменты

???? -Это caniuse? -Нет. -Это caniemail? -Нет. -Это canidevtools? -Да. Для проверки методов используемых в инструментах разработчика.

???? React Native 0.69 с React 18, обновлённым Hermes и C++17.

???? React Archer 4.0 для рисования стрелок между DOM-элементами.

????️Браузеры

???? Firefox 102.

????Общее

???? Что нужно и нельзя делать для парных шрифтов? Разберитесь с базовыми терминами: baseline, x-height, foot, stroke. Разберитесь с классификацией: serif, sans-serif, slab-serif, script, display, monospaced. Ищите шрифты, поддерживающие несколько языков. Оцените сходство. Смешайте декоративные с нейтральными. Используйте контрастную толщину.

???? Дизайн-системы 2022. Мнение 200 специалистов о дизайн-системах.

???? Github Copilot теперь доступен всем. Copilot протестирован в течении 12 месяцев 1,2 миллионом разработчиков. 40% кода, где он включён, написано с помощью Copilot. Стоит $10 в месяц, но можно попробовать пробную версию на 60 дней.

???? Как работает сжатие изображений на примере JPEG.

???? Правильное пространство вокруг заголовков. Уменьшите пространство под заголовком и увеличьте над ним. Добавляете пробелы между записями и делайте ссылки очевидными. Используйте как можно меньше стилей шрифтов. Уменьшите высоту коротких строк.

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

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