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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Speaking about chats, I am thinking about adding very easy chat example to <a href="https://tg.pl/drab" rel="noopener nofollow ugc">the demo/tutorial page</a>. I didn’t want to do it at the first place, as the stereotype of websockets is that they are only for chats <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>
<p>There is another thing from my TODO list to resolve: how Drab should broadcast changes to the browsers. Drab has two version of DOM-modification commands: update and broadcast update. When you do:</p>
<pre><code>def delete_button_clicked(socket, sender) do
  bookid = sender["data"]["id"]
  Books.Repo.delete(bookid)
  socket |&gt; delete("#book_row_#{bookid}")
end
</code></pre>
<p>it updates only the page in the browser from which request is sent - the browser where you click the button. But if other user have the same page opened, the row will persist until they refresh. Bad.</p>
<p>The solution for this is to broadcast such requests to all browsers which are currently viewing the page with the book list. In Drab, all DOM modification commands have the bang version. If we change the delete line to:</p>
<pre><code>socket |&gt; delete!("#book_row_#{bookid}")
</code></pre>
<p>it will update all the browsers viewing this page.</p>
<p>Currently Drab <strong>broadcasts such modifications to the viewers of the current page only</strong>. This is obviously not enough: the simplest example is when you are doing changes on page <code>/users/1/books</code> you probably want to propagate it to <code>/users/2/books</code> etc etc.</p>
<p>This is what I want to enhance in Drab. Broadcasts should be configurable! My first thoughts are to allow you to broadcast to:</p>
<ul>
<li><code>:all</code></li>
<li><code>:current_url</code> - this is a default behaviour</li>
<li><code>:current_controller</code> - all browsers viewing the page rendered it the same controller, so <code>/books/1</code>, <code>/books/2</code> etc</li>
<li><code>"topic"</code> - use your own topic, like <code>"books"</code> - it would broadcast to all browsers which operates on the Commander listening to this topic</li>
</ul>
<p>What do you think?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31655" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/52">Post #51</a>
	                </div>
	            </div>
              <div id="likers-container-31655" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31655"
                     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 #51"></div>
  </section>
</div>
    <div class="postbit" id="31662" data-post-id="31662">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="grych" data-post="52" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Speaking about chats, I am thinking about adding very easy chat example to the demo/tutorial page. I didn’t want to do it at the first place, as the stereotype of websockets is that they are only for chats <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>
</blockquote>
</aside>
<p>Do it <img src="https://forum.elixirforum.com/uploads/default/original/2X/6/6c3193d1dd46244da3c8c6f719c9f5e2abdd5ae8.gif?v=15" title=":003:" class="emoji emoji-custom" alt=":003:" loading="lazy" width="20" height="20"></p>
<p>The great thing about something becoming synonymous is that it makes for easy comparison and lets people get their bearings easily.</p>
<p>I’m sure many people would like to see how it would be implemented with Drab <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"> (me included <img src="https://forum.elixirforum.com/uploads/default/original/2X/7/776053aa22968f83c10e90c98b23aa0ddd5c9d47.gif?v=15" title=":lol:" class="emoji emoji-custom" alt=":lol:" 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="31662" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/53">Post #52</a>
	                </div>
	            </div>
              <div id="likers-container-31662" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31662"
                     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 #52"></div>
  </section>
</div>
    <div class="postbit" id="31669" data-post-id="31669">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Very happy to see this project.  Love the idea writing code on the server and having it run on the client.  Anything that avoids Javascript is a blessing…</p>
