Сервис для загрузки и просмотра изображений
Репозиторий создан для обучения на интенсивном онлайн‑курсе «JavaScript. Профессиональная разработка веб-интерфейсов» от HTML Academy.
Изучаем основы JavaScript, познакомимся с актуальными возможностями стандарта ECMAScript 2018, разбираемся, как оживлять статичные страницы, валидировать данные в формах, взаимодействовать с серверами и практикуемся решать типовые задачи.
Кекстаграм — сервис просмотра изображений. Пользователям предоставлена возможность загружать свои фотографии или просматривать фотографии, загруженные ранее другими пользователями.
- Загрузка нового изображения на сайт и заполнение информации о нём:
- выбор файла с изображением для загрузки;
- изменение масштаба изображения;
- применение одного из заранее заготовленных эффектов: «Хром», «Сепия», «Марвин», «Фобос», «Зной»;
- выбор глубины эффекта с помощью ползунка;
- добавление текстового комментария;
- добавление хэш-тегов.
- Отправка данных на сервер
- Просмотр загруженных изображений
- Фильтрация изображений от других пользователей
Рассмотрим схему работы на курсе, какие инструменты понадобятся. Разберём, что представляет собой язык JavaScript, причем здесь спецификация ECMAScript и браузер. Начнём разбирать основы JavaScript.
Продолжим изучать основные конструкции JavaScript, особенно пристально — функции. Разберём нюансы объявления переменных. Немного затронем контекст выполнения this. Познакомимся с инструментами разработчика.
Познакомимся со сложными типами данных: массивами и объектами. Научимся создавать их и управлять ими. Затронем тему структур данных, и как их использование может облегчить разработчику жизнь. Рассмотрим встроенные в JavaScript объекты. Запустим и отладим код в консоли инструментов разработчика.
Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, и при этом делать больше. Узнаем, что такое модули, как делить на них код и зачем.
Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее. Рассмотрим динамическое взаимодействие с пользователем: как сделать так, чтобы страница начала реагировать на ввод текста в формы, нажатие на определённые элементы, прокрутки и прочее.
Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с внешними API, которые предоставляет нам браузер, а также со сторонними JavaScript библиотеками и JavaScript API картографических сервисов.
Разберём понятие асинхронности и способы её достижения: колбэки и setTimeout, Promise. Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так, и что с этим делать.
Оптимизируем работу с данными и событиями в приложении. Реализуем понятную и приятную пользователю обратную связь интерфейса.
Познакомимся с такими программами, как сборщики, и узнаем, как они могут облегчить жизнь фронтенд-разработчику.
Подведение итогов.