Фронтенд
HTML, CSS, JavaScript, React — всё, что находится между браузером и пользователем.
Между кодом и экраном
Браузер — не холст, на котором рисуют, а машина, которая собирает страницу из трёх входов в жёстком порядке. Разберитесь, что он делает с вашими файлами, и HTML с CSS перестанут быть заклинаниями.
- Конвейер: от адреса до пикселейТы ввёл адрес — появилась страница. Между этими двумя событиями работает машина с жёстким порядком операций, и большинство багов, которые тебе предстоит ловить годами, живут на одной из её станций.
- Подписанные коробки: HTML — это смысл, а не внешний видКаждый выбранный тег — подпись, которую прочитают машины: браузер, скринридер, поисковый робот и ты сам через год. «Выглядит одинаково» — самая дорогая фраза во фронтенде.
- Суд: почему твой CSS «не работает»Ты написал правило, браузер его проигнорировал, ты дописал !important и пошёл дальше. Его не проигнорировали — оно проиграло дело по процедуре, которую можно выучить за вечер.
- Течение: поток, флекс и гридСтраница — не холст, на который кладут объекты, а течение, которое их расставляет. Научись описывать отношения вместо координат — и вёрстка переживёт содержимое, которого ты не планировал.
Страница, которая держит удар
Вёрстка, которая работает на вашем ноутбуке, с вашими данными и для ваших глаз, ещё не закончена. Четыре вещи, которые отделяют демо от того, чем действительно можно пользоваться.
- Вода в стакане: одна страница, любой экранСтраница адаптивна по умолчанию — чтобы её сломать, нужно постараться. Бо́льшая часть навыка — не добавить хитростей, а убрать допущения про экран, который у тебя случайно оказался.
- Турникет: формы и место, где продукты теряют людейВсё, что продукт обещает, обналичивается в форме. И это единственное место, где мелкая ошибка заставляет человека уйти совсем, — притом что платформа почти всё уже решила за тебя бесплатно.
- Второй интерфейс: доступность в кодеУ твоей страницы два интерфейса — тот, что на экране, и тот, что машины читают вслух. Второй порождается твоим кодом независимо от того, думал ты о нём или нет.
- Второй месяц: стили, которые не гниютCSS лёгкий три недели и невыносим к третьему месяцу. Не потому, что его плохо пишут, — потому, что в языке ничто не мешает файлу стилей стать местом, где удаление превращается в лотерею.
Язык
JavaScript в том порядке, в котором он становится осмысленным: что это за язык, как гонять через него данные, как он трогает страницу, как он ждёт — и как выяснить, почему всё сломалось.
- Десять дней 1995 года: язык и его шрамыJavaScript спроектировали примерно за десять дней, и он не имеет права сломать старые страницы. Почти вся его странность вытекает из этих двух фактов — и куча разрозненной ерунды превращается в одно объяснение.
- Конвейер: преобразовывать данные вместо того, чтобы ими командоватьПочти вся работа фронтендера — одна форма: с сервера приехал список объектов, и он должен стать чем-то на экране. Научись описывать это преобразование конвейером — и бо́льшая часть кода перестанет быть бухгалтерией.
- Живое дерево: DOM и событияЭто слой, на котором страница перестаёт быть документом и становится программой, — и слой, на котором тихо стоит любой фреймворк, которым ты когда-либо воспользуешься.
- Одна полоса: как JavaScript ждёт, не останавливаясьТы запросил данные у сервера и напечатал результат: undefined. Ничего не сломалось — ты прочитал ответ раньше, чем он приехал, и всё непонятное здесь растёт из этого одного недоразумения.
- Рентген: инструменты разработчика и методПеред лицом бага существуют два человека: тот, кто что-то меняет и перезагружает, и тот, кто выдвигает гипотезу и проверяет её. Разница между ними — карьера.
Приложение
Момент, когда страница превращается в программу: пакеты и сборка, какую задачу на самом деле решают фреймворки, компоненты, состояние и сервер на другом конце.
- Инструментальная цепочка: модули, пакеты и сборкаВчера проект был файлом и тегом script, сегодня это манифест пакетов, четыреста папок зависимостей и конфиг, который никто не читает. Каждая часть решает свою задачу — выучи задачи, и произвол исчезнет.
- Кукловод: какую задачу на самом деле решают фреймворкиФреймворки — не мода и не срез углов. Они убирают одну конкретную работу: держать экран и данные в согласии. И увидеть, зачем её убирать, можно, только сделав её руками.
- Лего, а не скульптура: мышление компонентамиРазбиение интерфейса на части выглядит вопросом форматирования, а на деле это проектирование маленького языка, на котором твоя команда будет говорить годами.
- Один источник правды: состояниеНа экране три позиции, в списке четыре. Ничего не сломалось — число хранилось отдельно от списка, а две копии одного факта всегда найдут способ разойтись.
- Другой конец провода: данные, маршруты и место выполнения кодаФорму настоящего приложения задают два вопроса: как человек переходит между экранами и в какой момент собирается HTML. Фреймворки приходят и уходят, эти два вопроса — нет.
Ремесло
Что отличает работающий код от кода, с которым можно жить: типы, скорость и цикл практики, который продолжит вас растить, когда роадмап закончится.
- Сетка: типы как документация, которая не умеет вратьУ каждой написанной тобой функции уже есть тип — просто ты держишь его в голове, где его никто не проверяет и где он потихоньку перестаёт быть правдой.
- Бюджет: почему кажется медленнымУ тебя это мгновенно. У тебя быстрый ноутбук, офисный вайфай, тёплый кэш и двенадцать тестовых записей — и ни одно из этого не верно для человека, ради которого ты всё это собрал.
- Собрать руки: как практиковать фронтендДвадцать статей позади: ты знаешь, что делает машина и почему. Это знание почти ничего не стоит, пока не переселилось в руки, — и вот статья про расстояние между тем и другим.