Admin: Новая статья из переписки: бабушкин рецепт сайта из HTML-кочана, CSS и чеснока

2026-08-23T12:22:28Z

Новая статья из переписки: бабушкин рецепт сайта из HTML-кочана, CSS и чеснока

Новая страница

[[Файл:Варим_сайт_каноническая_кастрюля.jpg|thumb|right|430px|Каноническая реконструкция рецепта: Людмила варит HTML-кочан в восьмилитровой кастрюле, а [[Apple Computer 1]] принимает температуру через щуп. AI identity-preserve/compositing edit по двум каноническим изображениям с вики.]]
'''«Варим сайт в кастрюле»''' — бабушкин кулинарно-программистский рецепт на четыре порции, отправленный [[Максим]]ом [[Стас]]у 26 мая 2026 года. Согласно рецепту, сайт готовят из одного кочана HTML, 200 граммов свежего CSS, JavaScript по вкусу, трёх зубчиков чеснока, одного временного фреймворка и воды. Всё складывается в большую кастрюлю <code>/src</code>, накрывается крышкой <code>git commit</code> и периодически пробуется через '''F5'''.

Текст рецепта является прямым источником. Участие [[Людмила|Людмилы]], внешний вид кухни, кастрюли, измерительной системы и готового блюда ниже представляют собой вики-реконструкцию. В исходном сообщении сказано только ''«Бабушкин рецепт»''; имя бабушки не указано. В пределах Грядка Вики это считается не пробелом, а слишком простой загадкой.

== Происхождение ==
26 мая в 19:48 Максим отправил сообщение с заголовком '''«🍲 Варим сайт в кастрюле»''' и подзаголовком ''«Бабушкин рецепт»''. Рецепт был уже полностью собран: ингредиенты, шесть шагов, способ проверки и горячая подача. Через несколько минут Максим отреагировал на ответ Стаса словами ''«ооо»'' и ''«кайф»''; содержимое ответного медиа в экспорт не попало.

В отличие от [[Прокид через грядку|прокида]], рецепт не объясняет передачу данных. Он объясняет, почему сайт после разработки выглядит так, будто его действительно несколько часов мешали деревянной ложкой, а потом сняли пену из незакрытых <code><div></code>.

== Ингредиенты ==
[[Файл:Варим_сайт_ингредиенты.jpg|thumb|left|440px|Раскладка перед варкой: HTML-кочан, 200 г синего CSS, JavaScript в пипетке, три зубчика чеснока, одноразовый фреймворк и вода. Кастрюля, крышка и реквизит сохранены по главному кадру. AI precise-object edit.]]
Рецепт рассчитан на '''четыре порции'''. Что является порцией сайта — страница, пользователь, вкладка или один довольный заказчик — источник не уточняет.

{| class="wikitable"
! Ингредиент !! Количество !! Подготовка !! Функция в блюде
|-
| '''HTML''' || 1 кочан || разобрать на теги || создаёт структуру: шапку, содержимое и подвал
|-
| '''CSS''' || 200 г || брать свежим, вмешивать медленно || отвечает за цвет, густоту и положение всего относительно всего
|-
| '''JavaScript''' || по вкусу || добавлять каплями в конце || заставляет блюдо двигаться там, где оно могло спокойно лежать
|-
| '''Чеснок''' || 3 зубчика || не объяснять || ничего не делает, но без него ''«это не то»''
|-
| '''Фреймворк''' || 1 шт. || любой || всё равно выбросить через год
|-
| '''Вода''' || пока не закипит || холодная || исполняет роль <code><!DOCTYPE html></code>
|}

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

=== HTML-кочан ===
Один кочан разбирают на листья-теги. Крупные наружные листья идут на шапку и подвал, внутренние — на содержимое, а кочерыжка остаётся как корневой элемент. Листья следует закрывать попарно. Если один край капусты не нашёл второй, он всплывает и объявляется <code><div></code> без закрывающего тега.

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

=== CSS весом 200 граммов ===
CSS отмеряется на механических кухонных весах. В реконструкции он выглядит как мелкий синий порошок, поскольку бесцветный стиль невозможно отличить от его отсутствия. Свежесть определяется сжатием щепотки: свежий CSS рассыпается по сетке, старый слипается в один файл на 8000 строк.

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

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

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

=== Чеснок и фреймворк ===
Фраза источника о чесноке точна: '''«Чеснок ничего не делает, но без него это не то»'''. Поэтому три зубчика считаются единственной зависимостью, которую нельзя удалить даже после проверки дерева пакетов. Они обеспечивают запах готового проекта и защищают кухню от вампирского ревью.

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

