Подсветка текста в момент подскрола к нему

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

Крис Койер нашёл пример решения задачи на GSAP и переделал его на CSS Scroll-Driven Animation.

1. Создаём простую анимацию заполнения фона фразы при помощи изменения background-size от 0 до 100%. Залить можно градиентом. Или, например, можно сделать эффект подчёркивания текста, суть та же. Саму фразу выделяем каким-нибудь тегом вроде mark.

2. Добавляем animation-timeline: view();. Этим мы говорим браузеру, чтобы он вместо временной оси использовал позицию скролла. Причём по умолчанию привязываем 0% к появлению элемента во вьюпорте, 100% — к исчезновению из него.

3. Уточняем границы внутри вьюпорта, которые являются 0% и 100% для анимации: animation-range: contain 0% contain 25%;. Теперь заканчиваться анимация будет уже на 25% движения внутри вьюпорта.

4. animation-iteration-count: 1; — вызываем эффект всего один раз.

Работать будет только в Chrome и хромоподобных браузерах, но для других браузеров можно подключить тот самый GSAP-плагин, который упоминается в статье. И хотя бы в Chrome будет значительная экономия трафика.

https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/

Автоматическая генерация постов со ссылками

Софи Кунин поделилась инструкцией, как автоматизировать публикацию постов с интересными ссылками у себя на сайте. У многих блогеров такое есть: они в течение недели собирают интересные ссылки на статьи и сайты, а потом выкладывают их со своими комментариями. А здесь всё сделано полуавтоматически.

1. Сами ссылки собираем в raindrop.io — это такой сервис, который позволяет упорядочить закладки.

2. У raindrop.io есть апишка, к которой довольно просто прикрутить токены доступа.

3. На GitHub в репозитории блога заводим новый workflow, который запускается по cron раз в неделю. Я себе установил каждую субботу в 11:30 UTC. Вся суть workflow в том, чтобы запустить наш кастомный генератор поста со ссылками и закоммитить сгенерированные файлы в репозиторий.

4. Запустить публикацию сайта в продакшен удобным способом. У меня Netlify, он автоматически подхватывает коммиты в main-ветку.

Генератор поста честно своровал у Софи, так как у меня тоже используется Eleventy с Markdown. И завелось всё довольно удачно, сегодня вышел пост со ссылками, сохранёнными в течение недели: https://mefody.dev/chunks/weekly-2024-01-27/.

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

В общем, если вам интересно получать раз в неделю список ссылок на англоязычные статьи, которые я считаю интересными, то подписывайтесь на что-нибудь из:
- RSS
- Twitter
- Mastodon

https://localghost.dev/blog/automated-weekly-links-posts-with-raindrop-io-and-eleventy/

Стилизация скроллбаров

В Chrome 121 завезли поддержку свойств scrollbar-width и scrollbar-color. Там и раньше было наследие WebKit с префиксами, но теперь будет работать по стандарту.

Свойство scrollbar-width принимает три значения:
- none — прячет скроллбар, но оставляет возможность скроллить;
- auto — дефолтный системный скроллбар;
- thin — скроллбар потоньше.

Ширину в пикселях задавать нельзя, так решили при доработке стандарта. Что для пользователя, наверное, лучше: есть привычный элемент UI, который узнаётся по форме и размеру, на каждом сайте.

Свойство scrollbar-color принимает два цвета. В примере scrollbar-color: yellow green сам скроллбар будет жёлтый, а трек под ним — зелёный.

Брамус делится примером, как добавить совместимость со старыми браузерами и WebKit. В Firefox всё работает с 2018 года. Кстати, для Safari нужен костыль, если вы меняете цвет скроллбара на лету.

https://developer.chrome.com/docs/css-ui/scrollbar-styling

Отдельная фавиконка для локального билда

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

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

https://mefody.dev/chunks/favicon-dev/

git rerere

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

Например, если вы работаете в какой-то «гигаветке» (долго делаете большую недробимую фичу), постоянно подливая из других веток изменения и разрешая одни и те же мерж-конфликты, то с включённой в конфиге опцией rerere (reuse recorded resolution) вы можете разрешить конфликт всего один раз, а затем git, если увидит, что в файле с таким-то именем уже была ситуация, что у нас такая-то строчка, а снаружи пришла такая-то строчка, то разработчик решал конфликт вот так. И, собственно, не будет спрашивать ещё раз, а решит, как вы решили в первый раз.

git config --global rerere.enabled true

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

https://git-scm.com/book/en/v2/Git-Tools-Rerere

Хорошее дополнение от Андрея. Согласен с тем, что не должно быть ситуаций, когда rerere вам нужен часто. Но лучше знать о полезном когда-нибудь инструменте, чем не знать. И не всегда есть возможность делать всё хорошо и правильно.

