By Berenice Medel & Mark Ericksen 6 min Read 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...
Read more about Live sessions in action
By Berenice Medel & Chris Nicoll 5 min Read 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...
Read more about Triggering a Phoenix controller action from a form in a LiveView
By Mark Ericksen 10 min Read 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...
Read more about Making Tabs Mobile Friendly
By Chris McCord 2 min Read 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...
Read more about Phoenix LiveView Tailwind Variants
By Mark Ericksen 2 min Read 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...
Read more about Set Up VSCode for Elixir Dev
By Berenice Medel 6 min Read 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...
Read more about Triggering JS from the server in LiveView: showing a spinner
By Berenice Medel 10 min Read 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...
Read more about A reusable Multi-Select component for Phoenix LiveView
By Philip Brown 15 min Read 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...
Read more about Recognize digits using ML in Elixir
By Berenice Medel 4 min Read 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, ...
Read more about Formatting the user's local date-times using Hooks
By Sophie DeBenedetto 9 min Read 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...
Read more about Easy UI Toggling with LiveView JS Commands
By Berenice Medel & Chris Nicoll 4 min Read 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...
Read more about Loading indicators for events with JS.push
By Mark Ericksen 12 min Read 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...
Read more about Exploring Options for Storing Custom Data in Ecto