Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
November 13, 2020

Spruce Docs launch edition

Decided to tidy up the Spruce docs and create a dedicated website, no more README file mess.

If you fancy reviewing, I’d love to get some feedback <3 https://docs.ryangjchandler.co.uk/spruce/

— Ryan Chandler (@ryangjchandler) November 12, 2020

This email is supported by my GitHub Sponsors.

Tips

Just realized that I should be spending all my time evangelizing the THANG Stack (@tailwindcss @GoHugoIO @Alpine_JS @Netlify @golang) pic.twitter.com/Q6VKUxIhf1

— Carl Johnson (@carlmjohnson) November 13, 2020


I can’t stress this enough - AlpineJS is SO good for WordPress development. All the modern JS goodness without sacrificing server-side rendering.

— Alex Standiford (@AlexStandiford) November 12, 2020


Really loving @Alpine_JS in server-side rendered templates. So much you can do with so little.

— Vineet Thanedar (@vinthanedar) November 11, 2020


PETAL stack.

Phoenix
Elixir
Tailwind
Alpine (js)
Liveview

C.f. @ThinkingElixir

— Adam Millerchip (@ExAdamu) November 11, 2020


Man @Alpine_JS ftw, I just implemented a testimonial carousel with 83 lines of code, including the twig template, stub data, JS, and style tag

— Dustin LeBlanc 🤘🎸🐘 (@DustinLeblanc) November 9, 2020


Using animate.css with alpine is very powerful. Cuts down on a lot of work that’s needed to setup animations with tailwind. Here is a side menu animation example using that combo.@Alpine_JS @tailwindcss pic.twitter.com/WmW79r3eVG

— Weston Walker (@WesWalker2112) November 7, 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:

  • https://ajbkr.github.io/electronics-inventory/ by @ajbkr is built with Alpine.js and MVP.css.
  • https://ngotes.netlify.app/, a note-taking service using Alpine, Tailwind and MongoDB by @dafiulh_, see the source at: https://github.com/dafiulh/ngotes
  • www.useblanco.com by @studiobruikbaar is built with Alpine, apparently this is one of Jeroen’s (from Studio Bruikbaar) more advanced JS websites, good to see Alpine enabling that.

Demos:

  • Recreation of the tweet checker with TailwindCSS and Alpine by @haallefs
  • Ajax form submission for your Alpine markup by @AmanVirk1
  • a carousel with scroll using CSS scroll snap and Alpine by @sagalbot
  • Collapsible Card with Alpine.js by jrachele via @TwComponents
  • an electronics inventory with Alpine.js and MVP.css by @ajbkr
  • multi key keypress events in Alpine.js by @kevinbatdorf
  • Alpine JS modal component for Craft CMS (work in progress?) by @PiotrPogorzel

Articles & Tutorials

[Postcast] #021 Tailwind CSS, Alpine.js and LiveView with Patrick Thompson @pthompson on @ThinkingElixir

Towards a Lightweight Jamstack by @Phacks

Interacting with the Webflow Slider Component using Alpine.js by @untitledfactory

Building an Autocomplete/Typeahead Component with AlpineJS and Livewire via @DailyLaravel

How to Build an Email Signup Form with TailwindCSS, AlpineJS and the ConvertKit API by @austencam

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.

Opportunity

@beyondgroupla we’re looking for someone to develop Shopify stores in @tailwindcss and @Alpine_JS.

If you love frontend development and are in Pacific time, we want to hear from you!

DMs are open. Email jeff@thebeyondgroup.la

— Jeffrey Guenther (@jeffreyguenther) November 10, 2020

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.