210: A Bloom'n Fancy UI
Thinking Elixir Podcast
Developing a Customizable UI Component Library for Phoenix with Bloom
The chapter explores the creation of Bloom, an open-source extension for Phoenix core components that aims to provide users with easily customizable and ownable components beyond what Phoenix offers. Discussions include challenges faced in customizing components, involving contributors, handling feature requests, and potential monetization strategies. The importance of web accessibility in UI development, efforts to make components accessible, struggles with understanding best practices, and discussions on alternative UI patterns are also covered.
In this episode, we dive into the launch of Bloom UI with its creator, Chris Gregori. Chris shares his motivations behind Bloom, an opinionated extension of Phoenix core components, aimed at simplifying UI development for Elixir and LiveView projects. We discuss its command-line utility for generating components, current features like avatars and marketing layouts, and potential future directions including expanded components and web component integration. Highlights include Chris's journey with Elixir, contributions from the community, and a strong emphasis on accessibility. Plus, we cover news on Livebook 0.13.x release, the viral "2 Million Checkboxes" project by Peter Ullrich, Tyler Young's updated Parameterized Tests, and more!
Show Notes online - http://podcast.thinkingelixir.com/210
Elixir Community News
- https://github.com/livebook-dev/livebook/blob/v0.13/CHANGELOG.md – Livebook 0.13.x release notes.
- https://github.com/livebook-dev/livebook/pull/2629 – FLAME support added by Chris McCord.
- https://github.com/livebook-dev/livebook/pull/2636 – List of connected distributed nodes displayed on the Runtime panel.
- https://github.com/livebook-dev/livebook/pull/2577 – Drag-and-drop support for xlsx-format.
- https://github.com/livebook-dev/livebook/pull/2519 – José Valim added LIVEBOOK_CLUSTER=auto to configure the cluster on Fly.io.
- The code editor now uses CodeMirror with improved design and performance.
- Cell evaluation time shows when the cell is stale or aborted.
- Hubs renamed to Workspaces.
- Elixir 1.17.1 and OTP 27 used in Docker image and desktop app.
- Long names mode for distribution used for easier clustering.
- Congratulations to the team and contributors with special mention of Jonatan Kłosko.
- https://www.reddit.com/r/elixir/comments/1dqg0kr/efx_a_library_to_declaratively_write_testable/ – Introduction to Efx, a library to declaratively write testable effects.
- https://github.com/bravobike/efx – GitHub repository for Efx library.
- https://x.com/PJUllrich/status/1806646221592809482 – Peter Ullrich's tweet about "2 Million Checkboxes".
- https://x.com/PJUllrich/status/1806252631179850046 – Background on "one million checkboxes" written in Python + React.
- https://twomillioncheckboxes.com/ – Live website for "two million checkboxes" hosted on Fly.io.
- https://x.com/PJUllrich/status/1806649316963996153 – Peter Ullrich's tweet showing hardware performance and updates.
- https://github.com/PJUllrich/twomillioncheckboxes – GitHub project for "two million checkboxes" site.
- https://x.com/TylerAYoung/status/1806794015892996503 – Update and rename to Parameterized Tests by Tyler Young.
- https://github.com/elixir-lang/elixir/blob/main/CHANGELOG.md#v1180-dev – Elixir 1.18 changelog including parameterized tests in ExUnit.
- https://github.com/s3cur3/parameterized_test – Parameterized Tests GitHub repository.
- https://github.com/elixir-lang/elixir/pull/13618 – Elixir pull request for parameterized tests feature.
- https://farens.me/blog/how-to-integrate-tabler-icons-into-your-phoenix-project – Blog post by Florian Arens on integrating Tabler Icons into Phoenix projects.
- https://tabler.io/icons – Tabler Icons website with 5325 free and open-source icons.
- https://github.com/acalejos/flint – Introduction to Flint by Andres Alejos, a library for Ecto embedded_schemas.
- https://x.com/germsvel/status/1808080927177814037 – German Velasco's tweet on an intro to tracing on the BEAM using the Recon library.
- https://www.elixirstreams.com/tips/tracing-with-recon – ElixirStreams post on tracing with Recon.
- https://github.com/ferd/recon/ – Recon GitHub repository.
- https://2024.elixirconf.com/ – ElixirConf 2024 Preview - August 28-30 with notable speakers and topics.
Do you have some Elixir news to share? Tell us at @ThinkingElixir or email at show@thinkingelixir.com
Discussion Resources
- https://www.liveviewcookbook.com/ – My LiveView e-book The LiveView Cookbook
- https://youtube.com/@codestirring – YouTube Elixir Tutorial Channel
- https://twitch.tv/@codestirring – Twitch streaming channel
- https://uini.io - Uini.io (Latest side project - an AI powered user interview widget)
- https://twitter.com/codestirring/status/1785769316304228590
- https://bloom-ui.fly.dev/ – Site with links and shows off how Bloom looks and works
- https://github.com/chrisgreg/bloom – GitHub project for Bloom - "The opinionated extension to Phoenix core_components"
- https://www.w3.org/WAI/standards-guidelines/wcag/
- https://github.com/angelikatyborska/a11y-audit-elixir/tree/main
- https://github.com/ash-project/igniter
- https://dashbit.co/blog/web-apps-have-client-and-server-state
- https://developer.mozilla.org/en-US/docs/Web/API/Web_components
- https://lit.dev/
Guest Information
- https://twitter.com/codestirring – on Twitter
- https://github.com/chrisgreg/ – on Github
- https://www.chriis.dev/ – Blog
Find us online
- Message the show - @ThinkingElixir
- Message the show on Fediverse - @ThinkingElixir@genserver.social
- Email the show - show@thinkingelixir.com
- Mark Ericksen - @brainlid
- Mark Ericksen on Fediverse - @brainlid@genserver.social
- David Bernheisel - @bernheisel
- David Bernheisel on Fediverse - @dbern@genserver.social
Sponsored By:
The AI-powered Podcast Player
