Изнанка: как устроен этот сайт

§ 1 Замысел: двадцать лет в папке «потом»

Слева — во что идея обходилась мне раньше. Справа — сколько она заняла в августе.

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

В одиночку такая идея отнимала столько времени, что интерес кончался раньше работы, и она возвращалась в папку. В августе я увидел, что цена упала — и упала там, где раньше было дороже всего. Шаблонный лендинг и десять лет назад собирался за день; подешевело то, чего никто бы не заказал.

Это и есть первое, что я на этом сайте проверял. Раньше проверка стоила месяцев, поэтому я её и не делал, и идея оставалась в голове, где ни одна из них ни разу не провалилась. Теперь вещь, которая может не понравиться никому, кроме меня, делается за вечер: посмотрел живьём и стёр.

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

Могут ли сайты снова стать личными — такими, где автор не гонится за охватом и говорит так, как считает нужным? Я отвечаю «да, но по-новому», и страница, которую вы читаете, — часть этого ответа.

Три задачи, которые я себе поставил

1. Проверить ИИ на комплексном проекте. Пройти весь путь на одном проекте — замысел, дизайн, разработка, продакшен, выкладка — и посмотреть, на каком шаге пара из человека и агента развалится.
2. Свести в одном проекте картинку, звук и текст. Текстовая часть тянет на отдельный рассказ: архив работ, заметок и комментариев потребовал ревизии не меньшей, чем код.
3. Сделать разом отложенные хобби-проекты. Два продукта Choosy, сборник из двадцати четырёх игр, двойник для рекрутеров и исследовательский раздел, который наружу пока не выходит.

Что я заодно попробовал руками

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

рисованная анимациямоушн и роликишейдеры и оптикафизика на холстетипографика по Мильчинудизайн-система на переменныхдве темы без инверсииSEO и оптимизация под ИИ-агентовсинтез речиредактура и контенткэш и отпечатки файлов

Показанное здесь — меньшая часть сделанного: на каждую вещь, которая осталась, приходится несколько заходов, не переживших первого взгляда. Половина из 34 стендов лаборатории — как раз такие.

это нормальная цена — теперь её можно платить

§ 2 Заходы: два сайта, которые не открылись

Папка «потом» осталась не только на словах. Личный сайт я начинал дважды — в 2006—2007 годах и в 2009—2010-м, — и оба раза дело кончалось макетами: домен жил, страницы не выходили. С тех пор они пролежали в архиве и на сайте показаны впервые. Показываю потому, что по ним видно, чего я хотел от личного сайта за двадцать лет до того, как это стало стоить месяц. Каждый макет открывается целиком по нажатию: на телефоне полоса ужата, и набор 2006 года иначе не прочесть.

2006: лента, у которой единица — день

Первый заход держался на двух блоках. Сверху «Панорама работ» — четыре колонки со ссылками и датами: сайты, графдизайн, «Барахолка» со старыми работами и экспериментальный стол. Снизу «Лента рутины», и мерила она дни: под каждым кадром стоит число месяца, а число, в которое ничего не вышло, в ленту не попадало — между четвёртым и вторым в полосе дырка.

В подвале — счётчик, бегущая строка новостей и приписка, которой на главной странице место особое: «Да, у меня нет домашней странички».

2010: главная начинается с признания, что сайта нет

Спустя три года я вернулся к той же затее и начал с объяснения. Под именем на главной стоит строка: «Сайт не открыт с середины 2007 года по сегодняшний день». Работы к тому времени отдавались файлом — «Часть портфолио за 2008 год, PDF, 400 Кб», — а внизу справа считался приход: «Здесь было 23 403 человека и Амик».

Правки к макету я вносил прямо поверх вёрстки, красным: «При нажатии выезжает серая плашка снизу. Сама ссылка остаётся статичной». Тем же красным сегодня правит плёнку голос на «Резюме».

Лента к тому времени выросла в отдельный раздел — с разбором по годам, гистограммой публикаций и счётом: «Всего опубликовано 45 работ, из них 432 баннера, 5 сетов иконок». Тогда же у сайта появился переключатель языков и почта, которой я пользуюсь до сих пор.

Админка: календарь вместо списка записей

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

Что из этого дожило до сегодняшнего листа

