Alpine.js makes client side interactivity stupidly simple

Video Description

To try everything Brilliant has to offer—free—for a full 30 days, visit https://brilliant.org/DreamsofCode/ . You’ll also get 20% off an annual premium subscription. Recently, I've been building my web application to host my upcoming course using Go, rather than using a fullstack frontend framework such as Next.js. Whilst I've really enjoyed the process, one thing that I was worried about was when it come to building client side interactivity, and I wasn't keen on having to use script tags, id attributes, or even jquery. Fortunately, it turns out, there's a simple framework that can make setting up client side interactivity both simple, and fun. This video was sponsored by Brilliant.org Register for my upcoming course to get an early bird discount: https://dreamsofcode.io/courses/command-line-apps-go 👈 Video Links: - Project: https://github.com/dreamsofcode-io/alpine-demo.git - Alpine Website: https://alpinejs.dev/ My Gear: - Camera: https://amzn.to/3E3ORuX - Microphone: https://amzn.to/40wHBPP - Audio Interface: https://amzn.to/4jwbd8o - Headphones: https://amzn.to/4gasmla - Keyboard: ZSA Voyager The above amazon links are affiliant links when means I receive commission if you make a purchase, at no cost to you. Join this channel to get access to perks: https://www.youtube.com/channel/UCWQaM7SpSECp9FELz-cHzuQ/join Join Discord: https://discord.com/invite/eMjRTvscyt Join Twitter: https://twitter.com/dreamsofcode_io 00:00:00 Intro 00:03:21 Project Intro 00:03:56 Marker 11 00:05:22 Problems 00:06:05 Alpine Begins 00:08:07 x-show 00:09:09 x-on:click 00:09:50 Toggle 00:11:01 x-text 00:12:29 Toggling Classes 00:14:04 CSS transitions 00:14:37 x-transition 00:18:23 x-cloak 00:19:54 Locality of behavior 00:21:10 sponsor 00:22:32 Accordian and x-collapse 00:26:26 Other plugins 00:27:19 Persist 00:29:06 Outro