Нулевой километр (Хекслет)

В этом выпуске Глаша и Никита обсуждают актуальные темы в области фронтенд-разработки и цифровой доступности. Узнайте о последних изменениях в CSS и HTML, новых API для анимаций, таких как Popover API, Anchor Position API и View Transitions API, и их внедрении в браузеры.
00:00 работа в области цифровой доступности
02:40 преимущества Google Developer Expert
07:19 изменения в фронтенде
12:03 Interop и изменения в браузерах
14:17 изменения в CSS и HTML для улучшения доступности
15:28 растущий спрос на доступность на рынке
19:01 знание доступности востребовано в различных сферах работы
23:25 инструменты и фреймворки для обеспечения доступности
24:14 проблемы и возможности автоматизации в разработке
26:03 новинки в CSS: Popover API, Anchor Position API, View Transitions API
34:33 новые возможности анимации в CSS
37:00 развитие профессии фронтенд-разработчика
42:24 рендеринг на canvas: новая эра
46:07 доступность во Flutter
48:00 развитие фронтендеров и роль веб-приложений
49:28 базовые знания CSS для новичков
52:19 понимание работы браузера и основ CSS
58:15 основы HTML, CSS и JavaScript
59:40 работа с фреймворками
01:00:08 важные навыки фронтендеров

Creators & Guests

Host
Василий Кузенков
ex-тимлид в Dualboot Partners, ведущий
Guest
Nikita Dubko
руководитель службы разработки в HR Tech Яндекса, ведущий подкаста Веб-стандарты
Guest
Глафира Жур
Accessibility Project Manager в Semrush, GDE, Организатор a11yminsk, MinskCSS/MinskJS

What is Нулевой километр (Хекслет)?

Хекслет – лучшая школа программирования по версии пользователей Хабра. Наши выпускники уже 10 лет трудоустраиваются в топовые IT-компании. 80% выпускников находят работу в IT. Готовим разработчиков с учетом требований реальных работодателей и уверены в качестве образовательных программ, поэтому гарантируем трудоустройство.

Этот подкаст об IT, программировании, карьере и жизни разработчиков. Интервью с программистами, тимлидами, HR, вебинары об инструментах программирования, публичные собеседования, распаковки ИТ-компаний и многое другое.

Hexlet (00:00.302)
Всем привет! Вы сегодня на канале Хекслита. У нас два замечательных гостя, которыми, думаю, получится классно поговорить про CSS. Так что приступим!

Hexlet (00:23.054)
Сегодня с нами Глафир Ажур. Глафир, представься, расскажи про себя немножко. Кто ты такая, чем известна и чем занимаешься? Да, мне недавно сказали, что я ничем не известный вообще, не имя. В другом подкасте опять какого-то ну неима позвали. Я ему ответила, погугли меня, но не знаю результата. Вроде человек что-то мне ответил там в комментарии, я так, ну ладно.

Вот, да, меня зовут Глафира, я предпочитаю Глаша. Даже в английском всегда представляюсь, Глаша Жорна, у них проблемы, конечно, с произношением, у всех по-разному. Вот. Шведам нравится формат гуляж, и они меня почему-то так и называют, я уже устала от них править их ошибки. Вот. Я работаю сейчас в Семираж Accessibility Project Manager.

Это огромная работа, очень много людей, очень одна Глаша. Вот. И должна… Моя задача убедить всех, что делать доступность — это хорошо, легко и приятно, и нужно очень сильно. Вот. Поэтому я использую для этого все возможные средства. Да, я занимаюсь цифровой доступностью, сейчас в частности веб-доступностью. Какое-то время посвятила мобильной доступности, конечно же.

Ну и очень последнее время интересуюсь всякими AI-возможностями, связанными с доступностью, но там, конечно, мало чем можно поинтересоваться. Вот. Если очень коротко, то вот я, development, front-end development в течение 12 лет уже совсем даже не front-end, уже больше темлицство и менеджерство. Ну вот как-то так. Аксистабильтию моё всё, в общем.

Классно. Думаю, нас получатся интересные диалогы про accessibility. Так что второй у нас человек в студии это Никита Дубко. Никит, расскажи про себя немножко. Привет, меня зовут Никита, я работаю в HR-тех Яндекса. Делаю такие проекты, как Яндекс Кодран, Контест, дизайн-систему HR-теха.

Hexlet (02:40.206)
Наверное, в миру больше известен как доброжелобный бородач с подкастами обстандарты. Мы каждую неделю обсуждаем новости фронт-энда, иногда холиварем, иногда друг с другом постоянно соглашаемся. Много читаю докладов на конференциях и метапах, ну прям много. Иногда сам думаю, зачем столько, надо лучше дать людям, которые хотят в эту стезю войти, чтобы они попробовали. Ну и для того, чтобы как раз такие люди появлялись.

Я в том числе в программных комитетах нескольких мероприятий делаю индексовые фронтендерские конференции в составе программного комитета. В составе программного комитета FrontendConf делаем одну из самых крупных конференций по фронтенду в России. И в целом у нас есть потрясающее сообщество — Минск СССМ, Глаша, если что. У нас там трое — я, Глаша, еще Саша Шинкевич. И мы вот делаем это.

Всё ещё существующее сообщество, всё ещё замечательные докладчики. Мы вышли в онлайн, может быть, когда-нибудь вернёмся в оффлайн. И там стараемся растить как раз-таки молодых, бодрых спикеров, зовём новичков. Вот может, не знаю, буквально вчера в чатике обсуждали, может, новый метап сделаем. Да, ждите апдейтов. Да, это круто. Я, мне кажется, веб-сандарты слушал, что самых...

первых дней во фронт-энде, типа, как я пришёл, там были ещё десятые выпуски, что ли, вот, и я с того момента регулярный слушатель. В этом удачно синхронизировались, и это очень... ну, то есть как-то раньше, да, было больше споров, больше чего-то такого, а чем дальше, вы так больше засинкались и как-то отошли от каких-то дебатов в сторону чего-то своего. Но это прикольно.

Остань еще постоянным слушателем подкаста «Инклюзивная ананас», который мы с Таней Фокиной делаем. Там мы про цифровую доступность рассказываем, всяких разных платформ и еще про стандарты рассказываем тоже, поэтому welcome. Очень интересно, весело. Ну, думаю, наш слушатель тоже заинтересуется. Мы как раз поговорим сегодня про доступность. Я не скажу, что у меня как-то много экспертизы о конкретном доступности.

Hexlet (05:01.101)
А Глаша даже ГДЕ, правильно? Да. Как раз в этой области. Это очень круто. Если что, ГДЕ — это Google Developer Expert. Вот, это не так просто получить. Хорошая регалия. Нет, простите. И получить, на самом деле, не так сложно. Глаша, если что, не умоляю. Просто я экс ГДЕ. И меня уже выгодили. У меня еще проще путь был, чем... Ну, в смысле, у меня был... Я не знаю, какой был у тебя, но у меня был довольно простой путь. Я попала туда через программу Roatu.GDE.

Но мне пришлось пройти два собеседования. Меня сначала не взяли, а потом взяли, потому что не поняли сначала, что я пришла через программу и что меня вообще особенная область accessibility. В ГДЕ нет такой категории, доступность. Там сейчас вообще с вебом не очень... Веб никому не нужен, нужны AI, ML, там все вот эти штуки. Вот, поэтому да, но у меня, правда, был не очень сложный путь в ГДЕ, но сейчас он довольно сложный для людей.

Ну да, для входящих я, по крайней знаю, что мобильщикам стало очень сложно входить в ГДЕ. Я тоже никогда не пытался, но так ребята рассказывали. Не настолько сложно, они просто ленивые. Многие просто не пытаются, на самом деле. Там достаточно... Если у тебя есть знакомство, там же всё по знакомству. Если есть знакомство среди ГДЕшников, то в целом пройти этот путь. И если ты там, не знаю, видимый, заметный, читаешь доклады, ну то есть...

Для нас с Глашей это просто естественно, мы просто так живём, и оказывается, это подходит к ЭТРМ ГДЕшности. Ну и ладно. А какие вообще плюшки дают ГДЕ, думаю, тоже интересно? Какие там плюшки были для вас лично? На самом деле, одни из главных плюшек, которые дает ГДЕ, это ранний доступ к всяким обновлениям, которые ещё могли не выйти, но ты уже можешь про них почитать, начать писать контент про них.

