Всем привет. На следующей неделе покажу, что мне удалось реализовать для приложения 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.
Тем самым мы предотвращаем события мыши и щелчки по элементу. Простыми словами иконка стала невидима для клика и мы проваливаемся сквозь элемент.

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

https://youtu.be/HVi6oMYZZWk

Как вам интервью ? Отстоял 1С Илья?

Всем привет. Завтра на партнерском семинаре 1С (https://sem0221.1c.ru/) пройдет "Парад приложений", в котором я принял участие.

В программе (https://sem0221.1c.ru/program) доклад будет в 15:30 Зал 3 - Новый Цех

О параде: https://mobile.1c.ru/parad/
Запись доклада будет доступна на ютубе https://www.youtube.com/watch?v=pWX_NqM_Syw&ab_channel=1CMobile

#mobile1C

📖 Всем привет. Продолжу тему поста 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 #избранное

Всем привет! Если что, я не забросил канал 🧘🏼‍♂️
С марта изучаю Vue.js.

В качестве старта для себя выбрал курс Владилена Минина по 3 версии.
И вот что получилось в качестве результата прохождения:
https://youtu.be/9BMlz-WUjUY

Покликать:
https://vue-online-bank-69ae3.web.app/
[email protected] 123456

Использовались: vuex, vue router, axios, vee validate, yup, firebase hosting, firebase realtime database, composition api

В планах пройти еще несколько материалов по Vue.js, финальные результаты по ним буду фиксировать в таком же видео-формате.
После обучения расскажу, что хочу попробовать реализовать, конечно же в связке с 1С.

В целом очень крутой фреймворк, проще в освоение чем конкуренты (react, angular).
Подтягивайтесь в изучение Vue.js !🔥

#vue

⭐️ Быстрый старт во Vue.js
Составил начальную программу обучения на основе бесплатных материалов.

Блок Основной:
1) Изучаем основы https://youtu.be/p059z-0JTFg
2) Практика. Разбор задачи на собеседование по VueJS (создание SPA)
https://youtu.be/Ez5_CITkg24
3) Читаем переведенную документацию
https://ru.vuejs.org/v2/guide/index.html

Блок Composition api:
1) Composition API на Практике https://youtu.be/Ix8wcwrnPns
2) Чем крут Composition API? Vue 3 практические примеры
https://youtu.be/IVkI90LlBA8
3) Переписываем практику из второго пункта основного блока на сomposition api
4) Не забываем про документацию
https://v3.vuejs.org/guide/composition-api-introduction.html

Блок дополнительный:
1) Все о Vuex за 30 минут. Что такое Vuex. Как работает Vuex (getters, actions, mutations)
https://youtu.be/c2SK1IlmYL8

Блок практика:
1) Практика Vue JS - создание CRM системы (21 урок, 8 часов практики)
https://youtube.com/playlist?list=PLqKQF2ojwm3njNpksFCi8o-_c-9Vva_W0
Рекомендую усложнить себе задачу и попробовать реализовать с помощью composition api

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

https://youtu.be/rl7rz71BU4w
Закончил последнюю практику "Cоздание CRM системы" из последнего поста https://t.iss.one/ovmst/86.
Усложнил задачу использовав Vue 3 + Composition Api.
Из-за усложения некоторым библиотекам из уроков пришлось искать аналоги и где-то реализовывать функционал самостоятельно.

После собрал пожелания по функционалу в комментариях к урокам и реализовал следующий функционал:
1) Фильтр записей по категории и типу
2) Сортировка записей по сумме/дате
3) Загрузка фото профиля
4) Адаптивная версия
5) Удаление записи
6) Модальное окно подтверждения при удалении категории и ее удаление
7) Восстановление пароля
8) Чат и количество новых сообщений

#vue

Quasar framework. Почему я выбрал именно его?
https://www.youtube.com/watch?v=I4bU0hQN-0o

- Большое количество UI компонентов
- Позволяет с помощью одной команды собрать приложение на 1 из 6 платформ (ios, android, windows, linux, mac oc,
расширение для браузера)
- Есть собственный CLI
- Удобная структура проекта
- Поддержка SSR
И многое другое...

Начал разработку приложения с использованием данного инструмента. На данный момент реализована регистрация, авторизация, восстановления пароля, настройки пользователя и основные заготовки для будущего функционала.
#quasar #vue

Всем привет! В ближайшее время буду проходить курс DevOps для 1С https://infostart.ru/public/1450056/?ref=999 старт 16 июля.

- Является ли для вас данная тема актуальна?
- Будет ли вам интересно, если я буду писать про движуху на курсе ?

Если кто-то уже записался, отпишитесь в чате, будем вместе изучать.

#devops #1С

Продолжаю разработку приложения q-blog с использованием Quasar.
Добавлено следующее:
1) На главную страницу добавлен блок с тегами, по которому в дальнейшем можно будет фильтровать посты
2) Таблица топ 5 авторов
3) Страница пользователя. Реализована шапка.
4) Управление пользователями. Назначение администраторов. Поиск, сортировка таблицы
5) Управление тегами. Добавление нового тега. Удаление тегов. Изменение название тега. Управление видимостью тегов. Поиск, сортировка таблицы
6) Страница добавления нового поста с выбором тегов.
Весь добавленный функционал адаптирован под мобильные устройства. В качестве базы данных используется firebase realtime database.

Пока одно удовольствие разрабатывать на связке Vue + Quasar. Очень часто вижу запросы от 1Сников: разработать личный кабинет контрагента, создать кабинет сотрудника (вывод данных из ЗУПа). Данная связка выручит вас. Vue позволит быстро начать разрабатывать веб приложения, Quasar снимет головную боль с формами, таблицами и т.д. Вы будете сосредоточены на получение-выводе-отправке данных.

https://youtu.be/sdcPdPlzYsQ
#vue #quasar