Собрать руки: как практиковать фронтенд

Ты теперь знаешь про устройство браузера, поведение CSS, задачу фреймворков и то, куда уходит время, больше, чем очень многие из тех, кто занимается этим профессионально.

Откроешь пустую папку — и всё равно будешь медленным.

Это не провал и не что-то необычное. Читать про фронтенд и делать фронтенд — два разных навыка, и работой является только один. Эта последняя статья — о том, как пройти расстояние между ними намеренно, а не в надежде, что оно закроется само; само оно, без помощи, обычно не закрывается.

Читать про фронтенд и делать фронтенд — два разных навыка, и работой является только один.

Почему эта область производит иллюзию

Разрыв между знанием и умением есть в любом предмете. Во фронтенде его усугубляют две вещи.

Учебники ощущаются практикой. Ты смотришь видео, набираешь то, что набирают, в конце всё работает, и возникшее ощущение неотличимо от компетентности. Но следование за учителем — это узнавание: каждое решение принято прямо перед тем, как оно понадобилось. Сфера «Как учиться» называет это центральной иллюзией: самое гладкое обучение даёт самое слабое удержание, и гладкость — как раз предупреждающий знак. Потом ты открываешь пустой файл, и узнавать нечего.

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

Земля движется. Новый фреймворк, новый сборщик, новый паттерн, новое мнение — каждые несколько месяцев. Отсюда постоянная фоновая тревога отстать, которая толкает к ширине — попробовать шесть технологий плохо — ровно тогда, когда накапливается глубина. Отсюда же самый полезный карьерный совет во всей сфере.

Долговечное против истекающего

Раздели то, что можно выучить, на две кучи: у них радикально разная отдача.

Долговечное — как браузер собирает страницу, семантика HTML, каскад и раскладка, язык и преобразование данных, DOM и события, асинхронность, HTTP и сеть, доступность, принципы производительности, отладка как метод, решение о том, где живёт состояние. Ничто из этого существенно не изменилось за десятилетие и не изменится к моменту, когда ты станешь сеньором.

Истекающее — API фреймворка этого года, конфигурация текущего сборщика, библиотека состояния, о которой все спорят, модный способ писать стили. Необходимо, чтобы делать работу сегодня. Существенно другое через пять лет.

Ошибка, которую делают почти все, — тратить бо́льшую часть учебного времени на вторую кучу, потому что именно её перечисляют в вакансиях и преподают в учебниках. Те, кто становится по-настоящему хорош, переворачивают это: истекающий слой они учат по мере надобности из документации, а осознанное учебное время тратят на долговечный.

Есть практическая проверка. Когда появляется новый фреймворк, человек с долговечным знанием читает его документацию и думает: «ага, вот как они решают производные значения и идентичность элементов списка» — неделя до продуктивности. Человек без него начинает с нуля снова, в четвёртый раз. Переносимой частью всегда были понятия.

Твоя опись чанков

Сфера «Как учиться» описывает навык как библиотеку сросшихся блоков: повар думает «зажарка», а не двенадцать шагов. У фронтенда есть свой список, и знание его позволяет строить блоки намеренно, а не надеяться, что они накопятся:

Раскладка страницы с боковой панелью. Адаптивная сетка карточек. Форма с проверкой и всеми состояниями. Модалка, управляющая фокусом. Таблица с сортировкой, фильтрацией и пагинацией. Поле поиска с debounce. Список с добавлением, редактированием и удалением. Загрузка данных с состояниями загрузки, ошибки и пустоты. Аутентификация и защищённый маршрут. Загрузка файла с прогрессом. Бесконечная прокрутка или пагинация. Переключатель темы, уважающий системную настройку. Система всплывающих уведомлений.

Тринадцать штук. Опытный разработчик, получив «нужна таблица данных с фильтрами», не выводит решение из первых принципов — он достаёт блок, вспоминает три значимых решения и две ловушки и тратит внимание на то, что специфично для этого продукта.

Строятся они так же, как строятся все блоки: каждый собирается несколько раз, в разных контекстах, с проверкой результата. И две детали отделяют работающую практику от той, которая тебе льстит.

Перемешивай. Не собирай четыре сетки карточек подряд. Чередуй типы, и перед каждым сам называй подход, а не наследуй его из заголовка учебника: настоящая работа никогда не сообщает, какая техника нужна, и без этого именно выбор остаётся нетренированным.

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

Лестница

Проекты работают лучше всего, когда каждая ступень добавляет ровно одну новую трудность: так сложность держится у границы, а не сваливается в скуку или панику.

