Как создавался April Zero: часть 2

Как создавался April Zero

Часть 2

Мой процесс проектирования каждый раз разный.

Для theory11 я настроился, показывая фокусы незнакомцам на улицах Лос-Анджелеса. Гайдлайн Quizlet придумался, пока я прыгал с парашютом над Гавайями и видел в свободном падении синюю воду, песочный берег и белые волны. Цветовую схему прошлого сайта я позаимствовал у красного Ducati.

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

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

• Приложение Moves для iPhone, данные о перемещениях
• Приложение Cardiio для iPhone, пульс
• Instagram, фотографии
• Приложение Runkeeper для iPhone ‐ запись пробежек
• Беспроводные весы Withings, ежедневный вес
• Тонометр Withings, пульс и давление
• Ультразвук Bodymetrix, процент жира
• Ежемесячные анализы крови, триглицериды и уровни нутриентов

Май 2014: Таиланд

Я путешествовал по Азии с Dustin Curtis и набрасывал идеи мобильной версии сайта. Я пытался придумать что-то, что использует мобильный контекст, что-то полезное мне каждый день на ходу.

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

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

Думаю, за несколько лет, а то и раньше, появится техника, которая сделает эти данные куда более автоматическими и непрерывными. Если Apple или кто-то ещё из крупных не придумает этого за год, придумает кто-нибудь на Kickstarter.

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

Меня радовала мысль видеть всю информацию одним взглядом с телефона, и я всё пытался уместить её в одну понятную панель.

Школа дайвинга

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

Днём я ходил в школу дайвинга, а по ночам делал новые мобильные макеты. Я связал Photoshop на своём Macbook со Skala Preview на iPhone, чтобы видеть каждый макет в контексте. Я брал телефон, ходил с открытой страницей и пытался понять, каково это на ощупь.

Так решилось много деталей: масштаб, читаемость. «Насколько мелким можно сделать текст?» «Какой нужен контраст, чтобы читать на улице?» «Сколько информации влезает в один экран?»

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

Я ходил со скриншотами в телефоне и показывал их окружающим.

«Что, по-вашему, эта страница пытается сказать?» «Куда бы вы нажали?»

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

Я понял, что идея как-то уместить всё на страницу не работает, и начал сокращать её до самых важных цифр.

В Бангкоке мы обошли несколько больниц, пытаясь дёшево сделать МРТ всего тела, но вышло слишком дорого, больше нескольких тысяч долларов. Зато я успел прикипеть к мысли о полном медицинском взгляде на себя и решил добавить его на страницу, чтобы придать ей клинический, научный вид. Для начала я взял стоковое изображение среднестатистического человека, рассчитывая потом заменить его настоящим своим.

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

Я пытался рассказать историю, а не просто показать кучу медицинских измерений.

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

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

Через пару дней экспериментов я понял, как изобразить сканирование и свечение МРТ на CSS. Я поставил брейкпоинт примерно на 600px и начал собирать мобильную раскладку прямо в браузере. Когда она стала приличной, я открыл её на телефоне по IP-адресу компьютера, чтобы тестировать и оптимизировать прямо под железо iPhone.

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

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

На пустой желудок мне думается плохо, так что я решил сначала наесться суши, а потом придумать финальный дизайн.

Июнь 2014: Япония

Завтрак на Цукидзи

На следующее утро я приземлился в Токио и поехал на рыбный рынок Цукидзи, где самая свежая рыба в мире.

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

Через час я был вдохновлён, больше не голоден и готов дозакончить дизайн сайта.

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

Весь прошлый месяц я спорил сам с собой, в какую сторону должно течь время на мобильном. Свежая активность приходит сверху? Так работает большинство лент, Facebook или Twitter. Или всё выстраивается хронологически, как календарь, с первого дня?

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

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

В итоге я решил, что страница месяца начинается с полуночи первого дня. Свежее внизу, раннее сверху.

Я ориентировался по Google Maps и вдохновлялся их мобильным дизайном. Их лента маршрутов всегда чистая и надёжная.

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

Я пробовал придумать хитрые способы показать восход и закат, фотографии дня и так далее. Данные были хорошие, но сложности добавляли слишком много. Новая версия вышла куда проще: просто список мест, где я побывал.

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

Позже в тот же день Apple анонсировала HealthKit на WWDC. Это оказалось не так здорово, как я ожидал, никакого революционного железа вместе с ним не вышло, но часы официально пошли.

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

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

Чайная церемония

На следующее утро я отправился на долгую пробежку по парку. Хотелось проветрить голову и дать вдохновению шанс. После новостей о HealthKit меня переполняли безумные идеи про геймификацию фитнеса и алгоритмическое предотвращение инфарктов.

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

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

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

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

Это была первая закодированная версия. Не то чтобы красивая, но с живым содержимым и базовой раскладкой элементов, с которыми я собирался играть.

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

