LiveView 1.0: ❌ phx-feedback-for | ✅ used_input?
LiveView 1.0 removes the `phx-feedback-for` annotation and introduces a new `used_input?/2` helper instead! Check out how to upgrade and use it.
live-view 🏷️
LiveView's Automatic Form Recovery ⚡️
I don't know about you, but I hate it when I'm filling out a long form and for some reason it disconnects, reconnects and I lose all of my form data. 😱 Thankfully LiveView ships with automatic form recovery!
⚡️ Quickly disconnect and reconnect your LiveView
Sometimes we want to test how our LiveView looks when it's disconnected. We could terminate our server and see, but there's a cooler little trick we can use.
⚡️ Stream Server Logs to Console!
If you recently upgraded to phoenix_live_reload 1.5 without looking at the changelog you may have missed an awesome update.
🛠️ Fix your modal dialog with 2 LiveView helpers!
When we create modals, we can create a bad experience if we consider which elements should be focused. Thankfully, LiveView comes with awesome helpers to help us deal with that.
🔍 Focus an input on LiveView mount
Do you ever want to focus an input when your LiveView page first loads? Well, I've got the trick for you.
🔥 ok/1 & noreply/1 LiveView helpers!
Aren't you tired of writing {:ok, socket}, {:noreply, socket}? It breaks apart those beautiful pipes! Well, I have the solution for you!
LiveView's Lifecycle Hooks
Ever want to handle a LiveView action (event, message, patch, etc.) across several LiveViews without having to duplicate the code? LiveView's attach_hook/4 helper is the thing for you!
LiveView's start_async helper for arbitrary async operations
LiveView 0.20 ships with a new start_async/3 function that makes it so easy to perform arbitrary async operations while keeping the same process isolation and error handling we get with assign_async/3.
How is `:page_title` updated?
You probably know that the `:page_title` assign is special in Phoenix -- it is the only dynamic assign in a layout. I always wondered: how does it work? How do they make it special? So, I did a bit of code spelunking. 🤿
Testing Async Assigns (Preview)
With LiveView's new async assigns, we can now load data asynchronously like a breeze. But how do we test it since we have async behavior? 🤔
LiveView's Async Assigns
LiveView 0.20 ships with a new `assign_async/3` function that makes adding async data on mount a breeze!
LiveView 0.20 HEEX Debug Annotations
Phoenix LiveView 0.20 just dropped! It comes with a nice quality of life improvement to debug HEEX templates. Check it out!
Phoenix forms backed by embedded schemas
If you have complex forms that you want to decouple from the database, we can use Ecto's embedded schemas to back a form. That gives us all the power of Ecto changesets without having to tie our form to our database schema.
Phoenix forms without changesets!
Typically, we back Phoenix forms with an Ecto changeset. But sometimes, I prefer having more separation between the UI and the changeset that stores data in the database. Check out how we can use the new `to_form/2` helper to do just that.
Infinite scroll with LiveView's `phx-viewport-bottom`
Check out how this single line change allowed me to remove my entire InfiniteScroll JS hook and keep my infinite scroll working!
Anatomy of a LiveView Test
The best way to write LiveView tests: follow the familiar setup-exercise-verify testing pattern
Inspecting LiveView tests with open_browser/2
Anytime I need to inspect a page when testing LiveView, I reach for `open_browser/2`.
Simulating LiveView latency with liveSocket.enableLatencySim()
An awesome Phoenix LiveView Helper that lets us see how our LiveView responds when our users are not sitting close to our servers. 🔥
Inspecting LiveView payloads with liveSocket.enableDebug()
Phoenix LiveView comes with so many helpers to improve the developer experience. One of those is liveSocket.enableDebug()
LiveView's new JS.exec/3 function
Check out the new `JS.exec/3` function that shipped with Phoenix 1.7.2 and why we might want to use it
LiveView Streams with Pagination (Infinite Scroll)
An awesome Phoenix LiveView Helper that lets us see how our LiveView responds when our users are not sitting close to our servers. 🔥
Overriding CSS classes in Phoenix function components
We often want to override CSS classes to customize styles in Phoenix function components. Check out how to do it.
Better Phoenix function components tests with ~H sigil
There are 2 ways to test Phoenix function components. But I recommend only using one of them!
Phoenix.Component's global attributes
Phoenix has a lovely `:global` attribute type that allows us to pass all standard HTML attributes with one declaration. ✨
Deleting LiveView Stream Elements by Dom ID
Delete LiveView stream elements with a `stream_delete_by_dom_id/3` to avoid having to load the full record into memory 🥳
Animating deleting elements in Phoenix LiveView with LiveView.JS
Someone asked me how to animate deleting elements in LiveView. The trick is to use `LiveView.JS`.
Animating elements on page load with LiveView's phx-mounted and JS.transition/2
Just recently learned that we can animate elements when they're first mounted on the page. Check it out!
LiveView's new Streams to handle large collections
LiveView just shipped a new concept of streams to deal with large collections without keeping data in memory. I gotta say, I like the ergonomics! 🙌
Phoenix LiveViewTest's form/3 helper
LiveView ships with an awesome `form/3` test helper! Never test a form without it!
Phoenix LiveView 0.18's link component
LiveView 0.18 consolidated `live_redirect/2`, `live_patch/2`, and `link/2` functions into a new `link` component. Check it out!
LiveView's 0.18's Declarative Assigns
LiveView 0.18 introduced declarative assigns for components. This is how they work.
Query params in Phoenix 1.7's Verified Routes
When using Phoenix 1.7's verified routes, I thought we were going to have to string interpolate each query param! 😱 Thankfully, the Phoenix team already thought of a better way.
Looking for other tags?
anti-pattern
bandit
dbg
debugging
deprecated
docs
ecto
elixir
elixir-1.14
elixir-1.15
elixir-1.16
elixir-1.17
erlang
erlang-27
ex-unit
heex
heroicons
hexdocs
iex
live-view
live-view-0.18
live-view-0.20
live-view-1.0
live-view-js
mix
otp
phoenix
phoenix-1.7
processes
protocols
recon
refactoring
streams
testing
testing-live-view
timer
tracing
types
verified-routes
vim