TODO JS:
1) Оповещение при входе в программу (выезжает сверху)
2) Боковое меню
3) Тач слайдер (будет использоваться на главной странице для акции и для фотографий товара в карточке).
3.1) Если изображений больше 5 то навигация отображется цифрами, если меньше то кругами
4) Перемещение поиска в шапку приложения при активации, при отмене возвращение в исходную позицию
5) Отлавливать события переключателей (каталог, салоны, вход в ЛК, параметры)
6) На главной странице плавное появлиение стрелок у ссылок
7) В каталоге изменять направление сортировки при нажатии "По стоимости"
8) При нажатии на кнопку сравнения выходит модальное окно
9) При нажатии на фото товара оно открывается для просмотра
10) В товаре при повторном нажатии на активеные детальные записи закрывать их
11) При входе в ЛК проверять заполненность полей (телефон, пароль) и менять состояние кнопки Войти
11.1) Проверка на корректность ввода, маска ввода для полей
12) В корзине при сдвиге карточки влево появляются кнопки Изменить и Удалить
13) В заполнение параметров сделать свое поле select
14) "Ленивая загрука" изображений
15) В каталоге подготовить дозагрузку карточек (по 10 штук). Отлавливать событие прокрутки/видимости.
16) В профиле предусмотреть возможность нажать на изображение, которое будет инициировать выбор фото в 1с

#mobile1C

Добавил уведомления, которые будут при входе в приложение

#верстка

Демонстрация выезжающих блоков (боковое меню, уведомление). В процессе разработал небольшую компоненту для удобства работы с такими блоками. Пока тренируюсь на коротких видео, осваиваю программу Movavi. Следующее видео уже постараюсь сделать полноценным уроком, разберем создание собственной компоненты для выезжающих блоков. https://youtu.be/ZXxg2TFTx10

#верстка #javascript

Всем привет. Сделал небольшую компоненту на чистом js для реализации выезжающих блоков в проектах.
Исходники:https://github.com/leobrn/slideBlock
Демо:https://leobrn.github.io/SlideBlock/
Демо-видео: https://www.youtube.com/watch?v=ZXxg2TFTx10&feature=youtu.be
Если есть кто хорошо знаком с js и знает как более правильно оформить код для компоненты, напишите в ЛС.
Если есть пожелания по функционалу или нашли ошибку пишите в чат @ovmst_chat

#github

Подборка материалов, которые помогут оформить свою компоненту на JavaScript:
1) Объекты в JavaScript и создание JS-компонента. Часть 1 https://habr.com/ru/post/240375/
2) Зачем в JavaScript нужен строгий режим? https://habr.com/ru/company/ruvds/blog/477284/
3) Анонимные и самовыполняющиеся функции в JavaScript https://webformyself.com/anonimnye-i-samovypolnyayushhiesya-funkcii-v-javascript/
4) Prototype, use strick, this, самовыполняющиеся функции и многое другое https://kelebro13.gitbooks.io/javascript/content/prototype.html

Если хотите видео подборку материалов, напишите в чат @ovmst_chat

#избранное

Разрабатываю модальные окна для приложения. Реализовываю их с помощью компоненты своей SlideBlock.js

#верстка #javascript

Доработал компоненту SlideBlock.js для реализации модальных окон. В проекте с ее помощью реализовал добавление товара в сравнение. https://youtu.be/PLeggjwMIzc

#верстка #javascript

Реализован следующий функционал для корзины на JavaScript:
1) Подсказка для пользователя в виде модального окна (SlideBlock.js)
2) Смещение карточек в корзине для доп. действий с помощью тач событий (TouchBlock.js)
Все компоненты реализованы самостоятельно.
https://youtu.be/VVCVbbOt_YA

#верстка #javascript

Осталось реализовать из этого списка 3 и 11 пункт и второй этап разработки можно будет считать завершенным

В проект добавлен следующий функционал:
1) Анимация поиска при активации
2) Свое стилизованное поле выбора (select)
3) Реализован лоадер (loader) при загрузки больших страниц и при загрузке карточек с товарами в списке
4) Отложенная загрузка (lazy load) для загрузки изображений в списке товаров и с его же помощью реализована порционная загрузка товаров (по 10 шт.)
https://youtu.be/vzZ1t0YG_tE

#верстка #javascript

Разрабатываю функционал слайдера на базе функционала реализованного для сдвига карточек в корзине

#верстка #javascript

Плагины , которые я использую для VS Code:
Live Server - для автоматического обновления страницы при изменении
Beautify css/sass/scss/less - для форматирования
ESLint - для форматирования js
Russian Language Pack for Visual Studio Code - для русского языка
Git Graph - для удобного отображения изменений/веток
Git History Diff - для просмотра истории изменений
Less IntelliSense - упращает работу при использование предпроцессора less для css

Оформление:
indent-rainbow - оформление табов
Material Icon Theme - иконки файлов/папок
Material Theme - темы

#избранное