никогда в жизни не пользовалась этой классной плюшкой. Может быть, начну пользоваться. Ну, потому что я ленивая женщина очень. Ну, просто в доступности мы сейчас новое начнём рассказывать. Да, старое ещё никто не знает. Я очень много времени трачу на то, чтобы объяснить людям вообще, что это бывает. Вот. Но в целом нет. Я очень хочу влиться в эту движуху. Ну, и для меня сейчас самая главная плюшка для активного ГДЕ.

Hexlet (07:19.437)
является, конечно, возможность поездить по конференциям, поездить на Google какие-то ивенты для комьюнити Google Developer Expert, Women Techmakers, разные-то другие категории. Они приглашают на ивенты, провозят на ивенты, в этом плане очень круто. То есть комьюнити большое. Плюс есть...

всякие классные созвоны с профессионалами, с гуглерами можно пообщаться и так далее. Ну, вот то, что я успела пощупать за это время. Может, Никита есть побольше экспиринс какой-нибудь? Никита почти ничего не успел пощупать, потому что Никита стал ГДЕшником во время ковида, и все то, что поездить можно, пообщаться, в тот момент активно прикрыли. Но для меня, наверное, самая важная часть в ГДЕ — это созвоны с такими...

ну, именитыми людьми во фронт-энде, когда ты общаешься с, условно, юной Кравиц или Томасом Штайнером, по статьям которых ты готовишь свои доклады, и можешь лично поговорить. Я до сих пор некоторые контакты для себя сохранил, то есть там есть рассылки, которые почему-то из рассылок меня не удалили. О-о-о! Пожалуйста, не удаляйте меня. Ну, и какой-то баг, видимо, есть. То есть из программы убрали, но из э-мейла рассылок почему-то я там все еще есть. Не делали процесс. Да.

Короче, есть возможность общаться, и я до сих пор общаюсь с некоторыми там, теми же самыми гуглерами, деврилами, когда там какие-то интересные темы можно пообсуждать. С Томасом Штайнером, ну не то что мы прямо общаемся, переписываемся, но иногда там по каким-нибудь ПВА-штукам я ему юшу завожу, он мне юшу заводит. На гитхабе вот так вот общаемся, Иногда там в Твиттере с кем-то можно попереписываться. А так в целом, ну опять же, участвовать в мероприятиях Гугла тоже прикольная.

То есть мы в свое время с Сашей Шенкевич активно участвовали в Women Developer Academy от Google. Это как раз-таки... Мы там очень сильно прокачались как наставники спикеров, потому что у нас Сашей был четырехчасовой мастер-класс. Этот знаменитый! В мое время он был трехчасовой. Ну, мы потом немножечко расширили программу. Так что, плюс у меня чисто меркантильная цель, мне нужны новые спикеры. Постоянно.

Hexlet (09:37.805)
Одни и те же люди, как бы, постоянно их зовёшь, они про одной тоже рассказывают, вот, хочется новых. Вот, поэтому мы как раз туда шли для того, чтобы помочь этим новым спикерам появиться. И очень классно, что они сейчас есть выступают. Это, прикольно, потому что мы-то поговорим сегодня как раз про то, что новое есть во фронтенде, сессии, и всем прочим. Соответственно, есть какие-то инсайды, понимания у наших дорогих гостей сегодня. Давайте вообще такой сразу наброс.

есть ли какие-то новые такие радикальные изменения в фронт-энде? Что-то поменялось за последние, ну давайте возьмём пару лет, что вот в таком, вроде коротком промежутке, но при этом для фронт-энда когда-то это было просто два года в неизвестности, в чём-то новом. Сейчас так же или уже полегче? Ну вот сейчас двигается просто семимильными шагами. Начнём с того, что

наконец-то решились переписать парсер. То есть очень долгое время, ну типа есть ограничение парсера CSS, и это значит, что новый синтакс, если как-то куда-то его внедрять, ну больно. Ты не можешь просто взять и добавить новый селектор, там, performance просядет и так далее. Поэтому всевозможные там add-container, add еще что-нибудь, add-starting-style, ну и тут всякие директивы, которые сейчас появляются просто чуть ли не каждые пару месяцев.

Раньше это считалось чем-то, блин, а как это сделать для обратной совместимости? У нас же Udmedia есть, давайте вот им пользоваться. А сейчас просто вот реально клепают один за другим, и на перформанс как будто бы сильно не влияет. Вторая значительная история. В целом устройства стали быстрее, те, которыми мы пользуемся. И за счет этого те вещи, которые 10 лет назад нельзя было внедрять сейчас, и алгоритмы стали помощнее, и там движки на более производительные языки программирования местами переписали.

появился ХЭС, то есть тот самый родительский селектор, который лет 10 назад и лет 15 назад говорил, вы чего, это невозможно. Это же, ну, в смысле, вы сейчас грохнете весь интернет таким вот образом, нельзя, это будут супер медленные сайты. Нет, оказалось, можно, вполне себе. Оно все еще не производительное. Если ты напишешь полностью сайт, который состоит целиком из ХЭС, тебя даже простенький лендинг будет виснуть на этапе банального построения CSS-Object Mode.

Hexlet (12:03.821)
а это типа чего. Но если сильно надо, пару таких селекторов в продакшн уже вполне себе можно впихнуть. Ну и, мне кажется, супер важная история. Проект Interop, который как-то помирил между собой браузеры в какой-то мере, плюс добавил им челленджей. Ну, то есть те, кто верстает давно, помнят времена, когда воруй убивай, тебя появляется новый браузер. И в принципе, вестальщик почему был...

нужен во многих проектах, потому что верстачик это тот человек, который знает, напильничек лучше приложить к какой деревяшечке. Вот у тебя новая деревяшечка вышла, на которой ты показываешь свои сайты, и ее надо как-то аккуратненько, все, прибрали, вроде работает. И люди, которые знали разницу между интернет-эксплорером четвертым и шестым, ценились на рынки. Особенно те, кто умели укротить интернет-эксплорер шестой, знаменитое свойство Zoom 1, кстати, которое стандартизировали буквально...

Буквально пару месяцев назад его все-таки достандативизировали. Все эти годы оно было так просто сделано. И проект Interop — когда основные мажорные браузеры — это Google, это Edge, Google Chrome, Microsoft Edge, Safari от Apple. По факту движок WebKit будем считать, потому что тоже влияет на всякое. И Firefox, Mozilla Firefox.

они договорились, что они раз в год будут собираться, выбирать цельовые направления на год, где нужно пофиксить веб-платформ-тесты и, возможно, дописать новые веб-платформ-тесты. И мы сейчас, кажется, в такой золотой эпохе, когда новые фичи, которые внедряются, если они есть в проекте Interop, то у нас есть все шансы через пару лет ими пользоваться, а не ждать 5-10 лет. Вот про гриды сколько мы говорим.

Я все еще вижу разработчиков, которые до сих пор сидят на флексах, потому что, ой, что-то я слышал, гриды эти ваши, что-то ненадежно. Хотя уже давно надежно. Так даже не преподают нигде твои гриды. Типа, на курсы пойдешь, может, и найдешь гриды, но в универ пойдешь, и гридов ты там никаких не найдешь. Там, дай бог, чтоб не нашел флоты случайно. В таблице все еще работают. Ну да, да, да.

Hexlet (14:17.421)
Ну, в общем, действительно случается и случается много, потому что стали чуть-чуть смелее. Это знаете, вот как эти истории, когда в проекте у тебя куча сеньоров, и они говорят, это невозможно сделать. Приходит стажер, который не знает, что невозможно делать, и за пару дней это делает. Вот. У меня ощущение, что мне просто стажер залетел какой-то, и... понаделывал, и оказывается, о, так можно. Сейчас радикально двигается, прям вот очень сильно вперед двигается CSS.

он развивается настолько, что вот мы буквально недавно в подкасте обсуждали нативный if внутри CSS. А это уже, пусть Скайп потом скажет, что CSS не язык программирования. Да, TypeScript на CSS скоро напишут, и нормально.

Гваш, а у тебя что нового для Frontend для тебя-то? Что с твоей точки зрения пришло, поменялось, что изменилось? Ну, для меня в моей тусовке наиболее важно то, что нас появляются в сессии возможности откликаться на какие-то изменения на платформе пользователя типа пользователь сменил какие-то настройки и мы в сессии можем свой код под эти настройки...

подстроить, собственно. Там у нас самое такое на слуху — это Prefers Contrast и Prefers Reduce Motion. Вот, две эти штучки. Но мне очень нравится, что как и CSS, так и стандарты по доступности сейчас повышают требования к разным состояниям контролов типа...

фокуса, ховера, ошибочных состояний и так далее, что мы можем спокойно через CSS сделать очень много нативных вещей. К сожалению, разработчики об этом не знают.

