Petal Blog

Blog

Petal Blog

Learn more about Phoenix, Live View, and web application design.

Liveview

Customer Success Story: How Munice Inc. Built a Valuable Custom Back-Office System with Petal Pro and Ash Customer Success Story: How Munice Inc. Built a Valuable Custom Back-Office System with Petal Pro and Ash

LiveView

Artificial Intelligence

Liveview

Building a Real-time Counter App with Phoenix Channels, Phoenix.PubSub, and Flutter In this tutorial, we'll build a simple real-time counter application using Phoenix as the backend and Flutter as the frontend. The counter will be stored on the server-side and transmitted to the Flutter app via WebSockets (Phoenix Channels).

LiveView

Phoenix

Component

Petal Components v2 - a11y support, button group, skeleton & more! Petal Components v2 - a11y support - button_group - skeleton & more!

Component

Liveview

Petal Pro 2.0 - Admin dashboard with graphs/stats, Persistent Notifications, AI-powered Chatbot, Admin can see current users & more. - Persistent Notifications - Admin dashboard with graphs/stats - AI-powered Chatbot using langchain - Admin can see current users & more.

LiveView

Phoenix

Artificial Intelligence

Design

Application UI

Liveview

Petal Pro 1.8.0 - JSON API, Collapsible Sidebar, Expanded User & Org Admin - JSON API: You can use the Petal Pro API for user management (register, sign in and update). It comes with OpenAPI support out of the box. Includes Swagger UI - Update: Can sync all Stripe subscriptions including cancelled ones - Added expanded user and org admin pages - Fixed: PetalProWeb.Controllers.UserAuth.disconnect_user_liveviews doesn't disconnect the user's live views #216 - Fixed: Passwordless sign in issue from latest Phoenix Live View fixed #222 - Update: Sidebar layout now collapsible

LiveView

Phoenix

Design

Component

Application UI

Powering AI Applications With The Petal Stack (Phoenix, Elixir, TailwindCSS, Alpine.js, LiveView): A Modern Approach In the rapidly evolving landscape of web development and artificial intelligence (AI), selecting the right stack for your project can be pivotal. For those venturing into building AI-powered applications, the combination of Phoenix/Elixir for the backend and (TailwindCSS, Alpine.js, LiveView) for the frontend emerges as a powerful and efficient choice.

Liveview

Petal Pro 1.7.0 - Stripe Billing support is here! - Stripe integration and billing support - can buy subscriptions and manage them - support for both individuals and orgs - Use `styler` for code formatting - Redesigned landing page components for a more modern look and feel

LiveView

Phoenix

Design

Component

Summary of: ElixirConf 2023 - Chris McCord - Phoenix Field Notes Summary of: ElixirConf 2023 - Chris McCord - Phoenix Field Notes - Longpolling as a backup for websockets - New data structure: Scope - DNS Cluster - help with distributed elixir - Distributed elixir is awesome - Easily find your HEEX components from the DOM - Can <option>-click anything in the browser and it takes you to the code in VSCode - Server logs in the client console - assign_async + <.async_result> - UploadWriter

Liveview

Petal Pro 1.6.0 - <.image_upload> component for uploading single images like avatars. Used in user settings - Local, Cloudinary and S3 support for <.image_upload> - User Impersonation

LiveView

Phoenix

Component

Application UI

Elixir for Python Developers Learn the essentials of the Elixir programming language from the point of view of a Python developer. Discover your next programming language now!

Elixir for Ruby Developers Learn the essentials of the Elixir programming language from the point of view of a Ruby developer. Let the Elixir vs Ruby showdown begin!

Accessing deeply nested values in Elixir The Access module in Elixir is a handy tool for working with nested data structures like lists and maps. Here are a few examples demonstrating different ways to access deeply nested values using the Access module.

Elixir for JavaScript Programmers Elixir is awesome, but not many people seem to know about it. Time to change that. Javascript developers - come here to get your feet wet with Elixir!

Liveview

Add analytics to your Phoenix Live View app It can be difficult to know where to put analytics tracking code on your Phoenix Live View web application. Snippets like Google Analytics don't work with Live Views due to the lack of page refreshes.

LiveView

Component

Petal Components v1.0 released - Configurability is here!

Component

Component

Petal Pro v1.5.0 released - Phoenix 1.7 Upgrade Petal Pro v1.5.0 released - Phoenix 1.7 Upgrade

Component

Monthly Wrap Up - November We soft-launched Petal Enhance! Right now there are 4 recipes available for free: NPM package manager, UUID, User first name & last name & Remove orgs.

Liveview

Monthly Wrap Up - October For Petal Pro we released the new Declarative Assigns & slots and also upgraded Heroicons to v2. Petal Enhance starts to take shape & more!

LiveView

Component

Liveview

Monthly Wrap Up - September The majority of this month we focused on implementing LiveView 0.18, which is a pretty huge and exciting update. We also hit 30,000 total Hex downloads of Petal Components & more!

LiveView

Component

Stats

Monthly Wrap Up - August This month we started work on something really exciting, "Recipe Center". We also added a local time hook, the ability to use Docker for a local Postgres and a new recipe: NPM.

Monthly Wrap Up - July This month was spent on improving the core functionality of Petal Pro. There are two new tools: data table and route tree view, plus lots more. Check it out!

Petal Pro v1.2.0 released! We've released a major upgrade to Petal Pro with tonnes of new features and fixes.