For Web — фронтенд, дизайн, программирование
14.4K subscribers
5.47K photos
7 videos
5 files
1.74K links
Новости и полезности для фронтендеров.
Поддержать, чтобы в канале не было рекламы:
https://patreon.com/forweb
https://boosty.to/forweb
Download Telegram
Как сделать доступное модальное окно? Рассказывает Роб Додсон в свежем выпуске A11ycasts — https://youtu.be/JS68faEUduk
БЭМ на примерах: зачем нужна эта методология и как начинающим избежать распространённых ошибок — https://seesparkbox.com/foundry/bem_by_example
Кому нужны флексы, если на них не делают сайты? Разбирается Вадим Макеев в свежем выпуске «HTML-шортов» — https://youtu.be/Wpglfz7aXzo
До 70% наших стилей состоит из повторений: результаты исследования Йенса Майерта и выводы — https://meiert.com/en/blog/20170531/70-percent-css-repetition/
Можно ли написать сайт в Excel? Энтузиаст Воган Мэй рассказал о воплощении этой безумной идеи, перевод от @tproger_officialhttps://goo.gl/YdLjw4
Что за штуковины постоянно пишут в самом верху SVG? Питер Новелл разобрался и делится шпаргалкой — https://medium.com/@pnowelldesign/f3ad198eb54e
Pa11y, набор инструментов для автоматизированного тестирования доступности — http://pa11y.org/
Старый добрый аналог Excel в 25 строк кода, переписанный на ES 2015 — http://jsfiddle.net/ondras/o3tzx1px/
[tl;dr]
Что за атрибут inert и зачем он нужен?

Как можно догадаться из названия, этот атрибут помечает элемент как инертный (или неактивный, но не путайте с disabled). Для таких элементов (и всего дерева их потомков) отключается срабатывание пользовательских событий (например, фокус по нажатию tab, выделение текста, клики). Ассистивные технологии вроде экранных читалок просто игнорируют такие элементы. Также спецификация рекомендует разработчикам браузеров игнорировать инертные элементы при поиске по содержимому страницы.

По сути, этот атрибут сочетает в себе поведение tabindex="-1", aria-hidden и pointer-events: none. Им следует помечать скрытые модальные окна, выпадающие меню, невидимые слайды карусели и другие подобные элементы интерфейса. Это улучшит доступность ваших интерфейсов: при навигации с клавиатуры или при использовании экранных читалок инертные элементы просто будут игнорироваться.

Полезные ссылки:
— inert в спецификации whatwg (https://vk.cc/6NwDJF);
— история появления, способы применения, описание пробелов в спецификации и полифил (https://github.com/wicg/inert);
— выпуск A11ycasts с Робом Додсоном, посвящённый атрибуту inert (https://youtu.be/fGLp_gfMMGU).
Как делался фронтенд Stripe Connect: CSS-гриды, 3D-анимации, графика на CSS и другие подробности — https://stripe.com/blog/connect-front-end-experience
Иван Акулов подробно рассказал, как он починил неработающий тришейкинг в библиотеке polished — https://iamakulov.com/notes/polished-webpack/
Александр Сурма и Пол Льюис из Google лайвкодят с нуля кодсплиттинг для приложения — https://youtu.be/4KVeNoN1aFM
Большая подборка полезных материалов по вёрстке писем от Артура Коха (https://t.me/emaildev) — https://medium.com/p/db73753f368e
Давайте выучим замыкания в JavaScript! Руководство Притти Кассириди в переводе Академии HTML — https://htmlacademy.ru/blog/195-lets-learn-javascript-closures
Как устроен фронтенд Product Hunt, доклад Радослава Станкова на WeAreDevelopers 2017 — https://youtu.be/F38nRMktS9Q
«Веб-стандарты» №73: Firefox мультипроцессный, новые гриды в Edge, JS-модули в HTML, Webpack 3 и CSS-фрагменты — https://soundcloud.com/web-standards/episode-73
Frontend Weekend №8, в гостях Артём Цацин: почему нужно учить JavaScript и переезжать за границу — https://soundcloud.com/frontend-weekend/fw-8
ES6 Katas, сборник задачек для изучения ES6 по методологии TDD — http://es6katas.org/
С какими трудностями сталкиваются в интернете реальные люди с ограниченными возможностями — https://axesslab.com/accessibility-according-to-pwd