== Кастрюля /src ==
Главный сосуд называется <code>/src</code>. Каноническая реконструкция закрепляет восьмилитровую белую эмалированную кастрюлю с тёмно-синим ободком, двумя боковыми ручками, сколами до чёрного металла и немного кривой крышкой. Объём превышает четыре обычные тарелки, потому что часть сайта неизбежно остаётся на стенках сборки.

Кастрюля выполняет сразу три роли:
* хранит исходники до кипения;
* ограничивает область, в которой допустимо мешать;
* позволяет честно сказать, что весь проект находится в <code>/src</code>, даже если никто не знает, где именно там шапка.

Файлы вне кастрюли считаются гарниром. Их можно подать рядом, но крышка <code>git commit</code> на них не действует.

== Приготовление ==
=== Шаг 1. Режим совместимости ===
В <code>/src</code> наливают холодную воду — это <code><!DOCTYPE html></code>. Без неё суп, по прямому тексту рецепта, ''«получится в режиме совместимости и расползётся»''. Практически это означает, что борщ внезапно принимает форму таблицы 2003 года, а ложка требует фиксированную ширину 760 пикселей.

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

=== Шаг 2. Варка структуры ===
HTML варят до появления правильного порядка: '''шапка сверху, подвал снизу, контент посередине'''. Это единственный этап, на котором расположение частей проверяется не монитором, а половником.

Три всплывших <code><div></code> без закрывающих тегов снимают шумовкой как пену. В рецепте указано именно три. Один незакрытый блок считается случайностью, два — стилем автора, а три уже образуют накипь и начинают прилипать к мобильной версии.

=== Шаг 3. Бесполезный чеснок ===
Добавляются три зубчика чеснока. Никакой функции они не вызывают. Это принципиально: если чеснок внезапно исправил ошибку, значит причина ошибки была в вампире, а проект требует отдельного аудита [[GRULAB]].

=== Шаг 4. Вмешивание CSS ===
CSS вводят медленно и постоянно помешивают. Если всыпать все 200 г разом, он сворачивается в единый файл на 8000 строк, который сохраняет форму даже после увольнения автора.

Приправы источника:
* '''солить flexbox''';
* '''перчить grid''';
* центрировать по вертикали только как высокую кухню, ''«не для будней»''.

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

=== Шаг 5. JavaScript каплями ===
JavaScript добавляют последним. После каждой капли следует дождаться, пока поверхность перестанет реагировать. Если ложка выскакивает модальным окном, капель уже достаточно.

В деревенской версии рецепта применяется янтарный пузырёк без этикетки. Это важно: бутылка с крупной надписью ''JavaScript'' была бы слишком похожа на нормальную документацию и нарушала бы общий метод.

=== Шаг 6. Commit под крышкой ===
Кастрюлю накрывают крышкой <code>git commit</code> и тушат на медленном огне. Крышка фиксирует текущее состояние, но не гарантирует съедобность. Если открыть её через минуту и добавить укроп, требуется новый commit; фраза ''«я только зелень кинул»'' историей версий не признаётся.

Сообщение коммита источником не задано. Наиболее распространённый вариант — ''«готово»''. Более честный — ''«работает у меня на плите»''.

== Проба через F5 ==
[[Файл:Варим_сайт_проба_F5.jpg|thumb|right|470px|Финальная проверка: Людмила пробует суп деревянной ложкой и одновременно нажимает F5. Кастрюля, лицо, одежда и Apple Computer 1 сохранены по канонической сцене. AI identity-preserve/compositing edit.]]
Готовность периодически проверяют клавишей '''F5'''. В прямом рецепте используется формула ''«пробуем на вкус через F5»''. В реконструкции [[Apple Computer 1]] соединён с кастрюлей кремовым кабелем и металлическим щупом: монитор показывает текущую вёрстку, а Людмила физически пробует суп той же рукой, которой обычно отрицает обновление.

Результаты пробы:

{| class="wikitable"
! На вкус !! На экране !! Решение
|-
| водянисто || один голый столбец || доварить структуру
|-
| комками || стили собрались в 8000 строк || мешать медленнее и никому не показывать файл
|-
| слишком активно || всё прыгает без запроса || убрать одну каплю JavaScript, если удастся её найти
|-
| чесночно, но стабильно || шапка сверху, подвал снизу || нажать commit и подавать
|-
| вкус меняется только после второго F5 || старый кэш || обвинить браузер, блюдо не трогать
|}

Прямой источник вставляет английское слово ''Periodically'' посреди русского шага. Вики трактует это как встроенный таймер: после него рецепт сам вспоминает, что пора обновить страницу.

