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

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

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 #избранное