Alpine.js Weekly

Archive

Alpine.js Weekly #92

Tips

A couple days ago I just found out about this better method to trigger @Alpine_JS component from outside Alpine’s code. This method is very useful for example to make a reusable modal component using @laravelphp Blade component

pic.twitter.com/BJKwAjImhV

— Abdurrahman Shofy Adianto (@azophy) August 6, 2022


It wasn’t particularly intuitive for me to load data in an AlpineJS template using fetch. Found some solutions but they were not clean or clear enough. So I adapted a bit of code and this is quite lovely I think.

https://gist.github.com/cdsaenz/394c1dec9610ae6d1567fb50d2baad62

— Charly@CSDevAr (@CSDevAr) August 19, 2022

#92
October 8, 2022
Read more

Alpine.js Weekly #91 - Summer Edition 🏝

@Alpine_JS just crossed 100,000 weekly downloads https://www.npmjs.com/package/alpinejs give it a try if you haven’t tried it yet, 🤞 you would like writing js without leaving html.
here, is link https://alpinejs.dev 🥳🥳

— peadev (@XSukhpreet) July 31, 2022


Awesome: my online talk for DjangoCon US 2022 is accepted! Topic: “Modern apps with Django, HTMX, Tailwind CSS and Alpine.js” 🥳😀😎#Django #Python @djangocon https://t.co/Ux4FDMw1Ju

— Andrej Baranovskij (@andrejusb) July 25, 2022


#91
August 12, 2022
Read more

Alpine.js Weekly #90

🔎 The long-awaited, much-requested, global search is here for the @Alpine_JS docs. woop!

Dig it.https://t.co/HHU9GAPk5b

(Thanks @jasonlbeggs)

pic.twitter.com/DuwBnqAiF7

— Caleb Porzio (@calebporzio) June 20, 2022

When is @Alpine_JS gonna sponsor @AlpineF1Team

— Ame🦦 (@ameliniya_) June 19, 2022


Tips

In alpinejs $nextTick(); is a real magic property.
When you want to first update your data and then your DOM, use nextTick.
The system will focus on input in the attached example without updating the data first.#alpinejs #javascript pic.twitter.com/U7tPqKYAbl

— Tahir Iqbal Najam (@tahiriqbalnajam) June 1, 2022

#90
July 10, 2022
Read more

Alpine.js Weekly #89

Github Copilot is getting very good with @Alpine_JS code. I’m frequently surprised at how well it “guesses” my exact intentions.

pic.twitter.com/kTDqEBlgCR

— Rich Klein (@richeklein) May 14, 2022


Web component JS frameworks overview by their syntax and features: Svelte, React, Vue 3, Angular, SolidJS, Lit, Ember, Alpine.js. #javascript #tools

https://component-party.dev/

— nightwolfdev (@nightwolfdev) May 18, 2022


#89
June 11, 2022
Read more

Alpine.js Weekly #88

Tips

#AlpineJS Tips

Use shorthand conditionals when you want to add a class to the element based on an alpine property using x-bind. #laravel #livewire #TALL

pic.twitter.com/56R2vEONG9

— Tushar Gugnani (@tushar_web) May 9, 2022


#AlpineJS Tips

No need for setting id of the element and accessing it via document.getElementByID

Use x-ref in combination with $refs is for easily accessing DOM elements directly.

See video example of using x-ref in building Stepper component : https://t.co/zqqatNCQXF

pic.twitter.com/N5LU8uQ44y

— Tushar Gugnani (@tushar_web) May 12, 2022

#88
May 13, 2022
Read more

Alpine.js Weekly #87

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:

  • caniphp.com is built with Alpine and Tailwind by @magicroundabout
  • www.auzdevs.com is made with Tailwind, HTMX, Alpine,
  • muted.io/lil-beat-maker/, a simple beat-making web app, made using Alpine.js and Tone.js by @muted_io
  • moneyglance.herokuapp.com is built with Alpine, Tailwind, Laravel and Livewire by @dnlgrz91
  • copy2.cc is built with Laravel, Livewire, Alpine and Tailwind by @extralam
  • bristolpay.org.uk has been re-designed and migrated to Craft CMS, Tailwind and Alpine.js by @williamhibberd
#87
April 23, 2022
Read more

Alpine.js Weekly #86

Tips

Got to love how easy it is to make basic html interactive and animated with Alpine.js :)

x-collapse takes care of all the magic here! https://t.co/UzTV2lVToy

pic.twitter.com/9OzAASLOXw

— Dennis van Dalen @ 🇲🇽 (@dennisvdalen) March 21, 2022

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.

#86
April 1, 2022
Read more

