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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="AHBruns" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/AHBruns/120/27529_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  AHBruns
                    <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>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>To be clear, my proposal is really just about phx-no-feedback, but I do agree with the general sentiment that CoreComponents need to be re-thinked.</p>
<p>Currently they just don’t follow good component based development principles. For example, the smallest component when working with an input is a whole field (label + input + errors). While a field component should exist, it is generally a good practice to compose it from simpler, more generic, components.</p>
<p>Additionally, while the core components are a great showcase for the <em>flexibility</em> of TailwindCSS, they are not e very good example of <em>good</em> TailwindCSS. They make use of arbitrary values all over the place which is generally a poor practice as it reduces styling consistency. Also, they make use of margin all over the place which is almost always a bad idea in component based UI development (padding and/or having the parent provide spacing for its children, is generally considered a better approach).</p>
<p>My advice would be to rename CoreComponents to PhoenixComponents. Then have CoreComponents be a larger set of more generic and composable components that PhoenixComponents use. The idea being, Phoenix expects certain components with certain semantics to exist for thing like generators to work, and that’s reasonable, but that API is a level above the core components of an application. Phoenix could, initially generate a CoreComponents module as well that fills the role of generic composable components and are intended to be used by developers to form more complex UIs.</p>
<p>With this approach, component libraries can still provide a “drop in replacement” for PhoenixComponents, but that module would just be a module which uses the component library’s components. Developers would use the component library’s components directly.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="305874" 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/rethinking-phx-no-feedback/59250/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-305874" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="305874"
                     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 #11"></div>
  </section>
</div>
    <div class="postbit" id="305875" data-post-id="305875">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="AHBruns" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/AHBruns/120/27529_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  AHBruns
                    <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>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I do agree with both of you to some degree.</p>
<p>I think Phoenix should provide a true core components module which contains generic components that can be used to make arbitrarily complex UIs (ideally these would be headless components). This could even be spun off into its own project like how LiveView is, since fundamentally its a component library that we’re asking for.</p>
<p>However, it’s also true that scaffolded UIs will never be particularly customizable, and for sufficiently complex applications generators will not be useful. This is okay, and does not mean generators are bad. They just serve a specific purpose, and Phoenix should embrace that. Make generators work, but don’t act like the components generators use are fundamental (core) since they’re not, they’re very specific for the specific UIs that generators are generating.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="305875" data-batch-url="/posts/batch_likers">
                        4
                      </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/rethinking-phx-no-feedback/59250/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-305875" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="305875"
                     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 #12"></div>
  </section>
</div>
    <div class="postbit" id="305876" data-post-id="305876">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="AHBruns" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/AHBruns/120/27529_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  AHBruns
                    <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>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I should add I’m currently working on a component library called <code>Brainz</code> (not yet public), that seeks to fill the role of a core headless UI component library for Phoenix LiveView applications. My plan is to do as I’ve described here, and allow generating a CoreComponents module that uses <code>Brainz</code> components, but only for the use-case of supporting generators, not for generic UI development.</p>
<p>To this end, I might suggest that instead of implicitly importing CoreComponents everywhere, generators should explicitly import CoreComponents as needed (which will hopefully be called something like GeneratorComponents). This would help make it clear those components are not generic.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="305876" data-batch-url="/posts/batch_likers">
                        5
                      </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/rethinking-phx-no-feedback/59250/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-305876" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="305876"
                     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 #13"></div>
  </section>
</div>
    <div class="postbit" id="305880" data-post-id="305880">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>There is way too much in this thread that I have lots of thought on that keep me up every night about Phoenix and web dev in general so I’m not even going to try and respond to most of it <img src="https://forum.elixirforum.com/images/emoji/apple/upside_down_face.png?v=15" title=":upside_down_face:" class="emoji" alt=":upside_down_face:" loading="lazy" width="20" height="20"></p>
