Frontend engineering

Объяснение

Браузер строит DOM и дерево стилей, вычисляет layout, рисует и композитит слои. Изменение геометрии может вызвать layout; изменение transform часто обходится без него. Чередование чтения размеров и записи стилей создаёт лишние перерасчёты.

Задача для самостоятельного решения

Как обновить размеры ста карточек без ста синхронных layout?

Объяснение

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

Задача для самостоятельного решения

Нужно ли хранить count отдельно от items.length?

Объяснение

Серверное состояние может устаревать и требует стратегии кеша. Форме нужны состояния ожидания, успеха и ошибки. Ответы асинхронных запросов могут приходить не в порядке запуска.

Задача для самостоятельного решения

Пользователь ввёл A, затем AB, но ответ A пришёл последним. Как избежать старого результата?

Объяснение

Семантическая кнопка поддерживает клавиатуру и доступное имя. Модальное окно должно управлять фокусом, иметь заголовок и возвращать фокус после закрытия. Цвет не должен быть единственным признаком ошибки.

Задача для самостоятельного решения

Почему div с обработчиком click не эквивалентен button?

Объяснение

Unit-тест проверяет вычисление, компонентный — взаимодействие внутри UI, E2E — сквозной сценарий. Проверки через роль и доступное имя меньше зависят от CSS. Таймауты не заменяют ожидание конкретного состояния.

Задача для самостоятельного решения

Как проверить отправку формы устойчиво?

Объяснение

Производительность включает загрузку, отклик на действие и стабильность макета. Большое изображение и тяжёлый JavaScript влияют на разные этапы. Оптимизация должна сопровождаться измерением на слабом устройстве.

Задача для самостоятельного решения

Как предотвратить прыжок страницы при загрузке картинки?

Подготовка

Браузер; используйте учебную HTML-страницу с элементами ниже.

Учебный пример

<label for="name">Название задачи</label><input id="name">
<button id="add" type="button">Добавить</button>
<p id="status" role="status"></p><ul id="tasks"></ul>
<script>
const input = document.querySelector('#name');
document.querySelector('#add').addEventListener('click', () => {
  const title = input.value.trim();
  if (!title) { document.querySelector('#status').textContent='Введите название'; return; }
  const item = document.createElement('li');
  item.textContent = title;
  document.querySelector('#tasks').append(item);
  input.value=''; input.focus();
  document.querySelector('#status').textContent='Задача добавлена';
});
</script>

Как работает пример и что ожидать

Пустой ввод даёт сообщение, непустой создаёт элемент и возвращает фокус. textContent выводит введённую строку как текст, а не исполняет HTML. Состояние пока хранится только в DOM и исчезает при перезагрузке — это явное ограничение первого шага.

Итоговая работа

Выделите модель задач, сохранение, маршрутизацию и восстановление. Добавьте компонентные тесты и E2E клавиатурного сценария. Измерьте работу большого списка и предусмотрите состояния загрузки, ошибки и пустого результата.

Проверка результата

1. Опишите исходные данные и условия запуска, чтобы другой человек мог повторить работу.
2. Приложите результат обычного сценария и сравните его с ожидаемым.
3. Проверьте неверный вход, граничный случай и отказ зависимости, если она есть.
4. Объясните выбранное решение и известное ограничение.
5. Сохраните исправления после самопроверки вместе с примером, который раньше не работал.

Как оценить работу

По каждому пункту поставьте 0 (не выполнено), 1 (выполнено с пробелами) или 2 (результат воспроизводим и объяснён). Если обязательный сценарий не работает, вернитесь к нему независимо от общей суммы. Это рубрика самопроверки: сайт не исполняет присланный код и не выдаёт автоматическую оценку проекта.