Веб-стандарты. Страница 33

Энди Белл делится приёмом, как добавить перенос строки после inline-элемента без правки разметки — https://piccalil.li/quick-tip/create-a-line-break-while-maintaining-inline-status/

Всё, что разработчику нужно знать про Figma. Юрн ван Виссен разбирает самое важное на примере макета: от горячих клавиш, стилей и инспектирования до экспорта графики — https://www.smashingmagazine.com/2020/09/figma-developers-guide/

Создание шапки сайта на флексах. Ахмад Шадид собирает шаг за шагом вёрстку типичной шапки с вариациями и простой адаптацией — https://ishadeed.com/article/website-headers-flexbox/

Больше контроля над фокусом для разработчиков и пользователей. В Chrome 86 появится псевдокласс :focus-visible и настройка Quick Focus Highlight, которая будет показывать фокус вне зависимости от стилей сайта для лучшей доступности интерфейса — https://blog.chromium.org/2020/09/giving-users-and-developers-more.html

Углы градиентов в CSS, Figma и Sketch. Нильс Биндер показывает, почему почти невозможно воспроизвести поведение CSS-градиентов в популярных редакторах графики и на что стоит обращать внимание при вёрстке элементов с градиентами — https://9elements.com/blog/gradient-angles-in-css/

Манипуляции с графикой на CSS. Абдул Хазиз накладывает маски, размывает, применяет фильтры и смешивает изображения для достижения интересных эффектов — https://dev.to/ziizium/image-manipulation-with-css-11dd

Насколько сложно сделать кастомный <select> правильно? Практически невозможно. Педро Дуарте рассматривает существующие решения, перечисляет требования к хорошей реализации и предлагает свою из дизайн-системы Radix — https://www.modulz.app/blog/under-the-spotlight-select

Event Listeners: делегирование или прямой биндинг. Джейсон Миллер сравнивает между собой два способа подписки на события, связанные с элементами DOM — https://jasonformat.com/event-delegation-vs-direct-binding/

00:01:34 Firefox 80
00:07:44 Chrome 85
00:22:47 Никто не новый IE
00:34:34 Зачем Yarn 2
00:42:35 Новый формат AVIF

Выпуск №245: Firefox 80 и Chrome 85, никто не новый IE, зачем Yarn 2, новый AVIF и WebP v2. В гостях Андрей Ситник. Слушайте на Ютубе https://youtu.be/W11KhAYfQu8, читайте на Медиуме https://medium.com/p/c3fa63b811ce

CSS Values. Луи Лазарис делится инструментом для поиска возможных значений CSS-свойств с информацией об их браузерной поддержке — https://cssvalues.com/

Modal — простой и доступный веб-компонент для модальных диалогов Filament Group. В основе кастомный элемент <fg-modal> и атрибут inert, для IE11 собирается отдельная версия с полифилами — https://filamentgroup.github.io/fg-modal/demo/

Недоступность в картинках. Юля Бухвалова взялась разобраться, что такое «недоступно для скринридера» и проверила, как звучит и выглядит плохая страница, по сравнению с хорошей — http://css.yoksel.ru/inaccessibility/

Открытый онлайн-чемпионат Яндекса для разработчиков пройдёт с 21 сентября по 7 ноября. Кроме фронтенда, соревнования пройдут по бэкенду, мобильной разработке, аналитике, алгоритмам и машинному обучению. Призовой фонд чемпионата 3 300 000 ₽ — https://yandex.ru/cup/frontend/?utm_source=telegram&utm_medium=posev&utm_campaign=webstandart

Это или то. Сборник сравнений похожих в веб-разработке подходов и инструментов Нгуена Хуу Фуока с подсказками и хорошими практиками — https://thisthat.dev/

Почему логические свойства в CSS ещё не готовы? Элад Шехтер рассказывает, какие части спецификации не реализованы в браузерах и почему логические свойства важны для разработки сайтов — https://medium.com/p/c102925a5cba

Эффективное тестирование вёрстки. Расшифровка доклада Максима Соснова про многообразие инструментов тестирования и подходы, позволяющие сократить время на написание тестов — https://habr.com/p/499638/

Разработка плагинной системы на JavaScript. Брайан Браун показывает простую плагинную архитектуру и объясняет сложности, которые нужно учитывать при её разработке — https://css-tricks.com/designing-a-javascript-plugin-system/