ЧЕЛОВЕЧНЫЙ ФРОНТЕНД / Доступность и современность интерфейсов / Вадим Макеев
Вставка
- Опубліковано 27 тра 2024
- Надежный хостинг FirstVDS. Переходи по ссылке и получай скидку 25% на первый месяц на любой тариф: firstvds.ru/s/bsvjq
Из этого выпуска вы узнаете многое про доступность и удобство современных web-интерфейсов. А в гостях у меня Вадим Макеев, тот самый из Веб-стандартов!
Поговорили за современные подходы к созданию интерфейсов, про стандартизацию и популярные подходы в мире построения веб-интерфейсов.
Так что, заваривайте чаинский/кофеинский и погнали 😉
ДОП. МАТЕРИАЛЫ:
- Канал Вадима: / pepelsbey
- Материалы из выпуска: t.me/itbeard/720
- Аудио-версия выпуска: itbeard.mave.digital/ep-157
- Выпуск без рекламы: • [noadv] ЧЕЛОВЕЧНЫЙ фро...
- FirstVDS в телеграме: firstvds.ru/s/m1mzz
- FirstVDS на хабре: firstvds.ru/s/s1ase
НАВИГАЦИЯ:
0:00 Начало
1:09 Детство и университет
6:20 Первая работа
9:26 Интеграция
13:30 Работа в Opera как DevRel
19:30 Немного про Илью Сегаловича
21:24 HTML Academy
23:20 Про Веб-стандарты
35:38 Современные веб-интерфейсы
40:10 Доступность (accessebility)
59:07 Скорость работы сайта
1:15:20 БЭМ
1:18:17 CSS in JS, CSS Modules
1:26:03 Стандартизация
1:34:00 Книги и информация
1:40:47 РАНДОМ
1:58:33 КОНКУРС
МОИ КОНТАКТЫ:
- UA-cam: / itbeard
- Telegram: t.me/itbeard
- Instagram: / itbeard
- Twitter: / iamitbeard
- Discord: / discord
- Сайт: itbeard.com
#айтиборода #ityoutubersru #frontend - Наука та технологія
НАВИГАЦИЯ для вас-любимых!)
0:00 Начало
1:09 Детство и университет
6:20 Первая работа
9:26 Интеграция
13:30 Работа в Opera как DevRel
19:30 Немного про Илью Сегаловича
21:24 HTML Academy
23:20 Про Веб-стандарты
35:38 Современные веб-интерфейсы
40:10 Доступность (accessebility)
59:07 Скорость работы сайта
1:15:20 БЭМ
1:18:17 CSS in JS, CSS Modules
1:26:03 Стандартизация
1:34:00 Книги и информация
1:40:47 РАНДОМ
1:58:33 КОНКУРС
Никогда не понимал подобные условия конкурсов. С одной стороны Вы говорите, что книгу нужно отдать тому, кому она нужна. С другой стороны под необходимые условия попадают люди с немалым опытом работы в этой области. Иначе откуда появятся смешные истории? Т.е. эта книга им уже наверно не нужна. Отдайте книгу мне, я хочу с 1С перейти в веб, изучаю React. Вопросы доступности решил изучать в последнюю очередь. В 1С эмпатии нет, хоть познакомлюсь с этим поближе.
#конкурс
История не совсем про работу, а про собес. Собесилась я к одним ребятам, продававшим инструменты для ремонта, предварительно посмотрела их сайт на предмет доступности. По семантике было всё более-менее, но состояние фокуса было отключено, то есть навигация с клавиатуры отсутствовала. Слово за слово, мы вышли на тему доступности, я начала заливаться соловьём на тему того, что это не только про слабовидящих и незрячих. Естественно, сказала, что им на сайт бы добавить состояние фокуса. Снова услышала вариацию на "у нас нет таких клиентов", а именно: "Я не думаю, что такие люди делают ремонты". Тут я ему начала заливать про Костю Дебликова, которому в инстаграме вместо кистей на протезах рук какие только насадки не прикручивали - и для того, чтобы штангу тягать, и вроде бензопилу, и ещё что-то. Ребята были впечатлены. Но потом один из парней такой: "Я раньше тоже интересовался этим, но потом меня отпустило".
#конкурс
я работаю в системе как модератор. О доступности для своих работников речи и быть не может. С клавиатуры можно только текст напечатать. Но есть боль, которая царапает мое сердечко каждый раз. Пункты меню/этапы (между которыми нужно переключаться в течение работы), расположены горизонтально и они не помещаются в экран. Горизонтального скролла нет. Был таб, но и его убрали (или потеряли)😁 теперь, чтобы перейти на последние два пункта нужно уменьшать масштаб экрана. Это то еще удовольствие. Я много раз просила хотя бы таб вернуть (впрочем там можно было совсем чуть-чуть у каждого пункта паддинги подтянуть и всё было бы хорошо). Но нет, мучайтесь, любимые наши сотрудники, так я думаю решила моя компания))
Так вот. Мой коварный план заключается в том, чтобы выучится на фронденд-разработчика, внедриться в разработку нашей компании и вернуть Табу его заслуженное место😈😈. Книга не обязательна, но пригодилась бы, как тяжелый весомый аргумент😌
#конкурс
Прикольно 😁, но мой комментарий вновь пропал. Непонятно что не так ¯\_(ツ)_/¯
Просто комментарий остается, а с историей нет. Ну ладно. Третий раз мне лень писать 🦥
Ладно. Но теперь оооочень кратко 😁
Мой принцип: делай хорошо, плохо само получится. Поэтому учился с самого начала делать правильно. На работе в маленькой студии (верстал сайты малому бизнесу на cms WP. Темы писали с ноля) как раз были не против. Доступность и семантика приближали к заветной "соточке" в "пэйджспид", чем можно было козырять.
Непонимание встречалось в лице клиентов. Как будто у всех скоропортящийся товар и его нужно быстрее продать через сайт. "Тему вот эту скачай. Наполняй и запускай". Правда аргументы о потере клиентов иногда срабатывали 🙂
P.S.: четвертый раз я писать уже не буду 😁🦥
#конкурс
в начале своей деятельности я устроилась в крупную компанию, занимающуюся продажей паркета по всей стране.
Увидела, что в старой реализации сайта кнопки сделаны параграфами, заголовков нет, картинки обернуты ссылками без aria-атрибутов и тд.
Я подняла вопрос о том, что сайт должен быть не только красивым, но и хорошо сделанным изнутри для тех, кто не сможет его увидеть.
На что я услышала от разработчика:
"А зачем слепым покупать паркет?".........
Как я рад что грабитель из "Один Дома" взялся за ум и встал на правильный путь в IT сфере.
Да ну, не похож!
На толстого Честер Бенингтона похож.
Это Каратель в IT
О, это отличный гость ;) спасибо, Борода!
Вадиму отдельное огромное спасибо за его труд в качестве "учителя" ;)
как еще один ученик, присоединяюсь =)
Оооо легенда в сфере верстки, Макеев, просто топовейший человек и учитель, офигенно, спс))
Ого Вадим, как-то неожиданно. Жду ещё выпуск с Климовым
и с Шемсединовым
Илья вчера сказал, что он будет в феврале
Пример доступности из оффлайна. Почему для обычного человека важен пандус? Когда у вас будут маленькие дети, вам и вашей жене будет проще использовать детскую коляску. Когда вы купите велосипед, вам будет проще пользоваться занижениями на бордюрах, чем лишний раз давать нагрузку на велосипед. И самое главное, абсолютно никто не застрахован от попадания в ситуацию когда придется использовать инвалидную коляску. Вот тогда доступность раскрывается полностью. И именно НЕ доступность инвалидность может превратить в ограничения.
это curb cut effect - когда решение для одной группы людей улучшают опыт всех
Как раз посмотрел недавно рубрику Сталингулага На колёсах. Сильно задумался про доступность вообще.
Спасибо большое Вадиму. Это яркий пример, когда человек занимается любимым делом, и при этом очень много делает для сообщества.
ПС спасибо за доку. Планирую туда активно контрибьютить
Спасибо за выпуск и интересного гостя 👍
Не люблю CSS 🤪
На здоровье 😊
А куда без него?
Круто! Лекс - спасибо за ту работу, которую ты делаешь что бы эти видео появлялись. Это большой труд! Всем хорошего просмотра!
Большое спасибо за гостя. Смотрю, слушаю, читаю Вадима уже 4 года.
Тема конкурса как раз для меня)
Год назад пришел на большой проект. И при первом знакомстве заметил, что доступности нет от слова вообще. Как только я начал разговор об этом, то мне сказали "нее.. слишком много работы, как то потом".
Два месяца назад, когда об доступности заговорил большой клиент, пришли уже ко мне и сказали "нужно сделать", а я этого и ждал. Спустя несколько недель у нас теперь есть минимальная, но доступность (и для читалок, и фокус с клавиатуры), плюс я очень рад, что добавили focus-visible и focus-within они прям очень крутые. Самое сложное в доступности - это обучить коллег верстать изначально правильно.
А хештег где?
Ух, круто! На хабре зачитывался/заслушивался им еще в до хромо-монопольные времена, когда браузеры действительно отличались друг от друга. Потом как-то меня в другие области понесло. А год назад в рекомендациях ютуба попалось видео с ооочень знакомым голосом. Крутой мужик, лайк не глядя!
Ура Вадим!!!😍
Какие вы молодцы что его позвали!
Его ученики его помнят)
Присоединяюсь, любовь к важности доступности началась с лекций Вадима))
Вспомнил первые десятки выпусков их подкаста, уютная атмосфера диалога получилась. Спасибо за труд!
Спасибо за видео!
#конкурс Был случай, когда на проекте мне пришлось полностью переделывать верстку из-за того, что предыдущий "человек" все классы называл кириллицей. Удивлению не было предела. Проект был англоязычный. Куча работы и в конце мне высказали благодарность разработчики проекта по ту сторону океана. Думаю, это доступность уже совсем другого уровня, когда сам разработчик не может понять, что там вообще за дичь творится
Вау! С удовольствием посмотрю / послушаю. Спасибо, Алексей, за гостя!
Хорошо, что у меня сегодня выходной. Просмотр интервью с таким гостем нельзя откладывать на потом.))
Ну наконец-то! Респект за Вадима.
Спасибо за замечательный выпуск и за такого приятнейшего, интеллигентного, интересного гостя как Вадим! 🥰
Спасибо за подобные видео. Делай еще! Всегда слушаю с удовольствием
Такой размеренный и душевный выпуск получился. Прекрасный гость. Прекрасная атмосфера. Прекрасные эмоции во время и после просмотра☺️. Спасибо огромное!
P. S. Ну и прекрасный интервьюер, конечно же. 🙃
Ах...енно !!!!!!!!!!!!!!! Как долго я ждал его !!! Спасибо Лекс!
О, вот так приятный сюрприз ) на Вадика оч интересно посмотреть
Как обычно, плюс за фронтенд, особенно за accessibility. Спасибо!
Спасибо. Очень актуальная в наше время тема. Доступность необходима во всех сферах
Ох ну наконец то. Как же долго ждала с тех пор как увидела фотку со съёмок в инсте🎉
ну наконец-то интервью с Вадимом увидело свет)) наверное, оно должно было настояться))
Прекрасное начало недели с интересным гостем! Всем хороших интерфейсов друзья 👍😀
Только беларуский Быков - Василь :) Спасибо за крутого гостя!
Ох уж эта доступность. У меня был случай, когда я с дизайнером воевал за outline подсветку, когда табом по сайту переключаешься. Он хотел, чтобы я ее снес совсем потому что "выглядит стремно". Я предложил поменять цвет или поменять как-то визуально, потому что какому нибудь инвалиду с одной рукой будет гораздо удобнее пользоваться сайтом, в ответ я получил "Инвалид с одной рукой может пользоваться мышкой". После этого я перестал такие правки оспаривать. Лишние часы нервов и споров.
Точно такая же ситуация просто бесполезно спорить)
Каждый раз интересные гости) лайк и спасибо вам за контент
У Джорджа Карлина когда-то было выступление "люди, которых надо убить в первую очередь". На первом месте были люди, которые показывают кавычки пальцами)
Большое спасибо! С огромным интересом актуальное для меня и интересное вообще. Успехов!
Скучаю по его лекциям в академии.. Было круто! Смотрю его стримы с механикой и теперь подсел теперь на 60% клаву..
Согласен) это были помоему 18-19 год, те курсы были просто лучшими)
Спасибо за интервью
По превью не сразу Вадима узнал, но уже чую запах контента :-)
Спасибо за гостя. Очень интересно
Очень крутое интервью, было приятно слушать, спасибо)
До сих пор не было никого кто говорил бы о cross-platform: PWA, React Native, Flutter...
Лайк сразу за Вадима! Неожиданно и приятно) Посмотрю позже))
Ну, у леши в инсте был пост с апреля про интервью вадима. Я долго ждал, так что тут скорее хочу сказать, я долго ждал это интервью)
ох, красота подъехала!)
Спасибк за выпуск❤️
Я когда учился, мне учитель выжег на подкорке несколько истин: 1. Разметка должна всегда быть семантичной. 2. По меньше используй (перестань говнокодить). 3. Сайты на которых нет ассистивных технологий верстают не люди и им не место в интернете!
Это прекрасно, но семантика сейчас на то же сео почти не влияет хоть всё на дивах пили, кстати многие большие сайты почему то так и делают, да и если сайт коммерческий никаких поблажек для инвалидов скорее всего там нет)
Ура!) спасибо!!!
Респектую сразу, такого Гостя привел.
ОООООООООООО как же я ждал этого чувака!!! он не реально крутой... лайк лайк лайк лайк лайк лайк лайк лайк лайк лайк лайк лайк
спасибо, отличный выпуск!
Здравствуйте! Вот это гости 😎
Ещё не посмотрел, но уже лайк за Вадима Макеева!)
Спасибо за видео!
Восхитительно!
Классный и очень интересный собеседник-спикер
Вадима всегда интересно слушать ;)
Очень крутой чувак! Молодец что позвал его :)
Всім добра, дуже цікавий контент. Интересно было бы узнать от автора разбор на очень важную тему для программирования, это технический англиский язык, как и что где учить?
Отдельное спасибо за тайм коды)))
"Хотя бы дверь не закрывать..."
Не знаю, но меня тронуло
Лекс, спасибо большое за контент. Макеев это тот человек на которого надо равняться современному фронту. Хотелось бы еще посмотреть интервью с Владиленом Мининым
С владиленом не будет интервью, ну уже ж 100 раз говорил, ну е-мае
@@itbeard Почему ???
Потому что Лекс, сейчас находится ещё в стадии отрицания, хотя нет, судя по комментарию и тому, что имя человека он написал с маленькой буквы, уже в стадии гнева))). Никого не защищаю, это просто коммент.
вот это по красоте ) спасибо
Вадим очень крутой чувак. Спасибо.
#конкурс
Сделали мы как-то интернет-магазин в 2017 году - продавал этот магазин различные товары от ручек до деталей от паровозов. Шли месяцы и магазин потихоньку продавал. К тому времени (где-то прочитав несколько статей) я уже задумывался о доступности интерфейса на сайте и в какой-то из дней предложил своему начальству идею внедрения той самой доступности. На то время я предлагал только одну фичу это ввод и управление с клавиатуры, но к сожалению мне сказали что такие люди - это очень маленький процент наших пользователей (откуда он был так уверен - до сих пор не ясно) и вообще, у них есть родственники, которые смогут за них купить в нашем магазине те или иные товары. Курьез в том, что в этом магазине продавались некие товары для людей без возможностей.
Спасибо за отличное видео!
Как всегда топ))
еееееееееееее Вадим Макеев! Спасибо за видео!
Оппа какие люди, как раз и кофеек подоспел)
Всё больше и больше знаменитостей)
Фронт енд самая крутая тема, можно бесконечно смотреть
Давно ждал этого легендарного персонажа)) Дождался))
Кайф интервью!
За Вадима лайк!
Ох сколько я ждал когда уже выйдет это интервью)
А Наталья Теплухина будет?
Когда то кликнув на какой то стрим с ней, не зная кто это и только краем уха слышав про vue, это буквально изменило мою жизнь
Можно ещё Илья Климов, тоже классный чел
Натальи пока не будет, а вот Илья вполне)
@@itbeard Наталья говорит что её не приглашали)
АААааа....огонь!)
#конкурс
История о внедрении доступности (одной опции).
Это же замечательно дать возможность тем, кто не слышит, прочесть комментарии, а программам для анализ сайтов помочь понять что есть что на сайте. В сайте проекта ("Языки под музыку") я внедрил использование сочетаний клавиш. Это оказалось очень удобно!
Сайты, которые я делам были такими, как я хотел. Технологии, которые я хотел чтобы были внеднены - внедрялись мной. Идеальный мир - это когда нет препятствий на пути реализации твоих идей. Так было и так будет в моём следующем проекте.
--
Спасибо Вадиму Макееву за его ценные советы!
Лекс, сними как проходит день начинающего джуна. Как проходят митинги, выдача тасков...
Что тут снять-то? Джун приходит на митинг, молчит в большинстве случаев. Если спросят, крякнет. Задачи нарезают из принципа: полегче и покороче. Будет справляться - будем увеличивать таски по сложности и времени. Джуна не надо бросать. Надо приходить и мониторить периодически. Задачу надо обязательно про-го-во-рить с ним, убедиться что он понял, снабдить всеми сылками, доками. Или вы хотите, чтобы Лекс снял документалку?
Наконец-то, после рекламы у тебя Академии, там встретил Макеева, классный преподаватель)
Ура Вадим
Дождался)
Спасибо!
Привет от пятиугольников со Стены! ;0)
Мне на работу!!! А ты видео выложил! И как мне теперь дожить до 6ти вечера?
Макеев красава. Лексу спасибо.
Да лаааадно. Пойду чай поставлю
Вадим! класссс)
Нас на курсах тоже учат, что приложуха должна быть доступна в целом, и чтоб скринридеры могли хорошо прочитать, что так пишут адекватные люди
1:19:00 хорошая альтернатива БЭМу - TailwindCSS или styled-component
Вадим как я вообще не ожидал такого сюрприза
Локация топчик. Короли айтишного ютуба возле короля музыки
оо знакомые лица)
понял, что сейчас впервые ставлю лайк за интегрированную рекламу.
Неосознаная отсылка на форточку от Дорофеева божественна)
great, thanks
Спасибо за интересный выпуск! Только не Максим Быков, а Василь Быков)
Сделай пожалуйста интервью про react native и мобильную кроссплатформу
Грамотный чел.
Бажамой! Макеев 🥰
Кросы с носками крутые.
Очень ждем выпуск с Фридменом
#конкурс На прошлой работе когда заговаривал о доступности интерфейсов, коллеги отвечали (с ноткой черного юмора) - у нас нет слепых клиентов, мы книжное издательство)
#конкурс
На одной работе, мне от бизнеса пришла задача: переписать лендинг с wix на нативные инструменты. Для этой цели я искал фрилансеров и каждому устраивал небольшое собеседование.
Я спрашивал про доступность (сам я бэкендер, и фронтом занимаюсь мало, но бывает). И чаще всего, мне отвечали что-то вроде "Ну, это дополнительная фича, она будет стоить вам в 2 раза дороже".
Но один человек достаточно взрослых лет сказал примерно такую фразу: "Мальчик, ты о доступности от Макеева услышал что ли? Так он популист, ничего не знает и не понимает. Не выдумывай ничего пожалуйста".
В результате, пришлось нанять джуна, который мало что знал про доступность, но горел желанием это все изучить.
Ну так ищи дурака, потратить на тот же сайт больше времени, соответственно человек захочет больше оплату, всё как бы логично, время деньги
Критически важная тема - доступность обязательна хотя бы на уровне AA
Жду интервью с джуном)
58:10 ну и где ссылка, если в телеге её не нашел?
п.с. ua-cam.com/video/HtTyRajRuyY/v-deo.html - если кому нужно
#Конкурс.
Короткая история про околодоступность)
Как-то пытался объяснить директору одной относительно крупной компании, что очень желательно шрифт в навигации не адаптивного!!! и абсолютно "недоступного" сайта сделать крупнее, на что он мне ответил: "Зачем? Ведь можно просто нажать ctrl и покрутить колёсиком мышки" :) Масштабирование в браузере - вот, что такое доступные интерфейсы! 🤣😅😭