Выходим за рамки с гридами. Алекс Трост показывает, как создавать разметку, которая не выглядит как стандартная сетка, при этом сохраняя свою адаптивность — https://frontend.horse/articles/thinking-outside-the-box-with-css-grid/
Size: a a a
2020 October 23
2020 October 26
Управление фокусом и атрибут inert. Эрик Бейли разбирается, что такое фокус, как он появляется, когда его добавлять и когда ограничивать. В переводе на «Веб-стандартах» — https://web-standards.ru/articles/focus-and-inert/
Пусть PWA станут обработчиками файлов. Томас Штайнер про File Handling API, который позволит установленным веб-приложениям регистрировать и открывать типы файлов на уровне ОС. Эксперимент уже за флагом в Chrome — https://web.dev/file-handling/
Самые полезные инструменты и техники для тестирования доступности. Артём Сапегин делится практическим опытом создания доступных интерфейсов — https://blog.sapegin.me/all/accessibility-testing/
2020 October 27
Выпуск №253: Edge на Linux, Safari, Chrome 87, Firefox 82, MDN, состояние и структура CSS, история браузеров. Слушайте на Ютубе https://youtu.be/0VpRTQrqaO4, читайте на Медиуме https://medium.com/p/f8437bd79b16
Веб-компоненты: руководство для начинающих. Мэтт Крауч объясняет основы на примере компонента комментария, в переводе на Хабре — https://habr.com/p/524452/
React Testing Library. Видеокурс Евгения Ковальчука про тестирование React-компонентов с помощью react-testing-library: идеи в основе, плюсы и минусы, основные отличия от Enzyme — https://www.youtube.com/playlist?list=PLNkWIWHIRwMEsMUc0B-lYb7DTLroWlKLK
2020 October 28
Опрос MDN, Igalia, npm 7, React vs WordPress, уже Webpack 5, Rome — инструмент будущего. Полная текстовая расшифровка 252 выпуска подкаста «Веб-стандарты» для тех, кто любит читать — https://web-standards.ru/articles/episode-252/
CSS в 3D. Джей Томпкинс показывает, как мыслить кубоидами и создавать 3D-сцены, на интерактивных демо — https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/
Как браузер рендерит страницу. Джеймс Старки по шагам объясняет, что происходит в браузере от загрузки HTML до отрисовки страницы — https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahc
2020 October 29
Уроки мини-приложений. Слайды презентации Томаса Штайнера с W3C TPAC 2020 про принципы работы, устройство и технологии разработки мини-приложений в китайской экосистеме супер-приложений — https://docs.google.com/presentation/d/e/2PACX-1vREwN7H71zfjPP8lwYgyc-iXam7_PMFCxiZy2dQNZ-XpbiKk1aRSj67vxfcegkHogcO0q3BFHxPf6S5/pub
Отзывчивый веб-дизайн и учёт высоты окна браузера. Ахмад Шадид предлагает отвлечься от ширины окна и вспомнить, что адаптировать интерфейс можно и для высоты. В переводе на Хабре — https://habr.com/p/525410/
2020 October 30
Советы по формам загрузки файлов. Тапас Адхикари рассказывает об особенностях работы с <input type=file> в HTML и JavaScript — https://blog.greenroots.info/10-useful-html-file-upload-tips-for-web-developers-ckgetegpf0c7go9s123wvg7bi
Убираем сдвиги раскладки при помощи гридов. Юбер Саблоньер решает проблему, когда в дашборде сдвигаются блоки при взаимодействии пользователя с элементами — https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/
Визуализация сложных данных с использованием D3 и React. Виталий Павленко собирает свой компонент рисования графиков, объясняя полезные особенности библиотеки D3 для этой задачи — https://habr.com/p/517562/
2020 November 02
Безумие на чистом HTML + CSS. Илья Стрельцын разбирает, как устроена игра-хоррор «The Caretaker» Джейми Коултера: 1,1 Мб стилей, чекбоксы и радиокнопки для хранения состояний и много других трюков — https://css-live.ru/tricks/bezumie-na-chistom-html-css.html
Задавать атрибуты height и width для изображений снова важно. Барри Поллард про перфоманс загрузки, метрику CLS, адаптивные картинки и aspect-ratio. В переводе на Хабре — https://habr.com/p/524918/
2020 November 03
Утечки памяти из-за закрытых окон. Джейсон Миллер и Бартек Новерски показывают, как профилировать память в браузере и объясняют, как бороться со ссылками на объекты, которые должны чиститься в GC — https://web.dev/detached-window-memory-leaks/
Переменные Sass, CSS и смысловые для тем. Дейв Руперт делится своим способом организации переменных для работы с цветовой палитрой сайта — https://daverupert.com/2020/10/variable-layers/