Тестирование HTML при помощи CSS

Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).

Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует :has(). Когда видим конструкцию, которая нас смущает, делаем две вещи:

1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.

2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.

Хейдон дополнительно использует новомодную директиву @layers, чтобы создать слой tests в проекте. Подключает его в самый низ слоёв, чтобы тестовые стили наверняка применились.

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

https://heydonworks.com/article/testing-html-with-modern-css/

Спеки-потеряшки на iOS

Шалана Доусон собрала замечательный по визуалу сайт, который на основе данных из caniuse показывает, какие спецификации не реализованы в WebKit для iOS, хотя уже есть в других мобильных браузерах (Chrome и Firefox).

Во-первых, это мило. Задумка в виде коробок с молоком, на которых напечатаны объявления о потеряшках, вызывает эмоции.

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

В-третьих, это просто красивый сайт для вдохновения. Сижу ковыряюсь в исходниках, изучаю, как синхронизируется вращение 3D-коробки и объявления на ней.

https://ios404.com/

Квантовая механика: 100 лет открытий за один час

Видео выходного дня. Доктор физико-математических наук Алексей Семихатов популярным языком объясняет, как устроен мир согласно квантовой механике. Люблю такие видео, которые ломают мозг, но при этом двигают вперёд.

https://youtu.be/4iAkAT7mhnw

Игра Wordle на HTML и CSS

Очередное интересное применение возможностей CSS не для того, для чего он задумывался.

Скотт Джел попробовал реализовать игру Worlde без использования JavaScript. Вы можете помнить эту игру, она когда-то была на хайпе: есть 5 ячеек, нужно в них ввести буквы. Если буква правильная и на правильном месте, то клеточка закрашивается в зелёный. Если буква правильная, но не на том месте — в жёлтый. И если мимо — в серый.

Сначала Скотт реализовал только хардкорную версию, где нет жёлтых клеточек. Либо угадал полностью букву, либо нет. Для этого использовал комбинацию селекторов по атрибуту, псевдоклассы :invalid и :valid, отслеживание фокуса и показа плейсхолдера. У меня сразу возникла идея, что можно было бы сделать генератор кроссвордов, которому не нужен JavaScript — принцип работы тот же.

Затем Скотт попытался реализовать всё-таки жёлтые клетки. Но как будто валидация по паттерну у инпута не умеет в сразу два паттерна: возможные значения и правильные значения. Если бы можно было задать три состояния, тогда получилось бы на чистом CSS. Но, увы, пришлось всё-таки добавить несколько строчек JavaScript, чтобы доделать игру полностью.

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

https://scottjehl.com/posts/wordleish/

API для работы со складываемыми экранами

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

Начиная с Chrome 125 за Origin Trial появится доступ к Device Posture API и Viewport Segments API.

Device Posture API позволит через CSS и JavaScript понимать, в каком состоянии сейчас складываемое устройство.
- @media (device-posture: folded) — устройство согнуто, экран разделён на две части.
- @media (device-posture: continuous) — экран сплошной (подходит в том числе для обычных экранов).

В JavaScript появится navigator.devicePosture, из которого можно получить то же самое. А ещё на него можно навесить addEventListener('change', ...), чтобы реагировать на изменения.

Viewport Segments API посложнее, тут рекомендую вчитываться в примеры в статье. Но если коротко, в функции env() появится ещё несколько ключевых слов, которые помогут работать с размерами сегментов складываемого экрана. Честно говоря, синтаксис не самый запоминающийся, у разных положений разные кодовые числа. Но по сути это единственный гибкий способ узнать нужные значения для вычислений в CSS.

В JavaScript появится window.visualViewport.segments, в котором будет лежать массив сегментов с их размерами.

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

https://developer.chrome.com/blog/foldable-apis-ot

Правильные для языка кавычки

Небольшое напоминание, что в разных языках правильные с точки зрения типографики разные кавычки. Например, в русском языке правильно использовать «ёлочки», а не "лапки".

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

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

Вместо ключевых слов браузер подставит те кавычки, которые подходят элементу. А язык можно задать при помощи атрибута lang.

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

q {
  quotes: "((" "{" "[" "_";
}

Больше не буду мучить content и селекторы по атрибутам.

https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

Руководство для фронтендеров 2024

Коди Линдли собрал для Frontend Masters гайд по тому, что можно изучить современному фронтендеру, чтобы прокачаться. От основ до углубления в технологии.

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

Во-вторых, это опенсорс, так что можно дополнять, если что-то упущено. Ссылки на инструменты, например, которых тут не так много на самом деле.

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