Alpine.js Weekly #85

Tips

❓ Using Alpine.js and need to debounce a function?

❌ You don’t need JavaScript libraries like lodash.

✅ Just use Alpine.debounce() which is also used internally for the x-on:input.debounce=”” modifier.

Cc: @calebporzio

— Zep Fietje (@zepfietje) March 17, 2022


neat trick for @Alpine_JS v3. The official way to access Alpinejs scope from outside code is to use Alpine.store() method. However I found this approach ( window.MyData = this ) easier for small code base where using store() is overkill

pic.twitter.com/yar1tJvo1M

— Abdurrahman Shofy Adianto (@azophy) March 7, 2022

#85
March 18, 2022
Read more

Alpine.js Weekly #84

Tips

The @Alpine_JS Collapse plugin has saved me literal hours of work since it’s release and not enough people are using it. If you’re building accordions, dropdown menus or mobile navigation menus, take it for a spin! https://alpinejs.dev/plugins/collapse

— Ryan Chandler (@ryangjchandler) February 24, 2022


Alpine JS and React developers tip. Never use invalid self-closing elements in Alpine JS ie:

<div x-text="msg" />

would raise cryptic and hard to debug errors.

pic.twitter.com/h1IXYLb987

— Bojan Mihelac (@bmihelac) February 16, 2022

#84
March 4, 2022
Read more

Alpine.js Weekly #83

A short poem for @Alpine_JS – my favorite small, but powerful, Javascript framework. Thanks to @calebporzio and team for making the work of #webdevelopers a little bit easier. 🙏 https://medium.com/@richeklein/a-little-alpine-js-poem-44fef7c6965b pic.twitter.com/N6uvCGbrgs

— Rich Klein (@richeklein) February 11, 2022

Also featured this week, are 2 wordle clones in Alpine.js:

  • hasinhayder.github.io/wordle-alpinejs/ by @hasin (source: github.com/hasinhayder/wordle-alpinejs)
  • alpinejs-wordle.netlify.app/ by @drHootcH (source: github.com/drhootch/alpinejs-wordle)

@calebporzio I’m slowly refactoring JS and rolling out Alpine on https://vimeo.com/‘s marketing sites.

SO many JS files full of redundant event handlers are easily replaced with simple, inline @Alpine_JS components.

— Joseph Farruggio (@Joey_Farruggio) February 2, 2022

#83
February 11, 2022
Read more

Alpine.js Weekly #82

Alpine.js is now available on DefinitelyTyped, you can load them using npm install @types/alpinejs.

Hmm there’s now @types/alpinejs (github.com/DefinitelyTyped/DefinitelyTyped/pull/58130)

— Jesse Dobbelaere (@JesseDobbelaere) January 14, 2022

Tips

A quick gotcha with @Alpine_JS . Make sure to use this.close() in the x-data object. If it’s just close() then that’s window.close() and well…it’ll close the browser lol!

pic.twitter.com/t7PmL810gO

— Kyle Williams (@kylewcode) January 13, 2022

#82
January 21, 2022
Read more

Alpine.js Weekly #81

Happy 2022 to the Alpine.js Community!

Tips

I ♥️ how easy @Alpine_JS makes it to ~Do The Right Thing~:
• got a script only needed for the footer? Lazy load it with x-intersect & muicss/loadjs
• something could benefit from aria-describedby? Use $id
• made a flyout menu? Use Trap
• want to save user state? Use Persist

— Phil Wolstenholme (@philw_) December 16, 2021

Made with Alpine.js

#75
January 7, 2022
Read more

Alpine.js Weekly #80

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:

  • spartner.software is built with Laravel, Statamic, Alpine and Tailwind by @patrickbrouwers
  • doeken.org is build with Alpine, Jigsaw and Algolia by @doekenorg
  • sketchupforwoodworkers.com by @ZTHall is built on the NEAT (Netlify CMS, Eleventy, Alpine, Tailwind) stack
#80
December 3, 2021
Read more

Alpine.js Weekly #79

Hey @calebporzio, seems like the new https://t.co/tUm0XDf3Uh is using @Alpine_JS

pic.twitter.com/u9BuWpsLax

— Amit Merchant (@amit_merchant) November 17, 2021


I spy @Alpine_JS 👀👀👀

pic.twitter.com/m7N18GTyrB

— Caleb Porzio (@calebporzio) November 17, 2021

Made with Alpine.js

#79
November 19, 2021
Read more

Alpine.js Weekly #78

Tips

Someone just PR’d a good tip to the @Alpine_JS docs - thought I’d share cuz I liked it

#81
November 5, 2021
Read more