Категории мест из Foursquare сделали здесь большую часть работы: готовая таксономия и отличные иконки к ней.

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

В месяцах, когда я много нырял, много зелёного. Когда я был в Нью-Йорке, много красного от итальянских ресторанов. В японской поездке много розового от суши.

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

Потерялся в Роппонги

Я опаздывал, возвращаясь из чайного дома. Я потерял счёт времени, практикуя японский с женщиной в кимоно. Мне нужно было выселиться из Park Hyatt Tokyo меньше чем через час, а я был на другом конце города. По Google Maps на метро выходило 43 минуты.

Я сел на поезд в сторону станции Адзабудзюбан и поехал. «Всё будет нормально, говорил я себе. Обычно я собираюсь меньше чем за 5 минут».

В поезде я отвлёкся, придумывая остроумную подпись к фотографии в Instagram, и, когда поднял глаза, моя станция как раз проезжала мимо. Упс. Я вышел на следующей: Роппонги.

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

Передо мной был набор мест на тонкой линии с кучей текста. Все подписи слегка наклонены. Огромные яркие круги разделяли зоны. Именно это я и искал!

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

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

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

Раскрасив названия мест, я смог развести их пошире, сохранив прочную визуальную связь с цветными иконками.

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

Вместо карты я попробовал размытый фон из фотографий Instagram. Так у каждого дня появлялась своя интересная подложка для данных. Историю коммитов и деплоев в Github я пустил на дни, когда больше ничего не происходило.

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

Этап дизайна наконец закончился. Пора было строить.

Июль 2014: Сан-Франциско

До сих пор я откладывал вопрос, как всё это на самом деле собрать & какой выбрать стек. Мне хотелось потратить всё время на дизайн и фронтенд, не отвлекаясь на инфраструктуру и код . Совсем простой Jekyll на этапе прототипов был необходим, чтобы двигаться быстро и пробовать много идей. Всё было статикой, так что интересные версии легко откладывались про запас.

Сосед агитировал за Node. Куча людей советовала Rails. Раньше я работал с Django, и мне нравилось. Я знал, что язык не так уж важен, надо просто выбрать один и начать писать.

День я поиграл с Ruby on Rails. Его многие рекомендовали. Он выглядел разумным выбором, чтобы потом подключить других разработчиков. Потратив час на то, чтобы поднять & выложить Hello World, я понял, что дело идёт слишком медленно. Всё время нужно было тратить на то, чтобы строить, а не разбираться в тонкостях нового фреймворка.

Я решил взять Python и Django, на которых давным-давно уже строил аналитический стартап. Heroku сильно упростил деплой и управление серверами по сравнению с привычным мне AWS. Через минуты сайт был живым. Через часы у меня были все URL страниц с пустыми шаблонами. Через несколько дней большинство моделей работало и тянуло данные из разных API. Вот теперь дело пошло.

У большинства сервисов, с которыми я хотел подружиться, были приличные API на OAuth 2.0 с хорошей документацией, так что подключить аккаунты и вытащить нужное оказалось на удивление легко. Я поставил задачу в планировщике Heroku, чтобы каждые 10 минут проверять свежие данные и импортировать всё новое.

Фронтенд

• SASS
• Compass
• CoffeeScript
• LiveReload
• jQuery
• PJAX
• jQuery Throttle
• D3

Сайт грузит один общий CSS-файл и один общий JavaScript-файл. Они склеиваются из множества маленьких файлов SASS и Coffee, чтобы при разработке всё оставалось разложенным по полочкам и модульным.

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

Бэкенд

• Python
• Django
• Postgres
• Memcached
• Heroku

У Heroku есть полезные руководства по настройке их стека. Деплой очень простой: «git push heroku master», и изменения уже живые. В GitHub я пушу часто, а в Heroku, когда хочу выкатить.

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

Финишная прямая

Дизайну идут на пользу частая смена перспективы и помехи. Иногда я нахожу решение посреди разговора или заметив что-то на улице.

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

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

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

Когда я что-то собираю на CSS, я сначала выстраиваю раскладку предельно простыми стилями. Задача, поставить всё на свои места, а не сделать красиво. Первый шаг, убедиться, что бэкенд отдаёт всё, что нужно. Хочется закрыть этот вопрос и дальше сидеть в одном и том же CSS-файле. Всему подряд ставится background: red или background: blue, просто чтобы проверить, что селекторы работают. Потом я занимаюсь раскладкой и позиционированием, думая про адаптивность и крайние случаи. Когда всё это решено, я обычно завожу новый стилевой файл и уже в нём прописываю все детали, чтобы стало красиво.

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

Все подписи теперь были спрятаны, и каждая лента стала проще и легче. По клику день раскрывался и показывал больше.

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

Размытые фотографии из Instagram дали дням более интересные и разные фоны для данных. Потом я добавил настоящий пульс за каждый день.

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