Обоих сайтов нет, но кое-что перешло сюда дословно. В подвале 2006 года стоит: «Копирование материалов сайта без моего благословения является грехом, нарушением 8-й заповеди — „Не укради“». Та же строка стоит внизу страницы, которую вы читаете: за двадцать лет из неё ушло одно слово — «сайта».

Перешла и сама мысль о ленте. «Мои заметки» — это та же «Лента рутины»: короткие публикации, которые не заслуживают отдельного рассказа, но жалко терять. Разница в том, что двадцать лет назад их приходилось раскладывать по календарю руками, а теперь запись пишется в телеграме и приезжает на сайт сама.

третий заход открылся

§ 3 Система: тетрадь, ручка, маркер

Дизайн-система пришла со школьного стола: тетрадь в клетку, шариковая ручка, маркер. Я дизайнер по первой профессии, и краски брал по памяти, а не по палитре.

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

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

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

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

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

Общий у них шаг — 15 пикселей, и это то же число, что у тетрадной клетки. Игровая клетка ему кратна, а холст игры сам сдвигается на доли клетки, чтобы лечь на фоновую сетку страницы. Косая линейка «Резюме» — та же клетка, повёрнутая на 45°, и шаг у неё поэтому 21,213: это 15 × √2.

Последнее в этом ряду не видно вовсе, но без него не работает остальное: правка обязана дойти до читателя. Браузер, который уже был на сайте, берёт файл из кэша, и человек видит вчерашний CSS поверх сегодняшней разметки. Поэтому адрес файла меняется вместе с содержимым: сборка считает отпечаток от самого файла и дописывает его к ссылкам. Страница не кэшируется, отпечатанный файл кэшируется навсегда. Так на 404 надпись от руки однажды оказалась набрана чужим шрифтом, а стрелка при ней — вдвое жирнее положенного.

Висячая пунктуация и прочее, чего не заметят

Русский текст набран по «Справочнику издателя и автора» Мильчина и Чельцовой: тире с неразрывным пробелом, «ёлочки», наращения падежных окончаний. За набором следит сторож в сборке — прямые кавычки, три точки вместо многоточия, дефис вместо тире и неверное наращение до страницы не доезжают.

Одну деталь заметят разве что дизайнеры. У эпиграфа на главной открывающая кавычка вынесена на поле целиком: левый край набора держит первая буква, а не знак препинания. Отступ первой строки я приравнял к ширине знака, а не к его половине: кавычка написана рукой и в 1,4 кегля, и на половине первая строка отъезжала от остальных на семь пикселей.

Отвесная черта — кромка колонки. Сверху кавычка стоит внутри неё и толкает букву вправо; снизу кавычка вынесена, и кромку держит буква. Знаки набора здесь настоящие, но написаны рукой сайта и красными чернилами пометок.

У узлов есть имена

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

Третий узел лежит поверх всех страниц сразу.

Изнанка — это ещё и режим

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

Тёмная сторона у этой страницы стоит по умолчанию, так что изнанку вы уже видите. Вот обе стороны рядом.

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

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

эту сторону листа мало кто видит первой

§ 4 Прогулка: двенадцать разделов и что в них спрятано

Надстрочные числа у «Медитирую» — коды ответа сервера, и каждый объясняет свою страницу: 303 See Other — «то самое, но смотрите в другом месте», 508 Loop Detected — обход зациклился и конца не будет.

Сайт статический: HTML, CSS и ванильный JS без сборщика. Чужого кода здесь два файла: three.js в облаке за страницей 404 и chess.js, который судит ходы в шахматах. Остальное написано для этого сайта и больше нигде не используется.

Главное правило структуры: страница — это папка с index.html, и всё, что принадлежит только ей, лежит рядом. В корне — общее: шапка, подвал, тема, шрифты. Адрес отдаёт сам сервер, без единого правила переписывания. Правило переписывания однажды молча погасило у меня целый раздел работ: рядом с файлом появилась папка с тем же именем, и страница перестала открываться, не сказав об этом ни слова.

Адресов в карте сайта 65. Ещё восемьдесят страниц в карту не входят: раздел работ, пока закрытый; лаборатория, где движение проверяют до того, как выпустить его на страницу; четырнадцать страниц ответов сервера — и 404, которой по определению нет. У каждой страницы есть markdown-двойник: то же содержание без разметки, втрое легче. Сайт читают не только люди, и ИИ-агенту незачем тратить половину контекста на меню и скрипты.

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

