Blog Blog

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

Petal Components v2 - a11y support - button_group - skeleton & more!

Name: Nicolas
Twitter: @nicolashoban

1 month ago

Big news! Petal Components v2 is now available - we’ve actually sped ahead and are at v2.2.0 already 🔥

…and the best news is that we’ve put a11y (accessibility) at the forefront! 🎉

Read on for more information about our a11y implementation and some other major improvements we’ve made over the last few months.

a11y support

a11y support

We’ve implemented a test to load a LiveView using all Petal Components and perform an accessibility audit with :a11y_audit.

:a11y_audit uses axe-core under the hood - https://www.deque.com/axe

The image above shows an instance where you have a violation. We’re happy to say that we’re now passing with flying colours!

Button Group

Button Group

This is one we’ve been looking to tick off for a while and glad we could finally get around to do it. We hope you find it useful and appreciate any feedback you may have.

Skeleton

Skeleton

Skeletons are placeholders that provide a visual indication of where content will appear while it is loading. They help improve user experience by reducing perceived loading time and creating a smoother transition when the actual content is loaded.

Accordion

Accordion

We have now updated accordion so that you can set a particular item to be open at render.

The end

More posts

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

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.