Hexlet (16:04.365)
Приходится им рассказывать. А дизайнеры? А дизайнеры тем более не знают. Дизайнеры не знают, но дизайнерам как бы и по идее не нужно знать. У них есть набор состояний, ну, ой, не смотри на меня так, Никита. Но я имею в виду, что если дизайнер нарисовал тебе все состояния контролов, то по идее ты можешь их в своём коде реализовать. Ну, как ты реализуешь их – это другой вопрос. Мне очень нравится, куда движется HTML.

и все новые классные символические штучки, которые нас ожидают. Я в восторге от поп-апов. Я не знаю, как будет с их доступностью, но это большая... У нас сейчас поп-апы и все, что ними связано, тултипы, выпадашки каких-то странных кнопок и так далее. Это все суперсложно делать доступным и особенно сложно, когда ты не понимаешь...

что они разные бывают, что с точки зрения доступности, tooltip и pop-up с информацией фокусабельной — это разные вещи. И если в tooltip ты можешь одну строчку инфы содержать, то в выпадающем pop-up ты можешь гораздо больше текста содержать. И с точки зрения accessibility, это будут две разные вещи. Меня ещё очень сильно впечатлило. На одной из последних конференций была DMK.

анимации, которые случаются после того, там... Я могу сейчас не очень правильно рассказывать про это, но по идее мы можем красиво анимировать Display-none и Display-block. С точки зрения доступности это была огромная проблема, потому что у нас, если мы хотели красивой анимации, мы использовали там opacity, что-нибудь вот это вот, что исчисляется и можно зафейдить.

Вот. Но такие элементы не скрываются от ассистивных технологий. Типа, они всё ещё доступны с клавиатуры. ты вроде его нет на странице, да? Вроде он уехал куда-то в сторону или скрылся красиво. Но он всё ещё там, лежит в коде, он всё ещё доступен с клавиатуры. И для незрячего пользователя тоже. То есть там очень...

Hexlet (18:06.829)
Поэтому мне очень нравятся вот эти новые штуки. И, конечно же, инерт моя большая любовь. И то, что апдейтят существующие семантические элементы типа диалог. Ну, вот типа год назад я всем говорила, знаете, ну не год назад, а два года назад, говорила, знаете, диалог как бы не очень ассексабилити. А сейчас диалог очень ассексабилити. И там ещё ну апдейтится всё это и...

Можно использовать и не переживать, что ты используешь нативный диалог для модальных окон, что они могут быть раз... Они могут быть не модальные модальные окна. Ну, короче, там всё предусмотрено с большего, и можно юзать. И я в восторге от обновлений. Сейчас всё селекта дождёмся, и вообще будет красота. Глаша, а знаешь, как называется успешное accessibility? Нет. Accessibility.

Мне кажется, я в этой области работаю основно. Когда я говорю «здрасте, я сексуальсабилити-эксперт», мне кажется, поэтому потом мы там про БДСМ разговариваем. Извините. Да, Белорусский державный союз Молоди. Там вроде success ability, ну типа не success, а success, типа вот с успех. Да-да-да, с асекс.

Есть в Британии такой регион. нормально. Вот, а в целом, расскажи, видишь ли ты, что на рынке сейчас становится больше запрос на доступность? Наверное, нужно посмотреть, интересно, на каком рынке становится больше запрос на доступность? А на каком вообще нету, как бы это неинтересно? И вообще, перспективно ли там?

начинающему или уже продолжающему разработчику что-то пытаться интересоваться доступностью в каком-то виде? Постановка вопроса два. За постановку вопроса два. Перспективно, конечно. Это обязательно. Надо, знаешь, как их спрашивать, с чего начать свой путь доступности? Не, ну я понимаю, конечно, есть много размышлений на эту тему.

Hexlet (20:20.749)
Мне очень понравилось тоже вот с последней конференции, Accessibility Club Summit называется. Там как раз чувак вышел и говорит, ребята, слушайте, я вот sales, я продаю доступность, сейчас столько возможностей продавать доступность, давайте подумаем, как это лучше делать.

А я сижу такая в смысле... В смысле, есть возможность продавать доступность, кто-то может её купить, там что происходит. А он говорит, вообще рынок огромный. Я такая, подожди, мы с моей предыдущей компанией так и не нашли этот рынок. Ну, точнее, он есть, но он существует, в общем. А он говорит, типа, огромный. Но сейчас из-за того, что...

В Европе все знают, кто в этой теме тусуется, и не только в этой, все знают, что в Европе обновляется законодательство, и к 25-му году, к июлю 25-го года, все интерфейсы digital content должен быть доступен. Там, может, есть некоторые ограничения типа, кто обязательно должен быть, кто необязательно, но в целом идея в том, что если у тебя есть интернет-магазин, он должен быть accessible, если ты продаёшь в Евросоюзе.

Я сейчас работаю в компании, которая очень сильно международная, и поэтому я там работаю, потому что им нужно accessibility поддерживать на американском рынке, на канадском рынке, на европейском рынке, и поэтому, ну, как бы требования растут, и соответственно, и профессионализм должен в этой сфере расти, я так считаю.

В Европе, возможно, какой-то момент просто не будут тебя брать на работу. Ну, это моя фантазия такая. Не будут тебя брать на работу, если ты не знаешь о accessibility работа в ЭБИ или в мобилах или в государственных каких-то структурах. Там всегда это нужно. Я очень давно делаю проекты с доступностью. Германия очень давно просит о accessibility в каждом проекте, в который я вообще когда-либо трогала. Это от магазина...

Hexlet (22:17.485)
чего-нибудь до какой-нибудь маленькой сауны личной, которую ты продаёшь на время, ты всё равно должен стандарты поддерживать. Поэтому... Да, я вижу рост интереса.

я всем рассказываю, что меня уже не берут на конференции, потому что у них есть доклад по доступности. Поэтому даже в комьюнити это очень интересно. Мы вот на своем Meetup CSSJS, нас всегда эта тема поднимается, мы всегда стараемся спикеров поддеть на прослушивание и спросить, а что там по доступности в твоей технологии? Добавь, пожалуйста, пару слов. Ну, кстати, интересно, потому что...

насколько нужны инженеры здесь, насколько нельзя вот этот ручной труд, это понимание заменить какой-то автоматизацией, есть ли здесь какие-то инструменты сразу готовые, которые, ну, понятно, есть инструменты, которые проверяют доступность, но есть ли инструменты для разработчиков, которые... Ну, это фреймворки, в смысле, вот сейчас, да, если во frontend посмотреть, то UI-ные библиотеки...

стараются всегда внедрять доступность самые понтовые, поэтому ты просто хорошо пишешь на её библиотечке, которая у тебя есть, Reakit, точнее, Aria Kit, сейчас называется, Material, Bootstrap, whatever, типа, они все стараются немножко добавить к себе доступность, вот, поэтому ты можешь уже эти возможности использовать, это не то чтобы автоматизация, да, но с точки зрения проверок...

Ну, понятно, там код пиши Accessible, линтеры. Линтеры в кита, да. Да-да-да, линтеров полно. Обновляются семантик HTML, и поэтому там, может, ещё и линтеры надо как бы посмотреть, чтобы нормально обновлялись. Но самая большая проблема — это недостаток базы и понимания, знаний спецификаций, короче, недостаток капитальный.

Hexlet (24:14.669)
И понимание пользователей пользуется интерфейсом. Самая большая штука, с которой я встречаюсь, это разработчик делает очень много лишнего. Очень много лишнего. И дизайнер. Типа, начинается написание очень длинных, непонятных лейблов, кнопки, у которой и так есть, видимо, текст, и заканчивая накруткой каких-нибудь ариатрибутов, которые не нужны или... Они построены, потому что нет понимания, что у тебя есть роль какого-то элемента, и уже к ней...

прописано всё в браузере, все артибуты прописаны, тебе не нужно их писать руками, они встроены. В общем, да, тут автоматизация, конечно, прикольная, но чат GPT мог бы автоматизировать наши процессы. Но, честно говоря, мы провели… — Получается? — Мы провели эксперимент с Таней и Фокиной, посмотрели, как разные аишки отвечают на наш вопрос, создай нам, пожалуйста, Accessible меню. Очень больно.

ГПТ плохо справляется. Ну, третий вообще даже не берите, пожалуйста, не пишите код с третьим ГПТ, аксессибл, штемель не пишите. Вот. Перепроверяйте всё. Джаминаи лучше всего справляется, он знает какие-то современные стандарты. 4О я пока не пробовала, Ну, смысле, код не заставлял его писать четвёрка, но так тоже не очень хорошо писала ГПТ.