https://frontendmasters.com/guides/front-end-handbook/2024/

TypeScript 5.5 Beta

Хотел сделать подробный пост, но зачем, если Зар уже это сделал.

https://news.1rj.ru/str/zarzakharov/566

Длинный alt

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

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

А вот Адриан Розелли подробно и с примерами объясняет, почему длинные тексты в alt — плохо.

1. Альтернативный текст рисуется в браузерах вместо картинок, если картинки по какой-то причине не загрузились. И если с короткими текстами всё более-менее аккуратно рисуется, то с текстом, который не помещается в изначальную «коробочку» для картинки, каждый браузер ведёт себя по-разному. Safari вообще текст перестаёт рисовать. А в Chrome и Firefox текст либо ломает вёрстку, либо обрезается без скролла.

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

3. Ссылки и тексты на другом языке (отличном от языка элемента или страницы) в разных скринридерах тоже читаются по-разному, но везде что-то ломается.

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

https://adrianroselli.com/2024/04/long-alt.html

Современный системный набор шрифтов

Когда-то давно мне понравилась идея, что можно выбрать из системных шрифтов подходящие, чтобы вообще не тратить время на загрузку шрифтов для сайта. Поэтому у меня в блоге до вчерашнего дня основной шрифт для текста был system-ui — алиас для выбора дефолтного в ОС шрифта. Ну и для кода Fira Code, он слишком хорош, чтобы от него отказываться.

Дэн Кламмер собрал интересные наборы системных шрифтов из разных ОС, которые не настолько приелись в интерфейсах, при этом выглядят хорошо. Обновил у себя в блоге шрифты заголовков на набор Old Style — нравится. И всё ещё шрифты загружаются только для примеров кода, Core Web Vitals что надо. Дизайнеры, наверное, ужаснутся от того, как я работаю с типографикой на глазок, но у меня и не дизайнерский блог же.

https://modernfontstacks.com/

Что нужно знать, чтобы начать делать local-first приложения

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

Павел Гринченко рассказывает о трёх больших задачах, которые нужно решить, чтобы приложение научилось в local-first:
- хранение данных;
- синхронизация;
- разрешение конфликтов.

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

Пользы много:
- Когда интернет отваливается, пользователь не страдает. Просто решает свою задачу, как будто интернет есть. Синхронизацию можно делать в фоне.
- Мгновенный отклик UI. На нажатие кнопки не нужно ждать ответ сервера, а локальные хранилища сделать очень медленными ещё нужно умудриться.
- Запросы на сервер идут не один за другим, а пачкой. Операции можно собирать в кучу, делать синхронизацию именно когда нужно, а не на каждое движение мышки.

Но и реализовать local-first правильно тоже сложно. Нужно хорошо разбираться, как работает браузер, понимать CRDT и P2P. К счастью, Павел делится ссылками на решения, которые уже неплохо себя показали в реальных приложениях.

https://evilmartians.com/chronicles/cool-front-end-arts-of-local-first-storage-sync-and-conflicts

Инди vs Корпорат

Лёгкое пятничное.

Вастрик в свойственной ему манере шикарно раскладывает по полочкам, почему не стоит одинаково подходит к рабочим и пет-проектам. И почему кто-то делает инди-проекты на PHP+jQuery и получает миллионы долларов дохода, а кто-то пилит корпоративные приложения, следуя закону Конвея.

https://vas3k.blog/notes/indie_vs_corpo/

Как понять язык метрик своего бизнес-заказчика

Видео выходного дня. Серафима Чекулаева рассказывает, какие продуктовые метрики бывают, чем занимаются продакты и как эти знания могут быть полезны разработчикам.

https://youtu.be/asIcPJwF57Q

Телеграм-канал Серафимы:
https://news.1rj.ru/str/Serafima_Chekulaeva/

CSS Speech polyfill

Есть такая спецификация, CSS Speech Module Level 1. И несмотря на то, что у неё статус Candidate Recommendation, реализации нет ни в одном браузере пока. Как минимум потому, что для корректной работы в браузеры должны быстро встроены качественные синтезаторы речи, причём более-менее похожие.

А возможности там интересные:
- Свойство voice-family должно позволять выбрать голос озвучки текста. Как font-family, только звуковой.
- voice-volume, voice-pitch, voice-rate позволили бы выделять какие-то части интерфейса особыми интонациями.
- voice-stress работал бы по аналогии с <em>, выделяя важное.
- pause-before, pause-after помогали бы расставлять паузы в тексте.