Alpine.js Weekly #77

An announcement from the Alpine Components Team

We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components

More free content coming soon! pic.twitter.com/Sh4q448J1n

— Jason Beggs (@jasonlbeggs) October 22, 2021

Another top reaction, throwback to the Alpine Day performance talk Matt Stauffer did

Put a client’s website through PageSpeed. It’s built with Laravel, Tailwind CSS, and Alpine.js. Under the hood it runs a custom block-based page constructor I’ve developed, and a custom CRM I’ve made for this project and its specific needs. Not bad, eh?

pic.twitter.com/xG4LUjsbxH

— Oleg Knyazev (@climberdigital) October 16, 2021

#78
October 22, 2021
Read more

Alpine.js Weekly #76

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.

#77
October 8, 2021
Read more

Alpine.js Weekly #75

🚢 New Alpine Plugin: Collapse

Easily animate the height of an element when toggling via x-show.

Check it:https://alpinejs.dev/plugins/collapse

— Caleb Porzio (@calebporzio) September 29, 2021

This newsletter supported by my GitHub Sponsors.

Tips

Two use cases where I put @Alpine_JS $persist() to work:

  1. On local/dev env there’s a floating toggle to simulate different account levels to access restricted content

  2. Storing the response of Vimeo’s API to populate a video library -> saves API calls and loads much faster

pic.twitter.com/6gtHFeMxEO

— Joseph Farruggio (@Joey_Farruggio) October 1, 2021

#76
October 1, 2021
Read more

Alpine.js Weekly #74

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.

#74
September 24, 2021
Read more

Alpine.js Weekly #73

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.

#73
September 17, 2021
Read more

Alpine.js Weekly #72

📣 Announcing (officially) Alpine Component Patterns!

📦 UI component source code
📹 Educational screencasts 🫂 3rd-party integrations 🦑 Livewire integration

#72
September 10, 2021
Read more

Alpine.js Weekly #71

Tips

Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use Try it out here:

#71
August 20, 2021
Read more

Alpine.js Weekly #70

Tips

Create shortcut easily with @Alpine_JS

#70
August 6, 2021
Read more

Alpine.js Weekly #69

Alpine plugins are dropping, keep an eye on Caleb Porzio’s announcements.

🥳 New Alpine Plugin: Persist 🍾

Easily persist data across page loads by using a nifty little decorator function: $persist()

#69
July 24, 2021
Read more

Alpine.js Weekly #68

Tips

Another fun use case for x-effect in @Alpine_JS v3 when using the persist plugin: parsing localStorage values (string only) so you can keep using boolean values in directives. This simplified example is for a toolbar that’s either always visible or only when you hover it.

#68
July 9, 2021
Read more

Alpine.js Weekly #67

Tips

Top tips from Kevin this week.

Spend the last few hours deep diving into the source code to figure out the V3 codebase. And I must say it’s extremely readable, easy to follow, and approachable to all levels. Find the lifecycle’s start method and just go step by step.

#67
July 2, 2021
Read more

Alpine.js Weekly #66

Tips

I really like this use case for x-effect in @Alpine_JS v3. It’s an easy way to disable scrolling on the body when you open a modal or a mobile navigation. Using x-effect you don’t have to worry about enabling scrolling again when a user hits ESC or uses click.outside for example.

#66
June 25, 2021
Read more

Alpine.js Weekly #65

v3 is picking up some steam, if you’ve missed it, here are the launch tweets:

🎉 If you didn’t catch it, Alpine Version 3 has been officially released!

You can watch the Alpine Day keynote where I show all the changes and show off the new features here:

#65
June 19, 2021
Read more

v3 is out - Alpine.js Weekly #64

Alpine v3 code was released as part of Alpine Day (alpineday.com): github.com/alpinejs/alpine-next for everyone’s perusal.

It’s a complete internal rewrite with a focus on supporting feature extension and there’s now official Alpine.js docs: , head over there to see all the new features.

#64
June 11, 2021
Read more

Alpine.js Weekly #63

Tips

Thank you Afonso Cerejeira for this great introduction to Htmx, alpine.js and hotwire.
You might not need a frontend framework

#63
June 4, 2021
Read more

Alpine.js Weekly #62

Tips

This is how you can create an easy scroll to top button with @Alpine_JS and .

#62
May 28, 2021
Read more

Alpine.js Weekly #61

Tips

replace the turbo-frame with @Alpine_JS , no code replaced needed. perfect for django.

#61
May 21, 2021
Read more

Alpine.js Weekly #60

Alpine Day is shaping up to be awesome, here’s the announcement tweet for whoever isn’t on Twitter.