Вот, лишние атрибуты, deprecated атрибуты используются очень часто. Типа, зачем? У этого нет большего, вы или пожалуйста, уберите. Или неправильно работает там, ну, в общем. У меня, кстати, наверное, такой основной автоматизатор — это автотестеры, которые пишут тесты там на Cypress, и они наконец-то, ну, вот, лично у меня не знают, что за курсы, как они к этому прошли, но, в принципе, когда-то для меня это React...

Testing Library стала таким открытием, что можно навеживаться на все accessibility атрибуты и, собственно, этим и пользоваться. И как бы ты начинаешь форсичком в команде то, что давайте так делать, из ковта момента тестировщики тоже такие. Мы тоже теперь так делаем, и, кажется, возможность станет лучше в этой сфере тоже. Никит, Go еще про новинки CSS не только в accessibility плане. Это же очень интересно.

Hexlet (26:32.045)
Но куда вообще, какое сейчас движение у CSS я услышал про то, что, ну понятно, этот hes, который по мне заменил довольно значимую часть того, что делал для меня, post CSS, в какой-то мере заменил. Я понимаю, в принципе, от подобных инструментов начали отказываться за последние два года? Не сказал бы.

У меня опыт вообще просто другой. У меня очень много проектов. Это CSS and Jazz, это Material. И именно конкретно тот CSS, который когда-то писали ручками. Я уже давно не писал. Просто из моего мерка лично. Но я думаю, что есть и другие мерки. Ну, я в последнем месяце внезапно достаточно много верстал. Но тем не менее. В целом CSS развивается в сторону потребностей разработчиков.

Так я могу сказать. Появились движения в плане делать опросы, делать всевозможные State of CSS, State of Gmail, State of JS. Есть WebLmon.h – потрясающее движение, которое анализирует, что вообще в вебе-то происходит с течением лет, что изменяется. И обычный анализ этого делают люди, которые непосредственно разрабатывают спецификации и внедряют их даже в браузерах. То есть в целом люди видят, куда...

идут разработчики. ну то есть если говорить про CSS максимально прошлого, это были во многом такие академические разработки. То есть академический CSS когда-то, ну вот теоретически вот это должно работать вот так, вот это давайте внедрим в браузере, вот спецификация. Ну и браузеры не то чтобы между собой одинаково это реализовывали, потому что не академики браузеры пилят, как говорится, не все возможно было адекватно написано то же самое с пейки.

Сейчас он более практический. Те люди, которые делают эти спецификации, это практикующие инженеры, которые в том числе и на реактах пишут, и на вью, и на чем там только можно написать. Плюс Девреллы обычно тоже, которые занимаются в браузерах всякими этими штуками. Они умеют пользоваться вебом, они умеют его творить. И у них есть выход как раз-таки на тех, кто занимается спецификациями. И часто, кстати, Девреллы в том числе делают эти самые спецификации. То есть сошлось все в одном.

Hexlet (28:52.557)
Тебя люди, которые непосредственно общаются с разработчиками, пытаются понять, а что им надо, они узнают и реализуют это в виде спек. К чему это приводит? У нас сейчас активно двигается popover API. Ну вот, Глаша говорила про диалоги. Popover API — это такое классное дополнение к диалогам. То есть ты можешь теперь делать tooltip-ы нативно. Ну правда, там HTML против CSS, у тебя атрибуты плюс псевдоклассы, псевдоэлементы появляются, но при помощи них можно творить прям...

невероятные вещи из разряда. То, что раньше нужно было GS библиотеку подключить, сейчас браузер просто автоматически включает тебе дисплей блок или что там тебе надо. У тебя всё это оп и доступно, фокус туда перемещается. Кстати, с фокусом там ещё не доделали, к сожалению. То есть это всё ещё развивающая спецификация. Она не делает тебе вот этот энерг, который хотелось бы. Но в целом это уже проще, чем раньше с GS библиотеками делать.

То есть ты в целом можешь этот nrd хитро вывернуть тот же JavaScript, но типа все равно поставить куда надо. Появляется Anchor Position API, который вообще безумно крутой. Ты можешь отказаться от огромного количества JavaScript-диблиотек, вся задача которых — привязать тебе tool-типчик какой-то точке на экране. Но из-за того, что tool-типы, чтобы Z-индекс друг другу не мешал, ты ставишь в конец дома, у тебя в итоге вот эта позиция, ее надо отслеживать от скролла и так далее.

Анкерпозиционинг в этом плане, он просто говорит, прилепись вот к этому элементу, и вот если вдруг выйдет за вьюпорт, ну, можешь тогда вверх переместиться. Если вверх не помещаться, ну, тогда влево. И это настолько вау! Там, правда, спека сложная, и она еще пока что не внедрена полноценно нигде. Можно в хроме, в канарейке флажочки включить и поиграться с этим. Но если смотреть на то, какие демки сейчас показывают, и этот, типа, условно там 16 строчек CSS,

ты такой «Вау!». Там, ну, Рома Комаров, например, при помощи этого анкерпозиционника творит такие вещи, которые даже вот подумать нельзя было там, не знаю, вплоть до майндмэпов. То есть, вот это когда делаешь блоки, которые ты связываешь с стрелочками. При помощи анкерпозиционника берешь и связываешь. Я тоже представил, я когда-то делал дерево талантовов для одного крупного сайта. Вот это прям идеальное, кажется, применение.

Hexlet (31:11.597)
Ну, хорошее применение где-то можно Ты можешь это делать теперь ещё и адаптивно без JavaScript? Ну, пока не можешь. Мы говорим про то, что появится через пару лет во всех браузерах, но оно точно появится. Появились всевозможные штуки про анимации. Опять же, согласно тому же самому веб-монаху, всё, там связано с анимациями, очень много библиотек подключается к JavaScript для этого. Ксап очень часто подключают. Вообще не для того, для чего он сделан.

Он сделан для сложных анимаций, когда тебе там чуть ли не в Canvas это надо делать или в WebGL, что-то такое там можно подключить. Но классный инструмент, если что. Но, опять же, тебе нужно тащить метр JavaScript только для того, Вот мне тут к скроллу привезутся и кнопочка такая, оп, и больше стало. Ну типа сделай ты уже Intersection Observer, не стесняйся. Вот. Появились scroll-driven анимации. Они уже причем...

потихоньку, по-моему, чуть ли не во всех браузерах в каком-то состоянии есть. Я не уверен, что там в Firefox, но Intent Implement тоже, по-моему, был. То есть ты привязываешься к скроллу, ты привязываешься к вью, есть вью таймлайны и скролл таймлайн, и, в принципе, анимация вместо времени, как ось, на которой ты показываешь, что ты скрываешь, ты используешь либо скролл, либо позицию внутри в вип-порта. У меня доклад про это есть. Ну, то есть это очень круто.

ты можешь всевозможные параллаксы больше не подключать там никакого RGS опять же. И обалденная вещь, которую когда-то, если что, умел интернет-эксплорер, по-моему, шестой или четвертой, я не помню, View Transitions API. На самом деле, многие вещи умел интернет-эксплорер в шестой, потому что там можно было под капотом DirectX, по-моему, подключить и с этим играться как угодно. Но было слишком сложно. То есть developer experience – это нулевой.

к сожалению. Но те, кто умели, творили просто невероятные штуки. Так вот, действительно появились те самые View Transitions API, которые сначала тебе позволяют... Ну, то есть в чем суть? У тебя на экране есть какой-то дивчик, ты его хочешь превратить в дивчик другой на следующем экране. И дизайнер, в принципе, не против, чтобы тебя не залили. Вот превьюшка ютубовская, вот вот подкаст где-нибудь будет, там в виде превьюшки ютубовской. Ты нажимаешь на превьюшку, и она такая, воп, и в большую картинку красивую.

Hexlet (33:34.669)
Ну, красиво же? И раньше, такое сделать, надо было упороться с фреймворком, чтобы так сделать. То есть это очень сильно тебе нужно подумать, как у тебя дерево рендеринга одно в другое превращается, тебе нужно вынести эту превьюшку куда-то в отдельный слой, пока там все остальные слои убираются. Ну, короче, жутко было. Но в целом пытались, делали, когда сильно надо, но чаще всего забивали. А сейчас ты просто имеешь возможность, браузер тебе говорит, смотри, я сделаю скриншот вот этой области,

