Фронтенд и веб-платформа — страница 3

HTML, CSS, JavaScript, TypeScript, компоненты и статические сайты.

Темы раздела

Материалы

• Последовательность операций с async и await

  Переписываем загрузку учебного каталога через async и await, разбираем возвращаемое значение, ошибки и завершение операции.

• Собираем каталог из модулей и состояний

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

• Состояние интерфейса в URL

  Восстановить фильтр из параметров адреса

• Отмена устаревшего запроса

  Предотвратить применение ненужного ответа

• Гонки сетевых ответов

  Применять результат только актуального запроса

• Постраничный интерфейс для API

  Согласовать адрес, страницу и данные ответа

• Проверка формы в браузере

  Показать ошибки полей и сохранить введённое

• Делегирование событий

  Обработать динамические карточки одним слушателем

• Локальное хранение настроек

  Сохранить предпочтения и пережить отказ хранилища

• Даты и часовые пояса в интерфейсе

  Разделить момент времени и календарную дату

• Форматирование с Intl

  Показать числа и даты для выбранной локали

• Строки и Unicode

  Объяснить различие символов и кодовых единиц

• Map и Set для данных интерфейса

  Выбрать структуру для ключей и уникальных значений

• Итераторы и генераторы

  Получать последовательность значений по запросу

• Контекст вызова функции

  Предсказать this и закрепить нужный контекст

• Замыкания и время жизни данных

  Хранить состояние в доступной функции

• Классы и прототипы

  Объяснить наследование свойств экземпляра

• Пользовательский элемент каталога

  Определить компонент с жизненным циклом

• IntersectionObserver: реагируем на конец каталога

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

• ResizeObserver: диаграмма по размеру контейнера

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

• Web Worker: считаем сводку каталога сообщениями

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

• Перенос jQuery-компонента на стандартные API

  Договор отметок курса, делегирование, текст и классы, независимое отключение обработчика и постепенное снятие зависимости.

• HTML-документ и первые данные каталога

  Начнём каталог курсов с HTML-документа: зададим язык, метаданные и первые видимые элементы.

• Семантическая структура страницы

  Построим семантический каркас каталога: шапку, навигацию, основную область, карточки и футер.