Проект: Место

Обзор

Сервис публикации фотографий. (Учебный проект).

Закрепление учебного материала по языку программирования Javascript:

• Условные конструкции и циклы
• Массивы и их методы
• Функции и обработчики событий
• Работа с DOM
• Дебаггинг Javascript
• —
• Объекты
• Обработка форм
• Валидация форм
• События клавиатуры и мыши
• Делегирование событий
• —
• ООП в JavaScript
  • Инкапсуляция
  • Наследование
  • Полиморфизм
• Классы (class, extends)
• Модули (import, export)
• Введение в this
• —
• Деструктуризация
• ООП в интерфейсах
• Привязка this и потеря контекста
• Сборка проекта Webpack'ом
• —
• Асинхронное программирование
• Промисы
• Работа с API

Для динамического изменения контента под разные разрешения используются CSS-шлюзы:
y = (x - x1) / (x2 - x1) * (y2 - y1) + y1

где
y — искомая величина
x — текущая ширина области просмотра
x2 и x1 — макс. и мин. ширина области просмотра
y2 и y1 — макс. и мин. значения свойства в пределах шлюза

Формула не подверглась сокращениям для автоматизации вычислений.

Инструменты разработки

• Графический редактор Figma
• Редактор кода VSCode
• Chrome DevTools
• Система контроля версий Git
• Webpack
  • Babel
  • HtmlWebpackPlugin
  • пакеты для изображений: file-loader, html-loader
  • пакеты для css:
    • css-loader
    • mini-css-extract-plugin
    • postcss
    • autoprefixer
    • cssnano

Использованные технологии

• HTML5, CSS3, ECMAScript6+
• Методология БЭМ
• Унификация стилей при помощи normalize.css
• Семантическая вёрстка
• Flexbox, Grid Layout
• Шаблонные теги
• Отзывчивый интерфейс
• CSS-шлюзы

Лог обновлений

Спринт 9

• Взаимодействие с сервером
  • Загрузка данных и редактирование профиля
  • Добавление/удаление карточек
  • Сохранение/снятие лайков
• Улучшенный UX форм
• Попап подтверждения при удалении карточки

Спринт 8

• ООП для всего проекта
• Сборка проекта Webpack'ом

Спринт 7

• ООП в реализации карточек
• ООП в реализации валидации

Спринт 6

• "Живая" валидация форм
• Хранение настроек валидации в объекте
• Обработка событий клавиатуры
• Закрытие попапов через делегирование событий

Спринт 5

• Загрузка карточек из сохраненного массива
• Реализована форма добавления карточки, включая функционал добавления
• Добавлен функционал для лайков карточек
• Добавлен фукнционал удаления карточек
• Добавлен режим просмотра карточки в полном размере
• Плавность открытия/закрытия попапов

Спринт 4

• Создан интерфейс сервиса
• Реализованы всплывающие окна
• Подстановка данных из профиля
• Редактирование профиля