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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Qqwy" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Qqwy/120/1349_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Qqwy
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>TypeCheck Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I first heard about Phoenix LiveView in more detail during ElixirConf.EU in <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a>’s talk there. Before that, I had heard about it a little bit, but was (a) skeptical about its intended performance, and (b) far too busy with other projects these last two months to look at it in any detail.</p>
<p>But not only did my jaw drop to  the floor during Chris’ talk, also did I realize that it was a godsend to use during hackathons where you want to quickly build something simple, without wanting to worry about the ‘frontend ↔ backend communication layer’.</p>
<p>So, last weekend, during the Odyssey Blockchain Hackathon in Groningen, we set out to build a simple PoC ‘mobile-like’ web interface to make people’s energy usage more sustainable by gamifying it.</p>
<p>While we did run into a couple of bugs (it seems that currently nested if/else statements or case-statements in LiveView templates sometimes cause weird behaviour; I’ll investigate further before opening a issue request), the speed improvement gained from not having to worry about the JS boilerplate meant that within ~30 hours, the designer/slicer and I (the single developer on the six-person team) were able to flesh out the complete interactive interface.</p>
<p>Absolutely stunning. <img src="https://forum.elixirforum.com/images/emoji/apple/heart.png?v=15" title=":heart:" class="emoji" alt=":heart:" loading="lazy" width="20" height="20"></p>
<p><small>We will probably release some screen footage and the source code soon, but first let me catch some sleep – I’ve been going on for 56 hours with very little of it. <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"></small></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124295" data-batch-url="/posts/batch_likers">
                        10
                      </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/phoenix-liveview-is-now-live/20889/98">Post #97</a>
	                </div>
	            </div>
              <div id="likers-container-124295" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124295"
                     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 #97"></div>
  </section>
</div>
    <div class="postbit" id="124413" data-post-id="124413">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanx for sharing,<br>
Sorry about Wordpress<br>
Welcome to our community, which, might be just one of the best places for learning <img src="https://forum.elixirforum.com/uploads/default/original/2X/1/126cb0df7fa700c0fc3f99aa44138904e8fa3bf1.gif?v=15" title=":icon_wink:" class="emoji emoji-custom" alt=":icon_wink:" loading="lazy" width="20" height="20"></p>
<p>KR<br>
Robert</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="124413" 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/phoenix-liveview-is-now-live/20889/99">Post #98</a>
	                </div>
	            </div>
              <div id="likers-container-124413" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="124413"
                     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 #98"></div>
  </section>
</div>
    <div class="postbit" id="129281" data-post-id="129281">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Did you find a solution for drag &amp; drop?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="129281" 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/phoenix-liveview-is-now-live/20889/101">Post #100</a>
	                </div>
	            </div>
              <div id="likers-container-129281" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="129281"
                     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 #100"></div>
  </section>
</div>
    <div class="postbit" id="138606" data-post-id="138606">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>My apologies for missing this! I essentially implemented my own JS-driven drag &amp; drop solution in the browser, alongside and unrelated to the LiveView. It’s definitely not as simple as what it could be with LiveView, but it worked. Basically, I implemented things by hand in the browser and used an old-school AJAX call to a basic controller action.</p>
<p><a href="https://github.com/djthread/lucidboard/blob/master/lib/lucidboard_web/templates/board/board.html.eex#L23" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/djthread/lucidboard/blob/master/lib/lucidboard_web/templates/board/board.html.eex#L23</a><br>
<a href="https://github.com/djthread/lucidboard/blob/master/assets/js/dnd.js" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/djthread/lucidboard/blob/master/assets/js/dnd.js</a><br>
<a href="https://github.com/djthread/lucidboard/blob/master/lib/lucidboard_web/controllers/board_controller.ex#L67" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/djthread/lucidboard/blob/master/lib/lucidboard_web/controllers/board_controller.ex#L67</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="138606" 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/phoenix-liveview-is-now-live/20889/102">Post #101</a>
	                </div>
	            </div>
              <div id="likers-container-138606" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="138606"
                     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 #101"></div>
  </section>
</div>
    <div class="postbit" id="355497" data-post-id="355497">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I just what to now ,why the lib does not have <a class="mention" href="/u/spec" rel="nofollow">@spec</a> ,typing, ??</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="355497" 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/phoenix-liveview-is-now-live/20889/104">Post #103</a>
	                </div>
	            </div>
              <div id="likers-container-355497" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="355497"
                     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 #103"></div>
  </section>
</div>
    <div class="postbit" id="355498" data-post-id="355498">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I can’t remember which post it was, but IIRC Chris McCord said in a post that he doesn’t like them.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="355498" 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/phoenix-liveview-is-now-live/20889/105">Post #104</a>
	                </div>
	            </div>
              <div id="likers-container-355498" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="355498"
                     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>