For Web — фронтенд, дизайн, программирование

depcheck, инструмент для поиска неявных и неиспользуемых зависимостей: умеет анализировать файлы на JS, TS, CoffeeScript, Sass и Vue.js → https://github.com/depcheck/depcheck

Добиваемся идеального контраста между текстом и фоном: руководство по разработке инструмента, который автоматически вычисляет оптимальный уровень непрозрачности подложки для фона с помощью Canvas и бинарного поиска → https://css-tricks.com/nailing-the-perfect-contrast-between-light-text-and-a-background-image/

Как работает отрисовка страницы в Chrome с новым движком RenderingNG: высокоуровневый обзор ключевых программных компонентов и их взаимодействий → https://developer.chrome.com/blog/renderingng-architecture/

CSS Anchored Positioning: инженеры Microsoft инициировали добавление в CSS возможности позиционирования попапов относительно указанного элемента с учётом границ вьюпорта → https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md

Сохраняем вовлечённость пользователей несмотря на ожидание: дизайнеры DocuSign делятся практическими приёмами по результатам собственного UX-исследования → https://medium.com/p/10713ab54c3d

Критерии качества вёрстки: Александр Першин из HTML Academy делится обновлёнными критериями, используемыми в обучении студентов, и приглашает сообщество к их дополнению и улучшению → https://habr.com/p/566244/

Легковесный и доступный компонент сравнения изображений: Пол Геберт делится готовым веб-компонентом (1.5 КБ) и подробно рассказывает о том, как он реализован (нативные HTML-контролы, CSS и щепотка JavaScript) → https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/

Почему и в пользу чего инженеры Shopify отказались от Sass в своей дизайн-системе: подробный рассказ о мотивации и обзор альтернатив со сравнением их плюсов и минусов → https://github.com/Shopify/polaris/discussions/44

Пишем наивный полифил для промиса: Андрей Мелихов объясняет принципы работы промисов на примере разработки полифила для них с нуля → https://youtu.be/1qyT-5MYIMk

Разрабатываем интерактивную диаграмму Ганта на чистом JavaScript: Анна Пренцель демонстрирует проектирование и разработку сложного веб-компонента с использованием CSS-гридов и JavaScript Proxy → https://www.smashingmagazine.com/2021/08/interactive-gantt-chart-component-vanilla-javascript/

Разбираемся со skip link: Татьяна Фокина объясняет, зачем сайтам нужна ссылка, ведущая к основному содержимому страницы, и как её правильно реализовать → https://tatiana-fokina-blog.ru/posts/understanding-a-skip-link/

Быстрая доставка веб-приложений с паттерном PRPL: Эдди Османи с обзором архитектурного паттерна, позволяющего ускорить открытие роутов веб-приложения → https://addyosmani.com/blog/the-prpl-pattern/

Лучшие практики разработки форм оплаты и адреса доставки: от внешнего вида до неочевидных HTML-атрибутов, улучшающих UX → https://web.dev/payment-and-address-form-best-practices/

Как работает поисковый саджест на MDN: обзор деталей реализации на фронтенде → https://hacks.mozilla.org/2021/08/mdns-autocomplete-search/

Практические примеры использования математических функций в CSS: calc, clamp, min и max → https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/

vConsole, встраиваемая консоль разработчика от Tencent для отладки в мобильных браузерах: реализует просмотр логов, сетевых запросов, DOM, хранилищ и cookies, позволяет выполнять кастомный JS и поддерживает плагины → https://github.com/Tencent/vConsole

Декодируем AVIF: глубокое погружение с котиками и imgproxy. Полина Гуртовая подробно рассказывает, как устроен новый формат изображений, почему он такой эффективный и как начать его использовать → https://evilmartians.com/chronicles/decoding-avif-deep-dive-with-cats-and-imgproxy

Пишем двоичный сумматор в игре «Жизнь» на JavaScript: серия статей Саши Беспоясова.

1. Реализуем правила игры «Жизнь» и пишем модуль для рисования на canvas
2. Учимся генерировать сигналы и создаём логические схемы NOT, AND, OR и XOR
3. Реализуем двоичный полусумматор и полный сумматор, которые используем для создания калькулятора

Как использовать CSS Shapes для создания контролов и навигационных меню с необычными формами → https://css-tricks.com/using-css-shapes-for-interesting-user-controls-and-navigation/

Интерактивные лейблы на картах: Линзи Берри из Lyft делится UX-рекомендациями по размещению и оформлению лейблов → https://medium.com/tap-to-dismiss/tap-to-navigate-f8f21e16cad6