DigitableCourses
Настройки портала
English
Показать возможности портала

Локально и без аккаунта. Аккаунта нет, регистрация не нужна: введённое в инструменты остаётся в localStorage браузера и на сервер не уходит.

Свой счётчик считает открытия страниц и дочитывания: уезжает адрес и десятая доля текста. Без cookies и чужих счётчиков, IP не хранится, Do Not Track уважается. Как это проверить

Репозиторий портала не выложен, «открытым кодом» мы его не зовём. Открыто это:

Digit flang Допуск агента tools-core IT Tools Chat digitwm blender-mcp Hugging Face Лицензии

Живёт портал на донатах, платных консультациях и разборах по запросу и покупке Workbench.

Поддержать Заказать разбор Workbench

Планов делать курсы платными нет.

Карьера

Фронтенд-разработчик

Интерфейс в браузере: разметка, состояние, производительность, доступность.

Роли и переходы Самооценка

Шаг 2 из 2 · Фронтенд-разработчик

На каком уровне внутри роли?

Куда отсюда ходят: Мобильный разработчик, Бэкенд-разработчик, Продакт-менеджер, Тимлид, техлид, engineering manager

Не знаю уровень — открыть карточку роли целиком Выбрать другую роль

  1. Junior
  2. Middle
  3. Senior
  4. Дальше: ветвление, а не ступень

Junior

Сразу к самооценке

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

Сделать сейчас

  • Собираю экран без фреймворка: разметка, стили, событияФорма отправляется по Enter, а кнопка — это button, а не div с обработчиком.
  • Прохожу свой экран с клавиатуры, не трогая мышьФокус видно, и до каждого действия можно дойти табом.
  • Разбираюсь, из чего собирается бандл проектаМогу починить упавшую сборку, а не переустановить зависимости наугад.
  • Проверяю раскладку на узком экране и на длинном текстеНичего не разъезжается и не обрезается.

Куда дальше

Middle

Вбок из роли

Что на ступени спрашивают

  • Понимаю, что делает браузер между загрузкой и первым кадромМогу объяснить, почему страница мигает, и где в этом виноват мой код.
  • Пишу разметку, которая работает без стилей и с клавиатурыФорма отправляется по Enter, кнопка — это button, а не div с обработчиком.
  • Собираю раскладку, которая не разъезжается на телефонеПонимаю, что такое поток, флекс и грид, и не чиню всё абсолютным позиционированием.
  • Пишу компоненты и понимаю, откуда в них приходит состояниеОтличаю состояние компонента от состояния приложения и не дублирую источник правды.
  • Разбираюсь со сборкой проекта, а не только с npm run devПонимаю, что происходит между исходником и бандлом, и умею починить упавшую сборку.

Обычные ошибки

  • Чинить раскладку абсолютным позиционированием: на другом экране всё разъедется снова.
  • Учить фреймворк вместо браузера: со сменой моды знания обнуляются.
  • Делать кнопки и ссылки из div: клавиатура и скринридер перестают работать, а замечают это не сразу.

Что учить

  1. Junior
  2. Middle
  3. Senior
  4. Дальше: ветвление, а не ступень

Middle

Сразу к самооценке

Меняется, что считается готовым экраном: не собранная вёрстка, а поведение при ошибке сети, пустых данных и повторном нажатии.

Сделать сейчас

  • Прохожу свой экран при выключенной сети и при ошибке сервераЧеловек видит, что случилось, а введённое не пропадает.
  • Выбираю способ хранения состояния под задачу и записываю, почемуМогу объяснить, где хватает состояния компонента, а где нужен кеш серверных данных.
  • Ставлю типы так, чтобы невозможное состояние не собиралосьОшибку ловит компилятор, а не тест в проде.
  • Отдаю форму на проверку скринридером до релизаПоля названы, ошибки объявляются, порядок обхода совпадает с видимым.

Куда дальше

Senior

Вбок из роли

