Хороший туториал по миграции с CRA на Vite https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

Собсно кто не в курсе, CRA изначально не планировался для продакшна, но очень много продакшнов его юзают. И сейчас в обсуждении замена рекомендации по дефолту и для новичков на Vite https://github.com/reactjs/reactjs.org/pull/5487

Я кстати давно еще советовал юзать Витю вместо CRA, но на меня там сразу ополчились разные идейные элементы, чой то я тут посмел джунам советовать вражеский инструмент :)

#react #vite

Задача по JS

Упрощенный пример из реальной жизни:

У нас есть Room который принимает Singnalling с Transport. Когда мы получаем событие offer через Transport, то должны обработать сообщение, которое пришло конкретному пользователю

Но функционал не работает. Должно быть как на скриншоте.

Попробуйте найти багу :)

https://codesandbox.io/s/dreamy-smoke-fgkh2v?file=/src/index.js

Псс... есть варик залететь в крутой стартап с крутыми фаундерами на правах ко-фаундера!
Проект выходного дня, фултайм не нужен.
Из особенностей - Elm на фронте https://elm-lang.org/.
Даже если не знаешь его (я бы удивился, если бы знал), но есть желание его изучить, то пиши мне в лс @bearlogin :)

P.S. хороший гайд по Elm https://elmprogramming.com/who-this-book-is-for.html

P.P.S. если знаешь React, тоже пиши, так как есть вариант написать часть проекта на React или вообще все переписать...

P.P.P.S - почему Elm? Потому что так исторически сложилось...

#стартап #elm #react

Сегодня полдня спорили JS синхронный или асинхроннный. Так вот, совершенно не важно, как вы его называете, важно другое — понимание, как работает рантайм, в котором ваш JS запущен. Да, сам язык ECMAScript не обладает встроенными асинхронными апишками (ок, мне тут говорят про Атомики. Поговорим когда они будут везде!). Всё, что вы делаете в нём происходит синхронно. Максимум можно отбросить что-то в очередь микротасок — таким образом мы поменяем порядок обработки, но не освободим Event Loop. Цепочка из коллбеков вручную созданных промисов так и останется крутиться в фазе микротасков. Следующая итерация внешнего event loop не наступит. Из коробки мы не можем сказать «Эй VM, вот тебе корутина, выполни её в соседнем треде и верни результат по готовности». Нет у нас ничего для этого. Мы можем очень сильно упороться и написать свой Event Loop с прерываниями внутри JS — вот это мы можем да.

Таймеры, setImmidiate, функции, возвращающие промисы — всё это прилетает к нам из окружения. Именно платформа, где мы запускаем наш JS предоставляет работу с другими тредами и даёт нам EventLoop. В спецификации самого ECMAScript нет никаких таймеров и фечей — всё это внешние апишки. Есть отдельные ребята, попавшие в спеку — например, динамические импорты. Но их тоже крутит внешний рантайм, не сам движок JS.

Как работает код на node.js?

Мы выполняем небольшой синхронный код на старте и заряжаем задачи во внешние API. Например, задачу слушать какой-то порт. К это задаче мы привязываем коллбек. Дальше где-то во внешнем мире другой код, написанный на другом языке (на плюсах, например), в другом треде слушает порты. Между внешним миром и нашим JS-кодом крутится эвент луп. Он проверяет, не сработал ли триггер и вызывает соответствующий коллбек в JS. Коллбек снова синхронно выполняется (и может поставить новые задачи в планировщик). Коллбек это реакция на то, что во внешнем мире что-то произошло. Что случится, если коллбек выполняется слишком долго? Например, мы запустили очень большой цикл? Event loop будет стоять и ждать выполнения этой синхронной операции. Ничего не будет происходить. Никакие внешние запросы не будут обработаны, никакие таймеры не сработают. В нашем Event Loop возникнет лаг.

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

Да, нам нужно превращать синхронные операции в асинхронные. Встроенных средств в языке для этого нет, но есть во внешней среде: таймеры и setImmidiate, например. Мы можем буквально сказать — выполни этот код в следующем цикле. Или, иначе говоря, «вызови коллбек когда внешний таймер сработает через 0ms (т.е. в следующем цикле)». Маленькие кусочки нашего синхронного кода будут вызываться по чуть-чуть и мы дадим Event loop время размотать накопившиеся очереди и вызвать другие коллбеки.

А как померить лаг? Мы же должны следить за ним. Ну, конечно, мы можем взять встроееный метод perf_hooks.monitorEventLoopDelay . Но давайте подумаем, как это можно сделать на коленке? Очень просто! Берём текущий таймстамп в высоком разрешении, вызываем setTimeout(fn, 0) и в его коллбеке снимаем таймстамп и измеряем разницу. Время, через которое сработает коллбек таймера с ожидаемо нулевой задержкой и есть наш EventLoop-лаг.

