Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 27 июня–3 июля.
?♂️Доступность
? Частично визуально скрытый текст. Частично визуально скрытые тексты могут быть удобны для людей, использующих скринридеры, но могут быть проблематичными для тех, кто использует программное обеспечение для голосового управления.
? Спецификации
? Mozilla о лицензиях спецификаций. ECMAScript разработана в Ecma International, а HTML и CSS разрабатываются в W3C. Эти учреждения имеют разные лицензионные соглашения по умолчанию, что создает проблемы.
? Этические принципы машинного обучения в вебе. W3C опубликовала черновик, в котором определяются этические проблемы, которые могут применяться к машинному обучению в браузерах.
? W3C станет некоммерческой организацией, представляющей общественные интересы с января 2023 года.
?️ CSS
? Mobile-first: что пора переосмыслить? У подхода mobile-first есть как недостатки так и преимущества, но что поменялось за столь долгое существование этого подхода? Рассмотрите использование подхода в 2022, а также узнайте другие решение, которые могут работать лучше.
лёгкой кодовой базой,
современными 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
? Большое обсуждение, что использовать в prettier — табы или пробелы.
? Безопасное повторение 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
⚡ Производительность
? Early Hints. Узнайте, как ваш сервер может отправлять браузеру подсказки о критически важных подресурсах.
? Наказание CLS за прогрессивное улучшение? Бургерное меню иногда может ухудшить показатели Lighthouse.
?️ Инструменты
? -Это caniuse? -Нет. -Это caniemail? -Нет. -Это canidevtools? -Да. Для проверки методов используемых в инструментах разработчика.
? React Native 0.69 с React 18, обновлённым Hermes и C++17.
? React Archer 4.0 для рисования стрелок между DOM-элементами.
?️Браузеры
?Общее
? Что нужно и нельзя делать для парных шрифтов? Разберитесь с базовыми терминами: 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
