🎙🍦№9

https://www.youtube.com/watch?v=vX2DHtFuKL0

Сьогодні о 20:00 відбудеться лайв-ефір дев’ятого випуску подкасту «Радіо Ріжок». Зі мною буде спеціальний гість — капітан львівської шхуни Юра Лучків.

Обговорюємо:

- З чого почати якщо хочеш власну шхуну
- Чим відрізняється сеньйор від дутого фраєра
- Етичні тонкощі ремоут роботи та паралельних фултаймів
- Довіра до працівників
- …
- Та інші кулсторі з бородатих років!

Задати питання: https://app.sli.do/event/79vfeDCV18Xt5XHyzMTcx3

🦅На стримі будемо збирати лаве на п’ять багаторазових ударних дронів, які виробляє мій колега і товариш Віталій — фаундер фабрики дронів «Death From Above». Банка для збору: https://send.monobank.ua/jar/2FWgBQFRNJ (банка моя для того щоб на стримі були нотифікації про донати, в кінці стрима я переведу все на банку Віталія)

До зустрічі о 20:00!

https://www.youtube.com/watch?v=vX2DHtFuKL0

Починаємо трансляцію за пару хв! Приєднуйтесь!

https://www.youtube.com/watch?v=vX2DHtFuKL0

Нагадую про збір на прилад нічного бачення PVS-14 для 64-го батальйону 103 ОБТрО, де служив мій хресний.

Наразі зібрано 69 430₴ 💪💪💪 Цього вистачить, щоб доплатити за вже замовлений в Україні прилад та купити кріплення.

На днях адмін каналу «Інформація» сказав що нарешті почався рух по експортним дозволам для нічників, які ми замовляли ще в листопаді минулого року, скоро там треба буде платити, тому сподіваюсь з вашою допомогою дозбирати ще 60 000₴.

Нагадую, що кожен донат на суму від 256₴ братиме участь в лотереї-розіграші міни 120мм та п’яти 30мм писанок. Не забудьте залишити свої контакти у коментарях. Розіграш проведу в неділю вранці.

Задонатити 👉 https://send.monobank.ua/jar/5ArmDNawxa

Дякую всім за допомогу!

За пару хвилин починаю трансляцію розіграшу кабачка 120мм та 5 писанок які розігрую за донат на PVS-14 для 103 бригади ТрО

тут чат

Запис розіграшу кабачка 120мм та яєчок 30мм

Рандом сьогодні був дуже цікавим🤯🤯🤯

Вітаю колегу Віктора який зробив донат на 10240 ₴ та зірвав джек-пот: два яєчка 🥚 та кабачок 🍆

Також вітаю Бодіча з виграшем яєчка та Сергія з виграшем двох яєчок.

Дякую всім! На цьому тижні маємо забрати та передати перший PVS-14, на другий будемо дозбирувати.

Міну урочисто передам сьогодні, яєчка на тижні.

Українські телеграм канали: Олег Миколайченко

Щопонеділка роблю огляд авторських українських телеграм каналів. Підписаний сам, заохочую підписатися і вас, щоб розвивати наш сегмент телеграму. На жаль, таких каналів зовсім небагато і вони мають мало підписників. Вперед!

Сьогодні канал Олега Миколайченко — широко відомого організатора конференцій та мітапів по DevOps темі, співавтора DevOps-даджейстів на ДОУ, Head of Infrastructure — @devopsengineer.

Цей канал значно професійніший ніж попередні, які більше про балаканину та всяке різне. Якщо ви DevOps — ви вже полюбе підписані на Олега, якщо ні — мерщій підписуватися! Хто не шарить як деплоїться його стаф, той дутий фраєр і треба це виправляти!

З початку війни канал не дуже активний, але ось вам підбірка постів:

🤯 Від мікросервісів до мікро-AWS-акаунтів
👵 Куди рости девопсу?
⚡️ 7 способів прискорити розробку
🙈🙊🙉 Конфлікт між тераформом, інфрою, девопсами та девелоперами
🤔 Як зрозуміти що щось пішло не так