Итого, мы действительно пишем асинхронный код каждый день. И эту замечательную асинхронность нам даёт рантайм, котором наш JS запущен. Этот рантайм содержит и интерпретатор языка и EventLoop и работу с I/O. Потому Нода это не просто V8, это V8 + libuv. А Deno это V8 + ядро на Rust + Tokio.

Искал чем почистить свою убунту, нашел такую утилиту https://www.bleachbit.org/ мб кому пригодится, эффективно вычищает всякие кеши, и прочий мусор, освободил 150гб :)

P.S. комрады в комментах посоветовали подобное для Мака - omnidisksweeper https://www.omnigroup.com/more

Helm чарты и удаленное API Kubernetes

Столкнулся с такой проблемой, что в хелм чартах были старые версии API. И если кластер их уже не поддерживает, то здесь только удалять релиз и накатывать новую версию. При этом удаление становиться проблемой, так как API то не поддерживается... Замкнутый круг.

Error: unable to build kubernetes objects from current release manifest: resource mapping not found for name: "blocks" namespace: "" from "": no matches for kind "Ingress" in version "networking.k8s.io/v1beta1"
ensure CRDs are installed first

В первый раз я руками чистил релизы, удалял все секреты, деплои, сервисы и т.д. Манкей джоб кароч.
Но сегодня, я нашел такую штуку https://github.com/helm/helm-mapkubeapis которая позволяет обновить helm релиз метадату и пофиксить deprecated или removed API!
Спасибо этому комменту https://github.com/helm/helm/issues/11513#issuecomment-1404101041

#helm #kubernetes #api

Перевожу home на NVME диск, просто офигел сколько файлов хранится в node_modules в проектах. А за 3 года существования моей убунту проектов накопилось под сотню... В общем начал руками удалять node_modules, но быстро забил на это дело, нашел такую утилиту https://github.com/voidcosmos/npkill где можно прям в визуальном режиме удалять node_modules

В общем пакетов было под 20Gb, а у вас сколько? :)

#node #clean

Стартап

Значит рассказываю про стартап, в который я недавно искал людей.
Спойлер: еще есть шанс залететь и в течении 2 лет стать долларовым миллионером (на полном серьезе).

