Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 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 есть функция перевода страницы с любого популярного языка, а видео можно перевести в Яндекс Браузере.
