Старый добрый аналог 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 и зачем он нужен?
Как можно догадаться из названия, этот атрибут помечает элемент как инертный (или неактивный, но не путайте с 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
Реактивные интерфейсы на чистом JavaScript, две статьи Брендона Смита о разработке интерфейсов без фреймворков — https://css-tricks.com/reactive-uis-vanillajs-part-1-pure-functional-style/
(Не) всё в JavaScript объект, объясняет Дэниэл Ли в переводе devSchacht — https://medium.com/p/82fe5026e1a2
Краткая история и будущее стандарта JavaScript, отрывок из книги Practical ES6 Николаса Беваквы — https://ponyfoo.com/articles/standard
[Вакансия, волонтёрство в https://homeless.ru/]
Привет, меня зовут Саша Куценко, я дизайнер-волонтёр в Ночлежке. Нам нужен веб-разработчик, поддерживать и развивать сайт благотворительной организации. Прошу вас помочь контактами в комментах, это важно для ребят и для меня.
Задачи более чем обычные: просто помогать девчонкам по мелочам с сайтом и периодически добавлять новое, что мы вместе с ними придумываем. Я в Ночлежке дизайн-волонтер уже несколько лет, и горжусь, что мне выпала честь помогать таким прекрасным людям. Версткой занимается тоже наш верстальщик из Aidem Никита Медведев. Сейчас мы перевертываем весь сайт, чтобы он хорошо отображался на мобильных. Нам не хватает в команду ещё одного — разработчика.
Кого мы себе представляем:
— человека с работой, чтобы это было хобби, любимое дело, а не деньги;
— человека опытного, которого сможет и в Битриксе поковырять, и рассылку настроить, и платежную систему подключить;
— человека, который хочет иметь что-то свое, маленькое, которое он потихоньку ковыряет по вечерам и не потому, что надо, а потому что приятно делать добро, помогать людям.
Ночлежка не сможет платить деньги, поймите правильно, все деньги они тратят на помощь людям, которые действительно нуждаются в помощи. И я, и верстальщик, мы все помогаем бесплатно.
Ездить никуда не потребуется. Работы для опытного человека на несколько часов в неделю, если не запускать.
В благодарность Ночлежка (с вашего позволения, конечно), будет упоминать вас в каких-то своих новостях, дадим на вас ссылку в футере, если захотите. Плюс ребята, всегда бесплатно зовут нас на свои мероприятия, концерты, которые проводят в пользу организации. В общем, поверьте, Ночлежка будет благодарить вас, как может.
Нам действительно очень нужен такой человек. Сейчас Ночлежка работает с несколькими компаниями по задачам разработки, и мы очень благодарны им, но объективно, нам нужен один, свой человек, который вызовется сам и централизует всё на себе. Там действительно не так уж и много работы, все всё понимают, и сроки лояльные, важнее, чтобы у нас получилась своя маленькая внутренняя команда, которая болеет за дело, любит и хочет постоянно улучшать сайт этой невероятно доброй организации, без которой тысячи бездомных людей не обрели бы новый дом и новую жизнь.
Я на 100% уверен, что таких, кто нам нужен, много. Очень вероятно, что они не сидят в FB, поэтому прошу вас — потратьте минутку, напишите в чатики или в почту тем, кто пришел вам в голову после прочтения этого поста. Мы будем вам очень благодарны.
Писать можно мне на sasha@aidem.ru или Насте из Ночлежки nastya@homeless.ru.
В общем, если мы вместе поможем Ночлежке найти того, кто влюбится в проект и будет радеть за него всей душой, мир станет чуточку лучше, и главное, людей, которым мы поможем, станет ещё больше. Я правда так считаю.
Спасибо.
Привет, меня зовут Саша Куценко, я дизайнер-волонтёр в Ночлежке. Нам нужен веб-разработчик, поддерживать и развивать сайт благотворительной организации. Прошу вас помочь контактами в комментах, это важно для ребят и для меня.
Задачи более чем обычные: просто помогать девчонкам по мелочам с сайтом и периодически добавлять новое, что мы вместе с ними придумываем. Я в Ночлежке дизайн-волонтер уже несколько лет, и горжусь, что мне выпала честь помогать таким прекрасным людям. Версткой занимается тоже наш верстальщик из Aidem Никита Медведев. Сейчас мы перевертываем весь сайт, чтобы он хорошо отображался на мобильных. Нам не хватает в команду ещё одного — разработчика.
Кого мы себе представляем:
— человека с работой, чтобы это было хобби, любимое дело, а не деньги;
— человека опытного, которого сможет и в Битриксе поковырять, и рассылку настроить, и платежную систему подключить;
— человека, который хочет иметь что-то свое, маленькое, которое он потихоньку ковыряет по вечерам и не потому, что надо, а потому что приятно делать добро, помогать людям.
Ночлежка не сможет платить деньги, поймите правильно, все деньги они тратят на помощь людям, которые действительно нуждаются в помощи. И я, и верстальщик, мы все помогаем бесплатно.
Ездить никуда не потребуется. Работы для опытного человека на несколько часов в неделю, если не запускать.
В благодарность Ночлежка (с вашего позволения, конечно), будет упоминать вас в каких-то своих новостях, дадим на вас ссылку в футере, если захотите. Плюс ребята, всегда бесплатно зовут нас на свои мероприятия, концерты, которые проводят в пользу организации. В общем, поверьте, Ночлежка будет благодарить вас, как может.
Нам действительно очень нужен такой человек. Сейчас Ночлежка работает с несколькими компаниями по задачам разработки, и мы очень благодарны им, но объективно, нам нужен один, свой человек, который вызовется сам и централизует всё на себе. Там действительно не так уж и много работы, все всё понимают, и сроки лояльные, важнее, чтобы у нас получилась своя маленькая внутренняя команда, которая болеет за дело, любит и хочет постоянно улучшать сайт этой невероятно доброй организации, без которой тысячи бездомных людей не обрели бы новый дом и новую жизнь.
Я на 100% уверен, что таких, кто нам нужен, много. Очень вероятно, что они не сидят в FB, поэтому прошу вас — потратьте минутку, напишите в чатики или в почту тем, кто пришел вам в голову после прочтения этого поста. Мы будем вам очень благодарны.
Писать можно мне на sasha@aidem.ru или Насте из Ночлежки nastya@homeless.ru.
В общем, если мы вместе поможем Ночлежке найти того, кто влюбится в проект и будет радеть за него всей душой, мир станет чуточку лучше, и главное, людей, которым мы поможем, станет ещё больше. Я правда так считаю.
Спасибо.
homeless.ru
Ночлежка
Старейшая благотворительная организация, помогающая бездомным людям.
Как рулить отступами между компонентами в дизайн-системе? Крис Пирс предлагает три известных ему подхода — https://medium.com/p/70f3b22ec89
Дизайн-системы на практике, новая книга Анны Холматовой, предзаказ и бесплатная выдержка для ознакомления — https://www.smashingmagazine.com/design-systems-book/