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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="f34nk" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/120/8103_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  f34nk
                    <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/nico-amsterdam/phoenix_form_awesomplete/#installation" rel="noopener nofollow ugc">PhoenixFormAwesomplete</a> looks interesting. How is it different to <a href="https://github.com/grych/drab" rel="noopener nofollow ugc">drab</a>?</p>
<p>IMO those projects are born out of the unique connection of phoenix and websockets. It just makes it much more obvious that you can do something like that. Or do I miss something? I am not a UI or even frontend guy, so maybe I don’t see the full picture here.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="72924" 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/html-tools-in-elixir/12905/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-72924" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="72924"
                     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="73001" data-post-id="73001">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Drab is a framework, it handle with dom using websockets, he has your “own” controller caled “commander” and it uses Phoenix as a base, so is a complement.</p>
<p><a href="https://github.com/nico-amsterdam/phoenix_form_awesomplete/#installation" class="inline-onebox" rel="noopener nofollow ugc">GitHub - nico-amsterdam/phoenix_form_awesomplete: Phoenix text_input autocomplete (autosuggest) with on-demand Ajax calls, utilizing Lea Verou's Awesomplete widget. · GitHub</a>, is like an “html component” to create (autosuggest) with on-demand Ajax calls, utilizing Lea Verou’s Awesomplete widget, he uses this lib <a href="https://github.com/LeaVerou/awesomplete" class="inline-onebox" rel="noopener nofollow ugc">GitHub - LeaVerou/awesomplete: Ultra lightweight, usable, beautiful autocomplete with zero dependencies. · GitHub</a> behind the scenes!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="73001" 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/html-tools-in-elixir/12905/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-73001" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="73001"
                     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="79520" data-post-id="79520">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="f34nk" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/120/8103_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  f34nk
                    <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>Hello!<br>
I updated the parsing benchmarks on the <a href="https://github.com/f34nk/elixir_html_tools" rel="noopener nofollow ugc">elixir_html_tools</a> repo and added some test cases with small filesizes - which was missing before.</p>
<p>To my surprise <a href="https://github.com/f34nk/elixir_html_tools#benchmark" rel="noopener nofollow ugc">Floki and Meeseeks</a> are incredibly fast for data sizes <strong>smaller 1kB</strong>. You can check out the runtime distribution <a href="https://github.com/f34nk/elixir_html_tools#and-the-runtime-distriubution" rel="noopener nofollow ugc">here</a>.</p>
<p>So, packages like Myhtmlex or ModestEx, that are using <a href="http://erlang.org/doc/tutorial/cnode.html" rel="nofollow"><strong>C Nodes</strong></a>, come with additional latency.</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://potatosalad.io/2017/08/05/latency-of-native-functions-for-erlang-and-elixir">
  <header class="source">
      <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6899ac0c15d282702ba7d70f8ec2302484ea3453.ico" class="site-icon" alt="" data-dominant-color="444444" width="32" height="32">

      <a href="https://potatosalad.io/2017/08/05/latency-of-native-functions-for-erlang-and-elixir" target="_blank" rel="noopener nofollow ugc" title="12:00AM - 05 August 2017">potatosalad – 5 Aug 17</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://potatosalad.io/2017/08/05/latency-of-native-functions-for-erlang-and-elixir" target="_blank" rel="noopener nofollow ugc">Latency of Native Functions for Erlang and Elixir</a></h3>

  <p>Erlang and C first appeared within 14 years* of one another.</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<blockquote>
<p>Use this potentially helpful and fairly unscientific table to help you decide:</p>
</blockquote>
<div class="md-table">
<table>
<thead>
<tr>
<th>Type</th>
<th>Isolation</th>
<th>Complexity</th>
<th>Latency</th>
</tr>
</thead>
<tbody>
<tr>
<td>Node</td>
<td>Network</td>
<td>Highest</td>
<td>Highest</td>
</tr>
<tr>
<td>Port</td>
<td>Process</td>
<td>High</td>
<td>High</td>
</tr>
<tr>
<td>Port Driver</td>
<td>Shared</td>
<td>Low</td>
<td>Low</td>
</tr>
<tr>
<td>NIF</td>
<td>Shared</td>
<td>Lowest</td>
<td>Lowest</td>
</tr>
</tbody>
</table>
</div><p>When there is time I will setup a <a href="https://github.com/Overbryd/myhtmlex#call-into-nif" rel="noopener nofollow ugc"><strong>dirty-NIF</strong></a> test, too.</p>
<p>Cheers <img src="https://forum.elixirforum.com/images/emoji/apple/beers.png?v=15" title=":beers:" class="emoji" alt=":beers:" 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="79520" 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/html-tools-in-elixir/12905/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-79520" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79520"
                     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="79539" data-post-id="79539">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="f34nk" data-post="9" data-topic="12905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/48/8103_2.png" class="avatar"> f34nk:</div>
