forwebdev | Технологии

Telegram-канал forwebdev - For Web — фронтенд, дизайн, программирование

15318

Годнота для фронтендеров и дизайнеров https://forweb.dev

Подписаться на канал

For Web — фронтенд, дизайн, программирование

(Не) всё в JavaScript объект, объясняет Дэниэл Ли в переводе devSchacht — https://medium.com/p/82fe5026e1a2

Читать полностью…

For Web — фронтенд, дизайн, программирование

С какими трудностями сталкиваются в интернете реальные люди с ограниченными возможностями — https://axesslab.com/accessibility-according-to-pwd

Читать полностью…

For Web — фронтенд, дизайн, программирование

Frontend Weekend №8, в гостях Артём Цацин: почему нужно учить JavaScript и переезжать за границу — https://soundcloud.com/frontend-weekend/fw-8

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как устроен фронтенд Product Hunt, доклад Радослава Станкова на WeAreDevelopers 2017 — https://youtu.be/F38nRMktS9Q

Читать полностью…

For Web — фронтенд, дизайн, программирование

Большая подборка полезных материалов по вёрстке писем от Артура Коха (/channel/emaildev) — https://medium.com/p/db73753f368e

Читать полностью…

For Web — фронтенд, дизайн, программирование

Иван Акулов подробно рассказал, как он починил неработающий тришейкинг в библиотеке polished — https://iamakulov.com/notes/polished-webpack/

Читать полностью…

For Web — фронтенд, дизайн, программирование

[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).

Читать полностью…

For Web — фронтенд, дизайн, программирование

Pa11y, набор инструментов для автоматизированного тестирования доступности — http://pa11y.org/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Можно ли написать сайт в Excel? Энтузиаст Воган Мэй рассказал о воплощении этой безумной идеи, перевод от @tproger_officialhttps://goo.gl/YdLjw4

Читать полностью…

For Web — фронтенд, дизайн, программирование

Кому нужны флексы, если на них не делают сайты? Разбирается Вадим Макеев в свежем выпуске «HTML-шортов» — https://youtu.be/Wpglfz7aXzo

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как сделать доступное модальное окно? Рассказывает Роб Додсон в свежем выпуске A11ycasts — https://youtu.be/JS68faEUduk

Читать полностью…

For Web — фронтенд, дизайн, программирование

Браузерные войны: как победил веб, вторая часть истории в переводе Дмитрия Мананникова — slonoed/92168ce17ae5" rel="nofollow">https://medium.com/@slonoed/92168ce17ae5

Читать полностью…

For Web — фронтенд, дизайн, программирование

Функциональное программирование на JavaScript это антипаттерн, размышления Алекса Диксона — alexdixon/58526819f21e" rel="nofollow">https://medium.com/@alexdixon/58526819f21e

Читать полностью…

For Web — фронтенд, дизайн, программирование

Разбираемся с lock-файлами в NPM 5, свежий перевод от devSchacht — https://medium.com/devschacht/4bf615c6cd50

Читать полностью…

For Web — фронтенд, дизайн, программирование

Frontend Weekend №7, в гостях Григорий Петров, технический евангелист Voximplant: про ReactVR и маркетинг — https://soundcloud.com/frontend-weekend/fw-7

Читать полностью…

For Web — фронтенд, дизайн, программирование

Реактивные интерфейсы на чистом JavaScript, две статьи Брендона Смита о разработке интерфейсов без фреймворков — https://css-tricks.com/reactive-uis-vanillajs-part-1-pure-functional-style/

Читать полностью…

For Web — фронтенд, дизайн, программирование

ES6 Katas, сборник задачек для изучения ES6 по методологии TDD — http://es6katas.org/

Читать полностью…

For Web — фронтенд, дизайн, программирование

«Веб-стандарты» №73: Firefox мультипроцессный, новые гриды в Edge, JS-модули в HTML, Webpack 3 и CSS-фрагменты — https://soundcloud.com/web-standards/episode-73

Читать полностью…

For Web — фронтенд, дизайн, программирование

Давайте выучим замыкания в JavaScript! Руководство Притти Кассириди в переводе Академии HTML — https://htmlacademy.ru/blog/195-lets-learn-javascript-closures

Читать полностью…

For Web — фронтенд, дизайн, программирование

Александр Сурма и Пол Льюис из Google лайвкодят с нуля кодсплиттинг для приложения — https://youtu.be/4KVeNoN1aFM

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как делался фронтенд Stripe Connect: CSS-гриды, 3D-анимации, графика на CSS и другие подробности — https://stripe.com/blog/connect-front-end-experience

Читать полностью…

For Web — фронтенд, дизайн, программирование

Старый добрый аналог Excel в 25 строк кода, переписанный на ES 2015 — http://jsfiddle.net/ondras/o3tzx1px/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Что за штуковины постоянно пишут в самом верху SVG? Питер Новелл разобрался и делится шпаргалкой — pnowelldesign/f3ad198eb54e" rel="nofollow">https://medium.com/@pnowelldesign/f3ad198eb54e

Читать полностью…

For Web — фронтенд, дизайн, программирование

До 70% наших стилей состоит из повторений: результаты исследования Йенса Майерта и выводы — https://meiert.com/en/blog/20170531/70-percent-css-repetition/

Читать полностью…

For Web — фронтенд, дизайн, программирование

БЭМ на примерах: зачем нужна эта методология и как начинающим избежать распространённых ошибок — https://seesparkbox.com/foundry/bem_by_example

Читать полностью…

For Web — фронтенд, дизайн, программирование

Нейросети с нуля для JS-разработчиков, первая часть руководства в переводе devSchacht — https://medium.com/devschacht/30c64ee9dbba

Читать полностью…

For Web — фронтенд, дизайн, программирование

Иллюзия скорости: как увеличить отзывчивость интерфейса с помощью UX-приёмов вместо оптимизации производительности — https://paulbakaus.com/tutorials/performance/the-illusion-of-speed/

Читать полностью…

For Web — фронтенд, дизайн, программирование

Браузерные войны: когда Netscape встретил Microsoft, первая часть истории в переводе Дмитрия Мананникова — slonoed/351dcf170e59" rel="nofollow">https://medium.com/@slonoed/351dcf170e59

Читать полностью…

For Web — фронтенд, дизайн, программирование

Spellbook of Modern Web Dev, объёмный рубрикатор по технологиям и инструментам современного веба — https://github.com/dexteryy/spellbook-of-modern-webdev

Читать полностью…

For Web — фронтенд, дизайн, программирование

Как уже сегодня начать делать интерфейсы на CSS-гридах для продакшена — https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/

Читать полностью…
Подписаться на канал