К сожалению, негде посмотреть полноценную реализацию спецификации. Но можно поиграться с полифиллом, который работает на базе SpeechSynthesis API.

https://www.kryogenix.org/code/browser/css-speech-polyfill/css-speech.html

Видеокурс по Scroll-Driven Animations

Так вот зачем Брамус так много демок делал!

На Chrome for Developers вышла серия из 10 видео по тому, как работают нативные анимации, привязанные к скроллу. Объясняет всё Брамус, демками которого я вдохновлялся, когда сам готовил доклад по схожей теме.

В видео подробно и понятно объясняется, как работает каждый из аспектов таких анимаций:
- что такое ScrollTimeline и ViewTimeline;
- как отвязаться от времени и привязаться к позиции на экране;
- как завязаться на скролл стороннего блока;
- можно ли сделать анимацию, которая срабатывает всего один раз.

И всё это с большим количеством демок. Рекомендую.

https://developer.chrome.com/blog/scroll-driven-animations-video-course

CPUpro

Давно пользуюсь JsonDiscovery для анализа JSON. Рома Дворнов в принципе если что-то выпускает в паблик, то оно классное. Если ещё не пробовали — вот.

Сегодня Рома написал про ещё один инструмент, на этот раз для профилирования. Думаю, вы не раз видели огромные флеймчарты во вкладе Performance в DevTools. И я тоже сталикивался с тем, что для сложных приложений, где очень много библиотек, функции вызываются на rAF, подписки всякие на события, вкладка Performance сильно виснет.

В релизе 0.5.0 инструмента CPUpro упор сделан на перформанс. По сути это как вкладка Performance, больше подходящая для анализа больших файлов с информацией о профилировании. Есть разбиение по модулям, пакетам, функциям и категориям. Есть удобная фильтрация на регулярных выражениях.

Попробовал на profile-файлах для клиентских приложений и Node.js. Для серверного подходит лучше, очень много ценной информации о том, какие пакеты медленные, какие больше всего при обработке запросов крутят CPU. Удобство как раз в группировке, которой нет в обычной вкладке Performance. Для клиентских интересно было посмотреть, как браузерные расширения тормозят страницу и как часто срабатывает Garbage Collector. И всё это работает очень шустро (вижу под капотом куски Json Discovery, который очень хорош для обработки больших файлов).

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

https://github.com/lahmatiy/cpupro/releases/tag/v0.5.0

Прокачка навыков TypeScript

С интересом наблюдаю, как развивается система типов в TypeScript. Уже и строковые шаблоны подвезли, и дополнительные встроенные типы.

Но не всегда понятно, как на практике проверить, что я правильно понял написанное в Release Notes. А тут наткнулся на интересный сервис, где много задачек на TypeScript, разбиты они на категории и по сложности. И в декабре, оказывается, был свой Advent of TypeScript. Залип в этот адвент и не отлипал, пока всё не прошёл. Точнее, два задания я честно своровал из уже готовых решений, но по крайней мере разобрался в них. Валидация судоку на типах — это небольшой разрыв мозга, но смог сам.

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

https://typehero.dev/

Наложение градиента поверх элемента

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

Не задумывался, но для этого же можно использовать border-image. По сути в него можно поместить градиент, который заполняет весь элемент. И он всё ещё будет под текстом, потому что так работает рендеринг.

.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}

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

https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/

Ещё один дашборд про веб-фичи

На Google I/O показали новый дашборд про то, какие фичи уже реализованы в браузерах. В отличие от caniuse там есть показатели прохождения Web Platform Tests (причём более удобно, чем это сделано на WPT, имхо), плюс можно посмотреть привязку фичи к Baseline.

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

https://webstatus.dev/

Новости фронтенда на канале Виталия Зюзина

Не только меня же читать. К тому же я знаю, многие ко мне в канал пришли после поста Виталия про папку с интересными фронтендерскими каналами.

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

https://news.1rj.ru/str/web_platform/111

Заметка о подсвеченном тексте

В CSS уже довольно много способов выделить на странице что-то, с чем взаимодействует пользователь. Выделенный текст? Держи ::selection. Грамматическая ошибка? На тебе ::grammar-error. Поиск по странице? Пока нет, но скоро будет ::search-text.

Адриан Розелли напоминает, что любые выделения на странице должны соответствовать критериям доступности. Контраст фона выделения и фона под ним — 3:1. Контраст текста поверх фона выделения — 4.5:1.

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

https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html