<blockquote>
<p>I mean, website performance (and with that user experience) has gotten so worse since everything is being done “on load” or “async”.</p>
</blockquote>
</aside>
<p>IMO 90% of the JS devs just have no idea how to use them. And have in mind I am a JS hater so I ain’t gonna be one of these guys that tell you “just use it right” – but in this case it’s partially true. I’ve seen some rare JS website gems that are incredibly fast and smooth even on spotty 3G on an iPhone 5c.</p>
<p>That being said, I fully agree with you. <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"> And I am going back to server-side rendering more and more with time.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="79539" 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/html-tools-in-elixir/12905/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-79539" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79539"
                     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="79541" data-post-id="79541">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/f34nk" rel="nofollow">@f34nk</a> Feedback for the updated benchmarks.</p>
<blockquote>
<p>All parsers except ModestEx return html encoded into a list of tuples.</p>
</blockquote>
<p>Meeseeks returns it as a <code>Document</code>, which is a flat map of node id to node struct.</p>
<p>You also appear to be using the <code>:mochiweb_html</code> parser for Floki, which is the non-HTML5 compliant one, so you’re comparing apples to the HTML5 compliant oranges of the other parsers. Of course, AFAIK it’s impossible to run Floki’s HTML5 parser on the latest version of OTP, but that’s a different problem all-together.</p>
<p>Also curious if when you’re benchmarking, are you disabling CPU throttling (as mentioned <a href="https://github.com/mischov/meeseeks_floki_bench#setup" rel="noopener nofollow ugc">here</a>)? I’ve found that can reduce variation in run times when benchmarking.</p>
<p>Finally I’m interested why the averages shown in the text results don’t appear to be reflected in the images: for instance it appears when looking at the images that 50k Floki is faster than 50k Meeseeks, but according to the text 50k Floki averaged 16633.17 µs/op while 50k Meeseeks averaged 12018.79 µs/op.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="79541" 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/html-tools-in-elixir/12905/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-79541" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79541"
                     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="79544" data-post-id="79544">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="f34nk" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/120/8103_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  f34nk
                    <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">
								<aside class="quote no-group" data-username="mischov" data-post="16" data-topic="12905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/48/2489_2.png" class="avatar"> mischov:</div>
<blockquote>
<p>Meeseeks returns it as a Document</p>
</blockquote>
</aside>
<p>Thank you! I will update that.</p>
<aside class="quote no-group" data-username="mischov" data-post="16" data-topic="12905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/48/2489_2.png" class="avatar"> mischov:</div>
<blockquote>
<p>you’re comparing apples to the HTML5 compliant oranges of the other parsers</p>
</blockquote>
</aside>
<p>Also true. I will change that, too.</p>
<aside class="quote no-group quote-modified" data-username="mischov" data-post="16" data-topic="12905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/48/2489_2.png" class="avatar"> mischov:</div>
<blockquote>
<p>are you disabling CPU throttling?</p>
</blockquote>
</aside>
<p>Interesting. I will check that out.</p>
<aside class="quote no-group" data-username="mischov" data-post="16" data-topic="12905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mischov/48/2489_2.png" class="avatar"> mischov:</div>
<blockquote>
<p>Finally I’m interested why the averages shown in the text results don’t appear to be reflected in the images:</p>
</blockquote>
</aside>
<p>That’s odd.<br>
One is the output of benchfella, the other benchee.<br>
Do you have time to clone and repeat the bench yourself?</p>
<p>I actually did some benchmarking in <code>C</code> for my package and came out with different results too. I will have to investigate further to be sure what’s going on.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="79544" 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/html-tools-in-elixir/12905/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-79544" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79544"
                     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="79552" data-post-id="79552">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="f34nk" data-post="17" data-topic="12905" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/48/8103_2.png" class="avatar"> f34nk:</div>
<blockquote>
<p>Do you have time to clone and repeat the bench yourself?</p>
</blockquote>
</aside>
<p>Hardware variation aside, it seems like the included graphs might just be a little wonky</p>
<p>The graphs I generated were more in line with the textual output and clearly showed Meeseeks parsing smaller input slower and larger input faster than Floki (which is not surprising when Floki is using the <code>:mochiweb</code> parser).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="79552" 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/html-tools-in-elixir/12905/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-79552" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79552"
                     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="79664" data-post-id="79664">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="f34nk" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/f34nk/120/8103_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  f34nk
                    <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 class="mention" href="/u/mischov" rel="nofollow">@mischov</a></p>
<p>I repeated the benchmarks and my benchee and benchfella results are different.</p>
<p>My benchfella shows the same result like you described. But the benchee measurements are somehow different.</p>
<p>I removed the benchee graphs from the repo and did some updates in the README. I hope this is better now.</p>
<p>Thanks for the feedback!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="79664" 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/html-tools-in-elixir/12905/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-79664" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="79664"
                     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>