Sleepless tech | Евгений J

#release

Ладно ребят, я не хотел вам рассказывать, но...
я монтажёр роликов для тик тока, а не разработчик супер-простого бота
@aiko_tiktok_download_bot для скачивания видосов с тикток без вотермарки.

Ребят, может вы знаете. На какие сервисы можно подарить месячную подписку? Или не месячную.

Глянул всякие образовательные платформы, там только Pluralsight додумался до такой возможности. GitHub со своим Copilot ещё не догадались (видать им деньги не нужны)

Привет. Сегодня чета немного стресанул.

Потихоньку пиарю свой генератор лонгридов, периодически захожу его потестить и посмотреть не упал ли. Генерю картинки из примера, а они генерятся и скачиваются больше МИНУТЫ!!!! (чистый кайф 😊) Это с учетом того, что никаких реквестов приложение не отправляет и все делается на фронте.

Запускаю дев сборку, генерация занимает пару секунд. Запускаю прод версию локально, - 30-40 секунд (wat?). Спрашиваю чатгопоты и гугл на предмет того какого хера html2canvas так долго генерит, особо не нахожу ответов, но во всех ишью на гитхабе требование, чтобы баг воспроизводился на неминифицированной версии (как будто на что то намекают).

А по пути натыкаюсь на статьи, что html2canvas давно пора бы заменить хотя бы на html-to-image. Что я и сделал, хотя бы по причине того, что html2canvas падает, если у твоего html элемента есть css с градиентами и css переменными (из за чего мне пришлось извращаться и при генерации картинок заменять css фон с паттернами на его же предварительно сделанный скриншот 🤩).

Стало работать пошустрее.

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

Ну еще там лендинги на nextjs давали прикурить, но это уже совсем другая история)

В копилку хаков. Развлекаюсь как могу)

Как отключить ECH для вашего домена на Cloudflare

Если ваш сайт на Cloudflare перестал работать без VPN, то все дело в технологии Encrypted Client Hello, которую включил Cloudflare. Ее можно отключить на платных тарифах в админке, а в бесплатных только если ты хакер.

Сначала проверяем домен на предмет работы ECH так:
https://dns.google/resolve?name=[ВАШ_ДОМЕН]&type=HTTPS

У меня в ответе видно, что включен {"name":"jem-space.ru.","type":65,"TTL":300,"data":"1 . alpn=h3,h2 ipv4hint=188.114.96.1,188.114.97.1 ech=AEX+DQBBHQAgACAhjyy/+kI2j...."}

Идем в https://dash.cloudflare.com/profile/api-tokens и копируем свой Global API Key.
На странице домена внизу справа копируем Zone ID.

Отключаем ECH запросом curl (или постман)

curl -X PATCH "https://api.cloudflare.com/client/v4/zones/{ID_ZONE}/settings/ech" \
     -H "X-Auth-Email: {ACCOUNT_EMAIL}" \
     -H "X-Auth-Key: {GLOBAL_API_KEY}" \
     -H "Content-Type:application/json" --data '{"id":"ech","value":"off"}'

Источник https://habr.com/ru/articles/856602/

Блед, когда ты думаешь, что это ты долб@ящер и чето напортачил в конфигах на серваке, а оказывается не ты.

Ладно, было удобно заюзать кайфовый сервис, поигрались и хватит.

Instaread: приложение для создания лонгридов для Instagram*

Всем привет!✌️

Сегодня зарелизил небольшое приложение, которое позволяет красиво оформить лонгрид для инсты.
Сам в инсте я часто не торчу, да и тем более лонгриды там не пишу. Но заметил, что те, кто выкладывают большие тексты, используют для этого связку "блокнот + скриншот", что кажется немного неудобным (потому что инста не для этого, кек).

Приложение позволяет юзеру написать текст в редакторе и по нажатию кнопки сгенерить картинки с текстом для карусели. При этом можно настроить шрифт и его размер, а также фон карточек.

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

Зацените https://www.swipe-text.ru
И лендинг зацените https://www.swipe-text.ru/welcome

Фидбек приветствуется!

Зацените чё подарили.

Когда нанимаешь разрабов для грузинского ресторана

Дебажим веб-приложение на смартфоне (Android)

При разработке PWA или обычных веб-приложений иногда бывает нужно подебажить прод или дев версию на смартфоне. НО КАК?

Вот короткая инструкция:
1. Ставим adb отсюда или через home brew
2. Разблокируем Developer Options натапав 10 раз на меню Версия Сборки в инфе о телефоне
3. В меню Developer Options включаем USB Debug
4. Подключаем смартфон к компу и разрешаем дебаг на уведомлении
5. Убеждаемся что все ок, выполнив adb devices в терминале (должны увидеть id устройства в списке устройств)
6. Открываем chrome://inspect/#devices и видим вкладки своего смартфона
7. Нажимаем inspect на той, которую хотим дебажить
8. Если нужно открыть приложение с localhost, добавляем port forwarding на нужный порт вашего приложения (например 6000 : localhost:6000). Открываем localhost:6000 на телефоне
9. см. пункт 7