<p>I agree that <code>CoreComponents</code> could do with a rename because I’ve seen too many people around here treat it as some kind of law.</p>
<aside class="quote no-group" data-username="AHBruns" data-post="12" data-topic="59250">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ahbruns/48/27529_2.png" class="avatar"> AHBruns:</div>
<blockquote>
<p>Additionally, while the core components are a great showcase for the <em>flexibility</em> of TailwindCSS, they are not e very good example of <em>good</em> TailwindCSS.</p>
</blockquote>
</aside>
<p>From what I understand, the Tailwind team designed Phoenix’s core components, so right there illustrates what frustrates me with the web dev world <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20">  This is a whole other convo I’d love to have, but not in this thread.</p>
<p>I’m definitely someone who has trouble keeping a cool head sometimes when talking programming, but some of the feedback to the core team can be presented a little brashly.  I’ve never used Svelte but in the bit of searching I’ve done, Rich Harris isn’t involved in any of the Svelte UI stuff.  As some detractors love to point out: Phoenix and Elixir are not backed by multi-billion dollar companies, so a lot of this falls on the community.</p>
<p>Clearly I’m calling you out there with that last point <a class="mention" href="/u/adw632" rel="nofollow">@adw632</a>, though this is a bit of a stream-of-consciousness reply.  I agree with a <em>lot</em> of your points.</p>
<p>It’s been clear from some posts in the past couple of months that Phoenix needs to speed up it’s opening game in many regards.  This thread has zero’d in on UI concerns.  Phoenix in general doesn’t have a strong presence of frontend people, which is not surprising, but I know we’re out there!  Perhaps we should all try and collaborate a little more.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="305880" 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/rethinking-phx-no-feedback/59250/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-305880" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="305880"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="305898" data-post-id="305898">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="adw632" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  adw632
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="sodapopcan" data-post="15" data-topic="59250">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sodapopcan/48/34668_2.png" class="avatar"> sodapopcan:</div>
<blockquote>
<p>Clearly I’m calling you out there with that last point <a class="mention" href="/u/adw632" rel="nofollow">@adw632</a>, though this is a bit of a stream-of-consciousness reply. I agree with a <em>lot</em> of your points</p>
</blockquote>
</aside>
<p>You haven’t offended me in any way.</p>
<p>I clearly stated I appreciate the efforts put into Phoenix and that my statements are intended to be constructive feedback and not some “ungrateful” complaint as one may have expecting a polished product backed by a multibillion dollar vendor.</p>
<p>I honestly don’t know how the community will move forward to get the needed productivity. I did locate a <a href="https://hexdocs.pm/phoenix_ui/Phoenix.UI.html" rel="noopener nofollow ugc">Phoenix UI</a> component package which has some promise and some non trivial effort put into it, to handle extra classes (not ideal naming IMO) but again styles are still embedded into the code and it seems to be incomplete, like missing forms but has some form elements.  It shows some promise but something along those lines is really needed, however I am seeing a trend of tailwind fail in component libraries with hard coded syles/colors.</p>
<p>Ultimately I think Phoenix might need to draw a line and think about UIkit and theming in an agnostic way.</p>
<p>UI kits would provide that final layer using various CSS frameworks rather than baking tailwind into the base framework by default. I’m not against tailwind but I’ve seen how it hasn’t worked well in core components. It just strikes me as odd to include a CSS framework by default instead of just providing necessary framework abstractions and semantics for UI kits to provide the flavor.</p>
<p>I think <a class="mention" href="/u/ahbruns" rel="nofollow">@AHBruns</a> made some good points about arbitrary values all over the place and the preference that parent should driving spacing. Core components leaves a lot to be desired and reflects badly on tailwind in practice. I’d prefer to have real css to change styles not arbitrary choices embedded in framework generated code that I am damned if I use it and damned if I touch it as it will no doubt need to be merge updated on a future release. It’s the worst possible predicament so you have to stay far away from it and stay away from the generators that use core components too.</p>
<p>I think the focus should not be on generators.</p>
<p>The focus should be on solving the UI kit problem first as that can address the key weaknesses and stumbling blocks, and <em>only then</em> should generators have any effort expended.</p>
<p>This way we could have at least one solid UI kit layer to build real apps on, and if we must have generators we can get that too and base them on a rich UI kit.</p>
<p>Phoenix could be productive for building real apps whether you use generators or not. The UI generators should live with the UI kits, and they could support templates for bootstrapping the app shell, navigation systems, all sorts of powerful application generation concerns are possible, not just crud views.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="305898" 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/rethinking-phx-no-feedback/59250/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-305898" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="305898"
                     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 #15"></div>
  </section>
</div>
    <div class="postbit" id="306089" data-post-id="306089">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="adw632" data-post="16" data-topic="59250">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/a/9d8465/48.png" class="avatar"> adw632:</div>