Когда там страничка следующая отрендерится, я эту картинку просто превращу в следующую. Я её увеличу до нужных размеров, я её там api-city поменяю в процессе, фильтр поменяю. И он такой, через fade-in, fade-out он превратится в следующий элемент. Ну, если по умолчанию. Простая же история. Ты просто две картинки делаешь, как это слайд-шоу, переход примитивнейший. Просто браузер знает пиксели, превращает их в картинку, и потом оп, и в следующую картинку. Но очень долго не могли такое сделать, и...

Сначала это попробовали на сингл пейдж аппликейшнах, внезапно такое «ууу, работает, давайте и в других местах». И теперь, наконец, дошли до мультипейдж аппликейшн. Буквально недавно это в Chrome, по-моему, появилось, другие браузеры это… А, по-моему, Safari тоже в эту сторону активно смотрит. Я вот, к сожалению, сейчас-ка на юз в голове у меня не сработает, но можно посмотреть. Браузеры это внедряют. То есть ты на одной странице кликаешь, он там что-то рендерит и превращает тебе красивую анимацию в другую. Вот то, что Глаша говорила про анимацию дискретных свойств.

Ты можешь дисплей none, в дисплей блок анимировать, черт побери. Раньше это ну типа как тебя два кадра анимировать? У тебя есть 0 % none, 100 % блок, и все. Два кадра. А сейчас ты можешь с этим играться. Ты можешь сделать 50 % у тебя уже дисплей и блок будет. Ну то есть там появляется классная возможность для transition. Появилась дискретная директива starting style. То есть когда у тебя еще, у тебя должно примениться анимация к чему-то, чего на странице на самом деле пока нету.

вот с какого стиля должен ты начать транзишу. А вот стартинг-стайл он тебе говорит, начнем вот с этого. И эффекты появления классные можно из этого сделать, что тебя все, что новое появляется на странице, например, сразу увеличено, а потом оп, и сделается маленьким. Или наоборот, маленькое становится большим. Для лендингов, по-моему, вообще офигенно. Ну и так далее. То есть многие вещи, которые разработчикам нужны, ну вот в тех или иных случаях, где они обычно страдают и используют джез, внезапно появляются в спеке.

Hexlet (36:01.293)
внезапно достаточно быстро реализуются в браузерах, причем сразу интерапирабильно... Нормальное слово. Да, интерапирабилити... интерапилити... Интеропабилити. Интеропабилити, точно. Вот. Дебагабилити мы как-то сказали в подкасте, и появился человек в твиттере с таким неисменным. Так что, интерапабилити ждем в твиттере. Библиотека в NPM сразу.

Да, да, да. Короче, мне очень нравится, как это все двигается. Понятно, что мы сейчас вот это восторженно смотрим, но сможем внедрять где-то через пару лет. Но давайте опять же вспомним, как внедрялись гряды. Те же самые гряды. Про них говорить начали лет 10 назад. И до сих пор некоторые боятся, потому что не было вот этого интеропа. А сейчас в целом, ну, мы вот когда в обстандартах обсуждаем все эти новые свойства, но мы делаем ставку уже на через пару лет. То есть сейчас скорее Safari мешает своим маленьким релизным циклам.

точнее большим. есть у них... тебе иногда устройство новое купить надо для того, чтобы новые CSS-свойства начали работать. Потому что на предыдущем уже, вот я недавно, опять же, купил себе новый iPhone, потому что старый 10-й, он уже не обновлялся на 17-й iOS. То все те вещи, которые я рассказываю под гостей, их попробовать не могу. меня 16-й там iOS на каком-то зависло и не двигалось дальше. Вот. А сейчас у меня 17-й, я такой, а-а-а, вот так можно демки смотреть?

Ну, то есть через пару лет всё равно этот цикл пройдёт, когда люди там совсем уже старые устройства, от них откажутся. А кто не откажется, прогрессивные улучшения, всё ещё им можно пользоваться. да. Ну, кстати, очень многие вещи, которые ты сейчас рассказываешь, в принципе делались раньше только JavaScript-ом. Те же самые в Vue Transition, я видел ещё там, это была одна из демок, собственно, Vue.js, примерно так же всё это выглядело, но это как бы то, что на появляется браузер, конечно волшебно, ну то есть как бы...

Сильно много головной боли уходит, но мне кажется приходит новая головная боль. Надо как-то этому у людей учить. Нужно как-то людям прививать, что есть такие вот штуки. Учить не только разработчиков, но еще и там.

Hexlet (38:14.957)
всех смежников, дизайнеров, тестировщиков тоже надо говорить, что «чуваки, нас баг, в общем, не фронтендера набожили, там это разработчики и браузеры набожили, давайте это отключим, не дай боже, люди это увидят». И это мы ещё не затронули сторону доступности всего этого невероятного бега анимации по экрану. ну то есть, у нас и сейчас нет никакой практики

сбивание анимаций, типа вот пользователю тяжело с многим количеством анимаций, даже если что-то маленькое становится чем-то очень большим и вырастает одно из другого, это может очень сильно законфюзить человека. И у нас в принципе нету практики использовать Preferency Reduce Motion и в дизайне показывать, как будет вести себя интерфейс после того, как мы выключили анимации на девайсе. Вот, поэтому это ещё один пункт, и к нам подумать.

как это будет работать, если анимации выключены? Я здесь просто могу добавить. Могу сравнить с медициной. 200 лет назад я вкус поставил, и вроде бы от всех болезней лечит. Так это и сейчас так, ну что ты, Никита, начинаешь? Ну всё-таки из-за того, что знание медицины было не доказательное, а на веру и на опыт, Ну типа работает, всякий бред. Сейчас тоже. Во много медицина.

Но я все-таки верю в доказательную медицину, что она развивается и так далее. Просто у тебя появляются больше возможностей, и за счет этого, ну, качество жизни людей, которых есть доступ к такой медицине, оно тоже сильно растет.

Но и при этом раньше условно, чтобы стать врачом, достаточно было потусить с тем, кто умеет ставить пиявки пару месяцев, и вот ты уже царюльник, который умеет... А шо в фронтензии не так? Я думала, судя по качеству кода, так и происходит все. Я не просто так это у налоги провожу, да? Теперь, чтобы врачом тебе в Беларуси надо 6 лет отучиться, И еще потом практику интерном пройти.

Hexlet (40:15.789)
У нас фронтендом, к сожалению, пока что мы находимся на этапе. Это не я курил, это рядом со мной курили. Не я фронтенд писал. Рядом со мной кто-то фреймворк установил, меня зацепило. И я теперь тоже фронтендер. Курсы вот это, Станни, фронтенд, сеньор фронтендером до 21 день и прочее. Поможем, устроится. Всё замечательно. К сожалению, типа курсы тоже разные бывают. Бывают, к сожалению, это я называю, киберширомышники.

Андрей Мельфов посказал. то есть... Ну, когда курсы некачественные, деньги берут много и говорят, что всё супер. Interoperability, кибершрамужники. Просто... Покупуляр расширился. Покупуляр подкаста сразу расширился. Ну, ты правильно сказал, для того чтобы делать качественно, нужно учиться. Профессионал — это тот, кто знает много. И да, нас профессия приходит к тому моменту, когда...

недостаточно просто уметь верстать на таблицах. Тебе нужно разбираться полностью. Ну, то есть раньше вебмастера, в принципе, вот я был вебмастером. И увели много. Плюс… Мы все три вебмастера собрались. Просеять теперь. Проблема том, что вебмастера прошлого и условный фуллстек-разработчик сейчас — это абсолютно разные люди.

Ну, то есть раньше тебе не приходилось столько всего делать. Тебе вот умеешь верстать на табличках, умеешь через FTP залить там куда-то через какой-нибудь файл.zil или что-нибудь, заливаешь файлики куда-то, с PHP это все интегрируешь. Оп, MySQL, PHP, MyAdmin подключил. Все, ты вебмастер. Поздравляю. Сейчас тебе нужно CICD, тебе нужно фреймворк какой-нибудь знать. CSS, HTML.

К сожалению, опять же, как требование на работу почему-то последнее время ушел. Хотя браузер, вообще-то, он показывает не JavaScript, он показывает HTML и CSS. JavaScript — это штука, которая двигает HTML и CSS. Поэтому, когда мне говорят, да я классный фронтендер, расскажи мне, пожалуйста, как браузер и что показывает. Если он показывает JavaScript, при этом он не делает оговорку, что умеет WebGL, как боженька,

