01О проекте
ostohlo.com — собственный сайт студии, и он в этом списке по той же причине, что и остальные: спроектирован, сделан и поддерживается так же, как мы делаем клиентам. Страницы живут в базе и собираются нашим движком; шаблоны остаются файлами; интерфейс — дизайн-система, написанная с нуля, а не купленная где-то тема.
И это рабочий продукт, а не визитка. Здесь есть бесплатные инструменты без регистрации, калькулятор проекта, трёхуровневая партнёрская программа со своим кабинетом и блог, который наполняется с нашей платформы сразу на трёх языках.
02Почему сайт студии — трудный
У сайта студии нет заказчика, который пожалуется. Его пишут между клиентскими проектами, и каждая срезанная в нём мелочь живёт годами: отставший язык, страница, которую боятся править, потому что это руками написанный HTML, витрина работ, переставшая совпадать с работами.
У нас была ровно такая история. Сайт начинался статическими файлами, и первый переезд в базу показал цену этого: сравнение видимого текста говорило, что всё совпало, а сотни страниц при этом молча потеряли свой бандл стилей. С тех пор правило здесь такое: правку доказывает замер, а не то, что страница выглядит правильно.
03Задачи проекта
- содержимое в базе, шаблоны файлами — правка текста не требует разработчика;
- три языка, которые не расходятся: ключ, добавленный в один, добавляется во все три в той же задаче;
- своя дизайн-система — движение, WebGL-сцены и типографика, принадлежащие этому бренду;
- инструменты, которые действительно полезны и действительно бесплатны, и ничего не хранят на сервере;
- партнёрская программа с настоящими числами в кабинете, а не с обещанием на лендинге;
- измеримое качество: вёрстка до 320 px, чистая разметка данных, ноль битых ссылок.
04Движок: страницы в базе
Каждая страница — услуга, кейс, статья, юридический текст — это строка: путь, язык, заголовок, описание, тело, структурированные данные, флаги публикации. Одна точка входа собирает её шаблоном по виду, а общие шапка и подвал лежат файлами, которые пишет генератор, — поэтому обвязка трёхсот страниц меняется в одном месте.
Тонкость не в коде, а в файловой системе: веб-сервер отдаёт любой существующий на диске файл и только потом уходит в приложение. Положить в публичный каталог файл со старым именем страницы значит незаметно отключить для неё базу — ровно тот вид поломки, который не оставляет ошибки нигде.
05Три языка, английский в корне
Английский живёт в корне, русский — в /ru/, украинский — в /uk/. Какой язык стоит в корне, записано в коде ровно в одном месте, и витрина знает тот же факт одной константой — сверка сравнивает их, потому что два ответа на этот вопрос и есть способ родить наполовину переведённый сайт.
Строки интерфейса — словарь с пер-языковыми сборками, и правило здесь абсолютное: ключ, добавленный в один язык, добавляется во все три в той же задаче. Недостающий ключ не даёт ошибки — он показывает читателю чужой язык, а это самый дорогой вид молчания.
06Своя дизайн-система
Нынешний интерфейс — четвёртое поколение этого сайта, и написан он с нуля: токены, типографика, компоненты, движение и набор WebGL-сцен за геройскими блоками. Исходники лежат в одном месте и собираются в бандлы с хешем в имени; правка собранного файла руками просто потеряется при следующей сборке, поэтому спорить тут не о чем.
Движение здесь включено всегда — без гейта «уменьшить анимацию», и это осознанное решение владельца, у которого есть цена: всё обязано оставаться читаемым и достижимым на 320 px, а каждая анимация появления — доходить до конца. И то, и другое проверяет проба, которая прокручивает страницу дважды и ждёт появления: блок, который не показался, невидим для снимка, сделанного слишком рано.
07Бесплатные инструменты, которые ничего не хранят
Семь небольших инструментов: генератор паролей и проверка утечек, генератор QR, сборщик UTM, транслитератор в slug, счётчик символов и проверка телефона. Без регистрации, без аккаунта и — это главное — без хранения на сервере. То, что инструмент помнит, он помнит в браузере посетителя, и только настройки, никогда не содержимое.
Проверка утечек — самый наглядный пример: пароль не отправляется никуда. Из браузера уходит короткий префикс его хеша, а ответ собирается на месте, и в этом вся разница между полезным инструментом и красиво оформленным способом собирать пароли.
08Партнёрская программа с настоящим кабинетом
Три уровня рефералов: партнёр зарабатывает на приведённых клиентах, на партнёрах, которых привели они, и на уровне ниже. Кабинет показывает то, что действительно произошло: переходы по кампаниям, регистрации, начисления, — и открывается ссылкой с токеном, а не паролем, который никто не запомнит.
Токен убирается из адреса до первого запроса, запросы идут без учётных данных и без реферера, а демо-режим вообще не ходит на сервер. Кабинет партнёра — место, где показывают деньги; он не должен быть заодно местом, где ссылка утекает вместе с аккаунтом.
09Блог, который наполняется сам
Статьи приходят из Astrina — нашей же платформы — через подписанную точку: один материал, три языковые версии, каждая ложится в своё языковое дерево со взаимными альтернативами. Картинки забираются к себе, а не подключаются чужой ссылкой, и карточка статьи в индексе блога пишется тем же проходом.
Автоматика такого рода — место, где происходит тихий вред, поэтому приём нормализует то, что получил: внутренние ссылки переписываются на язык статьи, а оставшиеся сырой разметкой становятся настоящими. Правило простое: читателя русской версии нельзя уводить на английскую страницу ссылкой, которая просто хорошо выглядит в исходнике.
10SEO, GEO и машинные читатели
У каждой страницы один заголовок, одно описание, канонический адрес, взаимные альтернативы на три языка плюс умолчание, Open Graph и структурированные данные — и всё это печатается из одного места, потому что страницы, отвечающие за свои мета-теги сами, — это страницы, которые их забывают.
Для машинных читателей есть сводный файл с разделами, продуктами и языками, собираемый из базы, а не написанный руками: написанный руками месяцами врал числом продуктов. Карты сайта — страниц и изображений — пересобираются ночью, и всё изменившееся тем же прогоном объявляется поисковикам.
11Формы, почта и внешний мир
Форма брифа — единственное место на сайте, где начинаются деньги, поэтому она самая защищённая: список разрешённых методов, ловушка для ботов, лимиты на адрес и общий, проверки размера каждого поля и вложение, принимаемое по настоящему типу содержимого, а не по имени. Заявка пишется в базу до того, как что-то отправлено: потерянное письмо не должно означать потерянного клиента.
Всё, что сайт отправляет наружу — почта, уведомления, внешние вызовы, — идёт через прокси и отказывает наглухо, если прокси недоступен. Адрес самого сервера не доходит до третьих сторон, а письма уходят с ящика, который действительно разрешён записями домена.
12Технологии
- PHP 8.4 и MariaDB: страницы в базе, шаблоны файлами, одна точка входа;
- своя дизайн-система — токены, компоненты, движение, WebGL-сцены, собираемые в бандлы с хешем;
- три языка с пер-языковыми сборками словаря и проверкой паритета;
- бесплатные инструменты, работающие в браузере и ничего не хранящие на сервере;
- партнёрский движок с тремя уровнями рефералов и кабинетом по токену;
- подписанный приём статей из Astrina, своя аналитика и своя рекламная сеть — только в блоге.
13Результат
Сайт, где правка текста — это редактирование в панели, а не выкладка; где три языка держатся вровень, потому что правило выполняется в той же задаче; где раздел работ собирается из одного справочника, и добавление кейса не может оставить половину сайта с прежним числом продуктов.
И сайт, который меряют как клиентский проект: каждый опубликованный адрес отвечает, внутренние ссылки без перенаправлений и ошибок, один заголовок и одно описание на страницу, изображения объявлены своей картой, а вёрстка проверена до 320 px на всех трёх языках.
14Выводы
Делать собственный сайт по тем правилам, которые продаёшь, неудобно — и в этом смысл: каждая срезанная здесь мелочь это мелочь, которую однажды срежешь клиенту. Наш научил нас трём вещам. Класть содержимое туда, куда дотягиваются те, кто его пишет. Делать языки правилом, а не намерением — иначе они разъезжаются за месяц. Доказывать правки замером: этот сайт однажды прошёл сравнение по виду, потеряв стили на сотнях страниц.
Если вам нужен сайт, который является продуктом, а не буклетом — с инструментами, кабинетом, несколькими языками и интерфейсом, принадлежащим вам, — это ровно то, что мы делаем.
