Киллер фича Vue Devtools и IDE

Хочу поделится крутым возможностями которую я недавно обнаружил в Vue Devtools

По умолчанию есть возможность из dev tools перейти прямо к Dom компонента в инспекторе Chrome, что уже очень удобно при отладке разметки и стилей. <> Inspect DOM

Но есть еще более восхитительная возможность переходить в код компонента из браузера прямо в IDE. Можно настроить любой редактор (у меня получилось с VSCode и PHPStorm, другие не пробовал)

Обычно работает из коробки в vue-cli, nuxt, но если нет читайте этот док https://devtools.vuejs.org/guide/open-in-editor.html

Так же эта кнопка появляется только если вы выбираете ваш компонент, а не компонент из Vuetify например.

#vue #devtools #советы

DI и абстракции

При использовании DI будет лучшим выбором определение зависимостей через интерфейсы. Тогда Вам не придется менять код, который использует зависимости.

Например в Nest.JS это можно сделать через Non-class-based provider tokens.

И если у вас поменялась реализация, то будет достаточно просто поменять зависимость в декораторе модуля
#nestjs #di #советы

Многоуровневая передача свойств в Vue.js

Избегайте передачи свойств вложенным компонентам.
Подумайте о том несчастном джуне, который будет дебажить ваш код.
Если одни и те же данные нужны в больше чем одном компоненте, лучше использовать локальный или глобальный стейт - vuex, или composition api

Подробней тут https://bearlogin.notion.site/Vue-3020c1ff6f404768aa9cadd55f6451f7

#vuejs #советы

Error: ENOENT: no such file or directory, stat '/vmlinuz.old'

В один прекрасный день, день стал не таким прекрасным, когда я получил эту ошибку при сборке проекта.

Привычный rm -rf node_modules не спасал. Я дико злился и много гуглил, пока не пролистал логи сборки вверх.

This dependency was not found:
* bowser in ./node_modules/my_awesome_package/src/compositions/useBrowser.js

То есть проблема была в том, что в пакете не были установлены зависимости, так как он подключался локально для разработки. 🤦‍♂️

Окей, гугл, но при чем тут /vmzlinuz.old?
Собсно дело в том, что node_js ищет зависимости аж до system root
https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders
А vmlinuz - Linux kernel executable
https://s905060.gitbooks.io/site-reliability-engineer-handbook/content/anatomy_of_the_initrd_and_vmlinuz.html

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

А какие были у вас проблемы, решение которых оказывалось не в той области, где вы думали?

Docker stack и replicated 0/1

Если при деплое стака сервис никак не поднимается, то начать стоит с команды

docker service ls

Так мы увидим сколько реплик есть у сервиса:

back_swoole replicated 0/1

Затем нужно посмотреть список тасок самого сервиса, c флагом —no-trunc для того чтобы увидеть полный текст ошибки.

docker service ps back_swoole --no-trunc

Rejected 2 seconds ago "No such image: back-swoole-05067e0d@sha256:b33e2b25583f4149711e875c7f83b550184e53d01fd640850140563679283d0b"

В данном конкретном случае у нас отвалилась авторизация в docker hub и docker не смог спулить образ :) А слетела она потому что на диске кончилось место. Вот такая вот курица в яйце...

Self-hosted runners

Обычно в облачных CI\CD есть возможность запускать процессы на self-hosted runners. Это когда ты на любой машине запускаешь образ для определенного сервиса и на нем выполняются определенные шаги pipeline. Это полезно, когда для сборки требуются специфические ресурсы - например GPU, или просто очень мощный процессор. Или когда в проекте очень часто идут билды и просто дорого оплачивать build minutes, так как обычно сервисы не списывают минуты за запуск на вашей машине.

Например в bitbucket pipelines только недавно появились self-hosted runners. https://bitbucket.org/blog/pipelines-runners Пока пощупал на сборке Vue проекта. По скорости сборки выигрыша нет. Планирую сделать запуск selenium тестов на машине с GPU.

На злобу дня

Мне вот интересно, неужели при текущем уровне технологий Вконтакте не могут отслеживать пользователей, которые фоткаются с оружием и пишут посты, что всех убьют? Или это ок? Или это только работает с оскорблением чувств верующих и власти?

Выгорание

Заметил, что даже если ты знаешь все про выгорание, его причины и как с ним справляться, то все равно выгоришь, если есть склонность.

К сожалению у нас нет шкалы в углу экрана "моя энергия" и мы обращаемся с ней, как с кредитной картой - пока есть средства, ты расходуешь не задумываясь. А проблемы начинаются, когда силы внезапно заканчиваются. И их нет даже на то, чтобы отдохнуть. Так как наполняющий реальный отдых и залипание в сериал сильно отличаются по своей эффективности.

Даже если ты работаешь по помидорам, у тебя есть план на день, и на неделю. У тебя на столе лежат "Джедайские техники" и "Сделай это завтра", все равно возникнет такой момент, когда ты скажешь себе "да я вроде не устал, да и знаю как решить эту задачу, не буду прерываться, потом отдохну".

