Minimum Lovable Product

Не так давно София Валитова показала мне парочку интересных статей про такой термин, как MLP — Minimum Lovable Product. Скорее всего вы слышали про Minimum Viable Product (MVP). «Ребята, у нас дедлайны, давайте сейчас MVP, потом нормально сделаем».

MVP — это минимально необходимое, чтобы выжить. MLP — это минимально необходимое, чтобы продукт полюбили.

В чём отличия MLP от MVP:

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

- MVP можно делать тогда, когда вы первые. Дешёвых файлохранилищ ещё нет, а вы Dropbox. Или вы придумали такой алгоритм сжатия данных, который лучше всех в мире, и маркетинг ему как будто не очень нужен, а инвесторы — нужны (кто понял отсылку, тот понял). MLP же чаще всего делают тогда, когда рынок уже заполнен альтернативами, и чтобы вам выделиться, надо сделать что-то «вау».

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

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

Но я ведь тоже пользователь, у меня тоже есть эмоции от того, что в итоге делает моя команда. А значит, я могу попытаться вызвать эмоции ещё на этапе MVP как требовательный лид, под свою ответственность, то есть начать делать MLP.

Мы как раз сейчас делаем один такой сервис, который вроде как технический, но так хочется сделать его живым и душевным 🙂

https://www.aha.io/roadmapping/guide/plans/what-is-a-minimum-lovable-product

@starting-style и transition-behavior для анимаций появления

Вот оно, применение новых фичей в CSS в комбинации, которая как будто много кому будет полезна. Идём по шагам:

1. Новое правило @starting-style. Описывает стили, которые у элементов устанавливаются в тот момент, когда их ещё нет, но как только они появятся, с них стартует анимация. Например, при вставке в DOM нового узла.

2. transition-behavior: allow-discrete говорит браузеру «анимировать» дискретные значения типа display: none. То есть изменение таких свойств произойдёт не мгновенно на первый же кадр анимации, а через transition-duration.

3. Применяем это на относительно свежий dialog и вполне себе свежий popover. Играем с opacity, scale и display (раз он у нас теперь отложенный).

4. Посыпаем сверху @media (prefers-reduced-motion: no-preference), не забываем о доступности.

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

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

https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects

BlurHash

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

BlurHash интересен тем, что по сути строка L6PZfSi_.AyE_3t7t7R**0o#DgR4 — это полноценная картинка. На сервере при сборке или загрузке картинки в ваше файлохранилище нужно запустить ecnode, который эту строку выдаст. А на клиенте нужно вызвать функцию decode, которая эту строку превратит в то самое цветное пятно, похожее на картинку.

Из минусов — это canvas. Подменять canvas на картинку тяжелее, чем просто внутри img подменить src. И для отрисовки этого canvas на клиент надо затащить тот самый скрипт, который превратит набор символов в картинку-пятно. То есть для статических сайтов и отрисовки LCP я бы это точно не использовал. И ещё нужно точно знать размеры картинок, что не всегда возможно.

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

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

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

https://blurha.sh/

Cycle Time, Feature Time, Lead Time. Радуем пользователей быстрее при помощи графиков

На недавней Podlodka TeamLead Crew делился своим опытом, как искать бутылочные горлышки в процессах. Уже много лет разбираюсь в Cycle Time команд и стараюсь сделать так, чтобы пользователи новые фичи получали быстрее, качество при этом не проседало, а команда разработки не занималась скучным и приводящим к выгоранию. И всё по одним и тем же графикам Cycle Time.

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

https://youtu.be/_5ibUw93kEo

Современный гайд по CSS-фигурам

Колоссальное. Темани Афиф давно делится демками и статьями, как при помощи CSS рисовать всякое интересное. Бывает же такое, что нам надо сверстать что-нибудь «эдакое». Хочется, но сложно и не можется.

В сборнике есть и clip-path, и разные сочетания background-image, и математика, и маски, и другие техники. Всё адаптивное и кастомизируемое. Сохранил себе в закладки, если вдруг надо будет верстать, чтобы просто копировать в проект.

https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/

