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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks <a class="mention" href="/u/msaraiva" rel="nofollow">@msaraiva</a> for the detailed answer. In line with some of my thoughts. Once libraries like <a href="https://github.com/surface-ui/surface_bootstrap" class="inline-onebox" rel="noopener nofollow ugc">GitHub - surface-ui/surface_bootstrap · GitHub</a> and <a href="https://github.com/surface-ui/surface_tailwind" class="inline-onebox" rel="noopener nofollow ugc">GitHub - surface-ui/surface_tailwind · GitHub</a> mature - probably both developer experience and productivity will reach the top of the ladder. Exciting times to be a Web Application Developer.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="219397" 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/154">Post #153</a>
	                </div>
	            </div>
              <div id="likers-container-219397" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="219397"
                     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 #153"></div>
  </section>
</div>
    <div class="postbit" id="220637" data-post-id="220637">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Might be a long shot, but did anyone manage to convert the VSCode syntax highlighting definition Marlus created to something that Sublime Text can read? Been trying a few automatic converters and they all fail.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="220637" 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/155">Post #154</a>
	                </div>
	            </div>
              <div id="likers-container-220637" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="220637"
                     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 #154"></div>
  </section>
</div>
    <div class="postbit" id="220645" data-post-id="220645">
  <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">
								<p><a class="mention" href="/u/cschmatzler" rel="nofollow">@cschmatzler</a> feel free to open an issue at <a href="https://github.com/msaraiva/vscode-surface/issues" class="inline-onebox" rel="noopener nofollow ugc">Issues · msaraiva/vscode-surface · GitHub</a> and provide more information about the errors you get when running those converters. Maybe it’s something we can fix at the grammar level.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="220645" 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/156">Post #155</a>
	                </div>
	            </div>
              <div id="likers-container-220645" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="220645"
                     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 #155"></div>
  </section>
</div>
    <div class="postbit" id="222119" data-post-id="222119">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>After using Surface for a little bit I’m still wondering why the syntax</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">prop name, :string
</code></pre>
<p>was chosen over</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">prop :name, :string
</code></pre>
<p>It feels quite “unnatural”, is there a technical reason?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="222119" 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/157">Post #156</a>
	                </div>
	            </div>
              <div id="likers-container-222119" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222119"
                     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 #156"></div>
  </section>
</div>
    <div class="postbit" id="222130" data-post-id="222130">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>When passing prop <code>name</code> to a component or dom node it is <code>name="value"</code> not <code>:name="value"</code> since props are =~ html attributes, it makes sense imo.</p>
<p>and attributes/props like <code>:if</code> have special meaning in the context of surface.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="222130" 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/158">Post #157</a>
	                </div>
	            </div>
              <div id="likers-container-222130" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222130"
                     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 #157"></div>
  </section>
</div>
    <div class="postbit" id="222415" data-post-id="222415">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Possible, I just think that it looks very unfamiliar <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<p>Another question, I’ve built a table component as described <a href="https://surface-ui.org/slots#binding-slot-arguments-to-generators" rel="noopener nofollow ugc">here</a> and it’s working well, but I cannot find a way to combine this with dynamic columns:</p>
<pre data-code-wrap="surface"><code class="lang-surface">&lt;Table data={resource &lt;- @resources}&gt;
  {#for col &lt;- table_columns()}
    &lt;Column label={col.label}&gt;
      {Map.get(resource, col.attribute)}
    &lt;/Column&gt;
  {/for}
&lt;/Table&gt;
</code></pre>
<p>It’s telling me that<br>
a) The default slot wasn’t defined, when I define one it tells me that<br>
b) <code>resource</code> is undefined</p>
<p>I’m not sure what I’m missing here <img src="https://forum.elixirforum.com/images/emoji/apple/man_shrugging.png?v=15" title=":man_shrugging:" class="emoji" alt=":man_shrugging:" 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="222415" 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/159">Post #158</a>
	                </div>
	            </div>
              <div id="likers-container-222415" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222415"
                     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 #158"></div>
  </section>
</div>
    <div class="postbit" id="222427" data-post-id="222427">
  <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">
								<p>Hi <a class="mention" href="/u/zimt28" rel="nofollow">@zimt28</a>!</p>
<aside class="quote no-group" data-username="zimt28" data-post="159" 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/zimt28/48/9933_2.png" class="avatar"> zimt28:</div>
<blockquote>
<p>Possible, I just think that it looks very unfamiliar <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
</blockquote>
</aside>
<p>Defining props in Surface is as common as defining functions. You already define functions as:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def name, do: ...
</code></pre>
<p>So it shouldn’t be so unfamiliar <img src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title=":wink:" class="emoji" alt=":wink:" loading="lazy" width="20" height="20"></p>
<aside class="quote no-group" data-username="zimt28" data-post="159" 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/zimt28/48/9933_2.png" class="avatar"> zimt28:</div>
<blockquote>
<p>I’ve built a table component as described <a href="https://surface-ui.org/slots#binding-slot-arguments-to-generators" rel="noopener nofollow ugc">here </a> and it’s working well, but I cannot find a way to combine this with dynamic columns:</p>
</blockquote>
</aside>
<p>Unfortunately, you can’t assign slots dynamically. The problem is that LV doesn’t have support for slots yet so in order to make it work, we need to know upfront how many blocks are being passed at compile-time to generate the proper <code>case</code> clauses in the component’s body. This is a limitation that can only be solved when Phoenix adds built-in support for slots, which is already on the roadmap.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="222427" data-batch-url="/posts/batch_likers">
                        6
                      </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/160">Post #159</a>
	                </div>
	            </div>
              <div id="likers-container-222427" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222427"
                     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 #159"></div>
  </section>
</div>
    <div class="postbit" id="222894" data-post-id="222894">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="cvkmohan" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/cvkmohan/120/39944_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  cvkmohan
                  </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> Question: Does  surface 0.5.2 work out of box with LiveView 0.16?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="222894" 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/161">Post #160</a>
	                </div>
	            </div>
              <div id="likers-container-222894" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222894"
                     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 #160"></div>
  </section>
</div>
    <div class="postbit" id="222960" data-post-id="222960">
  <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">
								<p>No. We’ll release a new <code>v0.6</code> after Phoenix <code>v1.6</code> is released. In the meantime, if you want to try Surface with LV <code>0.16</code>, you need to use the Surface version on <code>master</code>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="222960" 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/162">Post #161</a>
	                </div>
	            </div>
              <div id="likers-container-222960" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="222960"
                     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 #161"></div>
  </section>
</div>
    <div class="postbit" id="223248" data-post-id="223248">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey Surface users! Is there a way to validate only the current field in the form? The one that user interacts with. In LiveView you can achieve it by adding the <code>data</code> attribute. Does anyone know how to do it in Surface?</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"> def error_tag(form, field) do
  Enum.map(Keyword.get_values(form.errors, field), fn error -&gt;
    content_tag(:span, translate_error(error),
      class: "form-error",
      phx_feedback_for: input_name(form, field),
      data: [phx_error_for: input_id(form, field)]
    )
  end)
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="223248" 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/163">Post #162</a>
	                </div>
	            </div>
              <div id="likers-container-223248" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="223248"
                     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 #162"></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=17">Load more posts (54 remaining)</a>
</div></template></turbo-stream>