21: Tailwind CSS, Alpine.js and LiveView with Patrick Thompson
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 Elixir Community News 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/intro_to_kry10 – Kry10 is an Operating System built with Erlang, and Elixir technologies 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/ – Change.org new Elixir case study 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 – 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 or email at show@thinkingelixir.com Discussion Resources 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 – Integrating Phoenix LiveView with JavaScript and AlpineJS 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://tailwindui.com/ https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix – Adding Tailwind to a Phoenix project https://nerdcave.com/tailwind-cheat-sheet – Searchable cheat sheet https://tailwind.run – Sandbox https://www.youtube.com/channel/UCOe-8z68tgw9ioqVvYM4ddQ – New Tailwind Labs YouTube channel https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ – Adam Wathan's YouTube channel with walkthroughs on reproducing sites using Tailwind https://tailwindcss.com/course – Official Tailwind screencast on designing with Tailwind CSS https://scrimba.com/learn/tailwind – Free Scrimba course on Tailwind 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/ – An early article discussing the thinking behind Tailwind and utility-first CSS frameworks. https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components – Headless UI announcement https://github.com/alpinejs/alpine – Alpine GitHub and documentation https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/ – A good introduction to Alpine https://scrimba.com/g/galpinejs – Free 1 hour Scrimba course on AlpineJS https://codewithhugo.com/tags/alpinejs/ – 18 blog articles on AlpineJS PETAL Stack is Phoenix, Elixir, Tailwind, Alpine, LiveView https://www.amazon.com/Programming-Erlang-Concurrent-Pragmatic-Programmers/dp/193778553X http://smacss.com/ https://headlessui.dev https://thinkingelixir.com/podcast-episodes/010-frontend-vs-backend-and-business-value-of-liveview/ Guest Information https://twitter.com/pthompson – on Twitter https://github.com/pthompson – on Github http://blog.pthompson.org – Blog https://www.linkedin.com/in/patrickjthompson/ – LinkedIn Find us online Message the show - @ThinkingElixir Email the show - show@thinkingelixir.com Mark Ericksen - @brainlid David Bernheisel - @bernheisel Cade Ward - @cadebward