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

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

​​Дождались!

Выпуск АйТиБороды с Ильёй Леонтьевым в начале марта навёл немалую шумиху в 1сной телеграмной тусовке. Шумиха докатилась и до сообщества самого Бороды, и "одинэсники забайтили меня на ещё один выпуск" (с)

Идея возникла быстро и спонтанно - почему бы двум жителям Минска и Москвы не пересечься для записи в середине недели в Санкт-Петербурге? День на решение, пара дней на подготовку и вот мы с женой уже отправляемся по маршруту "чемодан-вокзал-сапсан" :)

Не всеми вещами в интервью я доволен, но как минимум было весело! Надеюсь, будет весело и вам :)

Ссылка на анонс на канале АйТиБороды: https://t.iss.one/itbeard/667

Всем привет! Сделал сборку для VanessaADD для точечной настройки дымовых тестов с возможностью оставить для проверки только объекты расширения. Более подробно описал на странице проекта на GitHub.

Демонстрация: https://youtu.be/NzB2dIhH08s
Сборка: https://github.com/leobrn/ones-smoke-allure

Кстати, тема дымовых тестов и использование VanessaADD была одна из первых тем на курсе по DevOps (https://t.iss.one/ovmst/90).
Используете ли вы VanessaADD? Расскажите про свои кейсы.

На просторах ютуба нашел плейлист по данной теме https://www.youtube.com/playlist?list=PLB1FqRhexVy65PCet9YFZ9uHAh6hu2C24
Тема раскрывается даже лучше, чем на курсе.
#1С #vanessa #devops

⭐️Простые инструменты для проверки кода и доработок

1️⃣ Phoenix BSL

Позволяет анализировать код 1С в конфигураторе. Инструмент основан на проекте BSL LS.

Открываем модуль в конфигураторе, легким движением руки (CTRL + I) получаем список замечаний для выделенного кода. Есть возможность отключения проверок и изменения их параметров.

На YouTube можно посмотреть детальные обзоры и настройку:
- Знакомство с Phoenix BSL для 1С
- Свои настройки BSL LS
- Часовой вебинар "Phoenix BSL для 1С"
1. Что такое BSL Language Server.
2. Зачем нужен Phoenix BSL если есть SonarQube,
3. Как установить инструмент. Какие есть зависимости. Как настроить.
4. Как пользоваться на «живых» примерах.
5. Ответы на вопросы.
- Техкружок #2: Новые диагностики BSL Language Server. Phoenix BSL. Настройка конфига BSL LS 1С

Пример файла с настройками.

Минусы:
- Нету Portable версии 😢
Одна из причин, по которой, не удалось убедить пользоваться старожил отдела, тот факт, что нужно устанавливать на удаленном сервере у клиента и часто приходиться для этого просить админов со стороны клиента и объяснять необходимость софта. Плюс первый раз нужно запустить под администратором.
Думаю, выход portable версии увеличит пользователей данного инструмента.
Есть шансы, что когда-нибудь ее увидим.

2️⃣ Групповая проверка доработок

Обработка для массовой проверки доработок конфигурации: Открытие форм, Печать, Формирование отчетов, Проведение документов, Запись справочников, ПВХ, ПВР. Выдает список обнаруженных ошибок. Рекомендуется применять для тестирования обновленной конфигурации.

Используем для маленьких клиентов. Раздал консультантам, чтобы после обновлений тестировали ключевые объекты. Помогает сократить количество звонков после обновления ("Не можем отгрузить товар после обновления").

Минусы:
- При проверке форм проверяются все формы объекта => будет много ошибок, где не хватает параметров. Можно решить вопрос доработкой, оставив для проверки только основные формы объекта.

Скриншоты инструментов будут в комментариях
#1С

Альтернативный способ проверки доработок после обновления с помощью внешней обработки (начало https://t.iss.one/ovmst/93)

Обработка и подробное описание: https://github.com/leobrn/ones-smoke-allure

В видео для автоматизации некоторых операций использовалась vanessa-runner. С версии 1.11.0 будет доступна команда init-project.

С ее помощью можно быстро развернуть проект следующими командами:

vrunner init-project --template https://github.com/leobrn/ones-smoke-allure.git
vrunner init-project --settings my-path/env.json

С помощью vanessa-support в видео получали готовый json-файл для всех метаданных, которые могут быть изменены и не находятся в режиме чтения.

Подборка материалов, которая поможет вам разобраться, как внести свои изменения в библиотеки для OneScript:
1) Создаем свою библиотеку для OneScript
2) Обзор имеющихся библиотек OneScript
3) Отладчик 1Script. Как пользоваться, настраивать, подключать
4) Поиск по репозиторию библиотеки на github

#1С #vanessa

Встречайте новый релиз Vanessa-ADD - 6.8.0!
- за 1,5 года множество улучшений, изменений, доработок!

Подробное описание релиза https://github.com/vanessa-opensource/add/releases/tag/v6.8.0

Посвящается конференции INFOSTART EVENT 2021 Moscow Premiere, которая стартует завтра, 11.11.2021 https://event.infostart.ru

Всех с наступающим! Опубликовал инструмент для форматирования на основе двух проектов SmartConfigurator. Очень выручает при рефакторинге старого кода. Не требует установки. Уже пол года используем данный инструмент
https://github.com/leobrn/ones-formatting

Новая статья. Тема Ревью-кода. https://infostart.ru/1c/articles/1843645/