Правила у движения жёсткие. Без JS на странице остаётся содержание. Тяжёлое грузится в момент, когда кадр доехал до экрана. Esc гасит всё, что играет, и остановленное руками само больше не заводится. При системной настройке «меньше движения» само не запускается ничего.

Дальше семь остановок. По одной на раздел, ради которого я его и затевал.

Остановка 5/games/

Двадцать четыре игры на тетрадном листе

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

На карточках хаба начерчены партии — тем же пером и по той же клетке, что и настоящее поле. Рисунки собирает сборщик, руками их не правят.

Собрано это как собственный сборник в эстетике, которую я выдумал: один лист, одно перо, одна палитра на все двадцать четыре игры. Побочная польза — насмотренность в гейм-дизайне, которой у меня до этого не было.

Мне нравится думать, что это мой сборник. Посмотрим, что из этого выйдет.

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

Остановка 6/choosy/movie/, /choosy/book/

Памятник переменам

Двенадцать лет назад мы с товарищем запустили Choosy и потратили на разработку несколько месяцев. В августе та же работа уложилась в вечер.

Это личный памятник переменам. И заодно ответ на вопрос «что посмотреть» — теперь мне есть чем поделиться.

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

Кино: выбор без списка

Шестьдесят лент, и ни одного каталога с фильтрами. Ленты идут колодой. Слабая прокрутка листает по одной, бросок уносит дальше: два разных действия с настоящей инерцией.

Оценки остаются в браузере и перестраивают ленту «дальше». Аккаунта нет, и заводить его негде.

У сорока лент собран лист фактов, всего их 373: гонорары, отказы, дубли, вырезанные сцены. Источник у каждого факта записан в данных и проверяется сборкой, а читателю он не показывается — ссылка на сноску переводит разговор в справку.

Книги: сначала спор, потом ответ

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

Порядок жёсткий. Сначала вы говорите «согласен», «не согласен» или «не думал», и только потом появляется ответ книги. Прочитав ответ первым, спорить уже не с чем.

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

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

Мне нравится иногда обратиться к собственной случайной выборке. Это упрощает выбор кино на вечер — такого, чтобы, пересматривая его, уснуть.

знак продукта взят у пункта меню

§ 5 Метод: кто из нас двоих что делал

Работа шла в паре с Claude Code. Я ставил задачи, смотрел результат и заворачивал негодное; агент писал код, гонял сборку и сторожей. Фраза «сайт написал ИИ» описывает происходившее неточно: роли поделены, и поделены жёстко.

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

Правило, выведенное из правок, уходит в свод, а не в комментарий к коду. Сводов накопилось 23: от типографики до правил боя в «Рати». Их читает и человек, и агент в следующей сессии, поэтому проект помнит свои решения дольше одного разговора.

Из чего состоит работа агента: почти всё — чтение, проверка и правка. На один мой запрос в среднем приходится 24 ответа модели: между ними — команды, сборки и сторожа. 91 раз агент останавливался и задавал вопрос мне.

Токены делятся на написанные и прочитанные. Порождено 65,2 млн, а обработано 12,58 млрд: на каждый написанный токен модель перечитала 193 — почти всё из кэша, поэтому перечитывание проекта на каждом шаге и возможно.

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

§ 6 Число: сколько получилось и что не сошлось

Строк кода в дереве сайта 586 198, и руками из них написано 172 597. Остальное — архив и результат сборки: копии промостраниц Сотмаркета 2012—2014 годов хранятся как есть, а страницы блога, хабы работ, базы Choosy и данные игр собираются из источников.

А это — содержание, у которого один источник и которое проверяется сборкой: 28 записей блога, 30 работ у 14 компаний, 60 лент и 50 книг в Choosy, 100 шахматных задач и 10 дебютных ловушек, 26 нонограмм, нарисованных решётками прямо в сборщике, 10 графических диктантов, 5 сеч в «Рати» — и словарь «Балды» на 48 351 слово.

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

Ни одну из этих вещей не заказали бы. Портрет из цифр ничего не продаёт. Гондольер под буквой «н» не поднимает конверсию. Словарь на 48 351 слово собран ради игры, в которую сыграют полтора человека. Пятнадцать лет назад это был приговор идее. В августе каждая из них стоила мне от вечера до недели, поэтому они просто сделаны.

Что не сошлось

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

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

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

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

Сайт сделан, исследование удалось. Ответ на вопрос, что я умею, придётся давать заново.