210: A Bloom'n Fancy UI

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 (http://podcast.thinkingelixir.com/210)
Elixir Community News
- https://github.com/livebook-dev/livebook/blob/v0.13/CHANGELOG.md (https://github.com/livebook-dev/livebook/blob/v0.13/CHANGELOG.md?utm_source=thinkingelixir&utm_medium=shownotes) – Livebook 0.13.x release notes.
- https://github.com/livebook-dev/livebook/pull/2629 (https://github.com/livebook-dev/livebook/pull/2629?utm_source=thinkingelixir&utm_medium=shownotes) – FLAME support added by Chris McCord.
- https://github.com/livebook-dev/livebook/pull/2636 (https://github.com/livebook-dev/livebook/pull/2636?utm_source=thinkingelixir&utm_medium=shownotes) – List of connected distributed nodes displayed on the Runtime panel.
- https://github.com/livebook-dev/livebook/pull/2577 (https://github.com/livebook-dev/livebook/pull/2577?utm_source=thinkingelixir&utm_medium=shownotes) – Drag-and-drop support for xlsx-format.
- https://github.com/livebook-dev/livebook/pull/2519 (https://github.com/livebook-dev/livebook/pull/2519?utm_source=thinkingelixir&utm_medium=shownotes) – José Valim added LIVEBOOKCLUSTER=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/efxalibrarytodeclarativelywritetestable/ (https://www.reddit.com/r/elixir/comments/1dqg0kr/efx_a_library_to_declaratively_write_testable/?utm_source=thinkingelixir&utm_medium=shownotes) – Introduction to Efx, a library to declaratively write testable effects.
- https://github.com/bravobike/efx (https://github.com/bravobike/efx?utm_source=thinkingelixir&utm_medium=shownotes) – GitHub repository for Efx library.
- https://x.com/PJUllrich/status/1806646221592809482 (https://x.com/PJUllrich/status/1806646221592809482?utm_source=thinkingelixir&utm_medium=shownotes) – Peter Ullrich's tweet about "2 Million Checkboxes".
- https://x.com/PJUllrich/status/1806252631179850046 (https://x.com/PJUllrich/status/1806252631179850046?utm_source=thinkingelixir&utm_medium=shownotes) – Background on "one million checkboxes" written in Python + React.
- https://twomillioncheckboxes.com/ (https://twomillioncheckboxes.com/?utm_source=thinkingelixir&utm_medium=shownotes) – Live website for "two million checkboxes" hosted on Fly.io.
- https://x.com/PJUllrich/status/1806649316963996153 (https://x.com/PJUllrich/status/1806649316963996153?utm_source=thinkingelixir&utm_medium=shownotes) – Peter Ullrich's tweet showing hardware performance and updates.
- https://github.com/PJUllrich/twomillioncheckboxes (https://github.com/PJUllrich/twomillioncheckboxes?utm_source=thinkingelixir&utm_medium=shownotes) – GitHub project for "two million checkboxes" site.
- https://x.com/TylerAYoung/status/1806794015892996503 (https://x.com/TylerAYoung/status/1806794015892996503?utm_source=thinkingelixir&utm_medium=shownotes) – Update and rename to Parameterized Tests by Tyler Young.
- https://github.com/elixir-lang/elixir/blob/main/CHANGELOG.md#v1180-dev (https://github.com/elixir-lang/elixir/blob/main/CHANGELOG.md#v1180-dev?utm_source=thinkingelixir&utm_medium=shownotes) – Elixir 1.18 changelog including parameterized tests in ExUnit.
- https://github.com/s3cur3/parameterized_test (https://github.com/s3cur3/parameterized_test?utm_source=thinkingelixir&utm_medium=shownotes) – Parameterized Tests GitHub repository.
- https://github.com/elixir-lang/elixir/pull/13618 (https://github.com/elixir-lang/elixir/pull/13618?utm_source=thinkingelixir&utm_medium=shownotes) – Elixir pull request for parameterized tests feature.
- https://farens.me/blog/how-to-integrate-tabler-icons-into-your-phoenix-project (https://farens.me/blog/how-to-integrate-tabler-icons-into-your-phoenix-project?utm_source=thinkingelixir&utm_medium=shownotes) – Blog post by Florian Arens on integrating Tabler Icons into Phoenix projects.
- https://tabler.io/icons (https://tabler.io/icons?utm_source=thinkingelixir&utm_medium=shownotes) – Tabler Icons website with 5325 free and open-source icons.
- https://github.com/acalejos/flint (https://github.com/acalejos/flint?utm_source=thinkingelixir&utm_medium=shownotes) – Introduction to Flint by Andres Alejos, a library for Ecto embeddedschemas.
- https://x.com/germsvel/status/1808080927177814037 (https://x.com/germsvel/status/1808080927177814037?utm_source=thinkingelixir&utm_medium=shownotes) – German Velasco's tweet on an intro to tracing on the BEAM using the Recon library.
- https://www.elixirstreams.com/tips/tracing-with-recon (https://www.elixirstreams.com/tips/tracing-with-recon?utm_source=thinkingelixir&utm_medium=shownotes) – ElixirStreams post on tracing with Recon.
- https://github.com/ferd/recon/ (https://github.com/ferd/recon/?utm_source=thinkingelixir&utm_medium=shownotes) – Recon GitHub repository.
- https://2024.elixirconf.com/ (https://2024.elixirconf.com/?utm_source=thinkingelixir&utm_medium=shownotes) – ElixirConf 2024 Preview - August 28-30 with notable speakers and topics.
Do you have some Elixir news to share? Tell us at @ThinkingElixir (https://twitter.com/ThinkingElixir) or email at [email protected] (mailto:[email protected])
Discussion Resources
- https://www.liveviewcookbook.com/ (https://www.liveviewcookbook.com/?utm_source=thinkingelixir&utm_medium=shownotes) – My LiveView e-book The LiveView Cookbook
- https://youtube.com/@codestirring (https://youtube.com/@codestirring?utm_source=thinkingelixir&utm_medium=shownotes) – YouTube Elixir Tutorial Channel
- https://twitch.tv/@codestirring (https://twitch.tv/@codestirring?utm_source=thinkingelixir&utm_medium=shownotes) – Twitch streaming channel
- https://uini.io - Uini.io (Latest side project - an AI powered user interview widget) (https://uini.io - Uini.io (Latest side project - an AI powered user interview widget)?utm_source=thinkingelixir&utm_medium=shownotes)
- https://twitter.com/codestirring/status/1785769316304228590 (https://twitter.com/codestirring/status/1785769316304228590?utm_source=thinkingelixir&utm_medium=shownotes)
- https://bloom-ui.fly.dev/ (https://bloom-ui.fly.dev/?utm_source=thinkingelixir&utm_medium=shownotes) – Site with links and shows off how Bloom looks and works
- https://github.com/chrisgreg/bloom (https://github.com/chrisgreg/bloom?utm_source=thinkingelixir&utm_medium=shownotes) – GitHub project for Bloom - "The opinionated extension to Phoenix core_components"
- https://www.w3.org/WAI/standards-guidelines/wcag/ (https://www.w3.org/WAI/standards-guidelines/wcag/?utm_source=thinkingelixir&utm_medium=shownotes)
- https://github.com/angelikatyborska/a11y-audit-elixir/tree/main (https://github.com/angelikatyborska/a11y-audit-elixir/tree/main?utm_source=thinkingelixir&utm_medium=shownotes)
- https://github.com/ash-project/igniter (https://github.com/ash-project/igniter?utm_source=thinkingelixir&utm_medium=shownotes)
- https://dashbit.co/blog/web-apps-have-client-and-server-state (https://dashbit.co/blog/web-apps-have-client-and-server-state?utm_source=thinkingelixir&utm_medium=shownotes)
- https://developer.mozilla.org/en-US/docs/Web/API/Web_components (https://developer.mozilla.org/en-US/docs/Web/API/Web_components?utm_source=thinkingelixir&utm_medium=shownotes)
- https://lit.dev/ (https://lit.dev/?utm_source=thinkingelixir&utm_medium=shownotes)
Guest Information
- https://twitter.com/codestirring (https://twitter.com/codestirring?utm_source=thinkingelixir&utm_medium=shownotes) – on Twitter
- https://github.com/chrisgreg/ (https://github.com/chrisgreg/?utm_source=thinkingelixir&utm_medium=shownotes) – on Github
- https://www.chriis.dev/ (https://www.chriis.dev/?utm_source=thinkingelixir&utm_medium=shownotes) – Blog
Find us online
- Message the show - @ThinkingElixir (https://twitter.com/ThinkingElixir)
- Message the show on Fediverse - @[email protected] (https://genserver.social/ThinkingElixir)
- Email the show - [email protected] (mailto:[email protected])
- Mark Ericksen - @brainlid (https://twitter.com/brainlid)
- Mark Ericksen on Fediverse - @[email protected] (https://genserver.social/brainlid)
- David Bernheisel - @bernheisel (https://twitter.com/bernheisel)
- David Bernheisel on Fediverse - @[email protected] (https://genserver.social/dbern)

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 [email protected]

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 - @[email protected]
Email the show - [email protected]
Mark Ericksen - @brainlid
Mark Ericksen on Fediverse - @[email protected]
David Bernheisel - @bernheisel
David Bernheisel on Fediverse - @[email protected]

Sponsored By: