Why were Phoenix Contexts introduced? A (brief) history.
People frequently struggle with Phoenix Contexts. They ask, 'Why were they introduced?' A brief history of why they were introduced might be helpful.
Elixir and Phoenix tips
🤨 What do you name your own `link` component in a Phoenix codebase?
What should we name our own “link” component in a Phoenix codebase? We cannot call it <.link> because that comes with Phoenix out of the box. This is what I do.
✨ Elixir 1.17's new Date.shift/2 🕐
Elixir's new `Date.shift/2` is really cool, but you have to keep in that it's not doing arithmetic operations. Check it out.
How to find the 🐢 slowest N modules in test suite
If you want to improve your test suite speed, the first thing we want to do is find out what's the slowest module we have, right? Elixir 1.17's got your back.
🔍 ExUnit 1.17's new flag to find intermittent failures
Intermittent tests are a pain, but Elixir 1.17 has a really cool new flag in `mix test` to help us.
😲 Test breakpoints? New in Elixir 1.17 ✨
Elixir 1.17 shipped with a new feature that lets us put breakpoints right into our tests! All we have to do is run them with --breakpoints. Too good to be true? Check it out!
⚡ How to auto-format functions without parentheses
Have you ever wondered how Phoenix and Ecto have functions whose arguments the Elixir formatter doesn't automatically wrap with parentheses? Let me show you how to get that in your own project!
🤔 How to inject a list into a quoted expression
How can we inject a list into another list in a quoted expression? Turns out, our friend `quote/1` doesn't do the trick. But this other helper does!
⚡ Helpful tip to debug Elixir macros!
When dealing with macros, it's sometimes hard to know what a quoted expression evaluates to. So let me show you this helper
What do Elixir's quote and unquote do (metaprogramming)? 🤔
If you've ever looked at a using macro (or any other macro for that matter), you've probably seen quote and unquote. What do those do? Let me show you.
🔍 Find a dependency's modules and functions
If you ever want to find one of your dependencies' modules and functions programmatically. This tip is for you.
Elixir 1.17's ✨ new `to_timeout/1` helper!
Elixir 1.17 ships with a brand new `to_timeout/1` helper that helps us create timeout durations in a more natural language!
⏱️ Use these `:timer` helpers to remove magic ms numbers
Many functions in Elixir take milliseconds as an argument. Don't leave magical millisecond numbers everywhere. Use these `:timer` helpers instead.
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.
⚡️ Tracing with Recon
It's mind blowing how powerful (and simple) tracing is in Elixir. Here's a quick intro into tracing in Elixir with Recon.
The right way to update Elixir structs (and how not to do it 😁)
I think there is a right way (and a wrong way) to update Elixir structs -- at least that's if you want to know when you accidentally type the wrong thing! Let me show you the differences.
🪄 Elixir's magic word-list sigil
Sometimes it's a pain to write long lists... Have you ever forgotten to remove that last trailing comma? Yeah, me too. 🤦 Thankfully, there's a sigil that lets us type less (and have more power!)
Elixir & Erlang's new process labels! 🔥
Elixir 1.17 and Erlang 27 just added new process labels!
Erlang ❤️ JSON
Erlang 27 just came out, and one of the highlights is the new built-in `:json` module!
Richer domain types with Ecto custom types
Primitive obsession makes our codebases harder to deal with. Thankfully, Ecto custom types can help us transform primitives (or native types) into domain structures more quickly and at the boundary!
ExUnit's --seed surprising behavior! 😲
If I asked you what ExUnit’s `--seed` option does, you'd probably say 'randomize the order of tests', right? And that's right. But it turns out it does more!
😎 A cool use of Elixir's `String.split/2` I didn't know about
Need to split a string that has two delimiters? This is a cool trick.
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.
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.