🎉 Alpine Day, June 10th 2021 is now a real thing!

🚀 Launching everything new and shiny 🎙️ Hearing from crazy awesome speakers 💰 All profit goes directly to speakers

#60
May 14, 2021
Read more

Alpine.js Weekly #59

Tips

The following is in Spanish, the gist is a reminder that there’s a way to access the parent component’s data by selecting it and accessing __x.

#59
May 7, 2021
Read more

Alpine.js Weekly #58

Caleb’s setting up an Alpine Day, there’s a mailing list you can join.

🥳 Alpine Day 2021 is now a real thing.

One day packed full of new launches and cool speakers. Gonna be a hoot! 🦉

#58
April 23, 2021
Read more

Alpine.js Weekly #57

“Q1 2021 State Of JavaScript Libraries and Tools: Frameworks” report is out 🎉🎉🎉 https://moiva.io/blog/2021-q1-state-of-js-frameworks
Best Q1 2021 Top Performers: Marko ()

#57
April 16, 2021
Read more

Alpine.js Weekly #56

I’ve got my CSS-in-JS solution for @Alpine_JS sorted 👀🤣

#56
April 9, 2021
Read more

Alpine.js Weekly #55

Let Caleb know how you use Alpine.js & what you call it:

  • Alpine users, do you use Alpine with a build? (like “npm install alpinejs) Or just the file/CDN.
#55
March 26, 2021
Read more

Alpine.js Weekly #54

A few announcements this week.

Alpine Devtools v1.0.0 is out for Chrome and .

#54
March 19, 2021
Read more

Alpine.js Weekly #53

More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.

First glance at @Alpine_JS, and I can totally relate on the separation of concern!

#53
March 12, 2021
Read more

Alpine.js Weekly #52

An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

#52
March 5, 2021
Read more

Alpine.js Weekly #51

Nice thread on setting up TypeScript with Alpine.js (@samuelstancl packaged it up, see the “code” section)

Anyone interested in an article about how to set up TypeScript support for Alpine.js with a few lines of code? 😏

#51
February 26, 2021
Read more

Alpine.js Weekly #50

Here are this week’s Alpine.js adopters:

  • artmuseumgr.org by is built with Alpine.js
#50
February 19, 2021
Read more

A week of Alpine.js-powered launches.

In the past couple of weeks Alpine.js passed 14k stars (now sitting at around 14.1k) and we’ve seen websites big and small adopt Alpine.js.

Tips

🔥 If you need to pass a bound attribute to a Blade component, you can prefix the attribute name with two colons instead of one to tell Blade to not evaluate the attribute as a PHP expression.

#49
February 12, 2021
Read more

How much code did Eurovision delete by switching to Alpine.js?

Refactored (almost) all JavaScript on https://eurovision.tv/ to @Alpine_JS this week. Thanks !

#48
February 5, 2021
Read more

When NativeScript's homepage uses Alpine.js

Alpine.js on the @NativeScript website?

#47
January 29, 2021
Read more

Is Alpine the outright leader for JS sprinkles?

Alpine is at 13.4k stars at the time of writing, still a way to go to jQuery but in the same ballpark as Stimulus (which is at 10k stars at the time of writing). GitHub stars aren’t everything but you know, Ember is next on the hitlist (although they’re really not about the JS sprinkles).

Frontend Frameworks/Libraries With Most Stars on GitHub.

#46
January 22, 2021
Read more

State of JS: 82% satisfaction with Alpine.js

Seems like Alpine made some waves in the State of JS 2020, you can see the JS framework results at: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Frontend framework satisfaction (%) ranking from “State of JS 2020”

1️⃣ Svelte (89%) 2️⃣ React (88%) 3️⃣ Vue.js (85%) 4️⃣ Alpine.js (82%) 5️⃣ Preact (78%) 6️⃣ LitElement (78%) 7️⃣ Stimulus (67%) 8️⃣ Angular (42%) 9️⃣ Ember (42%)

#45
January 15, 2021
Read more

2021 in Alpine.js land

Caleb has been dropping teasers about Alpine v3, for example the following thread:

The next version of @LaravelLivewire and will (likely) be completely driven by Vue 3’s reactivity core.

#44
January 8, 2021
Read more

Better Alpine.js error messages to close out 2020

If you missed it on Twitter/GitHub, this week’s Alpine.js release (2.8.0) adds better error messages when Alpine.js hits an eval error. It uses console.warn under the hood so you might want to display those when working on an Alpine.js project.

Sample error messages:

#43
December 18, 2020
Read more
 
Older archives
Brought to you by Buttondown, the easiest way to start and grow your newsletter.