https://news.1rj.ru/str/melikhov_dev/270

Пакет type-coverage

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

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

1. Самый простой способ — запустить npx type-coverage в папке проекта, и он вам выдаст процент покрытия ts-файлов типами. Есть разные флаги, которые делают проверку строже, игнорируют try-catch, подсвечивают проблемные места в файлах и так далее.

2633 / 2670 98.61%
type-coverage success.

2. Для более удобной отладки можно прикрутить ещё один пакет, typenoscript-coverage-report. Он выводит отчёт в более удобном виде: табличкой в консоль и ещё более умной табличкой в HTML. Если ваш пайплайн CI/CD умеет работать с артефактами, этот отчёт можно прикрутить в описание пулл-реквеста, например.

3. Можно добавить в package.json минимально допустимое значение покрытия типами и настроить проверки на prepush-хуках, в PR и в релизах, например, чтобы нельзя было ухудшить покрытие. Знаю, в некоторых командах есть договорённости всё покрывать типами, и такая проверка экономит когнитивные усилия на код-ревью.

{
  "typeCoverage": {
    "atLeast": 99
  }
}

https://github.com/plantain-00/type-coverage

Interop 2024

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

Фокусные направления на 2024 год:
1. Доступность. В рамках Interop 2023 успели написать 1300 новых тестов, которые теперь надо научиться проходить.
2. CSS Nesting. Та самая нативная вложенность. Все браузеры уже её поддерживают, осталось дотюнить сложные моменты, например, для селектора :host.
3. Custom Properties. Сами кастомные свойства с нами давно, а вот @property — относительно свежая фича.
4. Declarative Shadow DOM. Веб-компоненты, не нуждающиеся в JavaScript.
5. Свойство `font-size-adjust`. Удобный способ выравнивать разные шрифты по высоте, даже если у них абсолютно разные шрифтовые метрики.
6. Поддержка HTTPS URLs в WebSocket. Раньше нужно было использовать протоколы wss: или ws:.
7. IndexedDB.
8. Layout. Флексы, гриды и сабгриды.
9. Pointer Events и Mouse Events.
10. Атрибут `popover`. Нативные кастомизируемые попапы.
11. Relative Color Syntax. Возможность превращать одни цвета в другие, незаменимая фича для цветовых палитр и темизации.
12. `requestVideoFrameCallback`. Для работы с элементом video.
13. Стилизация скроллбаров. scrollbar-width, scrollbar-color, scrollbar-gutter и отказ от префиксных версий.
14. `@starting-style` и `transition-behavior`. Полезные улучшения для анимаций.
15. Направление текста. Продолжение работы над лучшей поддержкой разных письменностей.
16. `text-wrap: balance`. Магия красивых заголовков одним свойством.
17. URL. Основа основ веба тоже развивается и требует соответствия стандартам.

Я не перестаю радоваться тому, как всё меньше приходится думать о кроссбраузерности. Браузеры решают эту проблему за меня.

Анонсы:
- WebKit: https://webkit.org/blog/14955/the-web-just-gets-better-with-interop/
- Mozilla: https://hacks.mozilla.org/2024/02/announcing-interop-2024/
- Google: https://web.dev/blog/interop-2024
- Edge: https://blogs.windows.com/msedgedev/2024/02/01/microsoft-edge-and-interop-2024/
- Igalia: https://www.igalia.com/2024/interop-2024-launches.html
- Bocoup: https://bocoup.com/blog/interop-2024

Мотивация, делегирование и автоматизация: рецепт создания суперкоманды

Видео выходного дня. Алексей Катаев делится рецептами упрощения жизни тимлида и команды.

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

https://youtu.be/ojRZNSSr4I8

<head>

Старенький, но всё ещё актуальный справочник по тому, что может быть внутри тега <head>. Подсматриваю в него периодически, чтобы не забыть какой-нибудь важный или интересный метатег. Например:

- <link rel="author" href="humans.txt"> — рассказать, кто разрабатывает сервис.
- <meta name="google" content="notranslate"> — попросить Google Translate не ломать смыслы (лучше, конечно, дать выбирать пользователю всё-таки, но иногда переводчик слишком плохо справляется со страницей).
- <link rel="webmention" href="https://example.com/webmention"> — подключить WebMentions.
- <meta name="twitter:dnt" content="on"> — попросить твиттер не следить за пользователями сайта (послушается ли он, другой вопрос, но попросить можно).
- <meta property="al:ios:app_store_id" content="12345"> — связать сайт и приложение в AppStore.

HTML Academy форкнула репозиторий отсюда, но оригинальный репозиторий покрыт пылью и не развивается много лет, поэтому всё же советую пользоваться форком.

