Карта изучения JavaScript https://miro.com/app/board/o9J_lfZRBE8=/
Добавляйте в избранное ⭐️

По 1C: TODO. На этой неделе планируется перенос текущего функционала на 1С.
Как это будет выглядеть, увидим позже по результату.

Параллельно изучаю курс "JavaScript. Стань Senior Frontend Разработчиком" Владилена Минина. В нем разрабатывается упрощенный аналог excel.
Просмотрена половина курса, многое принято на заметку.
После просмотра были переписаны многие участки кода и менялась структура проекта 1C: TODO.

#избранное

Всем привет✋
Перенес текущий функционал на 1С.
Результат работы можете посмотреть в видео https://youtu.be/qa32y2XTNho

Дальше в планах реализовать ещё несколько интересных фишек для этого приложения.

Не забывайте, что у канала есть чат t.iss.one/ovmst_chat. Там выкладываю промежуточные результаты и пишу о проблемах с которыми сталкиваюсь.

#mobile1C

Практика. Перенос верстки на JavaScript.

После изучения статьи "[mobile] Переносим HTML интерфейс на 1С"
(https://infostart.ru/1c/articles/1319458/) рекомендую попрактиковаться.
Для этого предлагаю пройти воркшоп "Икеа" на JS, где готовую верстку перенесете на JS. Подходит для новичков.

Изучите на практике переменные, типы данных, операторы, условные конструкции, циклы, функции, DOM, event события мыши и браузера, fetch(get/post), localStorage, модульность (import/export), ES6

1️⃣ День 1. https://www.youtube.com/watch?v=VBuaryMyN9A&download=dm
Получение необходимы элементов со страницы. Реализация меню с категориями и подкатегориями.
Генерация header, footer и меню.
2️⃣ День 2. https://www.youtube.com/watch?v=xGiuH8nj0S0&feature=emb_logo&ab_channel=GloAcademy
Реализация модулей для удобства (import/export). Получение товаров с сервера:
по каталогам, поиск, корзина, лист желаний, один товар.
3️⃣ День 3. https://www.youtube.com/watch?v=qt6fVPPN6ic&download=dm&ab_channel=GloAcademy
Вывод актуального каталога и подкаталога. Отрисовка карточек товаров.
4️⃣ День 4. https://www.youtube.com/watch?v=xAEEfCKN3qs&t=1474s&ab_channel=GloAcademy
Продолжение 3 дня. Использование localStorage
5️⃣ День 5. https://www.youtube.com/watch?v=L4Qxu7xgxfw&t=700s&ab_channel=GloAcademy
Реализация корзины. Изменение количества, пересчет суммы. Отправка заказа.

Через неделю сделаю еще одну заключительную подборку по данной теме.

Лайфхак: устанавливайте скорость воспроизведения x2

#избранное

Хороший сайт про рефакторинг и паттерны 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

Где брать идеи для стилей?
Добавляйте в избранное ⭐️

В последнее время для этих целей я использую Ютуб. Достаточно вбить простые запросы: loader css, input css, form css и т.д. Помимо готового кода вы еще получаете практику создания элемента т.к. все видео сделаны в формате видеоурока. Стоит заметить, что самый "сок" нужно искать в англоязычных видео.
Примеры видео:
loader: https://www.youtube.com/watch?v=QLiZ5VrhA98&t=27s
input: https://www.youtube.com/watch?v=IxRJ8vplzAo&ab_channel=DevEd
responsive login & registration Form: https://www.youtube.com/watch?v=piG91X4sV2U&ab_channel=TrueCoder
Со временем вы будете находить каналы, которые специализируются на стилизации и у них есть отдельные плейлисты для каждого назначения.

Доп. сервисы:
1️⃣Красивые фотографии:
https://unsplash.com/
(преимущества данного сервиса, что есть возможность вывода рандомной картинки из колллекции https:/ source.unsplash.com/)
2️⃣SVG:
https://material.io/resources/icons/?style=baseline
https://fontawesome.com/ (в интернете можно найти бесплатный архив со всеми иконками)
3️⃣Юникод символы:
https://unicode-table.com/ru/
4️⃣PNG:
https://icons8.ru/
https://www.iconfinder.com/
5️⃣Красивые css градиенты:
https://cssgradient.io/gradient-backgrounds/
6️⃣Шрифты
https://transfonter.org/ (для конвертации)
https://google-webfonts-helper.herokuapp.com/fonts

#избранное

Всем привет. На следующей неделе покажу, что мне удалось реализовать для приложения 1С:Список.

А пока предлагаю посмотреть два видео:
1) Сегодня прошел интенсив во Владивостоке по Front-end (Докладчик Владилен Минин)
https://youtu.be/PB49rKBQKsw
2) Интервью с Владиленом "Владилен Минин – Как один JS разработчик меняет сферу образования и вдохновляет на разработку"
https://youtu.be/zeR7vNrNlGg

#избранное

Промежуточные результаты на JavaScript. Переделаю ещё несколько моментов и буду переносить данную версию на 1С.
Напишите в комментариях, что не нравится/убрать/добавить.
https://youtu.be/wD88D27NUB4

#mobile1C

Всем привет! Использовали ли вы docker в проектах 1С? Расскажите про ваши кейсы в комментариях.
https://youtu.be/cKcMSxNuWNE

Всем привет!
Перенес последнюю версию реализованную на JS в 1С. Прикрепляю небольшое видео.

Есть ещё несколько моментов, которые нужно подправить.
Дальше соберу apk файл и начну тестировать.

#mobile1C

Обновил сегодня мобильную платформу на последнюю и вот какая новая фича там появилась.

Теперь нужно понять как ее отключить 😁

Напишите в комментариях кто знает как это отключить

#mobile1C

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

Расскажу про метод 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 #избранное

📖 Полезное CSS свойство pointer-events

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Часто применяется для того, чтобы в сложной компоновке можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие.

Рассмотрим простой пример https://gist.github.com/leobrn/aabe649de5f1f1c92c0952da852f2056
У нас есть форма с несколькими элементами. Мы решаем, что оптимально будет обрабатывать клики по элементам в одном месте установив обработчик на корневой элемент form и в зависимости от ID элемента выполнять действие.

Внутри кнопки (тег button) у нас находится svg иконка.

Кликаем по кнопке в районе иконки и видим в консоле, что наш целевой элемент svg, а не кнопка. Чтобы исключить svg нам нужно для данного тега указать pointer-events: none.
Тем самым мы предотвращаем события мыши и щелчки по элементу. Простыми словами иконка стала невидима для клика и мы проваливаемся сквозь элемент.

#верстка #избранное