Справа оставлено место под город и переходы к предыдущему и следующему дню.

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

Страницы месяцев

Теперь, когда у каждого дня & месяца была своя страница, я взялся за список месяцев и анимации переходов между всеми страницами.

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

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

Mapbox

Мне хотелось спокойного фона с рельефом и улицами, чтобы мои пробежки обрели контекст. Google Maps великолепны, но мне нужно было что-то более настраиваемое, и я решил попробовать Mapbox. Сервис показался дороговатым, но настраивается он очень легко, и я решил, что красивая главная с хорошими картами того стоит.

Runkeeper отдаёт массив GPS-координат каждые 5 секунд во время пробежки. Из этих точек я строил SVG-линию с помощью javascript-библиотеки Mapbox. Сначала я боялся, что придётся писать сложный код, чтобы линия росла от старта к финишу, но оказалось, что хватает простого CSS-перехода на свойствах stroke-dash. В этом примере уменьшение offset до 0 постепенно проявляет линию.

path.line {
	/* Assuming a stroke length of 100px */
	stroke-dasharray: 100px;
	stroke-dashoffset: 100px;
	transition: all 500ms ease;
}

path.line.loaded {
	stroke-dashoffset: 0;
}

Час критики

Каждый вечер Stammy возвращался с работы, и мы разбирали новые функции и изменения. Ещё я отправлял ссылки или скриншоты Yuri, Dustin и другим друзьям, когда застревал или нужен был взгляд со стороны. Очень помогает чужая перспектива и регулярный свежий взгляд на проект. Многие идеи родились в разговорах или как ответ на замечание, что что-то ощущается не так.

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

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

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

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

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

Даже у самого вылизанного и продуманного дизайна найдутся шероховатости, и тщательное тестирование пойдёт ему на пользу.

Чат-головы

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

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

Раньше я каждый день общался через чат-головы Facebook. Это был очень естественный дизайн & способ общения. Хотелось похожего взаимодействия и здесь, привычного большинству. В будущем люди могли бы даже говорить со мной вживую через Messenger, а сайт работал бы клиентом.

Страница «о проекте»

Этот проект опирался на массу чужого софта и железа. Мне хотелось хорошо отдать всем должное и показать инструменты, которыми я пользуюсь. Я решил сделать простую ленту логотипов «powered by» со всеми партнёрами, где по наведению видно имя и вклад.

Ещё я добавил статистику по буррито, чтобы было веселее и человечнее, а не как медицинская панель. Ну кто не любит буррито?

Работает на сахаре

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

11 июля 2014

День запуска

Была пятница. Сайт был почти готов, так что я поехал к Alex за финальными штрихами. В таком деле всегда полезна вторая пара глаз, а если рядом один из мировых экспертов по Javascript, тем более.

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

За те несколько часов, что мы сидели и работали, он сделал расширение для Chrome, показывающее наш счётчик возраста на стартовом экране.

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

Я поменял пару настроек DNS, написал твит, и мы были в сети!

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

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

Всё шло гладко, пока мне не пришло сообщение от Stammy: я вешу 1517 фунтов. Довольно странно, ведь чувствовал я себя куда легче.

Код страницы Sport я давно не трогал, так что внезапно сломаться он не мог. В исходнике страницы значение было с запятой вместо точки: 151,7 вместо 151.7. Javascript игнорировал запятую и разбирал число неверно. Я сбросил кеш, и страница пришла в норму. Странно…

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

Конечно, пришлось ехать домой и разбираться.

Дело оказалось в простой настройке Django: интернационализация (её обычно сокращают до i18n) была включена для чисел и дат. Вместе с кешированием это портило отдельные куски после запросов из других стран. Отключение этой настройки было правкой в одну строку и обеспечило одинаковый вид для всех по всему миру.

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

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

На следующее утро

За несколько часов, пока я спал, люди выложили его на Reddit, Hacker News и по всему интернету. Я договорился с другом бежать в 7 утра, так что нехарактерно для себя проснулся рано. И хорошо, что проснулся.

Телефон разрывался от уведомлений. Несколько сотен твитов, куча писем. Я попытался открыть сайт, он грузился крайне медленно. В аналитике трафик за последние часы улетел в потолок, и от нагрузки сайт почти перестал отвечать. К счастью, масштабироваться на Heroku было легко, и я поднял его с 2 до 8 dyno. Веб-серверов хватило на этот вал, и всё снова стало открываться мгновенно.

За пару часов сайт перевалил за сто тысяч посетителей. К вечеру за двести тысяч. Похоже, людям понравилось. Твиты и сообщения всё шли и шли!

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

Я заметил, что сотни людей задают одни и те же вопросы:

• Как ты сделал анимации?
• Какие технологии используешь?
• Откуда ты знаешь показатели своей крови?
• Как мне сделать такое себе?

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

Так и начался этот пост…

Эпилог

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

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