Складывая DOM. Джош Комю собирает React-компонент, имитирующий эффект складывания бумаги, по ходу разбираясь в CSS-трансформациях — https://www.joshwcomeau.com/posts/folding-the-dom/
Size: a a a
2019 September 26
Логические операции на CSS-переменных. Ана Тюдор эмулирует булевую логику внутри calc() и показывает, где это может пригодиться в реальных проектах — https://css-tricks.com/logical-operations-with-css-variables/
2019 September 27
Чемпионат Яндекса по программированию пройдет с 14 по 20 октября по четырём направлениям: фронтенд-, бэкенд-, мобильная разработка и машинное обучение. Задачи для фронтенда составили разработчики веб-интерфейсов Поиска Яндекса. Призовые места от 100 000 до 300 000 ₽, двадцать лучших финалистов пригласят в офис компании на экскурсию и собеседования. Регистрация — https://yandex.ru/championship/frontend/
2019 September 30
Выпуск №195: Бета Chrome 78 и iOS 13, сгибание на React, экономная оптимизация, вариативные Google Fonts, прокси и jQuery. Ссылки на Медиуме https://medium.com/p/238b57fdefdc или на Ютубе https://youtu.be/8qNvlo2wPo4
Инклюзивные компоненты: интерфейсы со вкладками. Хейдон Пикеринг про настоящие вкладки, их доступность и адаптацию в переводе на «Веб-стандартах» — https://medium.com/p/a125212e6c35
Первые доклады в программе Web Standards Days в Екатеринбурге 19 октября: запуск React в Java, устойчивости к ошибкам и шрифты для веба. Бесплатная регистрация пока открыта — https://wsd.events/2019/10/19/
Где и как использовать мультиколонки. Рэйчел Эндрю показывает, когда колонки удобнее двумерных сеток и какие нюансы нужно учитывать при такой вёрстке, в переводе на Хабре — https://habr.com/p/469395/
2019 October 01
Как рисует браузер. Константин Крамлих из Яндекса о том, как современные браузеры оптимизируют отрисовку веб-страниц, в расшифровке доклада на Хабре — https://habr.com/p/468165/
Разбираемся с высотой строки в Figma. Марчин Вихари рассказывает о том, как в Figma решили уйти от принятых в дизайне принципов работы с высотой строки в сторону удобства для веб-дизайнеров — https://www.figma.com/blog/line-height-changes/
Размечаем доступные изображения и SVG в зависимости от контекста. Скотт Охара подробно разбирает нюансы создания доступного описания для изображений — https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
2019 October 02
Будьте проще с CSS, который масштабируется. Энди Белл делится принципами, которые помогают ему получать максимум от возможностей CSS — https://hankchizljaw.com/wrote/keeping-it-simple-with-css-that-scales/
Крах под тяжестью лиц. Зак Лезерман оптимизирует загрузку аватарок комментаторов с внешнего сервиса в своём блоге — https://www.zachleat.com/web/facepile/
2019 October 04
Новые доклады в программе Web Standards Days в Екатеринбурге 19 октября: проверка UX, игры для программистов и поддержка фреймворка в IDE. Бесплатная регистрация всё ещё открыта — https://wsd.events/2019/10/19/
Форматы изображений, серия видео SlyLama TV:
1. Растровые и векторные форматы, их задачах и особенности — https://youtu.be/P1K0ZNGczsk
2. Алгоритмы сжатия JPEG, JPEG2000, JPEG-XR, WebP и устройство RAW — https://youtu.be/G5Q2CltA_Pc
1. Растровые и векторные форматы, их задачах и особенности — https://youtu.be/P1K0ZNGczsk
2. Алгоритмы сжатия JPEG, JPEG2000, JPEG-XR, WebP и устройство RAW — https://youtu.be/G5Q2CltA_Pc
2019 October 07
Поддержка тёмного режима в WebKit. Тимоти Хэтчер об использовании свойства color-scheme и медиавыражения prefers-color-scheme для оформления нативных элементов страницы и по системным предпочтениям пользователя — https://webkit.org/blog/8840/dark-mode-support-in-webkit/
Графика для веба правильно. Полина Гуртовая и Рита Клубочкина с обзором всего, что вам нужно знать про оптимизацию графики: растр, вектор, видео, оптимизация и вставка — https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
Drag-&-Drop компоненты для слепых пользователей. Расшифровка доклада Сергея Кригера про добавление доступности компонентам, с которыми привычно взаимодействовать мышкой: слайдер, загрузка файлов, сортируемые списки — https://habr.com/p/468541/
2019 October 08
Извлекаем критический CSS. Милица Михайлия о влиянии подхода на метрики производительности и об инструментах автоматического определения критических стилей для страницы — https://web.dev/extract-critical-css
Режимы письма и CSS-раскладки. Рэйчел Эндрю объясняет особенности работы со свойством writing-mode и его связи с гридами и флексами — https://www.smashingmagazine.com/2019/08/writing-modes-layout/