Статическая страница по настоящему макету. Семантика, раскладка, адаптивность, доступность. Вообще без JavaScript.
Один интерактивный компонент руками, без фреймворка. Список с фильтром, модалка, галерея.
Небольшое приложение на фреймворке. Компоненты, состояние, форма. Данные пока локальные.
То же самое против настоящего API. Загрузка, ошибки, пустые состояния, гонки.
Аутентификация и маршрутизация. Защищённые страницы, сохранённые сессии, состояние в адресе.
Что-то задеплоенное, чем пользуются другие люди. Хотя бы пятеро.

Последняя ступень отличается качественно, и именно до неё большинство учащихся не доходит. Настоящие пользователи порождают обратную связь, которой не даст ничто другое: браузер, который ты не проверил, имя с апострофом, двойной клик по кнопке отправки, медленное соединение, надпись, которую все понимают неправильно. Из учебника этого не изготовить, и один маленький задеплоенный проект учит большему, чем четыре незаконченных амбициозных.

Осознанная практика, конкретно

Четыре критерия из сферы «Как учиться» — работа на границе своих возможностей, узкая цель, немедленная обратная связь, немедленное исправление — переводятся сюда напрямую.

Плохая сессия: «поработаю над проектом». Хорошая: «сегодня разбираюсь, как модалка удерживает фокус и возвращает его при закрытии». Одна узкая вещь, на границе, проверяемая в конце. Ты будешь знать, получилось ли, — в этом весь смысл.

И с половиной про обратную связь фронтенд оснащён необычайно хорошо. Браузер показывает результат мгновенно. Проверка типов и линтер возражают до сохранения. Консоль сообщает, что сломалось. Тест говорит, работает ли ещё. Каждое из этого — сжатие петли, и вот настоящая причина вкладываться в инструменты: это не театр профессионализма, а укорочение цикла практики.

Читай код, а не только пиши

Этого почти никто не делает, а это один из быстрейших способов вырасти.

Прочитай хороший открытый компонент, реализующий то, что ты собирал, — выпадашку, календарь. Найдёшь двенадцать случаев, о которых не подумал, а из них и состоит «опытный».

Прочитай собственный код трёхмесячной давности. Не чтобы починить — чтобы заметить, чего не можешь восстановить. Это честная обратная связь по твоим именам и структуре и тот же тест на удаление из статьи про CSS, обобщённый на всё.

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

Откуда берётся обратная связь

Практика без обратной связи просто закрепляет привычки. Четыре источника, примерно по возрастанию ценности:

Автоматические сигналы — типы, линтеры, тесты, аудиты. Мгновенно и дёшево, покрывают узкую полосу.

Сравнение с хорошей реализацией. Собери, потом прочитай чужое. Ограничено тем, что ты уже способен заметить, и всё равно полезно.

Ревью от человека. Проси конкретное — «разумный ли у этого компонента API?» — а не «что скажешь?», от которого не бывает ничего.

Настоящие пользователи. Жестоко, медленно и с большим отрывом ценнее всего.

Заметь, что все четыре требуют законченной работы. Вот практическая причина доводить до конца: незаконченный проект нельзя отревьюить, протестировать, задеплоить и использовать, а значит, он почти ничему не учит. Наполовину построенные амбициозные проекты — самый частый способ потратить учебное время без отдачи.

Как пользоваться ИИ, не выхолащивая себя

Он хорошо пишет фронтенд-код, отчего по-настоящему полезен и по-настоящему опасен, пока ты учишься: та часть, которую он убирает, — борьба за то, чтобы штука заработала, — и есть та часть, где формируется навык.

Сфера «Нейросети» разбирает это как следует; короткая версия для здесь. Сначала попытайся сам, всегда. Проси объяснить чаще, чем написать. Когда он выдал код, заставь объяснить каждое решение и не оставляй строку, которую не сможешь защитить. Пользуйся им как репетитором — «почему мой вариант неверен», «что означает эта ошибка», «дай задачу и не показывай ответ», — а не как доставкой готового. И периодически проверяй, что всё ещё можешь сам; медленнее — нормально, а «не смог бы» — это информация.

Как показывать работу

Портфолио фронтендера — не стена клонов. Три вещи лучше двенадцати:

Два-три настоящих проекта, задеплоенных, работающих, по адресу, который можно открыть. Что-то с реальными данными и реальной обработкой ошибок лучше пиксель-в-пиксель клона известного приложения: трудная часть — справляться с грязной реальностью, а клоны её намеренно пропускают.

Readme, объясняющий решения. Почему такая стратегия рендеринга, что бы ты изменил, в чём ошибся сначала. Этот абзац демонстрирует суждение, а нанимают именно суждение.