Канал більше про новини-апдейти-конфи-лінки ніж про особистий досвід автора, ну але вже як є. Раніше вівся російською, зараз перейшов на українську🇺🇦💪.

Олег класно допоміг нам влітку зі збором на пікап для Азову, та й взагалі активно підтримує двіж.

Статистика
- Всього написано 293 пости
- Кількість підписників знизилась з 6000 до війни до 5100, а середня кількість переглядів тримається на пристойному рівні. Знову заздрю!

@devopsengineer — підписуйтесь, ставте вподобайку та дзвоника, підтримуйте наших авторів!

P.S.: ні, це не ганебна реклама або взаємопіар. Я давно хотів зібрати каталог усіх українських авторських каналів. Автори зазвичай навіть не знають що я про них писатиму. Також мене дратує що досі багато людей підписані на кацапів та дивляться на рекламу сбербанку проміж смішних мемів. Хочу це змінити.

#мета
permalink | @full_of_hatred
👇Щоденні донати💰на ЗСУ🪖
🫡@Donate1024Bot

‍За лаштунками стримінгу: оверлеї

Якщо ви дивилися стрими, то неодмінно бачили на екрані всілякі віджети: коментарі глядачів, донати, що з'являються та зникають, рамки навколо камери стримера, реклама та інше.

Як це робиться? Більшість стримерів користуються програмою що називається OBS. Вона дозволяє робити «сцени», довільно розміщувати на них різноманітні елементи, як-то відео з камер, аудіо, картинку, частину екрана (або весь екран) тощо. OBS вміє відображати веб джерела, тобто сайти. Таким чином, наприклад щоб показати коментарі, достатньо вказати OBS на потрібну адресу (ютуб та твітч коментарі можна відкривати в окремих сторінках), задати розміри, і він буде відображати це на екрані.

Щоб разом з коментарями не показувало тло, на яких вони зазвичай розміщуються, щоб не перекривати камеру або гру, OBS дозволяє визначати кастомний CSS. Таким чином, конструкція типу

body {
  background-color: rgba(0, 0, 0, 0);
}

оверрайдить тло і коментарі або інші елементи не затуляють сцену.

Так само можна робити різноманітні рамки, вставки донатів і так далі. Звичайно, в OBS є ще деяка нативна функціональність для цього, але зараз ми зосередимось саме на вебсайтах.

Загальний термін для цих штук це оверлеї. Існує індустрія яка надає готові сетапи, інтегрується з усім підряд, дозволяє робити різні налаштування.

Наприклад, коли на твітчі вас починає фоловити людина, то твітч може відправити івент на визначений вами ендпоїнт, який в реальному часі покаже алерт на урлі, який ви додали собі в оверлей. Так само можна підключати будь-які інтеграції, щоб додавати інтерактивності.

На крайньому стримі з Юрою Лучківим мені дуже хотілося додати інтерактиву з донатами. Існує багато таких платформ (streamalerts та інші), але я вирішив зробити все власноруч.

Монобанк дає можливість під'єднати API, встановити адресу вебхуку, та приймати транзакції.

Я придумав наступну схему:

- Встановлюю вебхук

- До мене приходять транзакції

- Я зберігаю собі їх у базу та відображаю на окремій сторіночці

- Сторінку вставляю в OBS

- Додаю реал-тайм оновлення, щоб транзакції з'являлися відразу після проведення

Швидше за все хтось десь вже таке зробив, але я хотів попрограмувати для себе. Як це зробив — у наступній частині.

#проєкти
permalink | @full_of_hatred
👇Щоденні донати💰на ЗСУ🪖
🫡@Donate1024Bot

‍Реал-тайм сайти на Ruby on Rails без жодного рядка JS

Інтегруємось з моно

Йдемо на https://api.monobank.ua/, скануємо QR код апкою, отримуємо ключ.

Далі встановлюємо вебхук, щоб отримувати транзакції.

Вебхук веде на ендпоїнт який дістає параметри транзакції та зберігає її:

def respond(data)
  t = data.require(:statementItem).permit(:description, :amount, :comment, :balance, :time)
  t[:account] = data[:account]
  t[:transaction_id] = data[:statementItem][:id]
  MonoTransaction.create(t)
end

Показуємо транзакції

Робимо сторінку, передаємо параметром account номер картки/банки, витягуємо по ньому всі транзакції та малюємо їх. Переглянути демо тут.

Додаємо інтерактивності

При створенні нової транзакції потрібно негайно якимось чином оновити сторінку. В Rails для цього вже все передбачено, нам знадобляться: ActionCable та Hotwire. За замовчуванням при створенні нового Rails-проєкту вони будуть додані та сконфігуровані.

ActionCable це клієнт-серверна ліба яка робить pub/sub у вашій апці. Під капотом там знаходяться Redis для сервера та вебсокети для клієнта. Коли ви додаєте собі це в проєкт, то ваша вебсторінка буде відкривати вебсокет з'єднання, та слухати що туди приходить.

Таким чином ми можемо одразу після створення транзакції записати щось у «канал», клієнт отримає нову інфу по вебсокету та за допомогою JS оновить HTML.

Але ж ми хочемо все робити без JS! На допомогу приходить Hotwire. Це бібліотека яка оперує поняттями фреймів та стримів.

Фрейм визначає на HTML сторінці будь-який шматочок та присвоює йому ідентифікатор.

Ось я загортаю список всіх транзакцій у фрейм:

<%= turbo_frame_tag "mono_transactions" do %>
  <% @transactions.each do |transaction| %>
    <%= render partial: "mono_transaction", locals: { transaction: transaction } %>
  <% end %>
<% end %>

За допомогою стриму можна передати на клієнт спеціальні інструкції, які потім будуть виконані в рамках фрейму. Ці інструкції включають (але не обмежені) у себе: додати HTML елемент в початок або кінець фрейму, замінити, видалити, додати після такого-то елементу і так далі.

Нам потрібно додавати нотифікашку з транзакцією у початок списку.

Тут починається найцікавіше. Ми можемо згенерувати відповідний івент на сервері, а ActionCable подбає, щоб доставити його у браузер та викликати необхідний JS, щоб виконати необхідну нам дію.

Для того, щоб наша сторінка була підписана на стрим, нам необхідно додати відповідну інструкцію:

<%= turbo_stream_from "mono_transactions_#{@account}" %>

Цим ми кажемо «обробляти всі події які будуть приходити у канал під назвою mono_transactions.

Тепер, на бекенді, кажемо, щоб після створення транзакції відправили новий івент у відповідний канал:

after_create_commit do |transaction|
  broadcast_prepend_to "mono_transactions_#{transaction.account}",
                       partial: "mono_dashboards/mono_transaction",
                       locals: {transaction: transaction},
                       target: "mono_transactions"
end

broadcast_prepend_to означає що буде відправлене повідомлення з типом prepend у канал mono_transactions_#{transaction.account} та переданий маленький шматочок HTML відрендерений на сервері для обробки фреймом mono_transactions. prepend означає що HTML буде доданий першим до списку дочірних елементів фрейму.

Таким чином, ми з сервера посилаємо шматочок HTML який Hotwire обробить як треба. В нашому випадку — додасть нотифікашку.

Так само оновлюється значення суми на банці.

Висновки

Ось так можна без жодного рядка JS робити інтерактивні сайти. Уважні та освічені читачі вже знають, що бібліотек та фреймворків, що працюють за таким принципом є декілька: найвідоміший це Phoenix LiveView, менш відомий це HTMX, поки що маловідомий TwinSpark він пана Соловйова.

#проєкти #інструменти
permalink | @full_of_hatred
👇Щоденні донати💰на ЗСУ🪖
🫡@Donate1024Bot

Подкаст «Радіо Ріжок» про ChatGPT

https://youtube.com/live/gMHUapJcUIM

Сьогодні о 20:00 відбудеться трансляція чергового випуску подкасту «Радіо Ріжок».