Hexlet (42:24.941)
и на канвасе рисует, там любые он клики делает. Тогда я, может быть, с ним еще поговорю. Но когда человек утверждает, что он знает Javascript, поэтому он классный фронтендер, простите те, кого я сейчас, может, обидел какие-то чувства, но а что Малиси СС выучите, пожалуйста. Вот. И действительно, для того, чтобы стать классным фронтендером, нужно знать гораздо больше. С другой стороны, с другой стороны. Если раньше тебе дизайнер рисовал скругленные уголочки, то тебе приходилось таблицами делать какую-то дичь.

Сейчас

Фептикау, да. Да, это вот вот внезапный инсайт поймал, когда я смотрел, как человек молодой достаточно разработчик пытается вставить картинку, и как это сделать? А мы когда-то, наоборот, лирфиксу вот эти, с ними мучились. В общем, да, ты прав, учиться надо больше. Качественный фронтенд, наоборот, хорошо, ну типа можно будет отсеивать тех, кто некачественный, и в профессии, мне кажется,

В какой-то момент слабые уйдут, сильные останутся. Из-за того, что у нас есть легкий перегруз, все-таки, сейчас джунов на входе очень много. Опять джуны, простите, пожалуйста, но если вы хотите стать крутыми, вам надо обойти ваших конкурентов, а их очень много. А медлов и синьоров больше особо, кстати, не становятся. То есть они там идут дальше в менеджеров, вот это вот все, а джунов много.

Так вот, думаю, нас сейчас, конечно, кризис на рынке начнется из-за этого, потому что джунов много синьоров, медлеров не хватает, делать работу кому-то надо. Но с другой стороны, через какое-то время как-то санитары леса все сделают, и джунов качественных станет больше, негачественных станет меньше. Ну, это, кстати, да. Еще из интересного. Мне кажется, что вход в профессию, ну, кроме того, что вход в профессию увеличившая сложность входа, но при этом...

Hexlet (44:44.589)
появилось куда больше возможностей учиться, ну самостоятельно. Я не говорю про курсы, да, я говорю про то, что есть очень много ресурсов, где можно, ну, нормально взять, прочесть, разобраться. Там, про какой-то DevTool, а там, например, Google, замечательные статьи. Оставал очень-очень их много. Когда я начинал, ничего такого не было. Был, видишь, да, дикий запад, и приходилось учиться, ну, собственном опыте.

У меня, кстати, с того времени есть история про Adobe Dreamweaver. У меня ещё есть... Раньше история это Ucos, и я там делал такие... О, магика. Да, я делал roller-play сайты по нарутам, вот, и верстал их на табличках. Кнопочки у меня не были, знаешь, скруглёнными, потому что я знал, как таблички скруглить, а я картинки вставлял.

Это тоже замечательное время было. нас всё ещё есть. Имидж-батон, вот этот вот прекрасный, пожалуйста, вставляй. Ну, да, кстати, а сейчас приходит ещё одна новая эра, на самом деле интересная. Приходит эра, когда всё больше пытаются рендерить на конвасе. Ага. И я вот, ну это там, Flutter, например, так делают, насколько мне известно. Ребята с Ивом.

Это растовый фреймворк для фронт-энда, который умеет в вас компилироваться и что-то показывать. Вот они тоже этим заупотребляют сейчас. Очень интересная штука. Мне кажется, это абсолютно недоступно. Или вообще есть какие-то возможности туда вкринать доступность? В Flutter есть доступность, встроенная в платформу. можешь... Ну, то есть они это делают, скорее всего, накладыванием HTML поверх Canvas, а я так подозреваю.

Но, честно говоря, я не разбиралась, но точно у них есть способы сделать интерфейс доступным на итоговой платформе. Вот, ну да, у нас сейчас для Canvas одно решение, только слой сверху накладывать невидимые HTML, который будет работать нормально. Ну... Может быть, ещё какие-то невероятные способы есть, но мы вот research-или не очень давно и... Да.

Hexlet (47:05.453)
Да, есть в этом проблема, но просто если вы делаете интерфейс на флаттере, вы просто помните, что там есть вшитая доступность, и можно её использовать, и нужно посмотреть, как это делать. Иначе ваши невероятные кроссплатформенные приложения, незрячие пользователи, которые в основном предпочитают мобилами пользоваться в жизни, они просто не смогут ими воспользоваться этими интерфейсами, поэтому... Пожалуйста. Кстати, мы ещё в одну интересную сейчас, задронули такую штуку, это веб-приложение...

против сайтиков таких типичных, да, и кажется, что фронтендеры, ну, вообще, в моем представлении фронтендеры появились, короче, для того, чтобы делать веб-приложение. Аля, что сделала Gmail, да, и в общем, вот отсюда все пошло. Но потом оказалось, что фронтендеры, они как бы начали делать чисто вот эти вот обычные сайтики, которые, ну, там интернет-магазины и все прочее, и внезапно оказалось, что это тоже очень хорошо заходит, потому что…

frontend стала, ну это не JavaScript разработка, да, это вот что-то большее, в том числе CSS. И это, наверное, на курсах я ни разу этого не слышал, нигде, что как бы есть понимание того, что, типа, реально frontend не заканчивается там JavaScript-ом и куда больше что надо приносить CSS-а. И вот это вот понимание в какой-то момент, ну, оно рождается, думаю, у многих, но как-то по умолчанию оно не заложено. Как-то по умолчанию большинство курсов ведут так, что типа JavaScript first.

И поэтому, когда смотришь на обычные сайтики, кажется, они там не просто CSS-ом перегружены, так и наоборот, они CSS-ом не перегружены, они перегружены чистым JavaScript-ом, а CSS-а там слишком мало. И есть еще одна новая эра, это сейчас эра такая, когда мы видим, что все... Ну, я лично вижу, что вот именно такие небольшие сайтики, то, что делали раньше front-enders, там притаскивали как-нибудь framework типа Next, притаскивали там большой JavaScript-банду или вообще внезапно

Весь интернет-магазин был просто SPA-приложением, кстати, тоже такое себе развлечение было, особенно для мобильных устройств. Все больше это заменяют на более простые решения типа HTMLX. Вот, то есть такие штуки. И там, и там вот, там вот эти навыки CSS фронтендера, которые придет и наведет красоту, там они становятся куда более ценными, чем в эру, когда типа был только JavaScript, и JavaScript-JavaScript-ом погонял.

Hexlet (49:28.749)
и как бы ничего с этим сделать. Векендер не мог прийти и вставить свой атрибут, который позволит ему на сервер сходить. А CSS никуда не ушел. И это, кажется, круто. Тоже такое. Она и не уйдет. Понимаешь, инструмент позволяет делать тебе очень много всего. У меня просто есть опыт разработки и на .NET C Sharp, и в том числе и Windows, Forms, и VPF, и MVC.

потрогал всё. Даже нас там на лабораторных какие-то веб-сервисы мы поднимали. Хотя вот это мне в жизни не пригодилось, но в целом можно было. То есть ты можешь точно так же на C-sharp'е в принципе написать VNAMP при желании, который умеет у тебя всё что угодно красивенькие, кастомизируемо, тимизируемо. Ну, можешь. А можешь делать штуку, где у тебя 500 кнопок некрасивых, но они выполняют свою функцию. Это зависит от того, насколько глубоко ты погрузился в технологию. Точно так же...

Ты погружаешься в веб, ты можешь изучить много всего, хотя бы знать, где это посмотреть и создать какое-нибудь офигенное ПВА, которое там, не знаю, мне нравится скуш, которые сделали бывшая Деврела Гугла, Сурма и Джей Карчбальт, сделали вот как раз веб-асембли, чтобы потрогать, они сделали прогрессивное веб-приложение, которое оффлайн фёрст, тебе сжимает картинки в браузере, по сути.

и делают это чуть ли не лучше, чем большинство решений, которые написаны на нативных языках. Хотя, по сути, они нативный язык запихнули в ВАСом и запихнули в браузер. То есть они разобрались, как это работает, возможно, сходили к кому-то, кто разбирается лучше, они, там, там, контрибьютери. Ну и в то же самое время ты можешь просто клепать лендинги простенькие. У тебя есть какой-то фреймворк, тебе даже не обязательно... Я знаю, что в некоторых веб-студиях есть свои фреймворки для того, чтобы... Мета-фреймворки. Они поверх реакта делают что-то,

Это сложно назвать дизайн системы, всё-таки там что-то такое, именно метафреймворк, где они просто умудряются за два дня сделать тебе любой лендинг. Просто потому что оп-оп-оп и готово. Tilde — это же самое ноукод, если сильно надо, ты в принципе можешь наклепать себе из готовых компонентов вот какие-то вещи, которые работают. Если совсем хочешь упороться, можешь, конечно, кастомный CSS, но лучше не надо, не получится, потому что всё будет очень больно.