<p>I would like to suggest some changes to the Drab syntax, that could improve code readability  (if it is not too late in this projects lifecycle.)</p>
<p>Drab.Query Existing syntax:<br>
return =<br>
socket |&gt; select(what, from: selector)<br>
socket |&gt; update(what, set: new_value, on: selector)<br>
socket |&gt; insert(what, into: selector)<br>
socket |&gt; delete(what, from: selector)<br>
socket |&gt; execute(what, on: selector)</p>
<p>Drab.Query Proposed syntax:<br>
return =<br>
socket |&gt; select(what, at: selector)<br>
socket |&gt; create(what, at: selector)<br>
socket |&gt; update(what, at: selector)<br>
socket |&gt; insert(what, at: selector)<br>
socket |&gt; delete(what, at: selector)<br>
socket |&gt; execute(what, at: selector)</p>
<hr>
<p>Drab Event Handling Existing syntax:<br>
&lt;input id=“text_to_uppercase” value=“uppercase me”&gt;<br>
&lt;button drab-event=“click” drab-handler="uppercase&gt;Do it  &lt;/button&gt;</p>
<p>Drab Event Handling Proposed syntax:<br>
&lt;input id=“text_to_uppercase” value=“uppercase me”&gt;<br>
&lt;button drab-on=“click” drab-do=“uppercase”&gt;Do it  &lt;/button&gt;</p>
<hr>
<p>Drab Event Handling Shortcuts - Existing syntax:<br>
&lt;button drab-click=“clicked_sleep_button” data-sleep=“1”&gt; Sleep 1 second  &lt;/button&gt;<br>
&lt;button drab-click=“clicked_sleep_button” data-sleep=“2”&gt; Sleep 2 seconds  &lt;/button&gt;<br>
&lt;button drab-click=“clicked_sleep_button” data-sleep=“3”&gt; Sleep 3 seconds  &lt;/button&gt;</p>
<p>Drab Event Handling Shortcuts - Proposed syntax:<br>
&lt;button drab-on-click-do=“clicked_sleep_button” use-sleep=“1”&gt; Sleep 1 second  &lt;/button&gt;<br>
&lt;button drab-on-click-do=“clicked_sleep_button” use-sleep=“2”&gt; Sleep 2 seconds  &lt;/button&gt;<br>
&lt;button drab-on-click-do=“clicked_sleep_button” use-sleep=“3”&gt; Sleep 3 seconds  &lt;/button&gt;</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31669" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/54">Post #53</a>
	                </div>
	            </div>
              <div id="likers-container-31669" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31669"
                     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 #53"></div>
  </section>
</div>
    <div class="postbit" id="31675" data-post-id="31675">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="raza" data-post="54" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/r/82dd89/48.png" class="avatar"> raza:</div>
<blockquote>
<p>(if it is not too late in this projects lifecycle.)</p>
</blockquote>
</aside>
<p>It is not, it is still in 0.3 version <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>
<aside class="quote no-group" data-username="raza" data-post="54" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/r/82dd89/48.png" class="avatar"> raza:</div>
<blockquote>
<p>Drab.Query Proposed syntax:<br>
return =<br>
socket |&gt; select(what, at: selector)</p>
</blockquote>
</aside>
<p>Changing all the selectors to be passed with <code>:at</code> option is tempting, but why not to go the step further and pass the selector just as an argument of the function? I did the similar in the first version of API, and I found it… hard to read.</p>
<p>In my opinion, sql-like syntax is easier to read and to remember, as being more natural. <code>select(:html, from: selector)</code> sounds natural, and  <code>select(:html, at: selector)</code>. We want to have html <strong>from</strong> this selector, not <strong>at</strong> it <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>Furthermore, it is not possible to standarize it is some cases. Good example is <code>insert</code>, where you need to set up where you are adding your node: <code>insert("&lt;b&gt;some&lt;/b&gt;", before: selector)</code>,  <code>insert("&lt;b&gt;some&lt;/b&gt;", after: selector)</code>, etc. It this case there would be need to add additional parameter to insert, like  <code>insert("&lt;b&gt;some&lt;/b&gt;", at: selector, where: :before)</code>. It doesn’t look very bad, but still I find my solution better.</p>
<p>Anyway, it would be good to hear the opinion of the community. Maybe not all, but some of the command should be changed to <code>:at</code>? As I am not native english, I might be wrong here. What is more natural, <strong>execute on selector</strong>, or <strong>execute at selector</strong>? <strong>update on something</strong> or <strong>update at something</strong>?</p>
<aside class="quote no-group" data-username="raza" data-post="54" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/r/82dd89/48.png" class="avatar"> raza:</div>
<blockquote>
<p>&lt;button drab-on=“click” drab-do=“uppercase”&gt;Do it  &lt;/button&gt;</p>
</blockquote>
</aside>
<p>This may have sense. If there is more people agreed with it, I will consider a change.</p>
<aside class="quote no-group" data-username="raza" data-post="54" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/r/82dd89/48.png" class="avatar"> raza:</div>
<blockquote>
<p>&lt;button drab-on-click-do=“clicked_sleep_button” use-sleep=“1”&gt;</p>
</blockquote>
</aside>
<p>Disagree, <code>data-*</code> is a standard in html/js</p>
<p>Anyway, thanks for your post!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31675" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/55">Post #54</a>
	                </div>
	            </div>
              <div id="likers-container-31675" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31675"
                     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 #54"></div>
  </section>
