Стратегия компании как рабочий документ

Что болело до

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

Хуже всего было с доставкой. Документ лежал на сайте, но обновления до боевого адреса физически не доезжали: файлы в репозитории лежали не там, куда вели ссылки внутри документов. 37 дней команда читала версию от 24 мая и не догадывалась об этом.

Отдельно выяснилось, что первая версия построена вокруг неверно выбранной главной метрики. Правкой отдельных цифр это уже не чинилось. В главном файле переписали 585 строк из 3131.

Как устроено

Четыре самодостаточных HTML-файла и больше ничего. Ни сборки, ни зависимостей, ни базы, ни изображений. Весь CSS лежит в одном теге style: 1638 строк в главном документе. Весь JS в одном script внизу страницы. Файл открывается двойным кликом с диска и точно так же работает на сервере.

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

Интерактив собран на голом браузерном API. Подсветка активного раздела в навигации, полоса прогресса чтения и появление блоков по скроллу это три IntersectionObserver с разными порогами. Анимация счётчиков это requestAnimationFrame с кубическим замедлением, число берётся из data-атрибута.

Выкатка одним git push. Сервер забирает изменения сам, заходить на него не нужно.

Формат чтения

Документ собран по образцу журнальной статьи. Боковая навигация с нумерацией разделов и подсветкой активного. Полоса прогресса сверху. Липкая плашка с названием текущего раздела. Заявленное время чтения на входе: 25, 22 и 30 минут у трёх больших документов.

Вся фактура сведена в таблицы: 29 штук на три файла. Плюс 7 схем, нарисованных вручную в инлайн-SVG без единой библиотеки: карта позиционирования 2×2, карта рисков, воронка на пять уровней, динамика рынка по годам, сезонность спроса, вклад направлений. Арифметика координат посчитана заранее и оставлена в HTML-комментариях рядом с разметкой, чтобы следующий человек понял, откуда взялись пиксели.

В шапке каждого файла стоит переключатель между документами с пометкой «вы здесь». Стили для печати тоже прописаны.

Задачи и контрольные точки

Чек-лист это отдельный файл на 34 задачи, разложенные по четырём этапам и бэклогу. Одна и та же фактура рисуется тремя способами: канбан-доска по фазам, полная таблица и счётчики по направлениям.

Задачи правятся прямо в ячейке: текст, ответственный, срок, направление. Свои задачи можно добавлять и удалять. Данные лежат в трёх слоях: массив задач в коде, объект правок и список добавленных вручную. При отрисовке слои сливаются, отредактированные помечаются звёздочкой, добавленные точкой.

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

Грабли

Проект сделан быстро и по-простому. Часть решений вышла боком, вот честный список.

• Структура папок в репозитории разошлась со структурой ссылок. Автозабор исправно обновлял плоские копии в корне, на которые никто не ссылался, а переключатель документов вёл в подпапки со старой версией. Итог: 37 дней боевой адрес отдавал май.
• Chart.js подключён с CDN во всех трёх больших документах и ни разу не вызван, начиная с первого коммита. Графики в итоге нарисовали руками в SVG, а тег и осиротевший canvas высотой 350px забыли убрать. На странице это пустой прямоугольник с подписью.
• Координаты схем захардкожены. Поменять одну цифру в столбчатой диаграмме значит пересчитать высоту и отступ в пикселях и не забыть подпись. Формулы в комментариях помогают, но масштабируется это плохо.
• Состояние чек-листа лежит в localStorage, четыре ключа. Отметки и правки видит только тот, кто их сделал. С другого ноутбука список пустой. Экспорт и импорт JSON сделали временным костылём, перенос в общую базу уже стоит отдельной задачей внутри самого чек-листа.
• Стили продублированы в четырёх файлах. Правка одного цвета это правка в четырёх местах. Плата за отсутствие сборки.
• В head прописаны favicon, sitemap и og-картинка по абсолютным путям. Самих файлов в репозитории нет.
• Зарплаты и план найма сначала попали в документ, потом их вырезали отдельным коммитом на 141 строку. Состав читателей стоило определить до того, как писать.

Что переносится в другие проекты

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

• Один HTML-файл без сборки открывается у всех и живёт годами.
• Время чтения на входе и полоса прогресса сверху заметно повышают шанс, что документ дочитают.
• Таблица вместо списка буллетов заставляет автора дописать поля, которые он собирался пропустить.
• Контрольная точка без сценария на случай провала остаётся просто датой в календаре.
• Задачи из документа должны жить в общем хранилище с первого дня. Браузер конкретного человека для этого не годится.

Частые вопросы

Зачем внутреннему документу отдельный HTML-файл?

Четыре файла кейса весят 12 199 строк и не требуют ни сборки, ни зависимостей, ни базы. Весь CSS лежит в одном теге style: 1638 строк в главном документе. Файл открывается двойным кликом с диска и точно так же работает на сервере. Такой документ переживёт смену сервиса, в котором вы сейчас пишете.

Что заставляет сотрудников дочитать документ до конца?

На входе стоит честное время чтения: 25, 22 и 30 минут у трёх больших документов. Сверху идёт полоса прогресса, слева нумерованная навигация с подсветкой активного раздела. Фактура сведена в 29 таблиц и 7 схем в инлайн-SVG. Таблица ещё и дисциплинирует автора: пустое поле в ней видно сразу.

Как довести стратегию до конкретных задач?

Задачи вынесены в отдельный файл: 34 штуки по четырём этапам и бэклогу. Одна и та же фактура показана канбаном, полной таблицей и счётчиками по направлениям. Поверх стоят пять контрольных точек, у каждой есть дата, владелец и заранее написанный сценарий на случай провала. Раз в неделю разбирается дашборд из шести цифр, регламент планёрки расписан на 60 минут по пяти блокам.

Почему обновления документа могут не доезжать до сайта?

У нас дерево папок в репозитории разошлось с деревом адресов на сайте. Автозабор исправно обновлял плоские копии в корне, а ссылки внутри документов вели в подпапки со старой версией. 37 дней команда читала версию от 24 мая и не подозревала об этом. Успешный push тут ничего не доказывает: смотреть надо на то, что отдаёт боевой адрес.

Где хранить отметки о выполнении задач?

В нашем чек-листе состояние легло в localStorage, четыре ключа. Отметки и правки видит только тот, кто их сделал: с другого ноутбука список выглядит пустым. Экспорт и импорт JSON закрыли дыру временно, перенос в общую базу уже стоит отдельной задачей внутри самого чек-листа. Вывод простой: задачи из документа должны жить в общем хранилище с первого дня.