Nov. 13, 2020, 6 p.m.

Spruce Docs launch edition

Alpine.js Weekly

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

You just read issue #38 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.