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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey <a class="mention" href="/u/dustin" rel="nofollow">@dustin</a>!</p>
<p>Thank you very much for the hot tips! Finally got around to starting on the book myself, and was met with issues when trying to set it all up on a brand new M1 pro MacBook. Mainly related to phoenix moving from npm to esbuild to manage assets with the newest version.</p>
<p>Regarding your second hot tip, I managed to get the project up and running on my m1 mac, without having to move back to my old intel macbook. <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>This isn’t my first time tackling with node_sass compilation issues, as I work on JS projects at my day job. Without going too much in depth, I managed to get around it by rolling back to an earlier node and npm version. Specifically node v14.18.1 that uses npm v6.14.15. Node 16+ and npm 7+ “always” crashes on projects with node_sass dependencies. <img src="https://forum.elixirforum.com/images/emoji/apple/man_shrugging.png?v=15" title=":man_shrugging:" class="emoji" alt=":man_shrugging:" loading="lazy" width="20" height="20"></p>
<ul>
<li><code>nvm install node v14</code> Install node v14.18.1 with nvm in a rosetta terminal.</li>
<li>Swap back to a “m1 terminal” and cd into desired folder</li>
<li><code>nvm use v14</code></li>
<li><code>mix phx.new pento --live</code></li>
</ul>
<p>Then you should be able to move on to ecto.create and start on the book proper.</p>
<p>You could probably do everything in a rosetta terminal, but for some reason running my iTerm in rosetta mode adds a second delay to absolutely anything I do in there <em>shrug</em></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230516" 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/programming-phoenix-liveview-pragprog/37786/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-230516" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230516"
                     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="230774" data-post-id="230774">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks a ton <a class="mention" href="/u/brehen" rel="nofollow">@brehen</a>. I pondered playing with the node version since I use nvm too, but when it “just worked” on my old laptop I was happy for now. Hopefully the combination of my struggle and your solution will help future readers.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="230774" 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/programming-phoenix-liveview-pragprog/37786/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-230774" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="230774"
                     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="231074" data-post-id="231074">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Would like to add a +1 to what <a class="mention" href="/u/dustin" rel="nofollow">@dustin</a> and <a class="mention" href="/u/sebb" rel="nofollow">@Sebb</a> have said here, updates to include the latest LiveView changes would be very valuable. In particular updating all the LEEx templates to HEEx and covering the new lifecycle hooks would be a big improvement.</p>
<p>Some coverage of <a href="https://www.youtube.com/watch?v=Of1phFsC4ZI&amp;t=1959s" rel="noopener nofollow ugc">JS Commands</a> would be a great addition too.</p>
<p>I recently returned to the book after making it halfway through a couple of months ago, now considering dropping it again and just waiting for the official release next year, given a lot of examples are now out of date.</p>
<p><a class="mention" href="/u/redrapids" rel="nofollow">@redrapids</a> and <a class="mention" href="/u/sophiedebenedetto" rel="nofollow">@SophieDeBenedetto</a> have written a great guide to the LiveView framework here, unfortunately they have their work cut out for them with the updates needed following all the progress on LiveView this year.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="231074" 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/programming-phoenix-liveview-pragprog/37786/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-231074" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="231074"
                     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="231186" data-post-id="231186">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="SophieDeBenedetto" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/SophieDeBenedetto/120/18735_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  SophieDeBenedetto
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Author of Programming Phoenix LiveView</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes indeed we will be doing a big update to latest Phoenix and Phoenix LiveView versions before this book goes into Alpha so stay tuned!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="231186" data-batch-url="/posts/batch_likers">
                        31
                      </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/programming-phoenix-liveview-pragprog/37786/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-231186" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="231186"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="231638" data-post-id="231638">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Will this book be updated for Phoenix 1.6 and LiveView 0.16?<br>
<a class="mention" href="/u/sophiedebenedetto" rel="nofollow">@SophieDeBenedetto</a></p>
<p>Edit: Oh, my question is already answered in the previous reply. <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="231638" 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/programming-phoenix-liveview-pragprog/37786/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-231638" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="231638"
                     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="245952" data-post-id="245952">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Although it is clear from the title of the book “[…] without writing any javascript”, I think that it would have been great to discuss hooks, Alpine as well as Tailwind, which seem to be essential elements of the PETAL stack.<br>
