Подяки
Усі технології, на яких працює engineer.company: що потрапляє у ваш браузер, що збирає сторінки і що перевіряє їхню якість.
Майже все тут створили інші люди й безкоштовно віддали світові. Ця сторінка називає все поіменно, бо консалтингова компанія, яка не каже, на чому працює, просить довіри, якої сама не виявляє.
Це водночас найкоротша чесна відповідь на питання «а з чим ви взагалі працюєте». Список нижче — не брошура про наші можливості, а перелік компонентів самого цього сайту, і кожен його рядок ви можете перевірити у власному браузері.
Ця копія сайту — від : тоді востаннє змінилася найновіша сторінка в ній. Кожен тематичний піддомен має такий самий рядок про свою копію, яку зібрано пізніше за цю, і цей рядок це показує.
Що доходить до вашого браузера
П’ять речей, і більше нічого: HTML, одна таблиця стилів, три вебшрифти, зображення та один невеликий власний скрипт.
- HTML, повністю згенерований ще до того, як ви його запросили. Кожна сторінка — це файл на диску, а не шаблон, який збирається на кожен запит.
- Один CSS-бандл, який під час збірки склеюється з окремих файлів, отримує хеш вмісту в назві й віддається разом із хешем Subresource Integrity, щоб ваш браузер міг перевірити, що файл дійшов без змін. До нього входить neat-annotations від Max Syabro (MIT) — стрілки й нотатки на полях у стилі «від руки», намальовані самим лише CSS.
- Шрифт Ubuntu від Dalton Maag, створений для Canonical, за ліцензією Ubuntu Font Licence. Ми віддаємо його з власного сервера: вебшрифт із чужого CDN — це третя сторона, яка спостерігає, як ви читаєте.
- Ubuntu Mono — моноширинне накреслення тієї самої родини, за тією самою ліцензією, і віддається так само. Ним набрано код на цих сторінках, і він завантажується лише там, де такий код є.
- Шрифт Shantell Sans, створений на основі почерку художниці Shantell Martin, яка пише маркером, від Arrow Type / Stephen Nixon, за ліцензією SIL Open Font License. Ним написані нотатки на полях, він віддається так само й завантажується лише на тих сторінках, де така нотатка є.
- Зображення WebP і PNG, розмір яких задається під час збірки. Стіни, на яких побудовані ці сторінки, — це фотографії. Дві — з Unsplash: Tim Mossholder зняв темну штукатурку, Joe Woods — білу цеглу. Ще три — від John Snow, зняті на Galaxy S22 Ultra й подаровані цьому сайту: світла штукатурка, пофарбована цегла та кахляна стіна. Світла тема використовує одну зі своїх чотирьох стін, яку обирають під час збірки сторінки, тож після кожної публікації сайт виглядає по-новому. Ліцензія не вимагає зазначати авторство, але сторінці, яка називає навіть дизайнера шрифту, про це не треба нагадувати. Знак бренду, шестірня, маскот у всіх позах, у яких ви його побачите, портрет і дві накладені одна на одну фотографії нашого офісу в Копенгагені на сторінці «Про нас» — наші власні: ми зняли або намалювали їх самі й очистили від метаданих, перш ніж додати в репозиторій.
- Один запозичений набір піктограм. Зображення того, з чого зроблено роботу, — по одному біля кожного досягнення в кожному списку, ряд під кожним розбором, по одному за кожним числом і кожною послугою на головній сторінці, — а також усі інші піктограми сайту: позначки в обох меню й за кожною сторінкою, контактний рядок, соцмережі, перемикач мов, стрілки й шеврони. Усі вони взяті з Font Awesome Free 7.3.1 від Fonticons, за ліцензією CC BY 4.0. Усього їх 267, вони зберігаються в цьому репозиторії й віддаються з цього хоста, як і все інше. 36 з них — не зображення ідеї, а власні логотипи технологій (PostgreSQL, Linux, Docker, Go, Swift, Rust та інших), які називають те, на чому робота справді побудована. Логотип ставимо там, де його підтверджує запис, а звичайне зображення — там, де ні: робота з базами даних велася також на MS SQL і BigQuery, тож біля неї стоїть малюнок бази даних, а не логотип одного постачальника, а робота, яка полягала у відході від певної технології, ніколи не позначається її логотипом. Торговельна марка представляє свого власника, тож точний запозичений логотип кращий за перемальований під стиль нашого набору, а там, де логотипа немає, ми беремо звичайне зображення, а не вигадуємо власне. Фірмовий стиль — повністю наш: знак бренду, шестірня, маскот, портрет і фотографії. Авторство зазначено на цій сторінці, а не у файлах, бо під час збірки HTML мініфікується і коментар з атрибуцією, який постачається з кожною піктограмою, вилучається.
На цьому сайті виконується один скрипт: наш власний, близько кілобайта, на сторінках, де є список, — роботи, теми, послуги, кейси та карта сайту, — де він фільтрує цей список, поки ви вводите текст. Він ні з ким не обмінюється даними й нічого не запам’ятовує. Жодних cookie сайт не встановлює. Із серверів інших компаній нічого не запитується — ні аналітики, ні шрифтів, ні вбудованого відео, ні банера згоди, бо погоджуватися нема на що. Відкрийте панель мережі в браузері й порахуйте хости: він один.
Як створюються сторінки
- Hugo — генератор статичних сайтів, написаний на Go. Шаблони, таксономії, усі мови та стрічки — його робота.
- Markdown і шаблони Go для написаних вручну сторінок та макетів.
- SQLite — портфоліо пишуть не тут. Воно зберігається в багатомовній базі даних резюме, а в цей сайт його експортує скрипт на Python, тож кожен факт записують один раз, і він з’являється всюди, де йому місце.
- Python — для цього експортера й для генерації іконок сайту за допомогою ImageMagick з одного зображення знака бренду.
Як ми це доводимо
Обов’язкові перевірки якості запускаються на тій самій машині, де пишеться сайт, а не в хмарному сервісі збірки, і кожне зауваження там — помилка, а не попередження.
- vnu перевіряє HTML, Stylelint — CSS.
- axe-core перевіряє 39 репрезентативних сторінок — по одній на кожен шаблон, кожною мовою — на відповідність WCAG 2.2 рівнів A та AA в обох колірних темах, і ця перевірка входить до обов’язкових, а не стоїть осторонь. Сайт налічує 2 253 сторінок; автоматична перевірка виявляє близько третини того, що вимагає WCAG, тому звіт нижче ведеться окремо за кожним критерієм, а не зводиться до позначки «пройдено».
- Puppeteer керує headless Chromium для перевірок, яких валідатор зробити не може: вимірювання контрасту, порядок фокуса, розмір цілі, довжина рядка, вихід за межі вікна, розбиття на сторінки під час друку та попіксельне порівняння для візуальної регресії через pixelmatch. Ці перевірки запускаються на вимогу, а не з кожним комітом, бо тривають близько двадцяти хвилин: швидку половину беруть на себе обов’язкові перевірки, а повільну запускає людина. Puppeteer також створює зображення, яке показують інші сайти, коли хтось ділиться посиланням звідси, тож цю картку зібрано зі справжніх стилів і шрифту сайту, а не намальовано окремо.
- Lighthouse стежить за бюджетами продуктивності; lychee перевіряє, що кожне посилання досі веде куди слід.
- Prettier, markdownlint, ESLint, Ruff, basedpyright, yamllint, ShellCheck та codespell підтримують вихідний код у порядку; gitleaks стежить, щоб жоден секрет ніколи не потрапив у коміт.
- Task запускає все це — по одній команді на кожне завдання, а pre-commit повторно запускає перевірки окремих файлів під час кожного коміту, тож про обов’язкові перевірки нікому не треба пам’ятати.
Де це працює
Усе це робить одна маленька машина: одноядерний сервер DigitalOcean з 512 МБ пам’яті та диском на 10 ГБ, розташований у Торонто, Канада, за адресою 165.227.39.206. Цю адресу DNS і так повідомляє кожному, хто запитає, тож, вказуючи її тут, ми лише заощаджуємо вам один запит, а не розкриваємо щось нове. Що сервер записує під час роботи, описано на сторінці про конфіденційність.
- Debian — операційна система.
- Caddy відповідає на кожен вебзапит і сам оновлює HTTPS-сертифікат від Let’s Encrypt.
-
Agate,
Gophernicus та
Tor обслуговують три інші входи: цей сайт
також є капсулою Gemini за адресою
gemini://engineer.company, Gopher-норою заgopher://engineer.companyта onion-сервісом заhttp://engineer2ezpeji52ipphljcflzyhetvy5r6tnqubtq45nzlxxv6rsqd.onion/. Усі чотири читають ту саму теку з файлами, тож одне розгортання оновлює їх усі, і жоден не може розійтися з іншими. Onion-сервіс — єдиний вхід, який ми могли додати, не відкриваючи порту: tor сам відкриває вихідні з’єднання до introduction points, тож відкриті порти машини лишаються такими самими, як і були. Вебсайт також надсилає заголовокOnion-Location, тож Tor Browser сам пропонує onion-адресу. Адреса починається зengineer, бо ми витратили процесорні години, щоб зробити її читабельною, — це зручність, а не доказ. Той самий префікс доступний кожному, хто витратить ті самі години, тож звіряйте всю адресу, а не її початок. - Ansible описує цей сервер як код, щоб його можна було відтворити, а не відновлювати з пам’яті.
- Soft Serve — git-сервер, на якому працює Git Hub за адресою git.engineer.company. Там зберігається і вихідний код цього сайту.
- restic робить резервні копії й зберігає їх поза сервером.
- Cloudflare відповідає за DNS — і лише за DNS. Сайт свідомо не пропускається через проксі: відкритість для нас цінніша за захист, який він дає, а проксі поставив би ще одну компанію між вами й нами.
- Пошта — Apple iCloud, і тому адреса зі сторінки контактів веде до поштової скриньки, а не до маркетингової платформи.
Де ще відповідає сайт
Усе описане вище — це один сайт, і розміщений він на engineer.company. Ту саму роботу показують і тематичні адреси — по одній на кожен напрям: хто потрапляє на одну з них, спершу бачить цей напрям, а сторінки самої компанії — без змін, і кожна з цих сторінок вказує на копію на engineer.company як на оригінал.
- data.engineer.company — бази даних і пайплайни, що їх наповнюють.
- platform.engineer.company — хмарна інфраструктура та засоби її розгортання.
- software.engineer.company — програмне забезпечення, зроблене так, щоб його можна було супроводжувати, а не лише здати.
- advisory.engineer.company — консультування, архітектура та технічне лідерство.
- brand.engineer.company — бренд і маркетинг.
- support.engineer.company — комп’ютери, мережі та служба підтримки, на яких тримається робота офісу.
- ditte.engineer.company — власні сторінки засновниці, які також відкриваються за адресою daryna.engineer.company.
А git.engineer.company — це вхідна сторінка git-сервера, згаданого вище: репозиторії приватні й доступні через SSH, тож у вебі видно тільки цю сторінку.
Сайт повністю доступний і українською — саме ці сторінки ви зараз читаєте, — а також норвезькою і шведською: кожна сторінка проіндексована й указана в картах сайту поряд зі своїми данськими та англійськими відповідниками. Перемикач мов у верхній панелі цих трьох мов не пропонує, тож читачі англійської й данської версій потрапляють сюди за посиланням зі своєї копії цієї сторінки.
Стандарти, яких він дотримується
- WCAG 2.2 рівень AA, який забезпечується перевірками, а не лише декларується, — і один критерій прямо названо винятком, а не замовчано. Підказки, що з’являються, коли ви наводите вказівник на позначку або фокусуєте її, не можна закрити клавішею, бо для цього потрібен скрипт, а цей сайт виконує лише один. Критерій 1.4.13 виконано, крім цієї половини, і ми пишемо про це тут, а не залишаємо комусь на відкриття.
- Структуровані дані schema.org, що розмічають лише те, що відповідає дійсності й видно на сторінці.
- Web App Manifest, щоб сайт можна було встановити як застосунок.
- RSS, Atom та JSON Feed — усі три з повним текстом. Дві XML-стрічки, а не одна, бо деякі програми для читання стрічок підтримують лише один із двох форматів, і неможливо передбачити, який саме.
-
RFC 9309
robots.txt, який дозволяє все — і пошуковим краулерам, і ШІ-системам однаково, бо написане тут існує, щоб його читали; він же називає карту сайту, за якою йдуть і ті, й інші. Є й зручний для читання покажчик тих самих сторінок — для тих, хто воліє переглядати, а не розбирати програмно. -
RFC 9116
security.txt, а такожhumans.txt,llms.txt,agents.txtтаai.txtдля машин, які приходять із запитаннями, — іads.txt, який нікого не уповноважує, бо рекламних місць тут не продають. -
Gemini,
RFC 1436 Gopher та
onion-сервіси Tor: ті
самі сторінки, які віддаються всіма трьома протоколами за адресами
gemini://engineer.company,gopher://engineer.companyіhttp://engineer2ezpeji52ipphljcflzyhetvy5r6tnqubtq45nzlxxv6rsqd.onion/, з тієї самої теки файлів, що й ця сторінка, — одне розгортання оновлює всі чотири. Для Gemini і Gopher потрібен окремий клієнт, а не браузер; для onion-сервісу — клієнт Tor, і найпоширеніший із них — Tor Browser. Gopher взагалі не має шифрування, тож те, яку сторінку ви читаєте, передається відкритим текстом; Gemini це шифрує, але мережа, з якої ви читаєте, все одно бачить, яку адресу ви запросили. Через onion-сервіс вона не бачить ні того, ні іншого — і з чотирьох протоколів таке можливе лише з ним. Сама адреса і є відкритим ключем сервісу, тож з’єднання автентифіковане й зашифроване ще до першого байта HTTP:http://тут — свідомий вибір, а не недбалість, а сертифікат лише підтвердив би ім’я, яке адреса вже доводить математично.
Перевірте самі
Усе вище — це твердження, а один із попередніх розділів, «Як ми це доводимо», називає інструменти, які ми запускаємо на власній машині, — тобто ми самі собі виставляємо оцінки. Нижче — ті самі питання, але їх ставлять ті, хто про нас ніколи не чув. Кожне посилання запускає живу перевірку цієї сторінки або тієї, що зараз у вашому адресному рядку; жодне з них не вірить нам на слово, і жоден із цих сервісів не наш.
-
Валідатор розмітки W3C
перевіряє HTML цієї сторінки на відповідність HTML Living Standard. Це той
самий рушій, що й
vnuвище, але запущений W3C, а не нами. -
CSS-валідатор W3C
читає таблицю стилів цієї сторінки. Він, найімовірніше, покаже помилки, тож
прочитайте їх, перш ніж вірити: станом на серпень 2026 року він перевіряє за
профілем, який не підтримує
system-ui,@property,clamp()уfont-sizeта анімації, керовані прокруткою, — хоча всі чотири вже підтримуються браузерами і всі чотири тут використано. На /terms/ він видав 176 зауважень, і 175 з них були саме такими. Те єдине, що було іншим, виявило справжній дефект:rotate: 0degу стані спокою втрачає одиницю під час мініфікації,rotate: 0не є кутом, і браузер відкидає весь рядок — тож анімація потрапила в продакшн без обертання, з яким її написали. Stylelint цього не бачить, бо читає таблицю стилів, яку пишемо ми, а мініфікація переписує її дорогою до вас. Stylelint і далі перевіряє вихідний код, а тепер наша власна перевірка читає ще й те, що справді віддається браузеру. - Валідатор стрічок W3C перевіряє стрічку Atom, а той самий сервіс — стрічку RSS. Він попереджає, що більшість записів мають однакову дату зміни, і це попередження слушне: дати беруться з історії git, і більшість цих сторінок справді були написані в тих самих кількох комітах. Ми воліємо показати попередження, ніж вигадати дату.
- Валідатор JSON Feed перевіряє третю стрічку, якої сервіс W3C не охоплює — він старший за цей формат.
- PWABuilder читає маніфест і все інше, завдяки чому сайт можна встановити, — з машин Microsoft, а не з наших.
- Перевірка інтернаціоналізації W3C читає оголошення мови й кодування, завдяки яким кожна мовна версія сайту правильно відображається для свого читача.
- Schema Markup Validator читає структуровані дані, а Rich Results Test від Google показує, що з ними робить пошукова система.
- PageSpeed Insights запускає Lighthouse з машин Google, а не з наших — швидкодія, доступність, найкращі практики та SEO, а там, де відвідувачів достатньо, — ще й дані реальних користувачів.
- HTTP Observatory від Mozilla оцінює заголовки безпеки, а Qualys SSL Labs — налаштування HTTPS під ними.
- Security Headers — незалежна друга думка щодо заголовків безпеки від зовсім іншої команди.
Твердження про доступність жоден із них перевірити не може, і ми воліємо сказати про це самі, ніж дозволити зеленому значку натякати на протилежне. Автоматичні інструменти знаходять у кращому разі близько третини порушень WCAG; решта — це судження про те, чи описує заголовок свій розділ і чи каже alt-текст те, що потрібно, а машина таких суджень не ухвалює. Перевірки вище — це мінімальний рівень, а не доказ. Якщо ви користуєтеся тут екранним читачем і щось читається неправильно, напишіть нам — це той звіт, якого ми самі створити не можемо.
Дякуємо
Кожен проєкт вище підтримують люди, які зовсім не були зобов’язані ним ділитися. Якщо ви теж працюєте з цим стеком, саме там ваші гроші та звіти про помилки принесуть найбільше користі.
А якщо цей стек відповідає вашому уявленню про інженерію, доручіть роботу нам.
