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!
Elixir and Phoenix tips
⚡️ 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.
2 Helpers to Keep Your Pipelines Flowing! 😎
Elixir code tends to be pipe-friendly. But sometimes that fails. You have a pesky break in your pipeline! Here are 2 helpers that can help you keep your pipeline flowing!
🤔 and/or Vs. &&/||. Which to use?
People new to Elixir ask, which should I use? and/or OR &&/||? They're not the same. Here are some useful differences and some pitfalls.
♻️ Refactoring complex `else` clauses in `with` (an anti-pattern)
Elixir's `with` clauses are awesome for organizing happy paths. But sometimes the `else` clauses get really messy and difficult to understand. Let's refactor that.
⚡️ 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.
🔄 Refactoring an anti-pattern: complex extractions in function heads
When we use function-head pattern matching as control flow and as an extraction mechanism, we make it difficult to know what's important in our code and what's merely convenience! Let's refactor it.
🛠️ 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.
🤩 Better defaults with Enum.find/3
Enum.find/2 returns `nil` when a value can't be found. That's not always desirable. Sometimes, it's nicer to provide a better default. Thankfully, that's what Enum.find/3 gives us!
⚙️ Set your preferred CLI env for mix aliases
At some point, you might introduce a new `mix` alias to run a subset of your tests. But that runs in `dev` by default. How can we change the default to `test`?
Debugging tip! One quick way to find out which functions you're executing.
When running tests we sometimes want to know which functions are being executed. But it's a pain to write custom dbg statements. How can we print the name of the function without having to know it?
Easy, Concurrent Temp Dirs with ExUnit ✅
What do you do when you want a temp directory in your tests? ExUnit's got your back with one simple trick!
⚡️ Quick Access to Repo Config
Sometimes you want to find out information about your `Repo` configuration. You can dive through config files... or you can take the easy path!
🔍 Debug Ecto queries in tests
Sometimes, it's helpful to see what queries our tests are making. There's a quick config change to do that!
🔥 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!
Remapping Ecto fields to existing columns
Sometimes we have an existing database, but we want to use a better column name in our schemas. Well, Ecto's field has the perfect option for that.
Introspecting modules at runtime 🔎
Module's functions are for dealing with modules at compile time. What about runtime? We have `Module.__info__/1` just for that!
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. 🤿
Elixir 1.16 running multiple tests with line numbers! ✅
Prior to Elixir 1.16 we couldn't run multiple test files with their line numbers. With Elixir 1.16, we can!
Elixir 1.16's Improved Docs 📚
Elixir 1.16.rc just came out, and there are four noteworthy improvements to docs
Dependencies in Scripts with Mix.install
If we want to add packages to our Elixir scripts, Mix.install is the tool to use!
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!
Strong Arrows
Elixir might add types through gradual typing. But that comes with some challenges. Check out Elixir's new way of handling some of those gradual typing challenges with strong arrows.
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!
Elixir Types: Operator Precedence
The Elixir types paper talks about operator precedence. Let's take a look at how that changes how we read type signatures.
Elixir's intersection types
José Valim talked about types in ElixirConf 2023. I read the paper to understand why we need intersection types for some type signatures. Let me break down why!
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!
ExUnit. It's an app!
I imagine many think ExUnit just does some type of scripting to run tests. But it’s a full Elixir app! Check it out.
Creating infinite sequences with Stream.unfold/2
Ever want to create an infinite sequence? Check out how we can do that with `Stream.unfold/2`. We even generate the famous fibonacci sequence.
Turn maps (and keyword lists) into structs
One nice way of turning a map or keyword list into an existing struct is to use `struct/2` or `struct!/2`. Check it out!
Run a function N times
Ever wanted to run a function in Elixir `N` times? I got the thing just for you!
Comparing dates in Elixir
Elixir 1.15 introduced new `DateTime` and `Date` functions to compare dates. Let's cover what's new, what we already had, and what to avoid at all costs!
Elixir's optional syntax
I always knew that Elixir had some optional syntax, but I didn't realize how prevalent it was!
Elixir 1.15 deprecates Logger.warn/2 in favor of Logger.warning/2
Elixir 1.15 is deprecating `Logger.warn/2` in favor of `Logger.warning/2`.
Anatomy of a LiveView Test
The best way to write LiveView tests: follow the familiar setup-exercise-verify testing pattern
Recompile your code from within IEx
I've seen people quit out of IEx and restart it to load new changes to their code. Here are some cool helpers for you.
Getting previous values in IEx
To access previous values in IEx (and save some typing) use the `v/1` helper.
Build your own lazy operation evaluator
I'm always fascinated by how Elixir's Stream module handles operations lazily by storing them in a struct.
How to check if two lists contain overlapping elements
Want to check if two lists have overlapping elements in Elixir?
Inline if and for statements in HEEX templates
I only recently learned that you can inline `if` and `for` statements in HEEX templates because they're special forms.
Use Heroicons the way Phoenix 1.7.2 does
Want to get Heroicons Phoenix 1.7.2-style but have an existing app? This is what I do.
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. ✨
Long-lived Processes in Elixir
Tail call (or last call) optimization is the trick to having long-lived processes. Never ceases to amaze!
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! 🙌
Prying into Elixir dependencies
I love how easy it is to do code spelunking 🤿 in Elixir projects!
Updating nested structs in Elixir with put_in/2
Updating nested data in Elixir can be tough, since all data is immutable. But there's a `put_in/2` macro that works really nicely with structs!
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!
Vim Fugitive's :GBrowse
With vim fugitive's `:GBrowse` we can highlight a piece of code and open it directly in the browser. Just highlight and `:GBrowse`!
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.
Prying in Elixir with dbg/2 and iex
People asked me in previous videos, what about dbg/2 with iex? Spoiler alert — also awesome! ⚡️
dbg/2 and IO.inspect/2 `:printable_limit` option to print entire output
TIL about the `:printable_limit` option for `dbg/2` and `IO.inspect/2`.
Goodbye IO.Inspect. Hello dbg
Elixir 1.14 introduced `dbg`, a debugging helper that is much more powerful than `IO.inspect` but equally easy to use!
Elixir 1.14's new :optional option when deriving Inspect protocol
Elixir 1.14 introduced a new option when deriving the Inspect protocol for a struct.
Using ExUnit's test context for unique values
Sometimes we need unique values in our tests. There's a nice ExUnit trick we can use.
Using mix help to get docs for mix tasks (like Phoenix generators)
I love `mix help` to get the docs for mix tasks right from the command line.
Hex docs keyboard shortcuts
Elixir's hexdocs are best-in-class. And I love their keyboard shortcuts!
Using vim-projectioninst with phoenix 1.7's components and HTML modules
I just updated my `.projections.json` file to handle Phoenix 1.7's new components and view-like HTML modules.
Phoenix 1.7's new Flash.get/2 function (get_flash/2 is deprecated)
Phoenix 1.7 deprecated `get_flash/2`. There’s a new `Phoenix.Flash.get/2` function to access flash data.
Adding Bandit to Phoenix 1.7 (alternative web server support)
I wanted to test how easy it was to add Bandit as a web server in Phoenix 1.7 since it ships with alternative web server support. Turns out, it's incredibly easy!
Phoenix 1.7 new template rendering without Views!
Phoenix 1.7 is View-less! 😱 Controllers now render via a format-based Elixir modules (e.g. `GreetHTML`)
New Phoenix `mix phx routes --info` flag
There's a new `--info PATH` flag for `mix phx.routes` task (e.g. `mix phx.routes --info /posts`) in Phoenix 1.7.