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

Перестаньте добавлять инструкции для скринридеров. Адриан Розелли показывает, как скринридеры работают со стандартными тегами и aria-атрибутами в HTML и почему лишние инструкции и описания могут мешать пользователям — https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html

Новинки Safari 14 в ближайших релизах macOS и iOS: WebP, веб-расширения, HTTP/3, отказ от Flash, BigInt, logical assignment и публичные поля классов, кастомные EventTarget, расширенный image-set в CSS, псевдоселекторы :is() и :where(), image-orientation https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

Как я закрыл трёхлетний issue в TypeScript. Алекс Козак рассказывает, как внести вклад в разработку TypeScript на примере правки генерируемых тайпингов — https://habr.com/p/507522/

UI Design Daily. Еженедельно пополняющаяся коллекция бесплатных шаблонов для Sketch, Photoshop, Figma, AdobeXD и InVision Studio с различными элементами интерфейсов — https://uidesigndaily.com/

Шпаргалка по гридам. Юлия Бухвалова соединила документацию с интерактивными примерами для лучшего понимания — https://yoksel.github.io/grid-cheatsheet/

Sorted CSS Colors. Инструмент Мустафы Энеса со списком именованных цветов в CSS, сгруппированных по оттенкам и отсортированных по яркости и насыщенности — https://enes.in/sorted-colors/

Пусть ваш PWA ведёт себя как нативное приложение. Томас Штайнер на примере приложения Apple Podcasts показывает API, которые позволяют сократить дистанцию между нативными возможностями и возможностями веб-платформы — https://web.dev/app-like-pwas/

Анатомия пуш-уведомлений. Ли Манро разбирает плашку уведомления в разных браузерах и в разных системах на части и делится шаблоном для Figma для проектирования их внешнего вида — https://onesignal.com/blog/push-notification-design-anatomy/

React Marathon 2.0 пройдёт с 22 июня по 19 июля в Телеграме. Участников ждёт четыре недели уроков и заданий по React, код-ревью с поддержкой в чате от ментора и свой проект в финале. Первая неделя бесплатная — https://bit.ly/react_marathon

Приёмы для сложных CSS-иллюстраций. Джи Томпкинс советует, на что нужно обращать внимание при рисовании сложных вещей на чистом CSS — https://css-tricks.com/advice-for-complex-css-illustrations/

Bootstrap 5: больше не зависит от jQuery, не поддерживает Internet Explorer, использует кастомные свойства, имеет обновлённый внешний вид. Марк Отто об этих и других изменениях альфа-версии мажорного обновления в блоге Bootstrap — https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

Всё, что вы не хотели знать про сайд-эффекты. Серджио Гомес рассказывает, как помогать сборщикам разруливать зависимости между модулями и эффективно использовать тришейкинг — https://sgom.es/posts/2020-06-15-everything-you-never-wanted-to-know-about-side-effects/

Auto Layout в Figma. Как «Злые марсиане» создают динамические дизайн-компоненты, которые можно растягивать, наполнять и менять местами. С примерами и исходным макетом — https://evilmartians.com/chronicles/figma-auto-layout-practical-tips-for-dynamic-designs

Анализ производительности расширений для Chrome. Мэтт Цойнерт провёл исследование, как популярные расширения влияют на метрики производительности различных сайтов — https://www.debugbear.com/blog/2020-chrome-extension-performance-report

Атрибут form. Михаэль Шарналь показывает, как связать кнопки с формой за пределами тега <form> — https://funwithforms.com/posts/form-attribute/

Кнопки «Закрыть»: паттерны и антипаттерны. Мануэль Матузович разбирает популярные способы создания кнопок для закрытия попапов и модальных окон, объясняет их плюсы и минусы и предлагает альтернативные решения, в переводе на Хабре — https://habr.com/p/505758/

Как доступно прятать и стилизовать чекбоксы и радиокнопки. Сара Суайдан показывает варианты решения задачи — https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Изучение z-index через визуализацию. Тиру Маникандан делится демкой, в которой можно наблюдать за поведением блоков с различным позиционированием при изменении их z-index — https://thirumanikandan.com/posts/learn-z-index-using-a-visualization-tool