Are there any plans to add any relevant chapter(s)?<br>
Alternatively, is anyone aware of a book that covers these topics?</p>
<p>BTW, I do enjoy reading this book (as any book from Pragmatic Bookshelf)!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="245952" 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/programming-phoenix-liveview-pragprog/37786/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-245952" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="245952"
                     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="249123" data-post-id="249123">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is the code I wrote in the first chapter’s your turn section which doesn’t work. What am I missing?</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule PentoWeb.WrongLive do
  use Phoenix.LiveView, layout: {PentoWeb.LayoutView, "live.html"}

  def mount(_params, _session, socket) do
    {:ok, assign(socket, score: 0, message: "Make a guess", rand_num: :rand.uniform(10))}
  end

  def render(assigns) do
    ~H"""
    &lt;h1&gt;Your score: &lt;%= @score %&gt;&lt;/h1&gt;
    &lt;h2&gt;
      &lt;%= @message %&gt;
      &lt;br&gt;
      It's &lt;%= time() %&gt;
    &lt;/h2&gt;
    &lt;h2&gt;
      &lt;%= for n &lt;- 1..10 do %&gt;
        &lt;a href="#" phx-click="guess" phx-value-number={n}&gt;&lt;%= n %&gt;&lt;/a&gt;
      &lt;% end %&gt;
    &lt;/h2&gt;
    """
  end

  def time() do
    DateTime.utc_now() |&gt; to_string()
  end

  def handle_event("guess", %{"number" =&gt; guess}=_data, socket) do

    cond do
      guess == socket.assigns.rand_num -&gt;
        message = "Your guess: #{guess}. You won! :)"
        {
          :noreply,
          assign(
            socket,
            message: message
          )
        }

      true -&gt;
        message = "Your guess: #{guess}. Wrong. Guess again."
        score = socket.assigns.score - 1
        {
          :noreply,
          assign(
            socket,
            message: message,
            score: score
          )
        }
    end

  end
end
</code></pre>
<hr>
<p><strong>Question # 2, (not related to LiveView, but Elixir)</strong></p>
<p>Why it doesn’t compile when I write</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{
  :noreply,
  assign(
    socket,
    message: message,
    score: score
   )
  }
</code></pre>
<p>outside the cond?<br>
The compilation error is:</p>
<p><code>** (CompileError) lib/pento_web/live/wrong_live.ex:44: undefined function message/0 (expected PentoWeb.WrongLive to define such a function or for it to be imported, but none are available)</code></p>
<hr>
<p>Question # 3:<br>
Are the solutions to the exercises available somewhere?</p>
<p><a class="mention" href="/u/sophiedebenedetto" rel="nofollow">@SophieDeBenedetto</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="249123" 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/programming-phoenix-liveview-pragprog/37786/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-249123" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="249123"
                     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="249313" data-post-id="249313">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="pillaiindu" data-post="20" data-topic="37786">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/ac8455/48.png" class="avatar"> pillaiindu:</div>
<blockquote>
<p>This is the code I wrote in the first chapter’s your turn section which doesn’t work. What am I missing?</p>
</blockquote>
</aside>
<p>I’m still waiting…<br>
Will somebody please reply my question?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="249313" 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/programming-phoenix-liveview-pragprog/37786/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-249313" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="249313"
                     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>
    <div class="postbit" id="249465" data-post-id="249465">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="pillaiindu" data-post="20" data-topic="37786">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/p/ac8455/48.png" class="avatar"> pillaiindu:</div>
<blockquote>
<p>expected PentoWeb.WrongLive to define such a function or for it to be imported, but none are available</p>
</blockquote>
</aside>
<p>What does that describe for you? Follow that path.<br>
Sorry its just not fresh in my head, but trying to read the error this is what its telling me.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="249465" 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/programming-phoenix-liveview-pragprog/37786/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-249465" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="249465"
                     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="249467" data-post-id="249467">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/pillaiindu" rel="nofollow">@pillaiindu</a><br>
In your <code>handle_event</code> function, the comparison<br>
<code>guess == socket.assigns.rand_num</code><br>
is comparing a string (‘guess’) with an integer, which won’t work. The answer will be to convert guess to an int before making the comparison.</p>
<p>The simplest way to investigate the problem would have been to <code>IO.inspect</code> your guess and random number values before the comparison. That’s often a good first troubleshooting approach - sanity check what values you’re dealing with.</p>
<p>On your Q 2 - I agree that particular compiler message isn’t the most helpful, but with a bit of Elixir practise you’ll see it often enough to recognise in future. Here it just means the compiler doesn’t know about the <code>message</code> variable. You define it in the <code>cond</code>, so it doesn’t exist outside of that scope. The compiler tries to interpret it as a 0-arity function, which it can’t find. It would have the same problem with <code>sort</code>, but doesn’t get that far before erroring.</p>
<p>[btw - your 2nd question is the pattern to follow as in that one you are nicely specific about the error. That kind of context really helps someone trying to answer]</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="249467" 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/programming-phoenix-liveview-pragprog/37786/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-249467" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="249467"
                     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>
</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/37786/load_more?page=3">Load more posts</a>
</div></template></turbo-stream>