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

#верстка #javascript

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

#верстка #javascript

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

#верстка #javascript

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

#верстка #javascript

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

#верстка #javascript

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

#верстка #javascript

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

Всем привет! Как и обещал , показываю промежуточный результат https://youtu.be/NGWUmrthzjw.

Дайте, пожалуйста, обратную связь в комментариях по наработкам.

#верстка #javascript

Хороший сайт про рефакторинг и паттерны https://refactoring.guru/ru.
Добавляйте в избранное ⭐️

Паттерны, которые упоминались в прошлом посте:
1) Состояние https://refactoring.guru/ru/design-patterns/state
2) Наблюдатель https://refactoring.guru/ru/design-patterns/observer

Видео по теме:
1) JavaScript Паттерны. Шаблоны проектирования. 17 Примеров https://youtu.be/YJVj4XNASDk
2) SOLID Принципы в JavaScript https://youtu.be/xq13wiqvcTc

Если данная тема пока сложная, вернитесь к посту https://t.iss.one/ovmst/63

#javascript

📖 Событие для перерисовки страницы

Расскажу про метод hashchange, который я использовал для приложения заметок.
Он срабатывает, когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #)

window.addEventListener('hashchange', this.changePageHandler)

Когда пользователь выбирает заметку адрес выглядит следующим образом:
https://localhost:3000/#note/1770b4bd805

Т.к у меня в приложение всего две страницы:
1) Главная (https://localhost:3000/)
2) Выбранный список (https://localhost:3000/#note/id)
Мне достаточно в функции this.changePageHandler проверить содержит ли ссылка "note" и отрисовать нужную страницу.

Полезные методы для работы с адресной строкой:
1) Получить содержимое после символа #:
window.location.hash.slice(1) результат note/1770b4bd805
2) Получим id из адресной строки:
window.location.hash.slice(1).split('/')[1] результат 1770b4bd805
3) Зададим путь
window.location.hash = '#note/1770b4bd805' результат https://localhost:3000/#note/1770b4bd805

Внутри мобильной платформы 1С данные методы отрабатывают 👌

Пример кода на GitHub:
https://gist.github.com/leobrn/c8e6601028596fe0a350dabc3f7793e2

#javascript #избранное

📖 Всем привет. Продолжу тему поста https://t.iss.one/ovmst/79 про поддержку синтаксиса JS на старых устройствах.

Что делать, если охота писать на современном синтаксисе и иметь поддержку на старых устройствах?

Транспайлинг – вы пишете на современном JS-синтаксисе, со стрелочными функциями и прочими удобствами, а код автоматически преобразуется в формат, понятный старым браузерам.

Для этого используют Babel. Транспайлер, который переписывает код современного стандарта Javascript (ES2015) на более поздний.
(https://kolmogorov.pro/what-is-it-babel-chto-takoe-dge-ispolzuyut)

Babel используют вместе с различными сборщиками проектов: webpack и gulp.

Webpack - это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Материалы по Webpack:
1) Статья "Настройка Webpack 5 с нуля": https://habr.com/ru/post/524260/
2) Webpack 4. Полный курс 2020: https://youtu.be/eSaF8NXeNsA

Если вы еще не готовы погружаться в данную тему то в дополнение к прошлому посту:
1) Не используйте static (Для того, чтобы объявить статический метод класса, необходимо использовать ключевое слово static).
На версиях android ниже 6 могут возникать проблемы.
2) Если ваше приложения должно иметь поддержку старых версий андроид (<= 4.4), используйте самый примитивный синтаксис js (var, function name(){})

#javascript #избранное