35 min listen
21: Tailwind CSS, Alpine.js and LiveView with Patrick Thompson
21: Tailwind CSS, Alpine.js and LiveView with Patrick Thompson
ratings:
Length:
31 minutes
Released:
Nov 10, 2020
Format:
Podcast episode
Description
We talk with Patrick Thompson about the PETAL stack. The combination of Phoenix, Elixir, Tailwind CSS, Alpine.js and LiveView! Patrick and David help me understand why people are excited about Tailwind CSS and how it works nicely with Alpine.js. Add LiveView to it and it makes a convincing case! Learn about this powerful and productive stack. Patrick shares his insight and a ton of great resources. Check it out!
Show Notes online - http://podcast.thinkingelixir.com/21 (http://podcast.thinkingelixir.com/21)
Elixir Community News
- https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/ (https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/) – Gleam v0.12 released with v0.1 of Gleam's typed OTP
- https://kry10.com/blog/introtokry10 (https://kry10.com/blog/intro_to_kry10) – Kry10 is an Operating System built with Erlang, and Elixir technologies
- https://hex.pm/packages/phoenixliveview (https://hex.pm/packages/phoenix_live_view) – Todd Resudek added graphs to hex.pm as a Hacktober project
- https://elixir-lang.org/blog/2020/10/27/delivering-social-change-with-elixir-at-change.org/ (https://elixir-lang.org/blog/2020/10/27/delivering-social-change-with-elixir-at-change.org/) – Change.org new Elixir case study
- http://blog.erlang.org/a-closer-look-at-the-interpreter/ (http://blog.erlang.org/a-closer-look-at-the-interpreter/) – Erlang.org blog post about the Erlang interpreter
- https://github.com/elixir-lang/elixir/blob/v1.11.2/CHANGELOG.md (https://github.com/elixir-lang/elixir/blob/v1.11.2/CHANGELOG.md) – Elixir 1.11.2 released with bug fixes. Now works with Nerves 1.7
Do you have some Elixir news to share? Tell us at @ThinkingElixir (https://twitter.com/ThinkingElixir) or email at show@thinkingelixir.com (mailto:show@thinkingelixir.com)
Discussion Resources
- http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal (http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal) – Creating LiveView Modals with Tailwind CSS and AlpineJS
- http://blog.pthompson.org/alpine-js-and-liveview (http://blog.pthompson.org/alpine-js-and-liveview) – Integrating Phoenix LiveView with JavaScript and AlpineJS
- https://github.com/pthompson/liveviewtailwindmodal (https://github.com/pthompson/liveview_tailwind_modal) – GitHub code for modal article and upcoming article on Flash Notices.
- Patrick’s ElixirConf 2020 talk "Liven up your LiveViews (even further) with AlpineJS"
- https://tailwindcss.com/ (https://tailwindcss.com/)
- https://tailwindui.com/ (https://tailwindui.com/)
- https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix (https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix) – Adding Tailwind to a Phoenix project
- https://nerdcave.com/tailwind-cheat-sheet (https://nerdcave.com/tailwind-cheat-sheet) – Searchable cheat sheet
- https://tailwind.run (https://tailwind.run) – Sandbox
- https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ (https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ) – New Tailwind Labs YouTube channel
- https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ (https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ) – Adam Wathan's YouTube channel with walkthroughs on reproducing sites using Tailwind
- https://tailwindcss.com/course (https://tailwindcss.com/course) – Official Tailwind screencast on designing with Tailwind CSS
- https://scrimba.com/learn/tailwind (https://scrimba.com/learn/tailwind) – Free Scrimba course on Tailwind
- https://www.youtube.com/watch?v=J7mnFSLDg (https://www.youtube.com/watch?v=J_7_mnFSLDg) – Adam Wathan talk on Tailwind CSS best practices
- https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) – An early article discussing the thinking behind Tailwind and utility-first CSS frameworks.
- https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components (https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-componen
Show Notes online - http://podcast.thinkingelixir.com/21 (http://podcast.thinkingelixir.com/21)
Elixir Community News
- https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/ (https://gleam.run/news/gleam-v0.12-and-gleam-otp-v0.1-released/) – Gleam v0.12 released with v0.1 of Gleam's typed OTP
- https://kry10.com/blog/introtokry10 (https://kry10.com/blog/intro_to_kry10) – Kry10 is an Operating System built with Erlang, and Elixir technologies
- https://hex.pm/packages/phoenixliveview (https://hex.pm/packages/phoenix_live_view) – Todd Resudek added graphs to hex.pm as a Hacktober project
- https://elixir-lang.org/blog/2020/10/27/delivering-social-change-with-elixir-at-change.org/ (https://elixir-lang.org/blog/2020/10/27/delivering-social-change-with-elixir-at-change.org/) – Change.org new Elixir case study
- http://blog.erlang.org/a-closer-look-at-the-interpreter/ (http://blog.erlang.org/a-closer-look-at-the-interpreter/) – Erlang.org blog post about the Erlang interpreter
- https://github.com/elixir-lang/elixir/blob/v1.11.2/CHANGELOG.md (https://github.com/elixir-lang/elixir/blob/v1.11.2/CHANGELOG.md) – Elixir 1.11.2 released with bug fixes. Now works with Nerves 1.7
Do you have some Elixir news to share? Tell us at @ThinkingElixir (https://twitter.com/ThinkingElixir) or email at show@thinkingelixir.com (mailto:show@thinkingelixir.com)
Discussion Resources
- http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal (http://blog.pthompson.org/liveview-tailwind-css-alpine-js-modal) – Creating LiveView Modals with Tailwind CSS and AlpineJS
- http://blog.pthompson.org/alpine-js-and-liveview (http://blog.pthompson.org/alpine-js-and-liveview) – Integrating Phoenix LiveView with JavaScript and AlpineJS
- https://github.com/pthompson/liveviewtailwindmodal (https://github.com/pthompson/liveview_tailwind_modal) – GitHub code for modal article and upcoming article on Flash Notices.
- Patrick’s ElixirConf 2020 talk "Liven up your LiveViews (even further) with AlpineJS"
- https://tailwindcss.com/ (https://tailwindcss.com/)
- https://tailwindui.com/ (https://tailwindui.com/)
- https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix (https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix) – Adding Tailwind to a Phoenix project
- https://nerdcave.com/tailwind-cheat-sheet (https://nerdcave.com/tailwind-cheat-sheet) – Searchable cheat sheet
- https://tailwind.run (https://tailwind.run) – Sandbox
- https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ (https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ) – New Tailwind Labs YouTube channel
- https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ (https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ) – Adam Wathan's YouTube channel with walkthroughs on reproducing sites using Tailwind
- https://tailwindcss.com/course (https://tailwindcss.com/course) – Official Tailwind screencast on designing with Tailwind CSS
- https://scrimba.com/learn/tailwind (https://scrimba.com/learn/tailwind) – Free Scrimba course on Tailwind
- https://www.youtube.com/watch?v=J7mnFSLDg (https://www.youtube.com/watch?v=J_7_mnFSLDg) – Adam Wathan talk on Tailwind CSS best practices
- https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) – An early article discussing the thinking behind Tailwind and utility-first CSS frameworks.
- https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components (https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-componen
Released:
Nov 10, 2020
Format:
Podcast episode
Titles in the series (100)
10: Frontend vs Backend and Business Value of LiveView: News and discussion about why the talk of "Frontend vs Backend" is wrong, Single Page Apps, seeing the business value of LiveView, and much more! Show Notes online - https://thinkingelixir.com/podcast-episodes/010-frontend-vs-backend-and-business-... by Thinking Elixir Podcast