О проекте:
Это https://facelink.cc/ - NoCode платформа для создания видеоворонок, новый способ создать сайт в современном видео формате, это как Tilda+TikTok.
Это реально востребованный продукт, который уже имеет платящих клиентов и заявки от инвесторов.
Его создали основатели MakeTornado (https://www.maketornado.com/) и CallbackHunter, реально крутые ребята, которые реально шарят в венчуре, финансах и бизнесе, и имеют опыт работы в инвест комитетах.

Текущая версия — это MVP и она имеет определенные недостатки, которые не позволяют дать взрывной рост и работать с клиентами корпоративного уровня и масштабироваться до мира.

По-этому сейчас мы расширяем и укомплектовываем команду и делаем highload версию сервиса.
Мы отказались от Elm и делаем фронт на React!

Про стек расскажу:
Back: микросервисы на nestjs, graphql (сейчас переезжаем на tRPC), kafka, redis
Front: React, Typenoscript
- Все это в монорепе на turbo
- Билдиться в Gitlab
- Инфра в кубере с использованием GitOps техник с FluxCD

Cейчас нам нужен крутой React разраб с амбициями гангстера, который понимает, что на работе он не разбогатеет за всю жизнь. И ему не жалко 15-20 часов своего драгоценного времени. Который может пилить фичи просто основываясь на пользовательских историях без детального описания. Который понял, что уперся в потолок и хочет не просто немного подняться, а пробить его к хуям собачьим.

Вот примеры как это работает в живую:

Виджет на сайте:
1. https://geotermo.com
2. https://profg.fit/
3. https://www.fuseservice.com

Как видео-сайт:
4. https://facelink.cc/sgvs7zsyw/
5. https://facelink.cc/6adgsvj38/
6. https://facelink.cc/k777iasww/
7. https://facelink.cc/w5bpdxxwn/
8. https://facelink.cc/p31bxbxmt/

Как инструмент сбора видео-отзывов:
9. https://facelink.cc/hdysetqwh/
10. https://facelink.cc/wdvcgzdo7/

Этот продукт ждут большие бизнесы и блогеры-миллионики. Такой шанс дается очень редко.

Пиши мне в ЛС @bearlogin

#стартап #врывайся

Фраза дня: "Вы слишком узко ширите"

P.S. в Facelink все еще можно ворваться, пишите в лс @bearlogin

Автоматическое обновление Chrome в Ubuntu

Чот надоело руками обновлять, а не обновлять не получается — чуть что, сразу авторизации везде слетают и прочие оказии...

1. Редактируем файл

sudo nano /etc/apt/sources.list.d/google-chrome.list

2. Добавляем туда эту строку

deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main

3. Скачиваем и добавляем ключ

wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo tee /usr/share/keyrings/google-linux-signing-keyring.gpg >/dev/null

4. Обновляем список пакетов

sudo apt update

5. Устанавливаем Chrome

sudo apt install google-chrome-stable

Теперь хром должен обновляться автоматически, но если нет, то посмотрите в сторону unattended-upgrades

#ubuntu #advices

Что нового в 20 ноде
Из интересного - нативный тест раннер вышел в стейбл, и можно добавлять разрешения на запуск скриптов
https://www.sitepoint.com/node-js-20-new/

#nodejs

Какой ты javanoscript сегодня? https://dev-questions.com/js/js-basics

Вакансия - Вуй мидл фронт

Мои друзья из https://www.hellride.ru/ ищут middle-frontend разработчика на Vue3.
На беке крутится Laravel. Сам вуй сидит в Laravel Mix.

По скилам - нужна верстка и разработка фронта, навык рефакторинга.

По деньгам - 150-200к рублей. Фултайм, ремоут.

Будет восхитительно, если вы товарищ-фуллстек с опытом работы в Ларе.

Нужно будет развивать основной сайт магазина, а так же другие грядущие проекты компании.

По формату сотрудничества - ИП или самозанятость в идеале, но есть варианты и с оформлением в штат. Есть еще тема с оформлением в IT компанию, но нужно будет подробней тему обсуждать.

Собсно кидайте резюмешки мне в ЛС @bearlogin, а дальше уже направлю на светлый путь.

#vue #вакансия

Просто напоминалочка, строки в ЖС могут течь: https://habr.com/ru/articles/449368/

Если интересно как оно под капотом работает, то это rope или что-то похожее, вот понятный коментарий в сурсах V8.

Быстрый вызов docker ID

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

Допустим у нас есть вывод команды ps

❯ docker ps --format 'table {{.ID}}\t{{.Image}}'
CONTAINER ID   IMAGE
514019ccaaff   confluentinc/cp-kafka:7.3.0
1d3f566badfa   confluentinc/cp-zookeeper:7.3.0
0d300e19077b   redis
037b7ad33544   provectuslabs/kafka-ui
dc04138cf5b9   minio/minio:RELEASE.2021-07-30T00-02-00Z

Я хочу посмотреть логи контейнера

514019ccaaff

Мне достаточно указать только уникальную часть ID, в данном случае хватит даже "5"

docker logs 5

При этому у меня 2 контейнера с ведущим нулем, по этому чтобы почитать логи редис, мне нужно уже 2 символа - 0d

#docker #advices #devops

Как уменьшить размера образа Docker

1. Используйте маленький базовый образ, например alpine
2. Собирайте в multistage build, чтобы в финальный образ попадали только дистрибутивы
3. В финальных образах используйте distro-less базовые образы, например gcr.io/distroless/nodejs
4. Объединяйте установку зависимостей в одну команду через && и очищайте кеш в ней же

&& apt-get clean && rm -rf /var/lib/apt/lists/*

5. При установке зависимостей используйте

--no-install-recommends

или аналоги
6. Не используйте chown рекурсивно, используйте

COPY --chown=

7. Используйте .dockerignore файл
8. Утилиты для оптимизации
https://github.com/slimtoolkit/slim
https://github.com/wagoodman/dive

Статьи по теме:
https://www.augmentedmind.de/2022/02/06/optimize-docker-image-size/
https://devopscube.com/reduce-docker-image-size/

Масштабирование вебсокет приложений

Неплохая статья, как скейлить websocket приложения.

Спойлер - если сокет клиента подключен к конкретному инстансу на который попал запрос, отправляем сообщение ему напрямую. Если нет - кидаем в PubSub Redis, и инстанс, на котором есть этот клиент получит сообщение и отправит данные клиенту)

Подробней тут
https://shrihariprakash.medium.com/scaling-node-js-chat-apps-to-the-moon-6bc64dd3f638

#backend #redis #websockets

Dockerd грузит процессор на 100%

Столкнулись сегодня с такой напастью — внезапно начал тормозить сайт. Расследование показало, что dockerd грузит все ядра, при том, что контейнеры жрут мало. Дело оказалось в логах докера.
Нашли такой пост https://forums.docker.com/t/dockerd-using-100-cpu/94962

Помогло переместить логи и перезапустить dockerd

#docker #dockerd #high_cpu_load

Акция невиданной щедрости!

Так как я на этой неделе прокрастинирую работу горю желанием обучать — стартую акцию на личные консультации - 3500 2000р за час консультации до конца рабочей недели!

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

P.S. Верну денег, если не смогу помочь, но пока такой опцией никто не пользовался :)
P.P.S Отзывы тут можно почитать https://solvery.io/ru/mentor/bearlogin

Пишете в ЛС @bearlogin описание проблемы, запланируем созвон ;)

#акция #ментор #менторюзаеду

Большие PR

Каждому, кто делает ревью, нет-нет, да прилетают от некоторых молчаливых товарищей монструозные PR в тысячи строк и пару сотней файлов :)

Что вы делаете в таких случаях? И какие практики и методы используете, чтобы такого не было?