Рандомный совет по CSS

Ещё один проект Темани Афиф. Переходите по ссылке (именно по ней, там редирект на конкретную статью) — получаете полезный рецепт. Пока все, что я накликал, были интересные.

https://random.css-tip.com/

Из ESLint и Prettier в Biome

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

Китти Жирадель делится своим опытом переезда на Biome в проекте побольше моего бложика. Из интересного:
- Есть команда biome check, которая пройдётся по вашей кодовой базе и даст советы, что делать с ошибками. Попробовал на большом проекте — понравилось то, что сообщения об ошибках по-настоящему информативны, а не просто «ой, что-то упало».
- Китти всё ещё не хватает некоторой функциональности. Biome не умеет в GraphQL, иногда ломает код при банальной сортировке импортов, нет многих плагинов.
- Чего я не знал, так это про опцию --staged, которая позволяет избавиться от husky и прочих отдельных пакетов. Не хватает качественной работы с CSS, чтобы совсем отказаться от инструментов для pre-commit.

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

https://kittygiraudel.com/2024/06/01/from-eslint-and-prettier-to-biome/

Тестирование типов TypeScript

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

Адам Ракис из Spotify показывает по шагам, как написать тип TypesMatch<A, B>, который вернёт true, если типы и правда совпадают. Итоговый вариант выглядит просто, но интересно почитать, как к нему Адам приходит. А затем этот специальный тип можно использовать для тестирования существующих типов, банально запуская tsc на файлике с «тестами».

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

https://frontendmasters.com/blog/testing-types-in-typenoscript/

Как подсидеть тимлида

Видео выходного дня. Старенький, но всё ещё актуальный доклад Егора Толстого. Если вы уже тимлид или собираетесь им стать, помните:

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

- Если хотите писать код — пишите. Главное, не берите блокирующие задачи, которые можете не сделать. Но если хочется писать код — можно. Я хоть уже давно ушёл в менеджерство, раз в пару недель трогаю код в своих проектах, закрываю простенькие баги.

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

- Если кажется, что вы ничего полезного не делаете («раньше вот код писал, а теперь просто по встречкам хожу»), то во-первых, вы не одиноки, а во-вторых, начните вести дневник выполненных дел. Я, например, уже 5 лет веду вики-страничку «Дневник доброжелюбного бородача», в которую записываю всякую важную активность: что делал, что улучшил, какой процесс запустил. Очень помогает приглушить синдром самозванца.

В докладе есть ещё несколько дельных советов, рекомендую.

https://youtu.be/aJv6uQMChm0

Что нового в браузерах за месяц

Ох, как же мне теперь удобно станет статистику для докладов собирать!

Патрик Броссет собрал страничку, которая берёт данные из пакета web-features (большой сборник веб-фич), склеивает это с browser-compat-data и раз в сутки самообновляется. В итоге можно не просто смотреть, какие фичи есть в браузерах, а отслеживать, что появляется в каждом отдельном браузере каждый месяц. Эдакий общий сборник релизов. Очень удобно.

Например, с мая text-wrap: balance работает во всех свежих версиях Interop-браузеров. А с апреля везде есть popover.

https://web-platform-dx.github.io/web-features-explorer/monthly/

CSS anchor positioning API

С нетерпением жду, когда все браузеры поддержат CSS Anchor Positioning. С ним ведь можно будет отказаться от отдельных библиотек для тултипов во многих случаях, всё на CSS — мечта.

Юна Кравец показывает и рассказывает, как работать с «якорями», какие новые свойства, директивы и функции появились в CSS. Поиграться можно уже в Chrome 125.

Статья с подробностями: https://developer.chrome.com/blog/anchor-positioning-api
Демка: https://anchor-tool.com/

Что не так с Emoji

Видео выходного дня.

В 2017 году Лёша Авдеев на конференции Web Standards Days в Минске рассказывал о том, как работают эмодзи в браузерах и операционных системах (да, именно с того дня я называю эмоджи эмодзи). Лёша показал, как собираются эмодзи из нескольких в один, какие шрифты отвечают за их отрисовку, как их обрабатывать при помощи JavaScript и почему соц. сети в итоге рисуют картинки, а не используют шрифты.

