<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="205264" data-post-id="205264">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="olivermt" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/olivermt/120/2354_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  olivermt
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You could probably do that through update/2.</p>
<p>Remember that overriding update function requires you to socket = assign(socket, assigns) (because this is default behaviour).</p>
<p>This way you can also change the loaded data if the prop should change as well. It’s your codes responsibility to not load excessively, so check if socket.assigns.your_data_prop holds the data before you load and assign to socket again.</p>
<p>Edit:</p>
<p>In general the send_update combo with update/2 is a very powerful way to model self contained components.<br>
In SurfaceBootstrap I have a public api as such:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"># External API

  def show(id) do
    send_update(__MODULE__, id: id, action: :show)
  end

  def hide(id) do
    send_update(__MODULE__, id: id, action: :hide)
  end
</code></pre>
<p>With my update/2 looking like this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def update(assigns, socket) do
    socket = assign(socket, assigns)

    socket =
      case assigns[:action] do
        nil -&gt;
          socket

        :show -&gt;
          push_event(socket, "bsn-show-modal-#{assigns.id}", %{})

        :hide -&gt;
          push_event(socket, "bsn-hide-modal-#{assigns.id}", %{})
      end
      |&gt; assign(:action, nil)

    {:ok, socket}
  end
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="205264" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/94">Post #93</a>
	                </div>
	            </div>
              <div id="likers-container-205264" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="205264"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #93"></div>
  </section>
</div>
    <div class="postbit" id="205610" data-post-id="205610">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Malian" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Malian/120/18900_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Malian
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi folks!</p>
<p>Last week, <strong>Surface v0.3.0 has been released</strong> and it’s now available on <a href="https://hex.pm/packages/surface" rel="nofollow">hex</a>.</p>
<p>This version improves the Surface Catalogue API which was previously released in v0.2.0 and also introduces a new surface compiler that allows autoloading colocated JS hooks.</p>
<p>Source code and installation instructions for the Surface Catalogue can be found at <a href="https://github.com/surface-ui/surface_catalogue" class="inline-onebox" rel="noopener nofollow ugc">GitHub - surface-ui/surface_catalogue: An initial prototype of the Surface Catalogue · GitHub</a>. If you want to see it in action, there’s a short video available at <a href="https://twitter.com/MarlusSaraiva/status/1360254701808324615" class="inline-onebox" rel="noopener nofollow ugc">Marlus Saraiva on X: "Introducing the new Surface Catalogue. A first attempt to build something similar to Storybook for Surface and, hopefully, for any Phoenix/Liveview project in the near future. Prototype and installation instructions at https://t.co/rzden5u98g @phoenixframework #myelixirstatus https://t.co/xO2QHbmdqX" / X</a>. The full changelog can also be found at <a href="https://github.com/msaraiva/surface/blob/master/CHANGELOG.md#v030-2021-02-24" class="inline-onebox" rel="noopener nofollow ugc">surface/CHANGELOG.md at main · surface-ui/surface · GitHub</a>.</p>
<p>We are happy to see that Surface is becoming more and more popular. There’s big a chance Surface is already part of many developers stacks, so it becomes essential to support these developers to have a stable version 1.0 of Surface.</p>
<p>Let’s not be afraid of words, our ambition is to make Surface the best possible platform for creating LV projects! To move forward on this path, we’re pleased to announce that <a class="mention" href="/u/malian" rel="nofollow">@Malian</a> and <a class="mention" href="/u/miguel-s" rel="nofollow">@miguel-s</a> have joined our core team and will be helping us to improve Surface.</p>
<p>If you would like to shape the future with us, report issues or simply need help, feel free to join us on the slack channel or on github!</p>
<p>Happy coding!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="205610" data-batch-url="/posts/batch_likers">
                        27
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/95">Post #94</a>
	                </div>
	            </div>
              <div id="likers-container-205610" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="205610"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #94"></div>
  </section>
</div>
    <div class="postbit" id="207018" data-post-id="207018">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gangstead" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gangstead/120/20511_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gangstead
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="the_wildgoose" data-post="90" data-topic="27671">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/t/3ab097/48.png" class="avatar"> the_wildgoose:</div>
<blockquote>
<p>How would I access the “flash” from a component?</p>
<p>So I can see in the code there are default “data flash” properties already setup. In the top level view I can access either <span class="mention">@flash</span> or assigns.flash, however, this has disappeared from the assigns list once I am in the render function for some component called from the view?</p>
</blockquote>
</aside>
<p>I was trying to use the built in flash, but couldn’t figure out a way, so I just renamed it and wrapped around my existing utility class:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  # in surface component
  prop message, :map

  def render(assigns) do
    ~H"""
    {{ Helpers.render_flash(@message) }}
    """
  end

# used in parent component
&lt;Flash message={{ @flash }} /&gt;
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="207018" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/96">Post #95</a>
	                </div>
	            </div>
              <div id="likers-container-207018" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="207018"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #95"></div>
  </section>
</div>
    <div class="postbit" id="208500" data-post-id="208500">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derek-zhou" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/120/19943_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derek-zhou
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I am trying to rewrite <code>live.html.leex</code> into a Surface.LiveComponent. Therefore, I need to access <code>@flash</code> from within the component. However, if I have:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">data flash, :map 
</code></pre>
<p>then it complains:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">cannot use name "flash". There's already a built-in data assign with the same name.
</code></pre>
<p>If I remove that line then it compiles, but from within the component the <code>@flash</code> seems to be an empty map?</p>
<p>As a general question, if I need to share some data assign between multiple Surface LiveView/LiveComponent, can I do that?</p>
<p>After I read some discussion above, I think I can pass the flash into a prop. However, how do I clear the flash from within the component then?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208500" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/97">Post #96</a>
	                </div>
	            </div>
              <div id="likers-container-208500" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208500"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #96"></div>
  </section>