Hexlet (51:50.701)
Хотя опять же я знаю, что они там пытаются в эту сторону, работают и так далее. Ну то есть настолько гибкий инструмент, что им можно делать абсолютно разные вещи. И научные исследования, и просто посчитать два плюс два. По-моему классно это говорит о том, что инструмент устоялся, он развивается классно, и его можно хоть как угодно. Плюс низкий порог входа. А что им LSS безумно толерантный. Ты можешь делать ошибку, а браузер всё равно всё покажет.

С живоскрептом чуть посложнее, но он тоже проще, чем многие языки, если ты базовые вещи. Если ты уже начинаешь, там, знаю, ОУП на полную мощность крутить или там уже расковыривать прототипы, зачем-то тебе это вдруг пригодилось, или ты там действительно пытаешься TypeScript какие-то рассобесоединить так, чтобы он с библиотеками на vanilla.js работал и так далее. Ну да, чем дольше ты работаешь на большом проекте, тем больше усложнений в этом проекте происходит.

Но

Плевать, что там important в коде работает же. Shtmx, конечно, я сейчас сравниваю теплое с мягким, но Shtmx приблизительно похожа. Оп, документации скопировал, вставил. О, работает. Все, не нужны вы. Мне там еще tailwind я где-то видел. Вот можно на tailwind сразу хоп-хоп-хоп. Фреймворчик сделал. Все, увольняем всех фронтейдеров. Все замечательно работает. Ну а потом через год.

Придут, скажут, ребят, рефакторить надо. Ну, может, наймём обратно фронтендеров, что-то у нас не получается. И то это потому, что они сам этого делать не хотят, нужны какие-то рабы, которые будут этим рефакторингом заниматься. Вот фронтендеров наймём, сейчас каких-нибудь студентика возьмём себе, они-то точно знают эти базовые технологии. Да, вот, кстати, данность. А что теперь у нас по базам технологий? Ну, как бы мы определились, что...

Hexlet (54:08.013)
Это точно ничего не отобьёт, это тоже своя ниша. Но давайте определимся, что теперь такой, базовые знания CSS нужны новичку, чтобы вкатиться, чтобы быть, как сказал Никита, каком-то, достаточно компетентном, чтобы конкурировать с текущим уровнем знаний, не знаю, с медуами, там, те же самые, потому что...

Жены считали, что все больше конкурируют как с миду разработчиками за локантное место. А что надо знать из такого? Ну, мы понятно, мы поговорили, да, немножко про там флексы, не знаю, флоты, на картинку текст, натянуть. Понятное дело, табличную верстку знать тоже уже миллион лет не нужно. Есть гриды, гриды, наверное, тоже стоит попробовать знать. А что из того, что мы сегодня назвали или не назвали, обязательно знать еще новичку по-вашему.

Мне кажется, ничего не изменилось. Если новичок знает CSS, то он уже впереди медла. Ну, кстати, бывает и такое. Я соглашусь, соглашусь. Бизнесу плевать, как ты делаешь, если честно. Особенно в стартапах всевозможных, которые запускаешь. Да просто сделай, чтобы работало. Делай хоть на таблицах, хоть на гридах. Ну, если ты нанимаешь меня как фронтендера, ну, какие вопросы по CSS ты мне задашь, чтобы убедиться, что я знаю твой проект, ну, как бы...

помогу твоему проекту? Я обычно задаю достаточно базовые вещи, чтобы понять, что в принципе человек осознает, как работает браузер. То есть я уже не спрашиваю, как работает HTML, потому что HTML это тоже кусок браузера. Я спрашиваю именно, как работает браузер. И в зависимости от того, как человек мне отвечает, я понимаю там джун, синьор, мидл, кто это. Потому что HTML это уже давно не просто теги.

Это инструкция браузеру, как тебе загружать какие-то вещи, какие вещи прилодить, в какой момент скрипт загружается, картинка ленивая и неленивая. Ну, то есть HTML стал сильно сложнее, в том числе. Ты уже какие-то... просто написал несколько букв, а они влияют полностью на pipeline рендеринга. Некоторые буквы неправильно написал, и вот у тебя уже полсайта недоступна. Ну, то есть очень легко сделать плохо. С CSS приблизительно такую же историю я, скорее, спрашиваю...

Hexlet (56:24.077)
Я не то чтобы, кстати, что, провожу с объесы, я скорее уже на финальные секции нанимаю, но когда получается такая возможность, я всё-таки узнаю основы, как работает поток, ну, то есть у тебя элементы всё ещё располагаются в потоке. Это суперважная штука, вообще никто себе не представляет, что такое очень часто. Маджен и паддинги как работают, как их заставить вести бокссайзинг, вот это вот всё современное.

Про флексы я не издеваюсь над людьми, я не требую сравнить justify контента, justify items, потому что я все еще сам их путаю, я все еще подбираю, хотя уже за столько лет мог бы его учить. Гриды, ну типа я банально прошу сверстать что-нибудь. Мне не важно на самом деле, как человек сверстает, если это получилось адаптивно, если это не флоты какие-нибудь, ну типа если оно не разваливается. И на самом деле, если человек мне на таблицах сделает «Не разваливайся», я даже большим интересом начну разговаривать.

А если он еще роль презентейшн, там лица поставит я на него, начну с интереса смотреть. Ну вот видишь, какие нюансы. то есть любую задачу можно решить как-то. Я поэтому прошу просто с верстайтом, не знаю, галерея карточек. Популярна просто штука, которую скорее всего тебе придется в практике верстать. Если человек там картинку вставил не через бэкграунд image, а image уже плюсики ему в карму.

Если он при этом сделал какой-то object fit, чтобы они не разного размера были, значит он думает наперед, что в админку могут об и что загрузить. Если он еще при этом, не знаю, сделал на фоне background image у этой картинки, того чтобы, когда она не загрузилась, у нее все-таки что-то там было, как будто бы фоновый цвет, я такой, вау, человек явно этим сталкивался. Ну то есть нет разницы, как человек глубоко понимает CSS.

Потому что на практике, все равно, думаю, разберется, если умеет делать базовые вещи. Ну, я до сих пор многие вещи в CSS не знаю. То есть я какие-то новые вещи рассказываю, объясняю, но CSS, столько всего есть, что меня каждый год есть, на что готовить доклады. Новые псевдоклассы, новые псевдоэлементы, новые свойства, их столько, что... А зачем их все знать? Ну, типа, как тебе это в жизни-то пригодится? Тебе нужно знать, где найти, посмотреть, как они работают.

Hexlet (58:42.381)
МДН хотя бы открывать. что они есть, это тоже важно. то... Ну, и Javascript всё-таки разбираться надо. То есть основы Javascript'а, что такое замыкание и прочие штуки, которые спрашивают у молодых студентов, когда они только-только разбирают прототипы те же самые, не помешает разобраться, потому что классы всё-таки это синтоксический сахар в какой-то мере, хотя не полностью. Когда я говорю, что это просто синтоксический сахар — нет, там есть на уровне движка отличия.

Но тем не менее. И в современном мире все-таки нужны навыки хотя бы одного из премворков. Не суперкрутые, но ты хотя бы там, не знаю, на React, на Vue, Angular или на чем ты там пишешь, должен уметь собрать сайт. Важно собрать сайт и запустить его. Вот этих навыков и GitHub. Ну, что-нибудь, система контроля версий, но SVN, по-моему, уже в суе никто не упоминает. GitHub. Только те, кто там работает, по ходу.

А кажется, нет. Уже все, уже мертва. Вот этого достаточно. Если ты уже с этими навыками можешь влиться в проект и начать разбираться. Если этих навыков нету, лучше подтянуть, потому что будет очень сложно вливаться. Ну и один из главных навыков. Я как раз-таки люблю смотреть, а как человек, если я ему задам хитрый вопрос, как он быстро найдет информацию про этот хитрый вопрос. Мне кажется, умение гуглить, находить инфу, это вот...

Сейчас самый важный навык для фронтендера, учитывая, сколько всего мы понапридумывали. У тебя базовый HTML, CSS и JavaScript. Но мы же не можем жить просто. Мы понапридумывали там кучу фреймворков, метафреймворков. Вот у тебя Next.js, который метафреймворк суперпопулярный, который под капотом использует специальную версию React, которая работает не так, как обычный React. Тебе это все еще нужно в сборку в pipeline запихнуть. TypeScript не TypeScript, может ты вообще адепт этого Flow или чего-то там.

