До змісту сторінки
Звід законів конвеєра сайтів sitegen
К одекс
Закони, написані помилками
Усього номерів: 94. Чорні стережуть ворота: 69. Червоні тримаються процедурою, інструментом або ручним прийманням: 25.
Кожен закон тут колись був помилкою на живому сайті. Її записали, спіймали пасткою і поставили ворота, щоб вона більше не пройшла. Ця сторінка показує механізм, а не обіцянку.
Преамбула
Конвеєр не вірить обіцянкам, навіть власним. Одна помилка чиниться один раз, а потім за неї відповідає машина. Ось що стається з кожною помилкою, знайденою на будь-якому сайті власника.
I Урок Запис у своді: симптом, причина, правило, звідки відомо.
II Пастка Сторінка, на якій перевірка зобов'язана впасти.
III Ворота Перевірка вчиться ловити пастку і закриває викладку.
IV Самоперевірка Усі пастки спіймані, чиста сторінка проходить.
V Решта сайтів Виправлений сайт і повторний прогін по інших.
Журнал від 10 жовтня 2026 р. до 4 листопада 2026 р.: 160 викладок на 55 проєктів за 14 днів, 90 380 перевірок у воротах. Серед них 19 викладок з помилкою на живій адресі. Журнал їх не ховає. Пасток усього 63: 42 мусять упасти, 21 мусять пройти.
Вісім книг
I Розкладка і пристрої 14 II Дотики і жести 6 III Safari і WebKit 6 IV Відео і медіа 7 V Швидкість і шрифти 9 VI Кеш і викладка 18 VII Мови і тексти 6 VIII Перевірки перевірок 28
Гортайте вбік →
L-001 1 / 3
Планшет отримав телефон
Симптом. iPad показав телефонну верстку й застиглу картинку замість живої сцени.
Причина. Умова поєднувала дотик із шириною до 1180 пікселів, і дотик вирішував за розкладку.
Страж
Звідки
webfolio/tech, перевірка на iPad, 10.10
¶ Телефон визначається лише шириною до 760 пікселів. Дотик це окрема вісь, а планшет із дотиком лишається планшетом.
L-109 2 / 3
Шапка на 525 пікселів
Симптом. На екрані 375 пікселів усі п'ять лендингів їздили вбік. Ворота мовчали.
Причина. Бренд не стискався, кнопка розтяглась на всю ширину, а мобільна емуляція розширила вікно під вміст, тож вимір збігся сам із собою.
Страж
Звідки
demo-pharma, 17.10
¶ У шапці бренд стискається, кнопка йде в меню, а ширину перевірка бере від емуляції, не від вікна.
L-097 3 / 3
План спустився на сусідню секцію
Симптом. У невисокому вікні заголовок наступного розділу лежав просто на плані, а панель підсумків на тексті під нею.
Причина. Липка панель була прямою дитиною спільної сітки й їхала крізь усі секції. Її висота не залежала від вікна.
Страж
Звідки
metalgen, 13.10
¶ Липка панель живе в обгортці разом із сусідами, а її висота дорівнює вікну мінус шапка. Де мінімум не вміщується, липкості немає.
Гортайте вбік →
L-020 1 / 3
На iPad усе стоїть
Симптом. Паралакс, живе тло, лінза під курсором не рухалися на планшеті взагалі.
Причина. Усі ефекти чекали на курсор, якого на дотиковому екрані немає.
Страж
Звідки
culture, dance, shop
¶ Кожен ефект від курсора має друге джерело: автодрейф або прокрутку.
L-021 2 / 3
Стрічка, яку не можна погортати
Симптом. Свайп смикався і не мав інерції, а з touch-action: pan-y стрічка не гортала пальцем зовсім.
Причина. Жест перехоплював скрипт і сперечався з браузером. Первісне правило теж було хибним, і це показали самі ворота.
Страж
Звідки
culture, перевірка воріт, 10.10
¶ Стрічка на дотиках це рідний горизонтальний скрол і scroll-snap. Жест належить браузеру.
L-023 3 / 3
Робот падає, якщо не втримати
Симптом. Дія за утриманням нічого про себе не казала, і робот просто падав під пальцем.
Причина. Затримка без видимого прогресу виглядає як поломка.
Страж
Звідки
mascot, 10.10
¶ Утримання показує прогрес, підсвічує ціль і спрацьовує також від дотику. Вібрація лише додаток: на iOS її немає.
Гортайте вбік →
L-030 1 / 3
Скло, якого немає
Симптом. Safari до вісімнадцятої версії не малював скла, у Chrome усе було гаразд.
Причина. Значення фільтра було записане через змінну, а мінімізатор ще й викидав префікс.
¶ Префіксне значення пишеться буквально, а збірка націлена на safari15.
L-034 2 / 3
Чорний екран
Симптом. На iOS 3D-сцена зникала, і лишалася чорна пляма.
Причина. Контекст WebGL система може забрати в будь-яку мить. Цього ніхто не обробляв.
¶ Втрату контексту обробляють: запобігають типовій дії, показують кадр-заглушку, відновлюють сцену.
L-035 3 / 3
Chrome не свідок
Симптом. Рвані ролики, скло, анімації від прокрутки ламалися лише в Safari.
Причина. Усе перевірялося в одному рушії, і решта світу здавалася справною.
¶ Кожен сайт проходить WebKit у двох орієнтаціях iPad. Останнє слово за справжнім пристроєм.
Гортайте вбік →
L-040 1 / 4
Відео, яке не почало грати
Симптом. Safari на iPhone не відтворював ролик зі статики Worker.
Причина. Статика не відповідає на запити частин файлу, а без статусу 206 Safari відмовляється грати.
¶ Відео живе лише в сховищі, що вміє Range. У статиці Worker відео немає.
L-042 2 / 4
Склейка на старті
Симптом. Ролик у циклі починався рваним кадром.
Причина. Склейка була вшита в перші кадри вихідника.
¶ Початок обрізають, кінець зводять із початком плавним переходом і дивляться на кадри своїми очима.
L-045 3 / 4
Прев'ю, що зупинило викладку
Симптом. Каталог почав вантажити ролики-прев'ю одразу при відкритті, і конвеєр відмовився викладати власне портфоліо.
Причина. Тяжке відео стояло в першому кадрі, і замір телефона не вклався в бюджет.
Страж
Звідки
портфоліо, 10.10
¶ Ролики-прев'ю вмикаються після першої дії відвідувача. До того показують знімок.
L-046 4 / 4
Бита рамка над перемикачем мови
Симптом. На повільній мережі замість персонажа висіла бита рамка, та ще й поверх перемикача мови.
Причина. Картинку показали раніше, ніж вона була готова, і місця для неї ніхто не залишив.
Страж
Звідки
mascot, Chrome на Android, 11.10
¶ Картинка не з'являється, поки не готова: заглушка того самого розміру, поява після декодування, свій запасний вигляд. Керування ніщо не перекриває.
Гортайте вбік →
L-050 1 / 2
Один символ на 130 кілобайтів
Симптом. Знак гривні потягнув додаткові набори обох шрифтів.
Причина. Символа немає в кириличному підмножинні, і браузер довантажує цілий файл.
¶ Ціна пишеться «грн», якщо символа немає у підмножині.
L-054 2 / 2
Хибний провал контрасту
Симптом. Вимір знижував доступність за текст, який насправді був контрастним.
Причина. Текст проявлявся через прозорість, і вимір застав його напівпрозорим.
¶ Текст проявляють обрізанням, а не прозорістю. Саме так проявляються закони на цій сторінці.
Гортайте вбік →
L-060 1 / 6
Старий код у новому будинку
Симптом. Після викладки відвідувач бачив старі скрипти і стилі ще години.
Причина. Довгий кеш стояв на файлах без відбитка в назві.
Страж
Звідки
craftgen, mascotgen, showgen
¶ Довгий кеш лише у файлів із хешем у назві. HTML і JSON без хеша завжди перевіряються наново.
L-061 2 / 6
Викладено те, чого немає в історії
Симптом. На живих сайтах опинялося незакомічене.
Причина. Викладали з робочої папки.
¶ Викладається лише коміт: архів, чиста збірка, ворота. Прапорця для обходу немає.
L-089 3 / 6
Форма, що не сховалась
Симптом. Після відправлення форму сховали атрибутом, а вона лишилася на екрані. Подяка поїхала вниз.
Причина. Правило display: grid сильніше за вагу атрибута hidden у браузері.
¶ У базових стилях hidden завжди перемагає, а блок подяки прокручується в центр.
L-088 4 / 6
Хеш, який зламав один символ
Симптом. На живій адресі стилі не застосувались. Локальні ворота були зелені.
Причина. Git привіз файли з CRLF. Збірка рахувала хеш із поверненням каретки, а браузер перед хешуванням замінює CRLF на LF.
Страж
Звідки
estetium-growth, 11.10
¶ Вбудований код приводять до LF до хешування, а репозиторій сайту фіксує кінець рядка.
L-067 5 / 6
Секрет у викладці
Симптом. Ключ міг поїхати разом зі статикою.
Причина. У збірку потрапляє все, що лежить поруч.
Страж
Звідки
аудит, 10.10
¶ Вміст збірки перевіряється на ключі, а файли секретів не потрапляють у репозиторій.
L-092 6 / 6
Помилка, якої вже немає
Симптом. Перевірка живої адреси оголосила 404 на новому скрипті. За двадцять секунд усе працювало.
Причина. Край мережі віддав новий HTML раніше за нові файли.
¶ Живу адресу перевіряють до трьох разів із паузою. Помилка це те, що тримається після розкатки.
Гортайте вбік →
L-070 1 / 3
Переклад колись потім
Симптом. Сайт вийшов однією мовою, а переклад відклали.
Причина. Потім не настає, а тексти встигають розбігтися.
Страж
Звідки
правило власника
¶ Дві мови з першого дня, українська перша. Корінь обирає: збережений вибір, мова браузера, українська.
L-072 2 / 3
Кирилиця на англійській сторінці
Симптом. На англійській версії лишилися повідомлення про помилки чужою мовою.
Причина. Тексти рушія жили окремо від словника.
¶ Тексти рушія і помилок проходять через той самий словник.
L-094 3 / 3
Сторінка перекладена, вбудоване ні
Симптом. В англійській версії лишилися українські кнопки 3D-переглядача, підписи креслень і одиниці виміру.
Причина. Статична перевірка HTML не бачить того, що всередині фрейму, тіньового дерева і SVG.
Страж
Звідки
boxes, власник, 12.10
¶ Перекладається все, що бачить або чує відвідувач. Вбудований компонент отримує мову від сторінки.
Гортайте вбік →
L-080 1 / 7
Ворота, що пройшли порожнечу
Симптом. Перевірка радісно прозвітувала про нуль місць, а нові варіанти ніхто не перевіряв.
Причина. Порожній набір вважався успіхом.
¶ Порожній набір сторінок це провал.
L-085 2 / 7
Урок, який зіпсувався сам
Симптом. Скрипт-генератор зіпсував спецсимвол у шляху, а потім і текст цього самого уроку.
Причина. У шляхах Windows \b стає символом backspace, а рядок заміни по-своєму читає знак долара.
Страж
Звідки
сесії sitegen і shop, 10.10
¶ Код із регулярками і шляхами правлять редактором або функцією заміни, а потім запускають самоперевірку.
L-106 3 / 7
Довгий стек шрифтів
Симптом. Перше малювання на телефоні коливалося від 1,9 до 6,4 секунди.
Причина. Браузер перебирав довгий перелік шрифтів під час розрахунку стилів. Системний стек дав стабільні 1,2–1,4 секунди.
Страж
Звідки
Estetium, 14.10
¶ Стек це свій шрифт, системний і родовий. Понад п'ять названих чужих родин уже попередження.
L-107 4 / 7
Диск C: дійшов до нуля
Симптом. У агентів падали знімки і збірки: за два дні накопичилося 1178 папок профілів Chrome.
Причина. Папка не видалялася, поки Chrome тримав файли, а після падіння прибирання не запускалося зовсім.
¶ Тимчасові файли живуть на D:, профіль видаляють із повторами, а старе прибирається при кожному запуску.
L-113 5 / 7
Порожній документ, що пройшов
Симптом. Сторінка стала порожньою на будь-якій ширині, а частина воріт її пропустила: за край нічому вилазити.
Причина. Правило ховало розмітку за атрибутом і зачепило сам елемент html.
Страж
sg.layoutsg.webkitsg.nogpusg.lh
Звідки
metalgen, 18.10
¶ Правила приховування діють лише всередині body. Сторінка без жодного видимого елемента це помилка.
L-117 6 / 7
Кнопка, яка чекала на дані
Симптом. На телефоні перший дотик по кнопці заявки сам запускав завантаження даних, і заявка падала.
Причина. Кнопка брала довжину стіни з даних, що приходили після першої дії.
Страж
Звідки
lab-compact, 04.11
¶ Кнопка прийому не залежить від того, чи встигли дані. Якщо вони не прийшли, вона бере те, що бачить відвідувач.
L-120 7 / 7
Прямокутник замість каструлі
Симптом. Сцени були складні, а дивитися не було на що: варильна поверхня прямокутником, люди кружечками.
Причина. Техніка випередила предмет, а ворота цього не оцінюють.
Страж
Ручне приймання, власник
Звідки
власник, 04.11
¶ Предмет упізнається без підпису. Абстрактна заглушка в зданій роботі це брак, якою б сильною не була техніка.
Реєстр
Повний перелік, номерів: 94. Знак ¶ веде до статті. Статей на цій сторінці: 31, решта лишаються в оригіналі зводу.
Гортайте вбік →
Стражі
Воріт усього: 23. Кількість законів і пасток порахована зі зводу, перевірені місця із журналу, за всі 160 викладок.
sg.html
Заголовок, опис, canonical, hreflang, значок, кожна мова у своїй папці, постер у скрол-відео.
законів 7
пасток 4
перевірено місць 4 693
L-041 L-068 L-070 L-073 L-099 L-100 L-116
sg.csp
Політика безпеки вмісту: хеші вбудованого коду, жодних чужих CDN, навіть через importmap.
законів 3
пасток 3
перевірено місць 4 789
L-069 L-088 L-112
sg.cache
Довгий кеш лише у файлів із відбитком у назві.
законів 1
пасток 1
перевірено місць 21 574
L-060
sg.safari
Статичні пастки Safari: префікс скла, поріг ширини, стрічки, 100vh, довгий стек шрифтів.
законів 12
пасток 4
перевірено місць 7 120
L-001 L-002 L-004 L-020 L-021 L-030 L-031 L-050 L-052 L-091 L-103 L-106
sg.files
Що їде у викладку: білий список, жодних ключів і відео, вага 3D-моделей.
законів 5
пасток 2
перевірено місць 23 767
L-033 L-040 L-062 L-067 L-111
sg.js
Синтаксис кожного модуля перед викладкою.
законів 2
пасток 1
перевірено місць 1 061
L-066 L-085
sg.i18n
Однакові ключі в словниках, жодної кирилиці в латинських версіях, і ї є ґ у шрифті.
законів 4
пасток 1
перевірено місць 1 671
L-051 L-070 L-071 L-072
sg.seo
Унікальні заголовки, h1, alt, абсолютні адреси, robots.
законів 2
пасток 3
перевірено місць 3 508
L-099 L-100
sg.geo
Дані для пошуку зі ШІ: розмітка збігається з видимим текстом, llms.txt без битих посилань.
законів 2
пасток 2
перевірено місць 3 508
L-099 L-100
sg.layout
Десять розмірів екрана: вилет убік, обрізаний текст, порожня сторінка, правильна розкладка.
законів 10
пасток 4
перевірено місць 9 410
L-001 L-003 L-005 L-109 L-007 L-008 L-011 L-083 L-103 L-113
sg.console
Жодної помилки й винятку в консолі.
законів 1
пасток 1
перевірено місць 2 390
L-090
sg.motion
За бажання менше руху анімації стоять.
законів 1
пасток 1
перевірено місць 614
L-116
sg.touch
На дотиках перший екран живий, стрічки гортають пальцем, а сторінка стоїть.
законів 4
пасток 2
перевірено місць 352
L-012 L-020 L-021 L-116
sg.hold
Утримання показує прогрес і спрацьовує також від дотику.
законів 1
пасток 1
перевірено місць 680
L-023
sg.go
Кнопка заявки працює навіть тоді, коли дані ще в дорозі.
законів 1
пасток 1
перевірено місць 13
L-117
sg.nogpu
Без WebGL немає винятків і сторінка не порожня.
законів 2
пасток пастки немає
перевірено місць 213
L-034 L-113
sg.sticky
Липка панель не вища за вікно і не наїжджає на текст сусідніх секцій.
законів 1
пасток 1
перевірено місць 1 476
L-097
sg.lang
Усе, що видно в браузері, зокрема фрейми, тіньове дерево і SVG, тією мовою, якою сторінка.
законів 3
пасток 3
перевірено місць 664
L-094 L-096 L-102
sg.slow
Повільна мережа: бита картинка в кадрі, керування, перекрите під час завантаження.
законів 1
пасток 3
перевірено місць 502
L-046
sg.webkit
Той самий сайт у WebKit: iPad у двох орієнтаціях, iPhone, помилки політики безпеки.
законів 6
пасток 3
перевірено місць 1 023
L-035 L-086 L-087 L-101 L-113 L-116
sg.media
Відео віддає статус 206, у циклі немає рваної склейки.
законів 2
пасток пастки немає
перевірено місць 620
L-040 L-042
sg.lh
Lighthouse з бюджетом: оцінка на телефоні, LCP, CLS, вага, медіана трьох прогонів зі стисненням.
законів 13
пасток пастки немає
перевірено місць 732
L-010 L-024 L-044 L-045 L-053 L-054 L-055 L-056 L-057 L-058 L-104 L-105 L-113
sg.a11y
Платна опція: axe за WCAG 2.1 AA і прохід клавішею Tab. Не знайдено ще не означає відповідає.
законів 1
пасток 1
перевірено місць 0
L-108
Колофон
Як зроблено Прикладного JavaScript немає. На сторінці 238 байтів визначення розкладки, у корені ще 651 байтів вибору мови. Сторінка важить близько 18 КБ у стисненні разом зі стилями. Вебшрифтів нуль, набрано системним шрифтом із засічками. Шторка стража це атрибут popover. Активна вкладка, закладка вгорі і поява законів на планшеті й комп'ютері зроблені анімаціями від прокрутки в CSS. Цю сторінку можна надрукувати: окремі правила @page складають книжку формату A5 із нумерацією. Числа рахує збірка зі знімка журналу, коміт 5317d9b. Вручну не вписане жодне. У конвеєрі 1 592 рядків перевірок і 623 рядків пасток.
Чого тут немає Статей вибрано 31 зі 94. ШІ переказав їх із російського оригіналу зводу українською та англійською, скорочено, числа в них узяті з уроків. Активна вкладка і поява законів потребують анімацій від прокрутки. Старіші браузери покажуть ті самі тексти без них. Ворота перевіряють WebKit на Windows. Справжні iPad і телефон у цьому замірі не брали участі. Друк перевірено лише в Chrome. Числа стосуються журналу до 4 листопада 2026 р. і вже застаріли на нові викладки.
Відкрити портфоліо сайтів
Текст, код і вибір уроків написав ШІ (Claude) під керівництвом власника конвеєра. Реальних людей на сторінці немає.
Закони
Реєстр
Стражі
Колофон
sg.html
Заголовок, опис, canonical, hreflang, значок, кожна мова у своїй папці, постер у скрол-відео.
законів: 7 · пасток: 4 · перевірено місць: 4 693
Закрити
sg.csp
Політика безпеки вмісту: хеші вбудованого коду, жодних чужих CDN, навіть через importmap.
законів: 3 · пасток: 3 · перевірено місць: 4 789
Закрити
sg.cache
Довгий кеш лише у файлів із відбитком у назві.
законів: 1 · пасток: 1 · перевірено місць: 21 574
Закрити
sg.safari
Статичні пастки Safari: префікс скла, поріг ширини, стрічки, 100vh, довгий стек шрифтів.
законів: 12 · пасток: 4 · перевірено місць: 7 120
Закрити
sg.files
Що їде у викладку: білий список, жодних ключів і відео, вага 3D-моделей.
законів: 5 · пасток: 2 · перевірено місць: 23 767
Закрити
sg.js
Синтаксис кожного модуля перед викладкою.
законів: 2 · пасток: 1 · перевірено місць: 1 061
Закрити
sg.i18n
Однакові ключі в словниках, жодної кирилиці в латинських версіях, і ї є ґ у шрифті.
законів: 4 · пасток: 1 · перевірено місць: 1 671
Закрити
sg.seo
Унікальні заголовки, h1, alt, абсолютні адреси, robots.
законів: 2 · пасток: 3 · перевірено місць: 3 508
Закрити
sg.geo
Дані для пошуку зі ШІ: розмітка збігається з видимим текстом, llms.txt без битих посилань.
законів: 2 · пасток: 2 · перевірено місць: 3 508
Закрити
sg.layout
Десять розмірів екрана: вилет убік, обрізаний текст, порожня сторінка, правильна розкладка.
законів: 10 · пасток: 4 · перевірено місць: 9 410
Закрити
sg.console
Жодної помилки й винятку в консолі.
законів: 1 · пасток: 1 · перевірено місць: 2 390
Закрити
sg.motion
За бажання менше руху анімації стоять.
законів: 1 · пасток: 1 · перевірено місць: 614
Закрити
sg.touch
На дотиках перший екран живий, стрічки гортають пальцем, а сторінка стоїть.
законів: 4 · пасток: 2 · перевірено місць: 352
Закрити
sg.hold
Утримання показує прогрес і спрацьовує також від дотику.
законів: 1 · пасток: 1 · перевірено місць: 680
Закрити
sg.go
Кнопка заявки працює навіть тоді, коли дані ще в дорозі.
законів: 1 · пасток: 1 · перевірено місць: 13
Закрити
sg.nogpu
Без WebGL немає винятків і сторінка не порожня.
законів: 2 · пасток: пастки немає · перевірено місць: 213
Закрити
sg.sticky
Липка панель не вища за вікно і не наїжджає на текст сусідніх секцій.
законів: 1 · пасток: 1 · перевірено місць: 1 476
Закрити
sg.lang
Усе, що видно в браузері, зокрема фрейми, тіньове дерево і SVG, тією мовою, якою сторінка.
законів: 3 · пасток: 3 · перевірено місць: 664
Закрити
sg.slow
Повільна мережа: бита картинка в кадрі, керування, перекрите під час завантаження.
законів: 1 · пасток: 3 · перевірено місць: 502
Закрити
sg.webkit
Той самий сайт у WebKit: iPad у двох орієнтаціях, iPhone, помилки політики безпеки.
законів: 6 · пасток: 3 · перевірено місць: 1 023
Закрити
sg.lh
Lighthouse з бюджетом: оцінка на телефоні, LCP, CLS, вага, медіана трьох прогонів зі стисненням.
законів: 13 · пасток: пастки немає · перевірено місць: 732
Закрити
sg.a11y
Платна опція: axe за WCAG 2.1 AA і прохід клавішею Tab. Не знайдено ще не означає відповідає.
законів: 1 · пасток: 1 · перевірено місць: 0
Закрити