That "no build step" Alpine.js feel
Everyone remember their first time loading Alpine.js?
First experience pulling @alpine_js into a project tonight. Felt good not to pull in a gigantic bundle size just to conditionally show an svg. Just pull alpine in from a cdn, set some html attributes and **chefs kiss** 😙😁
— Hugh Haworth (@elliotclydenz) November 3, 2020
This email is supported by my GitHub Sponsors.
Tips
Here's a tip from a PR I worked on a while back (didn't get merged). You can use it as a base from which to create your own custom Alpine.js build that uses a difference prefix for attributes. For example you could use h-.
@hugo__df Having worked on this PR / issue: https://t.co/CyxgCVreLz. Can I essentially manually just do a search & replace on alpine.js for "x-" and replace it with my preferred prefix?
— Paul Morel (@PaulJMorel) November 2, 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:
- mmt.cz a website for a European company specialising in industrial automation & robotics by @BohemicaStudio. Built on Apostrophe CMS, Alpine and Tailwind.
- http://dimvand.com/ by @yacobee is built with Alpine.js
Demos:
- Animation of element fade-in on page-load with Tailwind and Alpine by @WesWalker2112
- An @Alpine_JS demo showing one way to always show an element on Desktop, while having a button to show/hide on mobile. Perfect for nav menus and the like. codepen.io/KevinBatdorf/p… by @kevinbatdorf
- It's even more fantastic when combined with @Alpine_JS. I was able to make a 5-star rating input with just 7 lines of code - HTML/CSS/JS all in one place!
codepen.io/eshnil/pen/GRq…
by @nileshtrivedi - I love how quickly things can be prototyped in @Alpine_JS & @tailwindcss. Here's an expanding nav/search thingy: jsfiddle.net/philw_/9c4e28hk. Clicking the submit button with the input is hidden expands it, as does keyboard focus. Clicking outside closes it, or there's a close button. by @philw_
Articles & Tutorials
NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS by @surjithctly
[Podcast] #020 LiveView v LiveWire, Alpine.js with Caleb Porzio - Thinking Elixir by @calebporzio
Developing a Netlify Contact Form using Alpine.js by @witty_progr
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
livewire-charts v1.3.0 by @asantibanez is out, now with multi-line chart support.
For anyone struggling to find the PHPStorm Alpine.js plugin by @inxilpro, it's at https://plugins.jetbrains.com/plugin/15251-alpine-js-support.
github.com/agonzalezio/tailpine is a Tailwind + Alpine quickstart.