Alpine.js CodePen templates
Vanilla Alpine.js codepen template that I made for myself https://codepen.io/pen?template=bGdzxBO
— Hugo (@hugo__df) November 17, 2020
This email is supported by my GitHub Sponsors.
Here's Kevin's one with inline devtools and Alpine.js https://codepen.io/KevinBatdorf/pen/abdJGYM?editors=1010.
I've also got another Alpine + Tailwind CodePen template: https://codepen.io/pen?template=jOPLPGX
Tips
Alpine is great to interface with HTML5
Our project prototype got a video-component with custom controls a month ago, built with HTML5 video and @Alpine_JS. I just deployed a change that pauses the video when the user scrolls past the center of the video. x-on:scroll.window.debounce made this super easy and performant.
— Jannis Borgers (@jannisborgers) November 14, 2020
God I really, really love @Alpine_JS. Making mobile nav sheets slide in and out with just a bunch of parameters in my HTML instead of writing and reusing the same JavaScript each time. pic.twitter.com/iDf3KoSj9U
— The Sinister with the Thanksgiving gene (@furioursus) November 18, 2020
Work with @Alpine_JS is realy fun! So many posibilities with souch a small library. Sometimes you just don't need Vue/React to "get the job done"... Well done @calebporzio. pic.twitter.com/nxRSB9ZZqb
— Daniel Kalivoda (@DanekKalivoda) November 19, 2020
A new term is blooming: the PETAL stack. Phoenix, Elixir, Tailwind CSS, Alpine JS, and LiveView. I don't need Alpine yet, but I'm using the rest (plus the Commanded CQRS/ES library for good measure) and I can't remember ever being so productive on a web app before.
— Case de Groot (@cdegroot) November 17, 2020
ok i know i said i hated js frameworks, but i freaking LOVE alpine.js <3
— beer (@beerplusplus) November 15, 2020
Made with Alpine.js
If you've got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.
Here are this week's Alpine.js adopters:
- gamepro.yakuthemes.com is a Gaming Theme (purchase link at the end of the newsletter), built with Tailwind and Alpine by @yakuthemes
Demos:
- an announcement bar with JS sprinkles by @kprimdal
- All Blade Editors together.
Powered by @laravelphp + @LaravelLivewire + @Alpine_JS 
by @asantibanez - Toggle navigation examples (Tailkit 1.1 update) by @pixelcave_john
- A SAAS Landing page made with Tailwind and AlpineJS by @Mike_Andreuzza
Articles & Tutorials
Introducing AdonisJS - Part 1 by @AmanVirk1
[Video] How to build a website with Alpine.js | Crash course for beginners by @TheImmigrantPr1
Building a Shopify App - Day4 by @Zubairmohsin33
Introducing AlpineJs. The Ideal jQuery Replacement by @witty_progr
Build a Dynamic Sign Up Form With Alpine.js by @asifroyal
Add A Self Hosted Alpine.js File With Laravel
For more posts like these, you can join the Alpine.js Development Subscription, it's a great way to support the newsletter and get early access to Alpine.js content.
Code & Tools
Gamepro - Game Theme with Tailwind CSS (mentioned in the "made with") by @yakuthemes is available on gumroad.com/l/gamepro
Eleventy AgilityCMS Starter by @AgilityCMS - github.com/agility/agilitycms-eleventy-starter-2020 uses Alpine.js and TailwindCSS.
Alpine.js Inline Devtools by @kevinbatdorf got a new update with Array editing support kevinbatdorf.github.io/alpine-inline-devtools/
Two new helpers added to the Alpine Magic Helpers repo for @Alpine_JS! `$scroll()` for cross-browser smooth scrolling, and `$range()` for use in your `x-for` loops. Demos are on Github! https://t.co/7fgFH8eKgL pic.twitter.com/Vol4n70eKj
— Kevin Batdorf (@kevinbatdorf) November 15, 2020
Spruce by @ryangjchandler v2.1.0 and v2.1.1 are out which includes a fix for Spruce with Alpine and defer.