</div>
    <div class="postbit" id="31689" data-post-id="31689">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="grych" data-post="55" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Changing all the selectors to be passed with :at option is tempting, but why not to go the step further and pass the selector just as an argument of the function? I did the similar in the first version of API, and I found it… hard to read.</p>
</blockquote>
</aside>
<p>I agree, passing the selectors as arguments to a function is not good for readability.  The syntax you have now is better.</p>
<aside class="quote no-group quote-modified" data-username="grych" data-post="55" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Furthermore, it is not possible to standarize it is some cases. Good example is insert, where you need to set up where you are adding your node: insert(“&lt;b&gt;some&lt;/b&gt;”, before: selector),  insert(“&lt;b&gt;some&lt;/b&gt;”, after: selector), etc. It this case there would be need to add additional parameter to insert, like  insert(“&lt;b&gt;some&lt;/b&gt;”, at: selector, where: :before). It doesn’t look very bad, but still I find my solution better.</p>
</blockquote>
</aside>
<p>If you take the route of using at: with all the selectors, you could split ‘insert-before’ and ‘insert-after’ cases into two separate selectors:</p>
<p>socket |&gt; insert(what, at: selector)<br>
socket |&gt; append(what, at: selector)</p>
<p>Let me explain my thinking in suggesting these changes:</p>
<p>at:  in english usually denotes a point in space / time.  In this case a selector helps us locate an html element within the space of a document, so at: for selectors.</p>
<p>on: event is a standard way of denoting the occurrence of an event in most JS libraries, etc.</p>
<p>do: makes it explicit that we are calling an function/action.</p>
<p>I am basically suggesting to reduce the keyword count in Drab by trimming it to the bare essentials.  But regardless, the syntax you have now is pretty good. I am happy to use Drab as it is.</p>
<aside class="quote no-group" data-username="grych" data-post="55" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>Disagree, data-* is a standard in html/js</p>
</blockquote>
</aside>
<p>data-*  is fine.  I was being pedantic about readability…<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>P.S.  I have just started learning Drab.  I haven’t even looked at the rest of the commands.  <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> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31689" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/56">Post #55</a>
	                </div>
	            </div>
              <div id="likers-container-31689" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31689"
                     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 #55"></div>
  </section>
</div>
    <div class="postbit" id="31690" data-post-id="31690">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hi <a class="mention" href="/u/raza" rel="nofollow">@raza</a>,<br>
thanks for this, really appreciated!<br>
I am not convinced yet, but I would like to hear the community opinion about the API syntax: what do you guys think about it?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31690" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/57">Post #56</a>
	                </div>
	            </div>
              <div id="likers-container-31690" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31690"
                     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 #56"></div>
  </section>
</div>
    <div class="postbit" id="31692" data-post-id="31692">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I like the <code>:at</code> proposal. Consistency makes the API easier to remember.</p>
<aside class="quote no-group" data-username="raza" data-post="56" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/r/82dd89/48.png" class="avatar"> raza:</div>
<blockquote>
<p>socket |&gt; insert(what, at: selector)<br>
socket |&gt; append(what, at: selector)</p>
</blockquote>
</aside>
<p>I might suggest <code>prepend</code> and <code>append</code>. Its more consistent with jQuery and takes  the ambiguity out of <code>insert</code>, IMHO</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31692" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/58">Post #57</a>
	                </div>
	            </div>
              <div id="likers-container-31692" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31692"
                     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 #57"></div>
  </section>
</div>
    <div class="postbit" id="31696" data-post-id="31696">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="smpallen99" data-post="58" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/smpallen99/48/1157_2.png" class="avatar"> smpallen99:</div>
<blockquote>
<p>I might suggest prepend and append. Its more consistent with jQuery and takes  the ambiguity out of insert, IMHO</p>
</blockquote>
</aside>
<p>It must be prepend, append, before and after, as in jQuery.</p>
<p>Now:</p>
<pre><code>insert(something, before: selector)
insert(something, after: selector)
insert(something, prepend: selector)
insert(something, append: selector)
</code></pre>
<p>Proposed:</p>
<pre><code>append(something, at: selector)
prepend(something, at: selector)
before(something, at: selector)
after(something, at: selector)
</code></pre>
<p>And to be consistent with this approach, we need to do the similar with all functions, not only insert, like:</p>
<p>Now:</p>
<pre><code>select(:val, from: selector)
select(:html, from: selector)
select(attr: :href, from: selector)

