#заметка дня

Когда Ахмад Шадид выступал у нас с Defensive CSS, возникла забавная проблема.

Он выбрал для примеров в презентации акварельные тона. Очень нежные, успокаивающие. И все бы было хорошо, если бы презентация не транслировалась по Google Meet.

Алгоритмы видео Google Meet сильно режут контраст. В итоге разницы между акварельным голубым и акварельным розовым вообще не было заметно. А это были ключевые моменты примеров.

Думайте об этом выбирая цветовую гамму проекта. Ведь бывают и просто плохие дисплеи.

Вспомнил я про эту особенность потому что мне на глаза попалось огромное количество статей о неоморфизме. История циклична.

А неоморфизм он весь состоит из мягких теней, формирующих объём. Их точно так же не видно при плохом контрасте.

Хорошо, что некоторые статьи об этом все же упоминают: https://refine.dev/blog/neumorphic-css/

Так что не жалейте контраста. Оставьте акварель художникам.

#бородач

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
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 #бородач

#автор дня

Сегодня у моей дочки день рождения — целых три года :)

Потому сил моих хватает только познакомить вас с замечательным автором — Тиффани Чонг и её потрясающим анимешным CSS-артом: https://codepen.io/tiffachoo/pens/public

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

Не кукситесь, котаны :)

#css #art

#баг дня

Сегодня Chrome 125 принёс шикарное.

В погоне за поддержкой CSS Popup Anchor Positioning API они совсем позабыли о, собственно, правильном назначении этих самых якорей.

Вспоминаем, что видеоплеер работает в Shadow DOM и получаем поведение с иллюстрации.

Ссылка: https://issues.chromium.org/issues/341741271

Скоро поправят в Canary. Надеюсь, будет бэкпорт.

#css #popup

#заметка дня

Рубрика "Вы не спрашивали, но я всё равно отвечу!"

На самом деле, разговор произошёл в Твиттере, и я посчитал разумным, вынести его сюда.

Итак, вопрос:
Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например.

Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения?

Отвечаю:
Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн.

1. Надо тестировать то, что видит юзер
2. Если что-то не видит, значит, всё плохо
3. Если там иконка или нужен результат — искать надо по a11y атрибутам.

Сразу поясню за "бестолковость".

Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода).

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

Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Бесплатно. Поэтому data-testid и названы бестолковым использованием ресурсов.

Это же, кстати, касается систем трекинга вроде Datadog RUM.

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

Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе.

Тестируйте, котаны!

#web #testing #e2e

#ссылка дня

Итак, в чатике пару дней назад поднялся срачик состоялось некоторое обсуждение.

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

Но коллега утверждал, что можно и в доказательство приводил 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

#заметка дня

В чате вопрос возник: «А при каких условиях и на что нужно ставить 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 #бородач

#автор дня

Итак, я не так давно, буквально пару месяцев назад, выкладывал репозиторий Сергея Ufocoder'а, посвящённый утечкам памяти в JavaScript. Ну, вот же, положила: https://t.me/htmlshit/2668

Думаю, сегодня можно выложить кое-что ещё :)

Некоторое время Сергей занимается разработкой простого FPS. И пришло время показать первые результаты!

Собственно, перед нами однопользовательская игра в стиле Wolfenstein 3D.

Использует подход к отрисовке графике из 1990-х, в частности алгоритм raycasting (все графические вычисления происходят на CPU).

Написана с нуля, то есть без использования сторонних библиотек.

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

Если появится желание улучшить игру, то ее исходники находятся в открытом виде и автор приветствует любые улучшения и исправления.

Репозиторий: https://github.com/ufocoder/fps
Играть: https://ufocoder.github.io/fps/

Если вы, котаны, задались целью понять, как работают 3D-движки на базовом уровне — это вот самое то :)

P. S. а 15 июня у него будет стрим про разработку этой самой игры

#game #fps

#инструмент дня

React Compiler, говорите...

А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?

Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...

Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/

Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.

Знаешь JSX или Svelte — пишешь на всех :)

#framework #tool

#такое дня

