Best Practices from LiveBeats App

Dabsy · February 7, 2022, 5:19pm

Worth noting nested for loops and :reduce / :uniq options too

# psuedo, may be incorrect
for bar <- foo, bazz <- bar, !is_nil(bazz) && !is_nil(bar), reduce: [], uniq: true do
 acc -> acc ++ [bar + bazz]
end

execJS

github.com

fly-apps/live_beats/blob/337931e21e46de2a1d5e02d1855e380a57ec9945/assets/js/app.js#L10


      
          import "phoenix_html"
          import {Socket} from "phoenix"
          import {LiveSocket} from "phoenix_live_view"
          import topbar from "../vendor/topbar"
          
          let nowSeconds = () => Math.round(Date.now() / 1000)
          let rand = (min, max) => Math.floor(Math.random() * (max - min) + min)
          let isVisible = (el) => !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0)
          
          let execJS = (selector, attr) => {
            document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
          }
          
          let Hooks = {}
          
          Hooks.Flash = {
            mounted(){
              let hide = () => liveSocket.execJS(this.el, this.el.getAttribute("phx-click"))
              this.timer = setTimeout(() => hide(), 8000)
              this.el.addEventListener("phx:hide-start", () => clearTimeout(this.timer))

This function executes rendered JS commands

github.com

fly-apps/live_beats/blob/819d5ecc9850ff8f49013f3151213a4419ab44a2/lib/live_beats_web/live/live_helpers.ex#L28


      
          end
          
          def profile_path(%Accounts.User{} = current_user, action) do
            profile_path(current_user.username, action)
          end
          
          def profile_path(%MediaLibrary.Profile{} = profile, action) do
            profile_path(profile.username, action)
          end
          
          def connection_status(assigns) do
            ~H"""
            <div
              id="connection-status"
              class="hidden rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale z-50"
              js-show={show("#connection-status")}
              js-hide={hide("#connection-status")}
            >
              <div class="flex">
                <div class="flex-shrink-0">
                  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">