hugobarauna

Docker Swarm: Livebook + Phoenix App (Attached Runtime)

Connect Livebook to a Phoenix app running in Docker Swarm with automatic node discovery.

Why This Is Needed

• Erlang node names must match exactly: if Phoenix runs as myapp@10.0.1.5, you must connect to myapp@10.0.1.5
• Docker Swarm assigns dynamic IPs to containers
• Livebook's LIVEBOOK_DEFAULT_RUNTIME expects a static node name
• Solution: Use /app/user/env.sh to discover the Phoenix node IP at Livebook startup

hugobarauna

LiveView + Fluxon Accordion State Management Issue & Potential Enhancement

Hey! 👋

I ran into an interesting issue with Fluxon's accordion component in a Phoenix LiveView app and wanted to share the findings - there might be an opportunity to make Fluxon even more LiveView-friendly.

The Problem

When using <.accordion> with form validation (phx-change="validate"), the accordion would collapse every time the user typed in the form input. This created a frustrating UX where users couldn't keep the form expanded while typing.

hugobarauna

Clustering with Teams template

Mix.install([
  {:kino, "~> 0.16.0"},
  {:req, "~> 0.5.10"}
])

hugobarauna

KinoSlides

Mix.install([
  {:kino, "~> 0.15.3"}
])

Section

hugobarauna

How to display progress

Mix.install([
  {:kino, "~> 0.14"},
  {:kino_progress_bar, github: "acalejos/kino_progress_bar"}
])

Using a custom a spinner based on on Kino.HTML

hugobarauna

defmodule KinoTextClipboard do
  def new(text) do
    Kino.HTML.new("""
      <style>
        .container {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            background-color: #fff;
            border: 1px solid #ccc;

hugobarauna

Kino Spinner

Mix.install([
  {:kino, "~> 0.13.2"}
])

Section

hugobarauna

Kino.Proxy.listen(fn conn ->
  Plug.Conn.send_resp(conn, 200, "hello world!")
end)

hugobarauna

Kino UI widgets

Mix.install([
  {:kino, "~> 0.12.3"}
])

hugobarauna

Process labels demo

Mix.install([
  {:kino, github: "livebook-dev/kino", ref: "hb-support-process-labels"}
])

Kino.Process.render_seq_trace