</div>
    <div class="postbit" id="208518" data-post-id="208518">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derek-zhou" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/120/19943_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derek-zhou
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>To answer my own question, I think components cannot share data assigns. So to factor out the flash display out in a component, I have to use a stateless component and pass the <span class="mention">@flash</span> in as a prop. Inside the component I can do:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">phx-value-key="error" phx-click="lv:clear-flash"
</code></pre>
<p>as in plain LiveView. and it will clear the flash assign. The whole thing is reactive, so the passed in prop is changed as well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208518" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/98">Post #97</a>
	                </div>
	            </div>
              <div id="likers-container-208518" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208518"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #97"></div>
  </section>
</div>
    <div class="postbit" id="208738" data-post-id="208738">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="msaraiva" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/msaraiva/120/1214_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  msaraiva
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Broadway Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="derek-zhou" data-post="97" data-topic="27671">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/48/19943_2.png" class="avatar"> derek-zhou:</div>
<blockquote>
<p><code>cannot use name "flash". There's already a built-in data assign with the same name.</code></p>
</blockquote>
</aside>
<p>Hi <a class="mention" href="/u/derek-zhou" rel="nofollow">@derek-zhou</a>!</p>
<p>This has been fixed. If you try out the version on <code>master</code>, you should be able to define a prop named <code>flash</code> in any component (live or not). Thanks for reporting this issue.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="208738" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/99">Post #98</a>
	                </div>
	            </div>
              <div id="likers-container-208738" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="208738"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #98"></div>
  </section>
</div>
    <div class="postbit" id="210202" data-post-id="210202">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derek-zhou" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derek-zhou/120/19943_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derek-zhou
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/msaraiva" rel="nofollow">@msaraiva</a>, I found myself using <code>:attrs</code> and <code>:props</code> more and more, instead of specifying attrs and props individually. As I understand it, <code>:attrs</code> are for html elements only, and <code>:props</code> are for components only. My question is why do we need both constructs? It is not like there can be any confusion?</p>
<p>If for example we only have <code>:props</code> for both html elements and components it is just one less thing to remember and the components will feel more like <em>super</em> elements as it is intended to be?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="210202" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/100">Post #99</a>
	                </div>
	            </div>
              <div id="likers-container-210202" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="210202"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #99"></div>
  </section>
</div>
    <div class="postbit" id="210219" data-post-id="210219">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="olivermt" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/olivermt/120/2354_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  olivermt
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Attrs can only go on raw elements, and that is an important distinction to help hygiene imo.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="210219" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/101">Post #100</a>
	                </div>
	            </div>
              <div id="likers-container-210219" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="210219"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #100"></div>
  </section>
</div>
    <div class="postbit" id="212977" data-post-id="212977">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="mfilej" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mfilej/120/6517_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  mfilej
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This week I’ve been pondering whether to introduce Surface to our project or not. Our front-end devs seem to be happy with how close this is to what they’re used to from Vue etc., so that’s great.</p>
<p>I’ve read up everything I could (including this thread) and it seems there is a lot of interest in rendering Surface components without LiveView. I understand that this is not in the cards at the moment, so I want to ask the opposite question.</p>
<p>How terrible would it be if I decide to build our project exclusively with LiveView just so we can use Surface? It is a new project so there would be no rewriting needed. It’s mostly a question of introducing additional complexity. Before looking into Surface my estimate was that we would need LV to build out some parts, maybe even the majority, but not everything.</p>
<p>Please talk me (to jump) off this ledge. <img src="https://forum.elixirforum.com/images/emoji/apple/laughing.png?v=15" title=":laughing:" class="emoji" alt=":laughing:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="212977" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/102">Post #101</a>
	                </div>
	            </div>
              <div id="likers-container-212977" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="212977"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #101"></div>
  </section>
</div>
    <div class="postbit" id="212980" data-post-id="212980">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sfusato" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sfusato/120/11569_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sfusato
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="mfilej" data-post="102" data-topic="27671">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mfilej/48/6517_2.png" class="avatar"> mfilej:</div>
<blockquote>
<p>How terrible would it be if I decide to build our project exclusively with LiveView just so we can use Surface?</p>
</blockquote>
</aside>
<p>It doesn’t need to be exclusively one way or the other.</p>
<p>I personally no longer go the “dead view” route <img src="https://forum.elixirforum.com/images/emoji/apple/laughing.png?v=15" title=":laughing:" class="emoji" alt=":laughing:" loading="lazy" width="20" height="20"> for new projects with Phoenix. With that said, I still have a few classic http endpoints where it doesn’t make much sense to port them over to LiveView (think auth pages).</p>
<p>I’ve been keeping tabs on Surface ever since it surfaced <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20"> . It’s such a joy to work with and complements LiveView so well, that I can’t imagine myself developing LiveView apps without it at this point.</p>
<aside class="quote no-group" data-username="mfilej" data-post="102" data-topic="27671">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mfilej/48/6517_2.png" class="avatar"> mfilej:</div>
<blockquote>
<p>It’s mostly a question of introducing additional complexity.</p>
</blockquote>
</aside>
<p>That’s what kept me away from Surface at first. I’ve wanted to stay as close as possible to LiveView, considering it hasn’t reached 1.0 yet, without adding an extra layer of complexity on top of it. I was wrong on that call. Just as I was wrong about Tailwind and it’s approach to CSS (it’s one of those things you have to try and keep at it to understand its benefits).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="212980" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/27671/103">Post #102</a>
	                </div>
	            </div>
              <div id="likers-container-212980" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="212980"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #102"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/27671/load_more?page=11">Load more posts (114 remaining)</a>
</div></template></turbo-stream>