Стартовал 12-й CSSBattle. Участникам предлагается реализовать предложенную картинку с помощью HTML и CSS, без использования графики и JS, используя минимальное количество кода. Игра продлится до 21 декабря.
Как работать с предпочтениями пользователей в React. Хьюго Жирадель предлагает решение, которое позволит удобно учитывать и ограничивать анимацию и трафик или выбирать подходящую светлую или тёмную тему — в зависимости от настроек браузера.
Редактирование с семантичным HTML. Джон Ри показывает, как, используя стандартные элементы и стилизуя их, удобно показывать информацию о правках в документе.
Онлайн-курс «Основы веб-разработки» GeekBrains для детей 11–17 лет стартует 26 ноября. Курс длится 3 месяца с часовыми занятиями раз в неделю. В программе: разметка, стили, основы скриптов, резиновая вёрстка и учебный проект собственного сайта.
Симуляция недостатков зрения. Матиас Байненс рассказывает, как и зачем в DevTools и рендерере движка Blink реализованы режимы, имитирующие цветовую слепоту или нечёткое зрение у пользователя.
00:01:14 События 00:03:05 Chrome 87 00:10:24 Chrome DevTools 00:15:14 Firefox 83 00:24:23 Новый дом для Servo 00:28:26 Safari 14 00:38:38 Open Prioritization 00:44:57 Кэш туда-обратно 00:53:38 Гриды и minmax
A11Y Websites. Пополняемся коллекция примеров доступных сайтов Калума Райяна. Любой сайт можно предложить в коллекцию, если его уровень доступности по WCAG не меньше AA.
Upptime. Опенсорсный аптайм-монитор, работающий на Гитхабе с помощью экшенов: тесты запускаются каждые пять минут, генерируется дэшборд со статусом и событиями, можно настроить уведомления.
Адаптивные таблицы, простая версия. Адриан Розелли делится чуть более простым рецептом создания доступных адаптивных таблиц, протестированных на реальных пользователях.
Управление npm-зависимостями. Хьюго Жирадель делится опытом работы над кодом банка N26: документирование и аудит зависимостей, неиспользуемые и устаревшие зависимости.
Создание сайтов с prefers-reduced-data. Разработчики Polypane рассказывают про медиафичу prefers-reduced-data, которая позволяет учесть предпочтение пользователя и сэкономить трафик. Примеры использования в CSS и JS, варианты тестирования.
00:00:27 События 00:04:15 Bocoup и appearance 00:09:29 Нестинг в CSS 00:18:21 Адаптация таблиц 00:27:23 Устройство браузера 00:41:38 Смёржить всё в JS 00:53:28 Ценность разделения
Нативное соотношение сторон с помощью CSS-свойства aspect-ratio. Брэм Штайн про новое свойство из черновика Box Sizing L4, которое уже работает в сборках Chromium 89 и Firefox 85 и поможет нам избавиться от привычного, но неудобного паддинг-хака.