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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Several Rust libraries are using the Taffy crate for layouting, could that be of use to you?</p>
<p><a href="https://crates.io/crates/taffy" class="onebox" target="_blank" rel="noopener nofollow ugc">https://crates.io/crates/taffy</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392242" 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/emerge-solve-a-gui-framework-for-elixir/74953/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-392242" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392242"
                     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 #21"></div>
  </section>
</div>
    <div class="postbit" id="392244" data-post-id="392244">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Damirados" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Damirados/120/36402_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Damirados
                    <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 did study source code of taffy as well as yoga, xilem and quite a few other non rust layout engines.</p>
<p>Emerge core structure resembles taffy in some places, but I chose to no go that way. Taffy does css block, flexbox and grid but it doesn’t cover a lot of Emerge API layouting needs</p>
<p>Emerge row and columns do have similarities to flexbox but it also has nearby slots and different semantics for layout compared to css. I think are much nicer, thanks to Matthew Griffith who did amazing job on designing <a href="https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element" rel="noopener nofollow ugc">elm-ui</a> lib which I just copied for the most part.</p>
<p>I have opted for custom layout engine implementation with structure that is then reused for rendering part. My nodes are not generic, they are layout purpose specific. So tree structure is it’s cache at the same time, there is no need to separate complicated cache like in taffy, although some cache ideas could be transfer in the future for optimization. They need to do it like that because html (generic structure) and css (generic styling for generic structures) are just plan bad separation of concerns for describing UI. I am genuinely shocked that inertia such a bad idea is so big that it is still going along to the present day. At least Flutter, Jetpack compose and SwiftUI devs decided to switch to semantic UI definitions, so not every system out there is stuck on bad idea just for compatibility familiarity sake.</p>
<p>End result should be layout engine that is faster than taffy (mostly because semantics allow it to be simpler) and rendering engine that is tightly integrated into the same structure so it can efficiently avoid doing any unnecessary work. It is basically all one big cache that should also fit in CPU cache on many devices,  at least if there aren’t thousands of elements on the screen.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392244" 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/emerge-solve-a-gui-framework-for-elixir/74953/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-392244" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392244"
                     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 #22"></div>
  </section>
</div>
    <div class="postbit" id="392946" data-post-id="392946">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Damirados" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Damirados/120/36402_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Damirados
                    <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><a href="https://github.com/emerge-elixir/solve" rel="noopener nofollow ugc">Solve</a> 0.2.2 is out with a full README rewrite and some very minor quality of life improvements.</p>
<p>Previous README was slop placeholder, no tokens were spent on this one. I have taken time to write this one in a tutorial like style with examples. Hopefully it lands on just the right amount of verbosity to cover all of the functionality. Any feedback is appreciated.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="392946" 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/emerge-solve-a-gui-framework-for-elixir/74953/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-392946" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="392946"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>