Готово!

Чуть подробнее и с картинками тут!

@five_a_m

Привет!

Решил настроить получение сертов для wildcard доменов (типа *.jem-art.ru), чтобы все проекты, которые деплоятся через dokku были доступны через https.

В Dokku это делается установкой плагина и выполнением пары команд. Но dokku вертится в докере и при получени сертов вылетает ошибка (dokku docker: open /var/lib/dokku/home/dokku/web-test/letsencrypt/certs/7d5073745feeebbd5fd9b94aed59c12414ecfc41/docker.env: no such file or directory, хотя файл есть), а т.к. в докере я шарю постольку-поскольку, обойти ее я не смог (даже с чатгпт и гуглом).

Поэтому я решил пойти по старинке через certbot, но с указанием конкретных поддоменов, а не *.
Как известно, чтобы получить серты важно, чтобы ваше приложение могло отдавать файл, который certbot положит в webroot директорию (которую вы указываете в команде для получения сертификатов). Отдавать надо по урлу /.well-known/acme-challenge.

Тут я немного призадумался, что для каждого приложения нужно реализовывать возможность раздачи такого файла и тп. Потом понял, что по факту certbot не важно чтобы именно это приложение отдавало этот файл, а просто любое, пусть хоть сам nginx. Поэтому повесил конфиг редиректа c поддоменов на 80 порту на root /var/www/html;

location ~ /.well-known/acme-challenge {
        allow all;
        root /var/www/html;
    }

и готово!)

В догонку пару мыслей про пет-проекты.

За что мне нравятся мелкие проекты, которые можно сделать за пару дней:
1. Забирают не так много сил
2. Быстро проверить, можно ли его довести до конца
3. Не так обидно, если сделал что-то бесполезное
4. Не нужно сохранять мотивацию на протяжении долгого промежутка времени
5. Чувство удовлетворения от завершенного проекта

@five_a_m

Всем привет!

Я периодически пощу в @front_end_dev видосы по разработке с ютуба, добавляя в пост превью из видео. Чтобы скачать картинку, обычно лезу в девтулз и ищу метатег с ссылкой.

Вчера решил, что надо бы экономить эти 5 секунд и потратил 5 часов (профит лучше не считать) на разработку бота и попытки (успешные) вспомнить процесс деплоя с Dokku.

В итоге получился https://t.me/ytb_cover_bot, которому можно скормить ссылку на видос, шортс или ютуб мьюзик и получить основную превьюшку и несколько альтернативных.

Плюсом накатал инструкцию, как легко и просто катить свои пет-проекты, если делать это с Dokku.

@five_a_m

Вчера там чет рунет потряхивало, сегодня уже на домашнем провайдере openVpn не работает. Живем пока на openConnect.
Кто в РФ, на чем сидите?

Прикрепляем веб-приложение к существующему домену

Давно использую способ, когда веб-приложение можно быстренько развернуть и прилепить к существующему домену, на котором висит другое приложение или сайт. Часто такое нужно, когда запрос на http://ip:port не прокатывает (например нужен эндпоинт, который запрашивается с https сайта).
Делаю это через nginx.

Находим конфиг для вашего домена и добавляем секцию location /new-url c настройкой редиректа или указанием пути к статике:

server {
    listen 80; # или 443 
    server_name jem-space.ru;

   # статика
    location /popit {
        root /home/jem/projects/popit/;
        try_files $uri $uri/ =404;
        index index.html;
    }

# редирект на другой порт
   location /get-last-vk {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:3007/get-last;
    }

….
}

не забудем рестартануть перезагрузить конфиги nginx

sudo systemctl reload nginx

@five_a_m

Комиты с подписью

На текущем проекте все комиты должны быть подписаны GPG ключом. Делается это флагом -S
git commit -S -m "commit message".
Но так как я ленивая жопа, я таки не сделал себе git-алиас для этого и частенько по запарке комитаю без подписи. А спустя несколько комитов при попытке запушить ветку, получаю ошибку, что какой то из комитов не подписан.

Каждый раз забываю как это пофиксить.

Для начала посмотрим все комиты с информацией о подписи

git log --show-signature

Посчитаем какой комит самый первый не подписан и сделаем ребейз на состояние ветки перед ним

git rebase -i HEAD~N

ставим edit на все комиты начиная с того, который не подписан, переходим в ребейз и выполняем команды

git commit -S --amend --no-edit
git rebase --continue

Готово, никто не узнает что вы я облажался)

Еще больший геморрой, когда HEAD~N выпадает на мерж-комит и ребейз не показывает этот комит как отдельный и выдает всю историю комитов этого мержа. Такой кейс я могу решить только через
git cherry-pick -S <commit-hash> для каждого коммита в новую ветку (старую уже не спасти)

Если вы крутой гит-хакер, жду ваши советы, git-alias или клевые команды, упрощающие жизнь в коментах.

Забавный факт.

4 секунд достаточно чтобы сжечь пульт от кондиционера в микроволновке 😅