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

#верстка

Демонстрация выезжающих блоков (боковое меню, уведомление). В процессе разработал небольшую компоненту для удобства работы с такими блоками. Пока тренируюсь на коротких видео, осваиваю программу 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 - темы

#избранное

https://youtu.be/R-5Yp8lxsvE
На базе собственной компоненты TouchBlock.js, которая была разработана при реализации функционала для корзины (https://youtu.be/VVCVbbOt_YA), добавлен функционал слайдера.
TouchBlock.js:
►GitHub: https://github.com/leobrn/TouchBlock
►Демо: https://leobrn.github.io/TouchBlock/

#верстка #javascript

В завершение второго этапа разработки добавлена валидация формы, компонента для маски полей ввода на примере номера телефона. Третьим этапом идет перенос функционала на 1С.
https://youtu.be/uxUvlnqXytU

#верстка #javascript

Материалы к статье [mobile] Переносим HTML интерфейс на 1С (https://infostart.ru/public/1319458/ ):
1) mobile1c_adapt_1c: https://yadi.sk/d/teOzmOwyRdHZcg
2) mobile1c_adapt_js: https://yadi.sk/d/kumZG_L3SxYFRQ
3) Видео со сравнением: https://youtu.be/66BHGBY73C0
4) Исходники верстки https://github.com/leobrn/mobile1c-adapt
5) Демо верстки https:https://leobrn.github.io/mobile1c-adapt/

Поддержите статью и бесплатный контент поставив плюс на сайте

#избранное