The Wayback Machine - https://webcf.waybackmachine.org/web/20220620125626/https://fly.io/phoenix-files/
The Phoenix Files
Phoenix and LiveView applications are awesome on Fly.io! This is the home for Phoenix-oriented content ranging from Ecto to LiveView and more.
By Berenice Medel 14 min Read
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...
Read more
Read more By Berenice Medel & Chris Nicoll 5 min Read
Loading Indicators for Events With JS.push
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...
Read more
Read more By Berenice Medel & Chris Nicoll 5 min Read
Pushing Events: With and Without JS.push
LiveView DOM element bindings can be used to send events to the server, as well as issue LiveView JS commands on the client. In another post, we used client-side JS commands to show and hide content in a set of tabs, just by manipulating DOM eleme...
You may already be reaching for LiveView components to wrap up the behavior and markup of distinct portions of your LiveView UI. In this post, we’re going to take a single-purpose component that displays book review data in Bootstrap-style card fo...
A new feature in LiveView called "slots" can help make your components more composable and reusable. This post is about getting started with slots to build a simple component. ProblemYou have a design element that is used repeatedly in your site....
Read more
Read more By Berenice Medel & Chris Nicoll 8 min Read
Client-Side Tabs in LiveView With JS Commands
There are some things it really does make sense for our LiveView to do without calling home. Simple things that the browser doesn't need help with. Things we'd like to see happen instantly, like hiding a modal—maybe even with a transition animatio...
LiveView Feels Faster With a Delayed Loading Indicator
LiveView is already fast. Couple that with hosting it on Fly.io where the server can be physically closer to your users and you've already got a great experience. However, the default setup for a new LiveView application displays the topbar progre...
Read more
Read more By Berenice Medel & Chris Nicoll 10 min Read
Reuse Markup With Function Components and Slots
The ProblemWe'd like a way to reuse code for UI components that are very similar in structure, but carry different content. Imagine we're writing a Phoenix LiveView app that frequently uses modals to display or save information. For a consistent ...