Alpine.js Weekly - 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.