<blockquote>
<p>You haven’t offended me in any way.</p>
</blockquote>
</aside>
<p>I didn’t get the impression that you are someone who is easily offended <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">  Also, it’s always weird when I have a notification from <code>andrewh</code> because <em>I’m</em> Andrew H <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"></p>
<p>Ya, I think the whole idea of CoreComponents just isn’t clear.  My understanding of them is that they are not designed being part of a UI toolkit but as part of an app-specific constraint-based design system.  For the latter, I believe being able to pass classes in for customization is a big anti-pattern—Your app’s design system should have ready-made components for different scenarios as opposed to a UI kit which you use to build said design system.  I think it’s ok to have some wrapper components that take attributes for spacing, which is to say I do agree that including margins in components is a bad idea.  But this was part of my elusive “this is what frustrates me about the web dev world” comment.  I think that’s something people are just never going to agree on, so it’s hard to have a generated default that will please everyone.</p>
<aside class="quote no-group" data-username="adw632" data-post="16" data-topic="59250">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/a/9d8465/48.png" class="avatar"> adw632:</div>
<blockquote>
<p>Phoenix could be productive for building real apps whether you use generators or not. The UI generators should live with the UI kits, and they could support templates for bootstrapping the app shell, navigation systems, all sorts of powerful application generation concerns are possible, not just crud views.</p>
</blockquote>
</aside>
<p>I agree we need this but I’m not sure it should come from the core team.  There needs to be a business who is all-in on LiveView who can get behind this type of thing.  Unfortunately, as has been touched on in this thread, the likelihood of that is iffy.  Most job postings I see are for Phoenix backend with React/other frontend.  Even if LiveView is used I still see React being mentioned (which I’m assuming means they are using LiveView for their admin area and React for their app?)  I think there just aren’t enough frontend people who focus on the “HTML-over-the-wire” stack since there are no jobs in general.  I tried to sell myself as such last year when looking for a new job and of course was horribly unsuccessful <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"></p>
<p>Proofing this I realize I’m writing with a tone as if everything I’m saying is fact—this is not the case.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="306089" 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/rethinking-phx-no-feedback/59250/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-306089" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="306089"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="306112" data-post-id="306112">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="adw632" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  adw632
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="sodapopcan" data-post="17" data-topic="59250">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sodapopcan/48/34668_2.png" class="avatar"> sodapopcan:</div>
<blockquote>
<p>For the latter, I believe being able to pass classes in for customization is a big anti-pattern—Your app’s design system should have ready-made components for different scenarios as opposed to a UI kit which you use to build said design system. I think it’s ok to have some wrapper components that take attributes for spacing, which is to say I do agree that including margins in components is a bad idea.</p>
</blockquote>
</aside>
<p>The tailwind philosophy is exactly that though, use ulitity classes to do exactly what you want where you need it.</p>
<p>I think ultimately there needs to be a layer where you have enough composability or a theming layer where you can override the classes/theme and define variants for your particular app or site on top of that base layer. So once you define the variants your app would be built using the components and your defined variants with no class passdown.</p>
<p>I was also looking at liveview+svelte as a possible way forward to get better access to a broader set of UI components and a much richer UI given liveview hasn’t got there yet.</p>
<p>It’s kinda mind blowing what <a class="mention" href="/u/woutdp" rel="nofollow">@woutdp</a> has done with the ~V sigil to merge svelte and liveview. I am surprised this hasn’t got more attention:</p><div class="youtube-onebox lazy-video-container" data-video-id="jxKyyXp1rN4" data-video-title="Svelte As An Alternative LiveView DSL" data-video-start-time="" data-provider-name="youtube">
  <a href="https://www.youtube.com/watch?v=jxKyyXp1rN4" target="_blank" class="video-thumbnail" rel="noopener nofollow ugc">
    <img class="youtube-thumbnail" src="https://img.youtube.com/vi/jxKyyXp1rN4/maxresdefault.jpg" title="Svelte As An Alternative LiveView DSL" width="690" height="388">
  </a>
</div>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="306112" 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/rethinking-phx-no-feedback/59250/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-306112" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="306112"
                     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 #17"></div>
  </section>
</div>
    <div class="postbit" id="306124" data-post-id="306124">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is really interesting. Especially from the point of view of page-specific javascript. Can this be an alternative to using phoenix hooks?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="306124" 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/rethinking-phx-no-feedback/59250/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-306124" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="306124"
                     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 #18"></div>
  </section>
</div>
    <div class="postbit" id="306127" data-post-id="306127">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="adw632" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  adw632
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think it is an alternative to surface UI with steroids attached.</p>
<p>Write all your UI in one file, html, state, JS, and styles.</p>
<p>Oh and animations too!</p>
<p>Ditch the hooks and things like alpine.js  and just use the disappearing Svelte framework which complies to just your code. It’s very tight.</p>
<p>Seems like the killer combo to me.</p>
<p>The only thing I can see is if you decide you want some pages with svelte elements to do sever side rendering you will need to ship with the renderer like node/bun, but that is 100% optional, svelte is progressive.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="306127" 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/rethinking-phx-no-feedback/59250/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-306127" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="306127"
                     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 #19"></div>
  </section>
</div>
    <div class="postbit" id="325436" data-post-id="325436">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I wonder if there are any initiatives to improve this, I was revisiting some old code that uses core components today and noticed that we redeclare classes for the base styles of an input (notice the <code>border-zinc-300</code> and <code>focus:border-zinc-400</code>):</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"> "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6",
 "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400",
 @errors == [] &amp;&amp; "border-zinc-300 focus:border-zinc-400",
 @errors != [] &amp;&amp; "border-rose-400 focus:border-rose-400"
</code></pre>
<p>PS.: If you follow this pattern, once you have to support a dark mode (or responsive variants) which is what I’m doing now, you start having lots and lots of duplicated classes.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="325436" 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/rethinking-phx-no-feedback/59250/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-325436" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="325436"
                     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 #20"></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/59250/load_more?page=3">Load more posts (5 remaining)</a>
</div></template></turbo-stream>