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/

Определение поднабора для шрифта

По статистике HTTP Archive на 81.5% сайтов из топ-миллиона используют как минимум один веб-шрифт. Веб-шрифт — это который подключается как внешний ресурс, не локальный шрифт пользователя. При этом шрифты сильно влияют на загрузку страницы.

Пол Кальвано собрал полезный инструмент Web Font Analyzer, который смотрит на реальную загрузку страницы, какие шрифты на ней используются и как сильно они влияют на метрики Core Web Vitals. Для этого нужно сначала проанализировать страничку на webpagetest.org, а потом результат анализа скормить в сам Web Font Analyzer.

Посмотрел на свой блог, взял специально статью с примерами кода. И получилось, что всего страница до FCP грузит 43 КБ, из них 36 КБ (84%!) — Fira Code для сниппетов кода. При этом глифов на странице используется 87, а внутри шрифта их 536.

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

https://paulcalvano.com/2024-02-16-identifying-font-subsetting-opportunities/

keyux

Андрей Ситник выпустил библиотеку, помогающую удобнее работать с сайтом при помощи клавиатуры. Под капотом работает с ARIA-атрибутами, то есть если вы изначально доступно размечали комбинации клавиш, то библиотека сработает как прогрессивное улучшение.

Кроссбраузерно, фреймворко-агностично, в сжатом виде всего 1 КБ, без зависимостей, с отличной документацией прямо в Readme проекта.

https://github.com/ai/keyux

Интерактивный гайд по :has()

Ахмад Шадид в очередной раз выдал супер-подробный гайд. На этот раз про то, как работает родительский селектор :has(), с полезными примерами.

Что можно подсмотреть:
- Как правильно делать boolean-логику на основе has().
- Как радикально менять разметку на основе количества вложенных элементов (например, когда мало карточек — растягивать их на всю ширину, а когда много — рисовать плотно и колонками).
- Как делать фолбеки, если какого-то элемента нет (например, когда картинка товара есть — рисуем картинку, а когда нет — заранее подготовленный placeholder).
- Как изменять размеры контейнера на основе его содержимого (для маленьких виджетов резервировать поменьше места на сам контейнер в раскладке, для больших — побольше).
- Как сделать всплывашки и попапы, которые не перекрывают друг друга (очень хороший пример про GDPR-баннер и иконку чата с поддержкой, которые на большом количестве сайтов друг другу мешают).
- Как научить панель управления с кнопками визуально реагировать на наличие особенных кнопок внутри.
- Как сделать зависимые друг от друга инпуты (например, если значение select требует уточнения, рисуем инпут для этого уточнения).
- И многое другое.

Примеры из списка сразу хочется сделать на каком-нибудь React: затащить на клиент логику показа компонента в зависимости от пропсов, перерендерить при необходимости. Но в этом и огромное преимущество :has() — ему не нужны фреймворки. При помощи этого селектора и дисциплины в именовании классов можно творить самые настоящие «умные» компоненты без единой строчки JavaScript. А это и меньший клиентский бандл, и меньшее количество ререндерингов.

Напоминаю, что не стоит забывать про старые браузеры, которые в :has() пока не умеют. Но если ваш проект работает с вечнозелёными браузерами, то уже можно внедрять: https://caniuse.com/css-has.

https://ishadeed.com/article/css-has-guide/

Итак, что же на самом деле ломает Apple в ЕС?

Думаю, мимо вас не прошла новость о том, что с 6 марта 2024 года Apple обязаны обеспечить в Евросоюзе выполнение закона DMA, в том числе разрешить установку сторонних магазинов приложений и альтернативные браузерные движки. Официальный анонс можно почитать тут, а ещё мы в подкасте «Веб-стандарты» несколько раз эту тему обсуждали.

Так вот, Томас Штайнер, проживая в ЕС, собрал более-менее точный список того, что сломается для пользователей iOS в Европе уже скоро:
- Push API. Оно доступно только для Home Screen web apps, а так как их больше не будет, то и доступа к API не будет. А ведь нотификации не только про зло, в разных приложениях они очень даже полезные.
- Badging API. То же самое, из-за привязки к Push API. Никаких чиселок на иконках веб-приложений.
- Режим standalone. Открываться будет в браузере, спрятать панельник браузера теперь никак не получится, никакого нативного опыта.
- Хранимые данные. Напомню, в Web Apps данные для каждой «иконки » сохранялись в своё изолированное хранилище. И если до 6 марта оно было чем-то наполнено — се ля ви, логиньтесь заново, вносите данные с нуля.
- Несколько ярлыков для одного и того же Web App. Я таким пользовался для разных аккаунтов твиттера, удобно. Данные ведь изолированы.

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

https://blog.tomayac.com/2024/02/28/so-what-exactly-did-apple-break-in-the-eu/