https://github.com/htmlacademy/HEAD

Абсолютный минимум, который каждый разработчик должен знать про юникод

Никита Прокопов рассказывает:
- что такое юникод;
- почему иконка Apple в тексте показывается только на устройствах Apple;
- чем отличаются UTF-8 и UTF-16;
- почему шрифты лом�ются;
- что такое графемы;
- почему Твиттер иногда рисует русские тексты болгарскими символами.

https://tonsky.me/blog/unicode/

2023 JavaScript Rising Stars

Есть такой проект, в котором уже восьмой раз собираются тренды из мира JavaScript по анализу звёздочек на GitHub за последние 12 месяцев. И в этом году снова интересные результаты.

- Среди всех проектов победил shadcn/ui — библиотека React-компонентов со стилизацией на Tailwind CSS.
- На втором месте Bun — тулкит для всего, который в сентябре прошлого года был залайкан неприличное количество раз. В 2022 году он был вообще на первом месте.
- На 3 и 4 месте утилиты для рисования и вайтбординга в браузере Excalidraw и tldraw.
- Среди фронтенд-фреймворков выделяется htmx — программирование на html-атрибутах. Пока только второе место, но React догоняет уверенно.
- В бэкенде всё ещё впереди всех Next.js, несмотря на все интриги и критику сообщества.
- В мобильной разработке лидирует Expo. Про него не слышал, но он смог совсем чуть-чуть, но всё же обогнать React Native по звёздочкам. В 2022 году он был далеко на втором месте.
- Для стилизации самое большое количество звёздочек у Tailwind CSS.
- Для тестирования большинство людей выбирают Playwright.
- Появилась отдельная категория для AI-библиотек.
- Пропала категория GraphQL, уже не в тренде.

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

https://risingstars.js.org/2023/en

Редактор CSS, написанный на CSS

Вчера наткнулся на «тут» Мириам Сюзанн, где она показала интересный способ сделать редактор CSS на самом CSS. Идея не совсем уж новая, Лия Веру давно в своих презентациях пользуется чем-то похожим, но захотелось реализовать такой редактор самому.

1. Для тега style можно выставить display: block, тогда браузер отрисует его содержимое.

2. Добавляем атрибут contenteditable, чтобы можно было редактировать это содержимое.

3. Добавляем ещё один атрибут spellcheck="false", чтобы браузер не проверял наш CSS на грамматику. Я и так знаю, что CSS — не английский язык.

4. Применяем свеженький @scope, чтобы стили применялись только внутри нашего компонента. Увы, работать из-за этого будет только в Chrome пока, но это же для демок, не для продакшена.

5. Добавляем нативную тёмную тему при помощи color-scheme: dark, чтобы глазкам было приятно.

6. Оборачиваем в CSS-контейнер, чтобы можно было встраивать демку в страницу.

Получаем нативный простенький редактор CSS с адаптивностью, поддержкой тёмной темы и не требующий никаких библиотек. 54 строчки CSS с пробелами.

https://mefody.dev/chunks/css-editor-in-css/

Интересный случай с селекторами

София Валитова разбирает важную особенность работы :has() в CSS.

https://ru.ariarzer.dev/2024/notes/is-inside-has/

Workflow и Визуализация рабочих процессов

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

Мысли, которые выписал себе на проработку:

1. Визуализация должна отражать текущие процессы в команде, а не то, как мы должны делать. Иначе будет и сопротивление команды, и вакханалия в анализе спринтов. Команде нужно продать какие-то изменения.

2. Изменять воркфлоу можно и нужно. Потому что п.1.

3. Для разных участников процесса можно сделать разные доски. Например, для команды разработки, если они никак не погружены в дизайн (для примера), шаги про дизайн можно спрятать. А дизайнерам не показывать деплой и релизы. К сожалению, не все инструменты позволяют такое настраивать, приходится выдумывать костыли. Notion умеет, но его часто нельзя использовать в корпоративной среде.

4. Хорошая визуализация помогает находить проблемы. И эти проблемы стоит обсуждать с командой.

5. Не нужно проводить стендапы так, чтобы каждый участник рассказывал по очереди, что он вчера делал и что будет делать сегодня. Идти нужно по доске справа налево (или слева направо, что вам важнее). Тогда вы будете обсуждать фичи, которые важно сделать, не теряя контекста при переключении между людьми. Тоже стараюсь такое внедрять в командах, но иногда встречаю сопротивление микроменеджеров, которые зачем-то следят, кто и что делает, чтобы вдруг никто без работы не остался.

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

https://youtu.be/jQlNg_exE48

Встраивание SVG в CSS