И вот ты уже делаешь коммиты в 3 часа ночи субботы...

Мне справляться с выгоранием помогает психотерапевт, запланированный отдых, и перечитать курс от ТЖ https://journal.tinkoff.ru/pro/burnout/ А как вы справляетесь с этой напастью?

Анемичная vs богатая модель

В DDD есть понятие модель предметной области. Она отражает модель реального мира и может быть двух видов:
анемичная, это когда модель содержит только структуру данных и богатая - модель содержит бизнес логику, которая мапится с моделью реального мира.

Долгое время я использовал только анемичные модели и считал это правильным, а бизнес логику реализовывал в сервисах. Но погружаясь глубже в концепцию DDD, осознал, что богатая модель - это очень полезная и мощная штука. Так как позволяет по коду понять поведение и свойства модели в реальном мире, а не искать по сервисам.

Сервисы в данном случае превращаются в оркестраторы, которые реализуют use cases.

Покажу на простом примере.

class Order {
      shipment: IShipment
      pay: IPayment
      basket: Basket

      constructor(shipment:IShipment, payment:IPayment, basket: Basket) {
        this.shipment = shipment
        this.payment = payment
        this.basket = basket
      }
 

      pay() {
        this.payment.pay()
      }

      ship() {
        this.shipment.ship()
      }
}


class CreateAndPayOrderUseCase {
    handle(basket: Basket) {
        const order = new Order(
          ShipmentFactory::create('DHL'),
          basket, 
          PaymentFactory::create('Stripe')
        )
        order.pay()
    }
}

Таким образом мы видим, что заказ может оплачен и доставлен.

А какую модель выбираете вы?

#архитектура #ddd

Бритва Хэнлона и фейлы

Мы обычно любим рассказывать про свои достижения, а про фейлы умалчивать, но это может быть как познавательно, так и в некоторой степени весело :)

Я думаю у каждого программиста были такие фейлы, которые проходили прямо в соответствии с Бритвой Хэнлона)

Думаю ввести в практику такую тему, и публиковать самые интересные с тегом #бритвахэнлона.
Присылайте мне свои, или пишите в комменты, тоже буду публиковать :)

И так, начну.
Вчера я поднял 2 контейнера - rabbitmq и rabbitmq manager, открыл порт в мир у первого и очень долго не мог понять, почему в manager я не вижу ни подключений ни консюмеров моего микросервиса :)

Я переписывал код, менял библиотеки, скачивал примеры из статей, но все без толку. В логах контейнера подключение было, но в менеджере все так же ничего не отображалось.

В итоге я допер, что rabbitmq manager - это тот же самый rabbit только с подключенным плагином менеджера и все это время я ломился в одну ноду rabbitmq, а мониторил другую. То есть нужен был только второй контейнер, а первый можно удалить :) #бритвахэнлона #rabbitmq

Jetbrains и тормоза

Если у вас в какой то момент начинает тормозить PHPStorm или любая другая Idea, и не просто тормозить, но и вешать всю систему, не спешите выбрасывать из окна ваш ПК и бежать в магазин за новым макбукпро. Проверьте логи и heap size. Если Used больше или близко к Max Heap Size, то просто увеличите последний и тормоза исчезнут :)

Подробней тут https://www.jetbrains.com/help/phpstorm/increasing-memory-heap.html

P.S. комрады сообщают, что еще при этом ускоряется индексация

Nginx DNS и Docker

Когда мы запускаем сервисы докер внутри докер сети, то обращаемся к ним по хостам, например mongo, server, client и т.д.

Как и любое доменное имя оно резолвится DNS сервером в IP адрес. Только в нашем случае внутри сети докера. И по умолчанию внутренний DNS докера находится по адресу 127.0.0.11

Если мы используем Nginx для проксирования запросов к сервисам, например так:

proxy_pass http://client;

То можем столкнуться с проблемой, что nginx перестает проксировать сервис после его рестарта или деплоя.

Дело в том, что nginx кеширует DNS при запуске и чтении конфигурации, а при рестарте контейнера у него меняется IP адрес и, соответственно, запись в DNS, но NGINX об этом не знает!

Для решения этой задачи нам потребуется прописать resolver в секцию server

resolver 127.0.0.11 valid=30s;

А так же поместить в переменную значение proxy_pass, так как правило resolver используется только для proxy_pass с переменными.

set $client "client";
proxy_pass http://$client;

А Вы сталкивались с такой проблемой?

#docker #nginx #proxy #resolver

Traefik vs Nginx

Обычно я для проксирования сервисов на docker-compose или stack применял nginx. Но у него есть очень неприятный недостаток - нет поддержки Letsencrypt из коробки.

Если standalone nginx еще норм дружит с certbot, который сам после обновления сертификата перезагружает сервер, то с docker все сложней.

