Phoenix LiveView often makes us feel like "wow, that was really fast!" and that is not a coincidence. Behind LiveView's magic, there are a bunch of design decisions, but also interesting features we can use. Under the umbrella of LiveView navigat...
Triggering a Phoenix Controller Action From a Form in a LiveView
Have you ever wanted to use LiveViews for a site's authentication? Among many other implementation details, you need to save some data to identify the logged-in user. This can be a token or some unique identifier, and it needs to persist even as t...
This recipe creates a Tailwind UI styled tab component that gracefully switches to an HTML select input when viewed on smaller screens. It doesn't use Alpine.js or other client-side javascript frameworks for managing the UI. It is built as a clien...
ProblemUsers of Tailwind CSS know the productivity gains the utility-first CSS framework provides. One of Tailwind's biggest advantages is that you can rapidly build applications without ever leaving your HTML. There's no context-switching betwee...
Since Elixir and Phoenix appeared prominently in the Stack Overflow Survey Results for 2022, more people have been discovering the joy of Elixir and the power of LiveView. This article introduces developers to getting the popular VS Code editor up...
Triggering JS From the Server in LiveView: Showing a Spinner
It's always frustrating when we click something—and it looks like nothing's happening. The default solution to this is to throw up a spinner while the server is chewing on a request, to help users resist the temptation to keep clicking. UX win! We...
A Reusable Multi-Select Component for Phoenix LiveView
Have you ever wanted a feature that lets your users select multiple items from a list, and performs some action on their selection? This is a really common thing to do, and it can be pretty involved to build. What do we do when we don't want to wr...
Machine learning allows you to solve problems that were once totally unimaginable. The ability for a computer to take an image and tell you what it sees was once only possible in science fiction. Now, it's possible to build machine learning models...
Formatting the User's Local Date-times Using Hooks
ProblemWhen we're developing an application for users around the world, we are bound to hit problems with timezones. Often we decide to store the dates in UTC format to avoid storing the timezone of each user. This brings us to the real problem, ...
LiveView empowers developers to be more productive than ever before by keeping your mind firmly focused on the server, even while you build out rich interactive UIs. But until recently, we were somewhat limited by LiveView's reliance on server-sid...
ProblemPhoenix/LiveView apps involve a lot of interaction between the client and the server. We want to customize how we indicate to users that our UI is waiting for a server response to some event. Specifically, we'd like to see a general-purpos...
Ever wanted to store a blob of custom data on a database record? The data we want to store might be complex too, made up of multiple fields and even lists. When the data is stored using Ecto there are several ways we can do it. This article explor...