Иногда возникает необходимость вставить SVG-картинку инлайном как значение какого-нибудь свойства в CSS. Например, иконки как фоновые картинки, когда мы пишем background-image: url('data:image/noscript+xml;base64,A1B2...C3=').

Стоян Стефанов напоминает, что почти все браузеры (кроме старых вроде IE), нуждаются в кодировании всего 3 символов: <, > и #. Поэтому делать полноценный base64 точно не нужно — это не читаемо, не редактируемо, раздувает бандл. Дайте gzip делать его работу.

У Юли Бухваловой есть готовый инструмент под такое: https://yoksel.github.io/url-encoder/. В нём преобразуется большее количество символов, но зато более надёжно.

https://www.phpied.com/truth-encoding-noscript-data-uris/

Что сегодня умеет PWA

Нашёл интересное приложение, которое использует различные полезные API для PWA с примерами кода. Причём это приложение само по себе PWA. Здесь есть использование нативного шаринга, записи звуков, захвата экрана, работа с NFC, AR/VR, синтез голоса и так далее. К сожалению, некоторые примеры у меня ломаются на устройстве, но можно завести ишью на GitHub, автор проект поддерживает.

Ну и напоминаю, что у меня тоже есть полезное приложение: https://mefody.github.io/fugu-detector/. На страничке — список различных Fugu API, причём можно посмотреть, работает это API в вашем браузере или нет. Недавно Томас Штайнер помог синхронизировать эту страничку с его обновляемым списком Fugu API.

https://whatpwacando.today/

Как определить, что браузер может установить PWA

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

Определить, что браузер умеет в установку, в принципе, можно. Например, проверить поддержку метода getInstalledRelatedApps. Или посмотреть на window.BeforeInstallPromptEvent. Но только не в Safari.

Глеб Хмызников показывает, как для веб-компонента pwa-install, который как раз и показывает всплывашки с инструкциями по установке для разных браузеров, пришлось костылить определение, что мы находимся в версии Safari, которая всё-таки умеет в Web Apps (как называют PWA в Apple). И это старое доброе выискивание косвенных признаков. Мы знаем, что Web Apps доступны в Safari 17. А ещё мы знаем, что в Safari 17 есть WebGL внутри OffscreenCanvas. А ещё в нужной нам версии есть новые возможности воспроизведения аудио. Получаем определение нужной нам функциональности через косвенные знания о релизах браузера.

И, к сожалению, это не временное решение. Даже если в следующих версиях Safari появится JavaScript API для нормального определения, старые версии придётся поддерживать достаточно долгое время.

https://blog.pwabuilder.com/posts/web-apps-on-macos-sonoma-got-a-proper-install-experience/

Как разместить div в центре контейнера

Типичный вопрос с собеседований по вёрстке. Джош Камю делится шестью современными способами, когда размеры элемента не известны заранее. translate(-50%) как будто уже в прошлом.

https://www.joshwcomeau.com/css/center-a-div/

Подсветка кода на странице при помощи Custom Highlight API

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

Брамус показывает, как можно применять современный Custom Highlight API, чтобы не создавать span для стилизации в принципе. Это такая апишка, которая уже работает в Chrome 105 и Safari 17.2. И она позволяет при помощи JavaScript разбивать текстовые узлы на набор параметризированных токенов. Как это делать в JS, лучше смотреть в самой статье. Но зато в CSS всё становится сильно приятнее:

::highlight(important) {
    color: red;
    font-weight: bold;
}

::highlight(attr) {
    color: violet;
}

Имена хайлайтов как раз задаются в JS.

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

https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Bloom-фильтры

Представьте, что вам нужно принимать решения на основе какого-то набора исторических данных. Пусть вы делаете систему кэширования, которая должна срабатывать только для тех страниц, к которым уже обращались больше 1 раза, чтобы экономить дисковое пространство, но помогать перфомансу. Решение в лоб — хранить список посещённых пользователями страниц, добавить к списку счётчик. Но с таким решением есть две важные проблемы:
1. Сам список в какой-то момент начнёт весить неприлично много.
2. Время поиска по такому списку либо начнёт расти с ростом списка, либо придётся прикручивать какой-то умный индекс, который начнёт тормозить не чтение, а запись.

Сэм Роуз объясняет, как работает интересная структура данных BloomFilter, решающая эти проблемы. Если вы готовы принимать ложно-отрицательные решения в 1% случаев, то можно значительно сократить и размер списка, а время поиска по нему. И для примера выше это то, что надо: 1% ложных кэширований не сильно повлияет на затраты на дисковое хранилище, если вы при этом экономите на размере списка больше 80%.

Если любите интересные структуры данных — статья вам понравится.

https://samwho.dev/bloom-filters/