HTML CSS JavaScript TypeScript — страница 5
Семантика, DOM, события, формы, модули, Fetch, async/await, типизация и проверка данных
Материалы
- Современный JavaScript: каталог в браузере
40 уроков JavaScript: каталог, URL, запросы, формы, данные, компоненты, наблюдатели и Web Worker.
- Современные HTML и CSS: от документа к каталогу
32 урока HTML/CSS: семантика, формы, каскад, Grid, адаптация, слои, subgrid, размеры, dialog и popover.
- TypeScript: типы учебного каталога
24 урока проводят от модели каталога и обобщённых функций к асинхронным операциям, DOM, формам, ответам API и постепенной миграции JavaScript.
- Современные нативные интерфейсы: учебный каталог
Четырнадцать последовательных уроков с полными исходниками каждого этапа.
- Прогрессивное улучшение веб-интерфейса: каталог уроков
Задать доступный каталог со ссылками и отдельным слоем улучшений.
- HTML dialog: карточка урока в нативном диалоге
Открывать дополнительную карточку через showModal и возвращать фокус.
- Popover API: всплывающая справка в веб-интерфейсе
Добавить немодальный popover с доступной текстовой альтернативой.
- CSS anchor positioning: привязка справки к кнопке
Разместить popover рядом с anchor без вычисления координат JavaScript.
- CSS anchor positioning: запасные позиции у края экрана
Задать flip-block и flip-inline и ограничить размер панели.
- Плавная смена фильтра с View Transitions
Обновлять список внутри одного документа с обходом неподдерживаемого API.
- View Transitions: переходы между страницами каталога
Включить переходы между двумя документами одного происхождения.
- Scroll-driven animations в CSS: полоса чтения
Создать декоративный индикатор на scroll timeline без scroll-обработчика.
- CSS view timeline: появление карточек при прокрутке
Связать небольшое изменение карточки с её видимостью, сохранив базовое содержимое.
- Доступная анимация сайта: настройки движения пользователя
Отключить необязательные эффекты в CSS и JavaScript при reduced motion.
- CSS style queries: плотность карточек
Передавать семантическую плотность через custom property и style query.
- Типизированный CSS attr(): визуальная шкала
Использовать attr с числовым типом только для дополнительного отображения длительности.
- CSS: контрастный текст и запасной цвет
Добавить contrast-color как улучшение поверх заранее выбранной пары цветов.
- Нативный веб-интерфейс: передача интерфейса с матрицей возможностей
Зафиксировать клавиатурные маршруты, деградацию и бюджет ресурсов.
- Ajax-загрузка файлов с индикатором
Пример реализации асинхронной загрузки файлов на сервер с отслеживанием состояния и обработкой ошибок на jQuery и C#
- Cookies файлы
Описание способов чтения, записи и удаления cookie-файлов с помощью JavaScript
- CSS-фреймворк jQuery UI
Описание наиболее важных классов CSS-фреймворка jQuery UI, обеспечивающих согласование внешнего вида элементов с внешним видом виджетов jQuery UI
- CSS3 - многостолбцовые макеты
Использование CSS3-свойства column-count для создания многостолбцового макета для большого текста
- CSS3 - мобильные интерфейсы
Оптимизация сайтов под мобильные устройства с помощью возможностей CSS3
- CSS3 - новые псевдоклассы
Описание и примеры использования некоторых новых псевдоклассов CSS3