== Подача ==
Сайт подают '''горячим'''. Холодная подача допускается только для статического сайта, но тогда JavaScript остаётся в пузырьке и обижается. На четыре порции раскладывают:
# шапку — первой тарелке;
# содержимое — двум средним;
# подвал — последней;
# чеснок — тому, кто спросил, зачем он нужен.

Готовый сайт не следует путать с [[Уникальный обед Максима и Стаса|Уникальным обедом]]. Уникальный обед физически съедобен и требует, чтобы Стас оставался у противня. Сайт из кастрюли является метафорической пищей, а Стас может отойти от плиты, пока не всплыли три <code><div></code>.

== Связь с цифровым циклом ==
Рецепт занимает промежуточное место между кухней и цифровым циклом:
* [[Apple Computer 1]] служит экраном готовности и единственным кухонным прибором с клавишей F5;
* [[Грядка Онлайн]] считается наиболее вероятным блюдом, которое однажды вышло из этой кастрюли, хотя прямой источник название сайта не указывает;
* [[Клавдия Кодовна]] хранит завершённый код в банках, тогда как Людмила варит незавершённый сайт в кастрюле;
* [[Блог Людмилы]] публикует то, что выдержало пробу ложкой и не расползлось в режиме совместимости;
* [[Прокид через грядку]] доставляет результат дальше, но не отвечает за то, сколько в нём чеснока.

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

== Людмила и авторство ==
Сообщение отправил Максим, а не Людмила. Поэтому канонически подтверждено '''авторство публикации Максима''', но не авторство самого рецепта. Подпись ''«Бабушкин рецепт»'' допускает три версии:
* Максим записал существующий метод Людмилы;
* рецепт составлен в её стиле и приписан ей позднее;
* слово ''«бабушкин»'' означает отдельный жанр, где любой процесс начинается с кастрюли и заканчивается обвинением браузера.

Вики использует Людмилу как визуальную исполнительницу, потому что из всех известных персонажей только она одновременно владеет кухней, [[Apple Computer 1]] и правом заявить, что сайт вчера был вкуснее. Это реконструкция, а не фотографически подтверждённое событие.

== Ошибки приготовления ==
* '''Суп расползся''' — забыта вода-doctype.
* '''Шапка утонула''' — нарушена структура документа или взят слишком тяжёлый логотип.
* '''Подвал всплыл''' — сайт решил, что он приложение.
* '''Три <code><div></code> не сняты''' — образовалась пена фронтенда.
* '''CSS свернулся''' — 200 г внесены одним коммитом.
* '''JavaScript переборщили''' — кастрюля просит принять cookie.
* '''Фреймворк не выбросили через год''' — он объявил долгосрочную поддержку и занял вторую полку.
* '''F5 не меняет вкус''' — либо кэш, либо ложка находится не в той ветке.

Главное правило: не пытаться исправить пересоленный flexbox дополнительным grid. Получится адаптивный рассол, который хорошо выглядит только при ширине окна 1024 пикселя.

== Значение ==
«Варим сайт в кастрюле» превращает разработку из абстрактной работы в хозяйственную процедуру с измеримыми продуктами и понятными отказами. Структуру можно доварить, стили — вмешать, скрипт — передозировать, зависимость — выкинуть, а ошибку — снять шумовкой. Единственное, чего рецепт не умеет, — объяснить заказчику, почему чеснок входит в оценку.

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

== Статус изображений ==
Прямого изображения рецепта в экспорте нет: ответное медиа Стаса 26 мая не было включено при выгрузке. Поэтому в статье не используются случайные соседние фотографии.

Три новые сцены созданы встроенным imagegen. Главный кадр является compositing/identity-preserve edit канонической фотографии Людмилы на кухне и канонического [[Apple Computer 1]]. Из него выведены точный вид восьмилитровой кастрюли, реквизит и ингредиенты; они сохранены в раскладке и в финальной пробе через F5. Лицо, возраст, платок, красная кофта и фартук Людмилы фиксировались во всех сценах как инварианты.

== См. также ==
* [[Людмила]]
* [[Максим]]
* [[Стас]]
* [[Apple Computer 1]]
* [[Грядка Онлайн]]
* [[Клавдия Кодовна]]
* [[Блог Людмилы]]
* [[Прокид через грядку]]
* [[GRULAB]]
* [[Уникальный обед Максима и Стаса]]

[[Категория:Предания]]
[[Категория:AI-генерация]]

Варим сайт в кастрюле - История изменений

Admin: Новая статья из переписки: бабушкин рецепт сайта из HTML-кочана, CSS и чеснока