Думаете, что-то изменилось за 6.5 лет?

https://youtu.be/DUwZpLBSuiI

Единица измерения `cap`

Ахмад Шадид столкнулся с задачей, когда нужно между словами добавить расстрояние, равное высоте прописной буквы. И обычно такое решается подбором пикселей или em, если знаешь метрики шрифта. Особо искушённые пользователи CSS могут прикрутить ex. Но на самом деле современные версии браузеров умеют в единицу измерения cap, которая равна той самой высоте прописной буквы. Браузер ведь и так знает метрики шрифта, а значит может и эту высоту передать в CSS.

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

https://ishadeed.com/article/css-cap-unit/

<dialog> с заблокированным скроллом

Скорее всего у вас была похожая задачка: при показе всплывающего окна сделать так, чтобы за ним не скроллился контент. Обычно для такого при открытии модалки при помощи JavaScript на body добавляют overflow: hidden. Но у такого подхода есть пара недостатков:
- Нужен JavaScript там, где он как будто не должен быть.
- Контент за модалкой начинает прыгать, потому что скроллбар убирается, а это влияет на ширину страницы.

Крис Койер делится простым рецептом, как на современном CSS эти недостатки убираются:
- Вместо JavaScript можно использовать body:has(dialog[open]). Если модалки сделаны при помощи dialog, то такого селектора достаточно.
- На html можно добавить scrollbar-gutter: stable;, чтобы при открытии модалки скроллбар прятался из-за overflow: hidden, но место под него оставалось. То есть контент прыгать не будет.

https://frontendmasters.com/blog/scroll-locked-dialogs/

TypeScript 5.5

Подъехал сочный релиз. Безусловно, надо вчитываться в код в анонсе, чтобы понять детали, но вот, что меня радует из новинок.

1. Inferred Type Predicates. TypeScript становится всё умнее и учится понимать из контекста, с какими типами мы работаем. Например,

const definedEntities = entities
    .map(e => allEntities.get(e))
    .filter(e => e !== undefined);

definedEntities.forEach(e => e.doSomething());

Раньше такой код выдавал бы '' is possibly 'undefined'. Сейчас TS понимает, что выше по коду все undefined уже ушли. Можно будет убрать столько as из кода!

2. Проверка синтаксиса регулярных выражений. И на опечатки укажет, и подсветит, когда с именованными группами вы работаете не так, как надо. Экономия времени полезная получится.

3. Поддержка новых методов Set из EcmaScript. Там добавили всякие пересечения, исключения и прочие полезные операции не так давно. Теперь оно и в TS будет валидно обрабатываться.

4. Новый флаг --isolatedDeclarations, который будет приучать вас более явно задавать типы для экспортируемых сущностей. Особенно полезно, если вы генерируете .d.ts для ваших библиотек.

5. В конфиге теперь можно пользоваться переменной ${configDir}, чтобы ссылаться на папку, в которой конфиг находится. Если у вас разные конфиги в разных папках, проще будет эти самые папки перемещать по проекту.

6. Сам пакет TypeScript «схуднул» на 30%. CI/CD станут быстрее.

7. Больше нельзя написать type undefined = any;. Честно говоря, не знал, что раньше было можно, как-то не было необходимости такие подлянки в проекты вставлять. Но теперь совсем нельзя.

И ещё всякое разное. Скидывайте команде, чтобы был повод завести тикет на обновление TS в проекте.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-5/

Модификаторы БЭМ и нативная вложенность в CSS

После того, как в CSS стало можно вкладывать одни селекторы в другие, как мы это раньше делали в препроцессорах, остался один важный кейс, который довольно быстро принесли фанаты БЭМ.

.block {
   &__modifier {
      color: var(--omg);
   }
}

Вот так в CSS написать нельзя, селекторы — это не строки, которые можно просто склеить.

Но Владислав Зубко нашёл решение.

.tag-list__tag {
  --background-color: var(--color-red-200);

  &[class*='--html'] {
    --background-color: var(--color-green-100);
  }
}