Я знаю, вы любите стыдный контент.

После трёх релизов подряд, в которых не было ничего, кроме исправления z-index (не спрашивайте), проверяющий мои PRы бакендщик (остальные в отпуске), заметил:

— Я-то хотя бы жисоны перекладываю...

Давайте ваши свежие стыдные истории, котаны.

#статья дня

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

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology #бородач

#фишка дня

Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.

Джейк Арчибальд предлагает решение на SVG и foreignObject: https://codepen.io/alinaki/pen/KKLXvwz

Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.

#svg #img #foreignObject #crop

#такое дня

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

И снова с Линуксом.

Итак, суть подачи: «Во фронтенде бесит, что люди так много говорят про diversity и адаптивность к разным системам, а все сидят на Маках».

Начнём с того, что не все сидят на маках, но все, кто выступает на конференциях 🙂 Ошибка выжившего как она есть.

А дальше... давайте сначала ваше мнение, котаны. Выше — опрос про вашу ОС для работы.

Если вам будет интересно — напишу свой путь и выбор инструментов.

#такое дня

Теперь, когда вас попросят на собеседовании написать код, который выводит сам себя — вы знаете, что делать:

($=_=>`($=${$})()`)()

Послать нафиг, конечно же

#js #бородач

#заметка дня

Тут Иван Акулов из Framer поделился, как они доставляют AVIF-изображения, добиваясь ещё большей, чем WEBP, экономии трафика.

Да, я в курсе, что многие генерируют картинки при сборке, кто-то использует сервисы и так далее, но давайте не забывать, что:
1. Есть пользовательский контент
2. Облака могут встать дорого

Итак, в чём же проблема? А в том что AVIF ну очень долго кодируется, что не есть хорошо. Там, где на генерацию WEBP уйдёт 100-300 мс, на AVIF — 1-3 секунды.

В итоге, если генерировать изображения по запросу и сохранять на CDN (тем же nginx, например), будет не очень вежливо заставлять посетителя ждать.

Поэтому было решено применять подход, знакомый нам как stale-while-revalidate.

1. С первым запросом генерируем WEBP-картинку, но устанавливаем кеширующие заголовки как Cache-Control to max-age=0, stale-while-revalidate=31536000.
2. Поскольку max-age выставлен в 0, картинка моментально "протухнет", CDN с этим не согласится и отправит второй запрос, чтобы, собственно, закешировать.
3. И вот тут уже начинаем генерировать AVIF.
4. И отправляем его с max-age=31536000, ну, почти навсегда.

Ну и общая статья на тему: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/

Я тут пока готовил этот обзор, хотел найти свой конфиг nginx для генерации и кропа картинок на лету, но... потерял. Кажется, пришло время потренироваться и написать обновлённый, по мотивам.

А как вы доставляете картинки, котаны?

#image #optimization

#такое дня

Олды тут?

Волновало ли вас мнение разработчиков-зумеров о вашем подходе к работе?

Спойлер: нет.

А вот Gergely Orosz (я боюсь это транслитерировать) решил собрать мнение обеих сторон, и людей старшего поколения о молодом, и наоборот.

И выпустил две огромные статьи:

GenZ глазами миллениалов и GenX
https://newsletter.pragmaticengineer.com/p/genz

Миллениалы и GenX глазами GenZ:
https://newsletter.pragmaticengineer.com/p/genz-part-2

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

Поиграем в бинго, олды? У меня пять из шести.

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

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

#life

#статья дня

Давай сегодня тему пошире. Если ты работаешь с проектами крупнее одного лендинга за раз, или более того — с продуктами, резко встаёт вопрос целесообразности внедрения той или иной фишки.

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

А вот потом начинается производственный ад. Виной которому менеджеры продукта.

Ну конечно же не они, но именно они будут отвечать за ведение проекта и внедрение результатов. И за аналитику на первом этапе, конечно же. Так как же с ними договариваться и как они будут принимать это решение? Ну или, как минимум, приоритизировать задачи?

в один пост не вместилось, далее… ⏭