Что на ступени спрашивают

  • Выбираю способ хранения состояния под задачу, а не по привычкеМогу объяснить, почему здесь хватает useState, а там нужен кеш серверных данных.
  • Делаю формы, которые честно ведут себя при ошибках сети и валидацииДвойной клик не создаёт две записи, а ошибка сервера не стирает введённое.
  • Пользуюсь типами как инструментом проектирования, а не как формальностьюНевалидное состояние в моих типах невыразимо, а не проверяется в рантайме.
  • Тестирую поведение интерфейса, а не детали реализацииТест не ломается от переименования класса, но ломается от сломанного сценария.
  • Проверяю доступность до релиза, а не по жалобеПрохожу свой экран клавиатурой и скринридером и знаю, где в нём aria действительно нужна.

Обычные ошибки

  • Тестировать детали реализации: тесты краснеют от переименования класса и молчат на сломанном сценарии.
  • Держать один и тот же факт в двух местах: состояния расходятся в первый же день.
  • Оставлять доступность на конец: правка семантики после релиза стоит дороже, чем на макете.

Что учить

  1. Junior
  2. Middle
  3. Senior
  4. Дальше: ветвление, а не ступень

Senior

Сразу к самооценке

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

Сделать сейчас

  • Описываю границы модулей клиента и правило, по которому добавляют экранНовый разработчик кладёт файл, не спрашивая меня.
  • Смотрю на скорость загрузки у реальных пользователей, а не на прогон у себяРаботаю от полевых данных и знаю, кому у нас медленно.
  • Объясняю дизайну цену макета через поведение, а не через «так нельзя»Спор заканчивается заменой решения, а не обидой.
  • Разбираю с командой, что мы выиграли и что потеряли на выбранной модели рендерингаВыбор записан вместе с ценой, и его можно пересмотреть.

Куда дальше

Дальше: ветвление, а не ступень

Вбок из роли

Что на ступени спрашивают

  • Держу архитектуру клиента: границы модулей, общие контракты, чужой кодНовый разработчик добавляет экран, не спрашивая, куда положить файл.
  • Улучшаю метрики загрузки по измерению у реальных пользователейРаботаю от полевых данных, а не от лабораторного прогона на своём ноутбуке.
  • Осознанно выбираю модель рендеринга и понимаю её ценуМогу объяснить, что мы выиграли и что потеряли, уйдя на серверный рендеринг.
  • Понимаю клиентские классы атак и не полагаюсь на проверки в браузереЗнаю, зачем нужен CSP, и не считаю валидацию на клиенте защитой.
  • Разговариваю с дизайном на одном языке и спорю по существуМогу сказать, что в макете дорого и чем это заменить, а не просто «так нельзя».

Обычные ошибки

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

Что учить

  1. Junior
  2. Middle
  3. Senior
  4. Дальше: ветвление, а не ступень

Дальше: ветвление, а не ступень

Сразу к самооценке

Ступени вверх нет: выбирать приходится не высоту, а работу — инструменты для чужих команд, продукт или люди.

Сделать сейчас

  • Отдаю свой общий компонент другим командам вместе с версиями и путём обновленияУ библиотеки есть внутренние пользователи, а не только автор.
  • Переношу правило качества из переписки в конвейерПроверка живёт в CI, и про неё нельзя забыть.
  • Беру размытую проблему без владельца и довожу её до решенияРабота закрыта, хотя постановки не было ни у кого.
  • Веду рядом человека, который дальше справится без меняЕсть люди, которые могут подтвердить, чему научились рядом.

Куда дальше

Дальше не ступень, а развилка

Вбок из роли

Что на ступени спрашивают

  • Делаю инструменты для других команд и отвечаю за их удобствоУ моей библиотеки есть версионирование, миграции и живые пользователи внутри компании.
  • Ставлю практику качества на весь фронтенд компанииПравила живут в CI, а не в переписке.
  • Тяну задачи, у которых нет владельцаВзял размытую проблему, разложил её и довёл до решения.
  • Поднимаю уровень команды, а не только свойУ меня есть люди, которые выросли рядом со мной и могут это подтвердить.

Обычные ошибки

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

Что учить

Исходники IT Tools · GPL-3.0 Исходники Digitable Chat · GPL-2.0-or-later Документы