Будни разработчика

#заметка дня В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?» Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто. Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда. Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте. Остаются button, input[type=“button”] и input[type=“submit”]. Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”? Давайте с очевидного: валидатор запрещает иметь div внутри button. Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно. Впрочем, браузеры такой трюк позволяют. Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках. Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо. Второй же случай посложнее. Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе. Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем. Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅 В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние. #button #a11y #role #toggle

#ссылка дня Итак, в чатике пару дней назад поднялся срачик состоялось некоторое обсуждение. Темой этого самого обсуждения стало автоматическое воспроизведение видео со звуком на сайтах. Насколько нам всем известно, это с некоторых пор практически невозможно: только после явного действия пользователя. Но коллега утверждал, что можно и в доказательство приводил Reddit. Естественно, никто повторить не мог. Пришлось — кто бы мог подумать — обратиться к документации! Итак, смотрим: https://developer.chrome.com/blog/autoplay И что же это мы такое видим? — On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound. Что ещё за индекс вовлечённости такой?! Это что же получается, я смотрю недостаточно мемов на реддите?! И таки да, внизу имеется расшифровка, и самый простой способ посмотреть её результаты — это открыть страницу about://media-engagement в Chrome. В общем, когда очередной заказчик вашего очередного проекта возмутится тем, что музыка в его прекрасном промо-видео не играет, расскажите ему о том, что его проект просто неинтересен людям. Вот так просто. #chrome #media #sound

Яндекс в последнее время очень активно внедряет нейросети в свои сервисы и продукты – ещё недавно, казалось бы, набирали AI-тренеров для обучения YandexGPT, а уже выпустили облегчённую нейронку третьего поколения YandexGPT 3 Lite. Сейчас модель может суммаризировать деловые встречи, проверять орфографию, анализировать данные, консультировать клиентов в чате и по телефону, а также создавать маркетинговые материалы или дайджесты рабочих встреч. Модель заточена сугубо под бизнес и большие данные. Чтобы добиться таких результатов, YandexGPT 3 Lite прошла через несколько этапов обучения: претренинг и выравнивание вместе с обучением на основе вознаграждения. Здесь ребята добавили GQA и прокачали отдельную reward-модель, чтобы нейронка быстрее адаптировалась к новым условиям и принимала более точные решения. В случае таких специализированных архитектур нейронных сетей reward-модель играет ключевую роль — дообучение делает её более устойчивой к ошибкам и способной работать в различных сценариях.  #YandexGPT #AI #технологии #бизнес

Яндекс в последнее время очень активно внедряет нейросети в свои сервисы и продукты – ещё недавно, казалось бы, набирали AI-тренеров для обучения YandexGPT, а уже выпустили облегчённую нейронку третьего поколения YandexGPT 3 Lite. Сейчас модель может суммаризировать деловые встречи, проверять орфографию, анализировать данные, консультировать клиентов в чате и по телефону, а также создавать маркетинговые материалы или дайджесты рабочих встреч. Модель заточена сугубо под бизнес и большие данные. Чтобы добиться таких результатов, YandexGPT 3 Lite прошла через несколько этапов обучения: претренинг и выравнивание вместе с обучением на основе вознаграждения. Здесь ребята добавили GQA и прокачали отдельную reward-модель, чтобы нейронка быстрее адаптировалась к новым условиям и принимала более точные решения. В случае таких специализированных архитектур нейронных сетей reward-модель играет ключевую роль — дообучение делает её более устойчивой к ошибкам и способной работать в различных сценариях.  #YandexGPT #AI #технологии #бизнес

#заметка дня Рубрика "Вы не спрашивали, но я всё равно отвечу!" На самом деле, разговор произошёл в Твиттере, и я посчитал разумным, вынести его сюда. Итак, вопрос: Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например. Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения? Отвечаю: Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн. 1. Надо тестировать то, что видит юзер 2. Если что-то не видит, значит, всё плохо 3. Если там иконка или нужен результат — искать надо по a11y атрибутам. Сразу поясню за "бестолковость". Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода). А это значит, если кто-то случайно сломает систему перевода или неправильно переведёт строку без информирования остальных — тесты упадут и это правильно. Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Беслатно. Поэтому data-testid и названы бестолковым использованием ресурсов. Смысл фронтенда в том, чтобы пользователь мог с продуктом взаимодействовать. Для этого необходима визуальная и когнитивная поддержка. Кнопка может быть и видна, но на кнопке — упс — может не быть текста. Или она будет цвета фона (потому скриншот-тесты ещё не вымерли). Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе. Тестируйте, котаны! #web #testing #e2e

🚀 Поднимите свой опыт frontend-разработки на новый уровень. 👉 Приглашаем на вебинар: "Преимущества семантической верстки" На открытом уроке вы получите ценные знания: - Семантические теги: изучите строительные блоки HTML5. - Влияние на сайт: постигните, как правильное использование тегов улучшает SEO и доступность сайта. - Применение на практике: получите навыки, которые сможете применять в реальных проектах. 👩‍💻 Наш спикер, Анна Русяева – опытный веб-разработчик, поделится с вами лайфхаками и секретами мастерства. 📆 4 июня, 19:00 мск - отметьте дату в своем календаре! 🔑 Специальная цена на курс «Fullstack developer» для участников - расширьте свои возможности в IT с уникальным предложением. ======= ✨ Не упустите возможность! Регистрируйтесь сейчас https://vk.cc/cxedcA?erid=LjN8Jyg72  ======= 🎁 Все участники online-трансляции получат в подарок 3 бесплатных урока, и полезные материалы для начинающих. Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

#баг дня Сегодня Chrome 125 принёс шикарное. В погоне за скоростью в поддержке CSS Popup Anchor Positioning API они совсем позабыли о, собственно, правильном назначении этих самых якорей. Вспоминаем, что видеоплеер работает в Shadow DOM и получаем поведение с видео. Ссылка: https://issues.chromium.org/issues/341741271 Скоро поправят в Canary. Надеюсь, будет бэкпорт. #css #popup

#автор дня Сегодня у моей дочки день рождения — целых три года :) Потому сил моих хватает только познакомить вас с замечательным автором — Тиффани Чонг и её потрясающими анимешными CSS-работами: https://codepen.io/tiffachoo/pens/public Кажется, будто можно составить из этих персонажей целую игру, милота зашкаливает. Не кукситесь, котаны :) #css #art

#фишка дня Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и... ...и ваша секция уехала под шапку ко всем чертям. Что же делать? Спокойно. Есть три варианта. 1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что... 2. scroll-padding-top на html (а часто, на родителя секций) или... 3. scroll-margin-top на любую из секцию, за которой якорь закреплен. В чем отличие 2 от 3? Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3. Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html #css #scroll #snap #anchor #бородач

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal