Варим сайт в кастрюле
«Варим сайт в кастрюле» — бабушкин кулинарно-программистский рецепт на четыре порции, отправленный Максимом Стасу 26 мая 2026 года. Согласно рецепту, сайт готовят из одного кочана HTML, 200 граммов свежего CSS, JavaScript по вкусу, трёх зубчиков чеснока, одного временного фреймворка и воды. Всё складывается в большую кастрюлю /src, накрывается крышкой git commit и периодически пробуется через F5.
Текст рецепта является прямым источником. Участие Людмилы, внешний вид кухни, кастрюли, измерительной системы и готового блюда ниже представляют собой вики-реконструкцию. В исходном сообщении сказано только «Бабушкин рецепт»; имя бабушки не указано. В пределах Грядка Вики это считается не пробелом, а слишком простой загадкой.
Происхождение
26 мая в 19:48 Максим отправил сообщение с заголовком «🍲 Варим сайт в кастрюле» и подзаголовком «Бабушкин рецепт». Рецепт был уже полностью собран: ингредиенты, шесть шагов, способ проверки и горячая подача. Через несколько минут Максим отреагировал на ответ Стаса словами «ооо» и «кайф»; содержимое ответного медиа в экспорт не попало.
В отличие от прокида, рецепт не объясняет передачу данных. Он объясняет, почему сайт после разработки выглядит так, будто его действительно несколько часов мешали деревянной ложкой, а потом сняли пену из незакрытых <div>.
Ингредиенты
Рецепт рассчитан на четыре порции. Что является порцией сайта — страница, пользователь, вкладка или один довольный заказчик — источник не уточняет.
| Ингредиент | Количество | Подготовка | Функция в блюде |
|---|---|---|---|
| HTML | 1 кочан | разобрать на теги | создаёт структуру: шапку, содержимое и подвал |
| CSS | 200 г | брать свежим, вмешивать медленно | отвечает за цвет, густоту и положение всего относительно всего |
| JavaScript | по вкусу | добавлять каплями в конце | заставляет блюдо двигаться там, где оно могло спокойно лежать |
| Чеснок | 3 зубчика | не объяснять | ничего не делает, но без него «это не то» |
| Фреймворк | 1 шт. | любой | всё равно выбросить через год |
| Вода | пока не закипит | холодная | исполняет роль <!DOCTYPE html>
|
Кочанность HTML связывает рецепт с капустным циклом, но не делает блюдо частью капустного рубежа. Военные кочаны считаются строевыми, а этот разбирается на теги и в бой не допускается. Попытка заменить его огурцом даёт вертикальную вёрстку, которую корректно видит только Матвей.
HTML-кочан
Один кочан разбирают на листья-теги. Крупные наружные листья идут на шапку и подвал, внутренние — на содержимое, а кочерыжка остаётся как корневой элемент. Листья следует закрывать попарно. Если один край капусты не нашёл второй, он всплывает и объявляется <div> без закрывающего тега.
Использовать два кочана нельзя: получается микрофронтенд, для которого нужна вторая кастрюля, отдельный огонь и человек, готовый признать, что он сам это предложил.
CSS весом 200 граммов
CSS отмеряется на механических кухонных весах. В реконструкции он выглядит как мелкий синий порошок, поскольку бесцветный стиль невозможно отличить от его отсутствия. Свежесть определяется сжатием щепотки: свежий CSS рассыпается по сетке, старый слипается в один файл на 8000 строк.
Количество 200 г является точным только до первой правки заказчика. После просьбы «сделать логотип чуть крупнее» масса автоматически увеличивается, хотя банка остаётся закрытой.
JavaScript по вкусу
JavaScript не взвешивают. Его добавляют пипеткой в последнюю очередь и буквально по каплям. Одна капля открывает меню, вторая закрывает, третья снова открывает, а четвёртая спрашивает разрешение на уведомления.
Перебор определяется по поверхности: если суп начинает самостоятельно менять высоту, отправлять запросы к соседней конфорке и требовать согласие на печенье, JavaScript уже поздно вычерпывать. Нужно сказать, что так и было задумано.
Чеснок и фреймворк
Фраза источника о чесноке точна: «Чеснок ничего не делает, но без него это не то». Поэтому три зубчика считаются единственной зависимостью, которую нельзя удалить даже после проверки дерева пакетов. Они обеспечивают запах готового проекта и защищают кухню от вампирского ревью.
Фреймворк берётся любой, потому что через год его всё равно выбросят. В визуальной реконструкции он представлен старой платой, перевязанной синей кулинарной нитью. Плата не является настоящим ингредиентом и физически в пищу не добавляется; это образ одноразовой основы, а не совет варить электронику, ебать её в рот.
Кастрюля /src
Главный сосуд называется /src. Каноническая реконструкция закрепляет восьмилитровую белую эмалированную кастрюлю с тёмно-синим ободком, двумя боковыми ручками, сколами до чёрного металла и немного кривой крышкой. Объём превышает четыре обычные тарелки, потому что часть сайта неизбежно остаётся на стенках сборки.
Кастрюля выполняет сразу три роли:
- хранит исходники до кипения;
- ограничивает область, в которой допустимо мешать;
- позволяет честно сказать, что весь проект находится в
/src, даже если никто не знает, где именно там шапка.
Файлы вне кастрюли считаются гарниром. Их можно подать рядом, но крышка git commit на них не действует.
Приготовление
Шаг 1. Режим совместимости
В /src наливают холодную воду — это <!DOCTYPE html>. Без неё суп, по прямому тексту рецепта, «получится в режиме совместимости и расползётся». Практически это означает, что борщ внезапно принимает форму таблицы 2003 года, а ложка требует фиксированную ширину 760 пикселей.
Воду нагревают до кипения, но не раньше загрузки кочана. Если сначала сварить пустой doctype, браузер признаёт документ корректным и больше ничем не помогает.
Шаг 2. Варка структуры
HTML варят до появления правильного порядка: шапка сверху, подвал снизу, контент посередине. Это единственный этап, на котором расположение частей проверяется не монитором, а половником.
Три всплывших <div> без закрывающих тегов снимают шумовкой как пену. В рецепте указано именно три. Один незакрытый блок считается случайностью, два — стилем автора, а три уже образуют накипь и начинают прилипать к мобильной версии.
Шаг 3. Бесполезный чеснок
Добавляются три зубчика чеснока. Никакой функции они не вызывают. Это принципиально: если чеснок внезапно исправил ошибку, значит причина ошибки была в вампире, а проект требует отдельного аудита GRULAB.
Шаг 4. Вмешивание CSS
CSS вводят медленно и постоянно помешивают. Если всыпать все 200 г разом, он сворачивается в единый файл на 8000 строк, который сохраняет форму даже после увольнения автора.
Приправы источника:
- солить flexbox;
- перчить grid;
- центрировать по вертикали только как высокую кухню, «не для будней».
По канону соль отвечает за движение вдоль одной оси, перец — за двумерную раскладку. Если перепутать банки, карточки сайта выстраиваются в колонну и чихают.
Шаг 5. JavaScript каплями
JavaScript добавляют последним. После каждой капли следует дождаться, пока поверхность перестанет реагировать. Если ложка выскакивает модальным окном, капель уже достаточно.
В деревенской версии рецепта применяется янтарный пузырёк без этикетки. Это важно: бутылка с крупной надписью JavaScript была бы слишком похожа на нормальную документацию и нарушала бы общий метод.
Шаг 6. Commit под крышкой
Кастрюлю накрывают крышкой git commit и тушат на медленном огне. Крышка фиксирует текущее состояние, но не гарантирует съедобность. Если открыть её через минуту и добавить укроп, требуется новый commit; фраза «я только зелень кинул» историей версий не признаётся.
Сообщение коммита источником не задано. Наиболее распространённый вариант — «готово». Более честный — «работает у меня на плите».
Проба через F5
Готовность периодически проверяют клавишей F5. В прямом рецепте используется формула «пробуем на вкус через F5». В реконструкции Apple Computer 1 соединён с кастрюлей кремовым кабелем и металлическим щупом: монитор показывает текущую вёрстку, а Людмила физически пробует суп той же рукой, которой обычно отрицает обновление.
Результаты пробы:
| На вкус | На экране | Решение |
|---|---|---|
| водянисто | один голый столбец | доварить структуру |
| комками | стили собрались в 8000 строк | мешать медленнее и никому не показывать файл |
| слишком активно | всё прыгает без запроса | убрать одну каплю JavaScript, если удастся её найти |
| чесночно, но стабильно | шапка сверху, подвал снизу | нажать commit и подавать |
| вкус меняется только после второго F5 | старый кэш | обвинить браузер, блюдо не трогать |
Прямой источник вставляет английское слово Periodically посреди русского шага. Вики трактует это как встроенный таймер: после него рецепт сам вспоминает, что пора обновить страницу.
Подача
Сайт подают горячим. Холодная подача допускается только для статического сайта, но тогда JavaScript остаётся в пузырьке и обижается. На четыре порции раскладывают:
- шапку — первой тарелке;
- содержимое — двум средним;
- подвал — последней;
- чеснок — тому, кто спросил, зачем он нужен.
Готовый сайт не следует путать с Уникальным обедом. Уникальный обед физически съедобен и требует, чтобы Стас оставался у противня. Сайт из кастрюли является метафорической пищей, а Стас может отойти от плиты, пока не всплыли три <div>.
Связь с цифровым циклом
Рецепт занимает промежуточное место между кухней и цифровым циклом:
- Apple Computer 1 служит экраном готовности и единственным кухонным прибором с клавишей F5;
- Грядка Онлайн считается наиболее вероятным блюдом, которое однажды вышло из этой кастрюли, хотя прямой источник название сайта не указывает;
- Клавдия Кодовна хранит завершённый код в банках, тогда как Людмила варит незавершённый сайт в кастрюле;
- Блог Людмилы публикует то, что выдержало пробу ложкой и не расползлось в режиме совместимости;
- Прокид через грядку доставляет результат дальше, но не отвечает за то, сколько в нём чеснока.
GRULAB к штатной варке не привлекается. Лабораторию вызывают, если чеснок начал выполнять функцию, фреймворк пережил год или на дне кастрюли найден пятый слой абстракции.
Людмила и авторство
Сообщение отправил Максим, а не Людмила. Поэтому канонически подтверждено авторство публикации Максима, но не авторство самого рецепта. Подпись «Бабушкин рецепт» допускает три версии:
- Максим записал существующий метод Людмилы;
- рецепт составлен в её стиле и приписан ей позднее;
- слово «бабушкин» означает отдельный жанр, где любой процесс начинается с кастрюли и заканчивается обвинением браузера.
Вики использует Людмилу как визуальную исполнительницу, потому что из всех известных персонажей только она одновременно владеет кухней, Apple Computer 1 и правом заявить, что сайт вчера был вкуснее. Это реконструкция, а не фотографически подтверждённое событие.
Ошибки приготовления
- Суп расползся — забыта вода-doctype.
- Шапка утонула — нарушена структура документа или взят слишком тяжёлый логотип.
- Подвал всплыл — сайт решил, что он приложение.
- Три
<div>не сняты — образовалась пена фронтенда. - CSS свернулся — 200 г внесены одним коммитом.
- JavaScript переборщили — кастрюля просит принять cookie.
- Фреймворк не выбросили через год — он объявил долгосрочную поддержку и занял вторую полку.
- F5 не меняет вкус — либо кэш, либо ложка находится не в той ветке.
Главное правило: не пытаться исправить пересоленный flexbox дополнительным grid. Получится адаптивный рассол, который хорошо выглядит только при ширине окна 1024 пикселя.
Значение
«Варим сайт в кастрюле» превращает разработку из абстрактной работы в хозяйственную процедуру с измеримыми продуктами и понятными отказами. Структуру можно доварить, стили — вмешать, скрипт — передозировать, зависимость — выкинуть, а ошибку — снять шумовкой. Единственное, чего рецепт не умеет, — объяснить заказчику, почему чеснок входит в оценку.
В лоре это первый законченный кулинарный протокол, где результатом является не еда, а работающая страница. Он также вводит важный принцип цифрового хозяйства Людмилы: если код нельзя законсервировать, его следует сварить; если нельзя сварить — передать Клавдии и сказать, что кастрюля уже была такой.
Статус изображений
Прямого изображения рецепта в экспорте нет: ответное медиа Стаса 26 мая не было включено при выгрузке. Поэтому в статье не используются случайные соседние фотографии.
Три новые сцены созданы встроенным imagegen. Главный кадр является compositing/identity-preserve edit канонической фотографии Людмилы на кухне и канонического Apple Computer 1. Из него выведены точный вид восьмилитровой кастрюли, реквизит и ингредиенты; они сохранены в раскладке и в финальной пробе через F5. Лицо, возраст, платок, красная кофта и фартук Людмилы фиксировались во всех сценах как инварианты.