Phoenix Files: Browsing page 2 of 3

By Sophie DeBenedetto

LiveView Card Components With Bootstrap

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...

Read more 

Read more
By Mark Ericksen

Build Simple Reusable Widgets Using Slots

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

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...

Read more 

Read more
By Mark Ericksen

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

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 ...

Read more 

Read more
By Berenice Medel

Keep LiveViews Alive Across Live Redirects

ProblemYou are building a website for listening to your favorite songs. You want to play or pause the current song while you are adding songs to your playlist or even editing your profile. You create a LiveView to handle the player controls and s...

Read more 

Read more
By Mark Ericksen

Passing Unknown Attributes Into Your Component

On your LiveView page, you are using a custom component. You want to be able to pass HTML attributes into the component, but the component doesn't know anything about the attributes being passed! You need a way to pass arbitrary attributes through...

Read more 

Read more
By Mark Ericksen

Restore LiveView State on Startup

You are storing some LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience. How can you do that? ProblemThe approach in Saving and Restoring LiveView State waits for the LiveView ...

Read more 

Read more
By Chris McCord

Tailwind Standalone for Phoenix

Tailwind v3 was just released with some great new additions. One such feature is a new "standalone" tailwindcss CLI that includes pre-built binaries for all major platforms. This enables all of Tailwind's great features without the dependency on n...

Read more 

Read more
By Berenice Medel

Active Nav With LiveView

One of the most important challenges when we are developing a new website is to give the user a great navigation experience, the user must know where they are and what navigation options they have at their disposal within the website. For this we ...

Read more 

Read more
By Mark Ericksen

Saving and Restoring LiveView State

There are multiple ways to save and restore state for your LiveView processes. You can use an external cache like Redis, your database, or even the browser itself. Sometimes there are situations, like I described previously, where you either can't...

Read more 

Read more
By David Bernheisel
Intro

Safe Ecto Migrations

As an Elixir developer who cares about system up-time and avoiding "scheduled maintenance" windows, and more importantly avoiding "unscheduled maintenance" windows 😉, this guide dives deep into Ecto database migrations and how they can be used saf...

Read more 

Read more