Кто-то посмотрит на заглавную фотографию и увидит просто помятую бумажку с базовыми тегами. Для современного джуна, вооруженного VS Code, Emmet, Copilot и безлимитным доступом к StackOverflow, это выглядит как артефакт из каменного века.
Но для меня это самый ценный кусок бумаги в жизни. Это мой первый бэкап. Мой первый репозиторий. И моя личная история о том, как жгучее желание кодить побеждает отсутствие железа.
Дано: нет ноутбука, нет сети. Задача: стать разработчиком
Представьте ситуацию: у вас нет личного ноутбука. Нет постоянного интернета, где можно за пару кликов открыть MDN или скопировать бойлерплейт. Доступ к заветной клавиатуре выпадает редко — в школе, у друзей или в интернет-кафе.
Когда ты только начинаешь путь во фронтенд, базовая структура HTML-документа кажется длинным и сложным заклинанием. В голове постоянно путаются атрибуты, порядок мета-тегов и структура вложенности. И если ты забудешь это к тому моменту, когда доберешься до компьютера, твое драгоценное время уйдет в никуда.
Решение было простым и хардкорным: я взял обычный тетрадный лист, пару ручек и написал этот код, чтобы не забыть его никогда.
Бумажное код-ревью: что хранит этот листок?
Если присмотреться к фото, это не просто набор букв. Это следы того, как мой мозг пытался визуализировать и структурировать новые технологии. Давайте проведем небольшое код-ревью:
Идеальный Boilerplate: Выверенная красной ручкой основа от
<!DOCTYPE html>до<meta name="viewport"...>. Каждая угловая скобка выписана вручную. Никакого! + Tab.Зачатки архитектуры: Внутри
<body>уже виднеется попытка в нейминг:div class="block"иdiv class="block__item". Кажется, я интуитивно тянулся к БЭМ еще до того, как начал верстать сложные интерфейсы.Опечатки, которые делают нас людьми:
<link rel="styleshet" href="css/stile.css">. Этот очаровательныйstile.css— классика жанра. В те времена линтер работал только в моей голове, и он явно пропускал баги.Графовое представление DOM: Справа синей ручкой нарисовано самое интересное — дуги вложенности списков и заголовков (
ol -> li -> h2). Это попытка визуализировать DOM-дерево. Я пытался понять, как элементы живут внутри друг друга, прокладывая маршруты ручкой.Командная палитра как Святой Грааль: В самом низу, обведенная в рамку боль — перечеркнутое
Shift + Pи торжественное исправление:Ctrl + Shift + P = написать(и сверху еще приписка "чтобы изменить язык"). Это хоткей вызова Command Palette в редакторе (ранний VS Code). Когда добираешься до чужого ПК, забыть этот шорткат — значит потерять контроль над редактором.
Зачем писать код на бумаге в эпоху AI?
Конечно, сейчас это кажется забавным анахронизмом. Но я убежден, что написание кода от руки создает совершенно иные нейронные связи.
У тебя нет права на слепую опечатку. Твой браузер, компилятор и дебаггер — это твоя собственная внимательность. Пока ты механически выписываешь каждый символ атрибута, ты прогоняешь логику через себя. Ты начинаешь чувствовать структуру документа.
Этот мятый, затертый листок пережил многое. Но он выполнил свою главную задачу: доказал мне, что для старта в IT не нужна идеальная техника с двумя 4K-мониторами и механической клавиатурой. Нужно только упорство и готовность писать код хоть на салфетке.
Я храню эту бумажку до сих пор. Это мой якорь. Каждый раз, когда я сталкиваюсь с очередным сложным багом, выгоранием или неповоротливой архитектурой, я смотрю на этот листок в клетку. Он напоминает мне, с каким огнем в глазах я когда-то выводил <head>.
А вы помните свой самый первый код? На чём он был написан: в школьной тетрадке, в «Блокноте» или, может, на полях учебника по математике? Делитесь своими ламповыми артефактами в комментариях, давайте поностальгируем вместе!
