Ostohlo — наш власний сайт за тими самими правилами

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Висновки

Робити власний сайт за тими правилами, які продаєш, незручно — і в цьому сенс: кожна зрізана тут дрібниця це дрібниця, яку колись зріжеш клієнтові. Наш навчив нас трьох речей. Класти вміст туди, куди дотягуються ті, хто його пише. Робити мови правилом, а не наміром — інакше вони роз’їжджаються за місяць. Доводити правки заміром: цей сайт одного разу пройшов порівняння за виглядом, втративши стилі на сотнях сторінок.

Якщо вам потрібен сайт, який є продуктом, а не буклетом — з інструментами, кабінетом, кількома мовами та інтерфейсом, що належить вам, — це саме те, що ми робимо.