И ведь по сути да, если у элемента есть заданный класс, то у него сработает и селектор по атрибуту [class].

https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/

CodeRun. Большой запуск

Делюсь с вами сокровенным. Я в прошлом году писал в этот канал, что мы с большой командой неравнодушных к кодерским соревнованиям людей запустили бету нового сервиса, CodeRun. Мы тогда собрали много полезного фидбека, в том числе от вас.

Сегодня мы выходим из беты! Случилось то, к чему я шёл несколько лет. Очень волнительно 🙂

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

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

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

А всей большой команде CodeRun хочу выразить огромную благодарность за то, что помогли реализовать мою старую мечту — сделать классный тренажёр с интересными задачами для тех, кто хочет развиваться и прокачиваться. Люблю вас! 💛

https://coderun.yandex.ru/

Как ты кодишь? Виталий Харисов

Видео выходного дня. У Сергея Бережного есть формат, где он зовёт знакомых разработчиков и допытывается, как у них настроен IDE, какие алиасы в терминале, какой стиль кода они используют и так далее. В этом видео Виталий Харисов, с которым мы какое-то время вместе работали в Поиске в одной команде и даже парно программировали, переписывая куски Бабули, показывает свой сетап.

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

https://youtu.be/3grLGPuNBTo

Кастомные элементы не требуют дефиса в середине

Не знаю, зачем вам этот факт, но мне он показался интересным.

Думаю, у вас, как и у меня, где-то в голове было знание: «имена кастомных элементов должны содержать дефис (dash)». И я был уверен, что этот дефис должен быть в середине имени. Джим Нильсен выяснил, что нет.

<mytag-></mytag-> — это валидный кастомный элемент. Теперь живите с этим.

https://blog.jim-nielsen.com/2024/custom-elements-only-need-end-with-a-hyphen/

Классные анимации

Понравилась статья Эмиля Ковальски про то, чем отличаются посредственные анимации от классных анимаций. Откликается.

1. Классные анимации выглядят натурально. Не стоит везде использовать стандартные изинги, иногда надо посидеть поиграться с кривыми Безье или вообще сложить анимацию из нескольких частей.

2. Классные анимации — быстрые. Тут очень согласен. «Да, я понял, что анимация красивая, можно мне уже сайтом пользоваться?» — очень часто на красивых сайтах ловлю такую мысль.

3. У классных анимаций есть назначение. Изменение состояния, привлечение внимания, плавный переход между экранами — ок. «Смотрите, я научился вставлять анимации везде» — не ок.

4. Классные анимации — производительные. Если интерфейс зависает во время анимации, потому что анимация сделана на JS, а параллельно крутится майнинг какого-то очередного коина, удовольствия от такого интерфейса будет мало.

5. Классные анимации — прерываемые. Пользователь не должен дожидаться окончания красивостей, чтобы сделать следующее действие. Если интерфейс отреагировал на новое действие ожидаемо — это вау-эффект.

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

7. Классные анимации сделать тяжело. Нужно приложить усилия. Но оно того стоит.

https://emilkowal.ski/ui/great-animations

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

Видео выходного дня. Олег Федоткин погружается в то, как приносить крупные инновации в большие компании. Мысли, которые захотелось записать:

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

- Эффективность и продуктивность ≠ работа «туда». Можно продуктивно заниматься ерундой.

- Внедрять изменения нужно не к дате и директивно, а к результату и для чего-то. Объяснять «что-то» важно всем участникам процесса.

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

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

- Для диффузии инноваций важно внедрять новое постепенно, ориентируясь на инноваторов и ранних адоптеров, которые сами в случае полезного внедрения сарафанным радио повлияют на остальных участников внедрения. Инноваторы любят что-то новое, чего нет у остальных. Это как Apple Vision Pro, который по сути своей пока бесполезен, но техноблогеры всё равно его хотят.

- Раннему большинству новое не нужно. Им нужно что-то стабильное. А уже на позднее большинство влияет страх остаться не у дел, когда все перешли на новое.

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

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

https://youtu.be/7HKJf7HGnTY