Так как Nginx не может без перезагрузки применить новый сертификат, то приходится либо руками перезагружать контейнер, либо писать хуки для контейнера с certbot. Плюс нужно подкладывать фейковый сертификат в конфиг nginx на первый запуск, чтобы он вообще запустился. В общем те еще танцы с бубном. Плюс бывает что certbot подкидывает проблем, например не может авторизоваться.

Так получилось, что в последнее время мне пришлось поднимать много хостов и сервисов для нашего нового сервиса видео звонков для проведения интервью в Huntica.

Изрядно повоевав с Nginx, я решил посмотреть в сторону Traefik, с которым уже имел позитивный опыт использования.

Полный пост тут https://bearlogin.notion.site/Traefik-vs-Nginx-614c207be76f49ab9c7207331642e9a0

Event Loop или почему страницы тормозят 💤

Наверное вы замечали что страницы сайтов в какой то момент перестают отвечать и "зависают". По большей части это происходит потому, что JS - однопоточный язык. А вся асинхронность это не часть самого языка, а часть браузерного WebAPI или среды NodeJS.

Так же для реализации мнопоточности с определенными ограничениями можно использовать Web Workers API. https://developer.mozilla.org/ru/docs/Web/API/Web_Workers_API/Using_web_workers

Но вернемся к основной теме, почему страницы зависают. Все дело в Event Loop - событийном цикле.

Это бесконечный цикл, который с определенным приоритетом обрабатывает задачи, полученные от разных заказчиков:

1. Macrotasks - сам js скрипт, события, отложенные задачи - setTimeout, setInterval, ajax и т.д.

2. Microtasks - promises, MutationObserver, queueMicrotask(task)

3. Render - задачи на отрисовку

Как отрабатывает цикл

1. Сначала event loop берет одну макротаску и выполняет ее.
2. После ее выполнения, он переходит к очереди microtasks и выполняет ее пока она не закончится, если их нет - пропускает и идет дальше.
3. Выполняет задачи на Render, если их нет - пропускает и идет дальше.

Дальше все повторяется.

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

Это означает, если код в таске или микротаске будет исполнятся 15 секунд, то все это время страница будет висеть и не реагировать.

Подробней и с картинками тут https://bearlogin.notion.site/Event-Loop-84c24de514544b7bb05ada9d36199abe

Если Вам понравилась статья, и то что я делаю, поддержите меня и расскажите про мой канал друзьям. 👍

#frontend #nodejs #eventloop #js

Deffered Promises

При работе с Promise многим кажется, что callback, который мы передаем в конструктор выполнится только тогда, когда мы вызовем метод then() или воспользуемся async / await.

Но реальное поведение совершенно противоположное...

Создадим Promise, например так

const promise = new Promise((resolve,reject) => { 
  console.log('Promise callback executed');
  resolve(1)
})

И запустим код

Promise callback executed

Подробней тут https://bearlogin.notion.site/Deffered-Promises-d24e7f01608447dea1f8da272b4cbe9e

#js #promises

Миссия

Я определяю свою миссию так: помогать людям - бизнесу и разработчикам делать крутые штуки, которые будут делать жизнь легче и комфортней.

По этому я создал чат, где бесплатно и не токсично помогаем с Vue.js, Javanoscript, React.js, Typenoscript, PHP, Laravel, Go, Docker, Kubernetes, Node.JS, HTML, CSS. У нас уже в составе есть эксперты из Яндекс, Озон! Так что, залетайте! Ждем экспертов, и желающих учится! https://news.1rj.ru/str/junior_happens #полезное

Set vs object

Недавно зашел разговор, что лучше использовать для создания списка без повторяющихся значений. Нашел интересный эксперимент по этому поводу https://github.com/anvaka/set-vs-object
Спойлер - Set быстрей :)

#js #быстродействие #frontend

Ментор vs самообучение

Сейчас все больше людей понимают, что пройдя курсы, которые обещают сделать вас как минимум джуном за 3 месяца, а то и сразу миддлом с нуля, в лучшем случае только начинаешь понимать что то на уровне стажера. С трудоустройством, естественно, возникают проблемы.

И тут есть 2 пути: продолжать развиваться самостоятельно и потратить кучу времени или найти ментора, который соберет всю ту кашу после курса в какой то базис и даст направление развития.

Для первых могу посоветовать прочитать хорошую книгу по языку и основательно разобраться во всех вопросах, искать стажировки, выполнять тестовые задания с условием обратной связи.
Для вторых есть сервисы для подбора ментора. Я, например, начал работать с Solvery. Вот мой профиль https://solvery.io/ru/mentor/bearlogin

От себя могу посоветовать желающим войти в IT такой путь - книга -> курс -> (ментор/стажировка)
Начав с хорошей книги, вы уже сможете определять качество курса и полезность его программы, получите базовое представление о выбранном языке и сможете безболезненно поменять специализацию в начале пути.

#войтивайти #менторство #профессиональныйрост