Код, который можно читать. Ясные имена, небольшие компоненты, понятная структура. Экраны умеет делать кто угодно.

Вся сфера одним списком

Двадцать статей в том порядке, в котором ими действительно пользуются:

Знай, что браузер делает с твоими файлами и в каком порядке, и что всё дальнейшее от этого зависит.
Выбирай элементы по смыслу, потом оформляй — и никогда наоборот.
Жди, что решать будет каскад, и читай инспектор вместо добавления !important.
Спрашивай «одна ось или две?» до любой раскладки и не задавай высоты.
Собирай сначала узкое, бери точки перелома из своего содержимого и задавай размеры в относительных единицах.
Считай форму самым рискованным экраном: настоящий form, настоящие подписи, верные типы, честные ошибки.
Проверь второй интерфейс — клавиатура, фокус, имена, контраст — прежде чем считать готовым.
Реши токены и изоляцию один раз, чтобы на шестой месяц стили ещё можно было удалять.
Пиши на языке, а не на трюках: ===, семь ложных значений, ссылки против значений.
Описывай преобразования конвейерами и не мутируй то, что держат другие.
Знай, что под фреймворком: DOM, события, делегирование, уборка.
Считай, что ничто не ждёт: проверяй response.ok, распараллеливай независимое, отменяй устаревшее.
Отлаживай гипотезами, а не перезагрузками, и веди журнал багов в три строки.
Понимай конвейер достаточно, чтобы назвать сломавшуюся стадию.
Бери фреймворк ради бухгалтерии, а не ради вакансии.
Разделяй по швам, композируй вместо конфигурации и относись к пропсам как к API.
Храни минимум, остальное выводи, а то, чем можно делиться, клади в адрес.
Знай, когда и где собирается твой HTML, и что клиент не проверяет права.
Пусть типы несут то, что иначе пришлось бы помнить, и проверяй на границе.
Измеряй до оптимизации и проверяй на настоящем дешёвом телефоне.

Все двадцать каждый раз не проходит никто. Но когда что-то не так и ты не можешь сказать почему, вина почти всегда лежит на пропущенном пункте из этого списка — и список найдёт её быстрее, чем разглядывание экрана.

На практике

Пересобери на этой неделе один учебный проект с пустого файла. Вся статья в одном упражнении.

Выбери следующий чанк намеренно из списка тринадцати, собери его трижды в разных контекстах и ещё раз через неделю по памяти.

Ставь узкую цель на каждую сессию, записанную до начала и проверяемую в конце.

Трать две трети учебного времени на долговечную кучу. Фреймворки — по мере надобности, из документации.

Задеплой что-нибудь маленькое в этом месяце и приведи пятерых пользователей.

Перечитывай собственный код трёхмесячной давности раз в квартал и замечай, чего не можешь восстановить.

Продолжай доводить до конца. Маленькое и законченное побеждает большое и брошенное всегда.

Проверь себя

Закрой статью и ответь своими словами:

Почему следование за учебником даёт уверенность без умения и в чём починка?
Назови три долговечные темы и три истекающие и скажи, как бы ты разделил время.
Назови пять повторяющихся чанков и то, как строить один намеренно.
Что добавляет каждая ступень лестницы проектов и почему последняя важнее всех?
В чём разница между плохой и хорошей учебной сессией?
Почему любой источник настоящей обратной связи требует законченной работы?
Каков честный способ пользоваться ИИ во время учёбы и какова самопроверка?

Коротко

Знать, как работает фронтенд, и уметь его делать — разные навыки; разрыв нормален, а его закрытие — намеренная работа.
Учебники дают узнавание, а не воспроизведение: закрой вкладку и собери тот же проект с пустого файла.
Раздели обучение на долговечное (браузер, язык, раскладка, сеть, доступность, отладка) и истекающее (фреймворк и инструменты этого года) и трать бо́льшую часть времени на первое.
Примерно тринадцать структур повторяются всегда; собирай каждую несколько раз, вперемешку и с разносом, каждый раз называя подход сам.
Иди по лестнице, где каждая ступень добавляет одну трудность, и дойди до ступени, где сделанным тобой пользуются живые люди.
Практикуйся с узкой целью на границе своих возможностей и используй инструменты, чтобы сжимать петлю обратной связи.
Читай хороший код, читай собственный старый код и прочитай наконец документацию, которую год пролистывал.
Вся настоящая обратная связь требует законченной работы, поэтому доводи до конца: маленькое и задеплоенное побеждает большое и брошенное.