update(:val, set: new_value, on: selector)
update(attr: :href, set: new_value, on: selecto)
</code></pre>
<p>Then:</p>
<pre><code>get_val(at: selector)
get_html(at: selector)
get_attr(:href, at: selector)

set_val(new_value, at: selector)
set_attr(:href, new_value, at: selector)
</code></pre>
<p>etc. It can be done for every jQuery method, using some simple meta, but I am still not convinced <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> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31696" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/59">Post #58</a>
	                </div>
	            </div>
              <div id="likers-container-31696" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31696"
                     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 #58"></div>
  </section>
</div>
    <div class="postbit" id="31702" data-post-id="31702">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="grych" data-post="59" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>get_val(at: selector)<br>
get_html(at: selector)<br>
get_attr(:href, at: selector)</p>
<p>set_val(new_value, at: selector)<br>
set_attr(:href, new_value, at: selector)</p>
</blockquote>
</aside>
<p>I like this approach even better than select, update, delete etc.  Using get_<em>, set_</em> make the syntax concise, consistent and extensible.</p>
<p>select becomes get_*<br>
create becomes add_* or  new_*<br>
delete becomes rem_*<br>
update becomes set_*<br>
execute becomes run</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31702" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/60">Post #59</a>
	                </div>
	            </div>
              <div id="likers-container-31702" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31702"
                     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 #59"></div>
  </section>
</div>
    <div class="postbit" id="31714" data-post-id="31714">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I like the sql’y syntax personally but I’d be fine with <code>at:</code>, I like most of the current syntax actually, I know I had a few changes in mind (like removing jquery, jquery is really not necessary, everything can be done with vanilla js pretty easily except some really odd selectors, of which there are better ways anyway) but I don’t remember most at the moment.  ^.^;</p>
<p>There is one change that I would make though, I’d add a new action:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">socket |&gt; post(name_binary, value_anything_serializable_by_poison, into: selector//nil)
</code></pre>
<p>The reason would be is to update a global table of values with the name of whatever name_binary, so doing this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">socket
|&gt; post("theName", %{blah: 42, bloop: "Hello world"})
|&gt; post("theName.blah", 84)
</code></pre>
<p>Would set a global scope javascript variable (since the selector is <code>nil</code> by default) that would end up being the javascript <code>{blah: 84, bloop: "Hello world"}</code> in the global variable name of <code>theName</code>.  If you pass in a selector then it sets those <em>properties</em> (not attributes, attributes you should append the name with a <code>$</code>) on the html elements themselves.  This would follow the current style of webcomponents and allow controlling webcomponents far more easily.  In addition you could add something like:</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;span drab-set-body="theName.bloop&gt;&lt;/span&gt;
</code></pre>
<p>Which when combined with the above <code>post</code> would make the span display “Hello World” in it.</p>
<p>You could even go further and do something like:</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;span drab-wire style="height: [[theName.blah]]"&gt;Message:  [[theName.bloop]]&lt;/span&gt;
</code></pre>
<p>Where when drab-wire is truthy on an element then it is ‘processed’ template-like, which basically gives you the polymer style templates that you wire up to values that the server controls, which gives you very fine-grained control and setting of things without needing a webcomponent library like polymer (should have a meta value that defines the template parts like <code>[[</code>/<code>]]</code> so it could be used with something like polymer by changing it to <code>((</code>/<code>))</code> or whatever the user wants per-page, or just default to <code>((</code>/<code>))</code>?</p>
<p>It would be really cool to basically have a polymer-drab that is like polymer’s templating but controlled entirely server-side.  <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>
<aside class="quote no-group" data-username="grych" data-post="59" data-topic="3277">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/grych/48/5610_2.png" class="avatar"> grych:</div>
<blockquote>
<p>It must be prepend, append, before and after, as in jQuery.</p>
</blockquote>
</aside>
<p>Really should stop using jQuery.  ^.^</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="31714" 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/drab-remote-controlled-frontend-framework-for-phoenix/3277/61">Post #60</a>
	                </div>
	            </div>
              <div id="likers-container-31714" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="31714"
                     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 #60"></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/3277/load_more?page=7">Load more posts (428 remaining)</a>
</div></template></turbo-stream>