какой-то хитрой типизации. вот, ну типа, мы сами себе это придумали, эти сложности, и в них кому-то придется разбираться. Так вот, если Junior разработчик, такой, «Не, знаете, я вот освоил вот эти технологии, и остальные вот тяжело заходят, не буду, буду искать профессию». Не найдет. Ну, к сожалению. Нужно уметь адаптироваться под любой проект. И для меня как раз-таки высокое звание инженера — это когда ты можешь в принципе любой язык взять, посмотреть, понять, не обязательно писать.

Hexlet (01:01:06.637)
хотя бы понять. Понять, как оно работает, чтобы понять, где тебя там бак и так далее, вот это вот всё спроектировать, если сильно надо. А если... Ну, типа, чем это для меня отличается? Инженер от верстальщика. Ну, инженер умеет мыслить, умеет думать на любых языках. Он мыслит как-то потоком данных, условно. Верстальщик, просто делает работу. Типа ему приносит тз, вот картинка, сделай как на картинке. Вот я ищу, всё-таки нанимаю, стараюсь, чтобы у меня появились инженеры в будущем.

Поэтому меня требования, наверное, высокие. Не знаю, Глаша, у тебя какие требования? У меня очень большое требование к мыслительному процессу всегда. У меня даже ребята иногда спрашивают, а что ты делаешь, когда человек, очевидно, не знает ответа вопрос. Я говорю, я смотрю, как он дальше рассуждает. То есть он может сказать, я не знаю, и на этом закончить. И я такая, давай, пока, хорошего вечера, потом мы тебе на пути позвоним. Вот. Но если он говорит, я не знаю, но...

я что-то слышал, и есть ещё вариант, когда я не знаю, но давайте попробуем вот так. И начинают пробовать и рассуждать. Поскольку в моём случае, когда я проверяю знания на вёрстку, на доступность, люди очень часто говорят, я не знаю, как это сделать, потому что в AI спецификация не суперпопулярная штука среди фронтендеров. А по ней много вопросов всегда. Ну, то есть без неё иногда некоторые вещи просто не сделаешь. Я говорю вот...

Тебе нужно там в кнопку добавить лейбл, а тебя кнопка иконка. Видимо, нельзя рисовать. Что ты будешь делать? И люди, которые не знают про ваерри, они, ну, прикольно очень рассуждают, когда рассуждают, но иногда просто такие типа, зачем? Это не надо. Я объясняю, зачем, и они такие, ааа, это не, это не типа, наш бизнес такой не берет нам, это не нужно в бизнесе. Ну, сколько там этих ваших пользователей незрячих? Любимый мой вопрос. Вот. Я говорю, я не знаю. Без но.

Вот, короче, да, вот мыслительный процесс прям суперважен. Я могу допустить, что человек чего-то действительно не знает или, ну, не доучил, там, не допрактиковался, но мне важно понимать, с чем он работал, с чем он хочет работать, из тех технологий, которые я ему предлагаю, какой у него с ними опыт и как он выходит из ситуации, когда он чего-то не знает.

Hexlet (01:03:28.653)
«Пойдёт ли он ко мне спрашивать?» Вот это, конечно, «пойдёт ли он к Тимляду спрашивать?» — самое… Я не знаю, как это проверять на собесах, ну, смысле, наверняка есть какие-то способы, но задать вопрос, уточняющий для кандидата, — это что-то из разряда невозможного. Они не спрашивают. Если они не понимают вопрос, они не переспрашивают, не уточняют. И это дальше в работе очень видно. Это человек, который сядет и будет делать задачу 50 часов.

Потом он придёт к тебе и скажет, слушай, я что-то тут немножко поувертаймил, но как бы, ну, я разберусь, ещё надо... Завтра это сдам. Давай, любимый. Вот. И ни одного вопроса просто не задаёт человечек, и это очень тяжело в профессии, ему дальше будет, если он не задаёт вопросы. Я всегда всех очень подсекаю, особенно когда мне говорят, я очень много вопросов задаю, говорю, отлично.

на собесах вот если что проверить такой навык это опять же не сто процент на попадание да но вот тоже такой микро тип можно с самого начала собес сказать что задавай вопрос уточняй и ты специально надо должен поставить вопрос по так что нужно до уточнить вот если человек не доточняет что возможно это ну такой не ред флаг однозначный но это ну скорее всего это не мать в этом плане вот и как-то

У меня, в принципе, неплохо срасталось ожидание с реальностью, когда я так делал, если человек вообще не задает вопросов на собесе, то он, скорее всего, и не задаст вопросов в жизни. Но бывало и наоборот, что там есть люди, которые просто душные, и на собесах душных тоже сразу видно. У меня, к сожалению, навыки... После там двухста собесов навыки...

вот именно, вот увидеть таких людей, прокачиваются в любом случае. Так что те, кто проходит собеседование и там не качают софт-скилы, и не следят за тем, как они будут общаться на работе, и не думают, что то, как они общаются на собесе, никак не повлияет на мнение того, кто нанимает, они, ну, скорее всего, ошибаются. Не говорю за все компании, но из того, что я видел, это правда.

Hexlet (01:05:47.053)
Так что это ещё один навык для начинающих, хорошо себя показывать на совесах, нужно учиться разговаривать. Не самый популярный навык, у более интровертов в профессии. такое тяжело. Кстати, у меня был опыт, когда мне показали, как это работает, когда ты правильно, ты можешь для интровертов хорошо разрабатывать, ты по фреймворку отвечаешь, у тебя есть фреймворк, как составить свой ответ.

И ты конкретно на вопросы продумываешь схему. Вот поэтому... Там, он, по-моему, называется старый, если я не ошибаюсь. То есть у тебя есть какая-то ситуация, ты там рассказываешь, в чём была проблема, как ты её порешал, какие шаги для предотвращения в дальнейшем ты предлагаешь. Ну, понятное дело, что это больше про описательные вопросы. Но самый большой фидбэк моим... ко мне был, как к кандидату, это...

ты не умеешь себя презентовать, ты не умеешь рассказывать, что ты делаешь, когда ты делаешь, как делаешь, в чём ты хорош, какие были твои достижения. Поэтому сейчас я просто всем супер советую, если вы ещё не записывали свои достижения, начните составлять список своих достижений. Вспомните всё, что было у вас в прошлом месте работы, там ба-ба-ба, потому что любая штучка я внедрил гриды.

Я добавил доступность в одну кнопку, и с этого момента в дизайн-системе, и с этого момента все кнопки стали доступны на сайте. Тут есть, конечно, проблемы, но зависит от... Но вообще даже самые маленькие штучки — так необходимо для дальнейших поисков себя в работе и в жизни уметь себя презентовать, написать о себе красивые тексты в LinkedIn, где будут все нужные ключевые слова и ещё и смысл.

Да, в общем, очень дорогого стоит, и большое требование к иностранным собеседованиям точно. Если у нас в русскоязычном комьюнити, я когда пришла в Семираж на собес, мне сказали, ну, тебя про тебя всё знаем, мы тебе вопрос по accessibility задавать не будем, ты как бы мать accessibility, давай поговорим про твои там навыки менеджерства. Вот, я такая, ладно, час беседы просто ушёл в никуда.

Hexlet (01:08:06.861)
Вот, но в целом, да, а в иностранном рынке так не работает. Ты должен красиво про себя все рассказывать, про все, что умеешь делать и что ты сделал на прошлых местах работы, желательно в цифрах. Так, кстати, есть сайт, по-моему, называется Big Interview. В общем, это такой сайт, где просто рассказывается подробно про то, как устраиваться в зарубежный Big Tech. И там про framework star довольно много расписано, и расписано там особенно…

Если вы проходите Behaviour, ну, повинческое интервью, там рассказывается про то, как нанимающий менеджер смотрит на то, как вы отвечаете на вопросы. Поэтому, да, джунны, которые наслушают, наверное, вам это еще пока не так актуально, но качаться уже пора и в эту сторону. И, наверное, мы сегодня очень много поговорили про том, что есть снова все сессии. Мы очень много поговорили про то, какие...

области знаний стоит тоже подучить, посмотреть про accessibility поговорили, тут тоже оказывается очень много нового, и я на самом деле в шоках всегда от людей, которые этим серьезно занимаются, потому что у меня довольно такой скудный опыт в внедрении, ну естественно он есть, но он довольно скудный, как думал большинство, так что слушайте, смотрите за тем, что делает Глаша, у нее есть

Крутые статьи, я точно видел. Думал, ссылочки мы приложим. Слушайте подкаст веб-стандарты, слушайте нас и подписывайтесь на канал. Ставьте лайки, колокольчики, все дела. До новых встреч. Пока-пока. Пока.