Обговорюємо ChatGPT. В гостях — мій товариш Віталій, експерт по ChatGPT, зараз займається комерційною розробкою проєктів на API ChatGPT.

Також Віталій є засновником фабрики дронів «Death From Above», вироби якої надзвичайно ефективно працюють. На стрімі збиратимемо кошти на чергову партію дронів. Банка: https://send.monobank.ua/jar/2FWgBQFRNJ Хто задонатить найбільшу суму (але не менше ніж 2048 ₴) отримає в подарунок гільзу-писанку 30 мм!

Віталій справжній кабанчик — поки ми пропукуємо штани у чатах, шуршить по трендам та робить бізнес.

Говоримо про

- Як використовувати ChatGPT для роботи?
- Чи зможе замінити ChatGPT девелоперів?
- Які професії підуть під ніж першими?
- Проєкти Віталія та кулсторі
- Дистопічне майбутнє де світ заполонив AI-generated контент

Задати питання до стріму: https://app.sli.do/event/79vfeDCV18Xt5XHyzMTcx3

Приходьте, буде цікаво!

https://youtube.com/live/gMHUapJcUIM

Банка для донатів на ударні дрони: https://send.monobank.ua/jar/2FWgBQFRNJ

Розпочинаємо, підключайтесь якщо не хочете бути викинутими на звалище історії кмітливими кабанчиками які шарять ChatGPT https://youtube.com/live/gMHUapJcUIM?feature=share

Таймкоди до подкасту про ChatGPT з Віталієм

https://youtube.com/live/gMHUapJcUIM

На жаль на трансляції були обриви, але на записі все ок 👌

Дякую всім глядачям та слухачам, дякую донатерам, вітаю Юру Лучківа з перемогою 🎉

Роадмап для вивчення ChatGPT: https://tinyurl.com/prompt-engineering-roadmap

Порівняння різних моделей: nat.dev

00:02:40 Привітання
00:04:53 Як використовувати ChatGPT щоб стати турбо девелопером
00:08:50 Як Віталій пише бізнес емейли
00:13:10 Відмінності між моделями
00:16:01 🔥Чи замінить ChatGPT програмістів?
00:22:01 Sam Altman (CEO OpenAI)
00:24:30 ChatGPT Plugins
00:28:10 Чи будуть вимагати від нас більшої ефективності?
00:33:10 Ріжок генерує докер композ файл
00:36:12 Які професії підуть під ніж першими?
00:40:00 🔥AI-дистопія
00:43:55 Оптимізм Віталія щодо майбутнього
00:44:52 Конфіденційність та безпека. Теорії змови
00:54:13 🔥Комерційні проєкти Віталія
00:54:55 Проєкт: асистент для SMM
00:56:10 Проєкт: сапорт агент
00:57:33 Проєкт: генератор тайтлів та дескріпшенів для Shopify
00:59:45 Ринок росте, AI буде рости

01:02:02 🔥Сайд проєкт Віталія: https://www.youtube.com/@max.arrow.outdoors
01:05:00 Як монетизується ютуб шортс?
01:07:30 OnlyFans
01:09:40 Правильний майндест для вонабі-кабанчика
01:12:27 Монополія та unfair advantage майкрософта
01:15:26 Як читати пейпери
01:15:55 Bard vs ChatGPT
01:18:03 Які функції виконує Віталій на проєктах, які продукти вже працюють в продакшені
01:20:15 Показую гільзи-писанки
01:21:50 Чи буде робота у художників?
01:22:53 🔥Prompt Engineering
01:29:30 Пам'ять моделі
01:31:16 Пайплайни
01:32:05 Прайсинг ChatGPT
01:35:20 Знову про пайплайни
01:37:50 В майбутньому LLM стануть безкоштовними
01:42:40 Пошук за допомогою АІ
01:45:40 Про Grammarly
01:47:30 Яким буде нове покоління людей що виросте під час АІ-революції?
01:54:50 Що робити програмісту просто зараз?
01:59:00 Завершення