Don't sleep on what's built into plain HTML now. For example, almost all of the according feature you showed (everything but the animations, for now) can be built with the summary and details tags, no js required (alpine or otherwise). As someone who's also enjoying HTMX and alpine, I find that a lot of devs coming from SPA frameworks are unaware of advancements in what HTML can do.
Fun fact, if you replace `x` with `v`, All the code shown in this video becomes a Vue tutorial. Good job, you just learned both! Except for `x-data`, Vue keeps the data definitions in the script under the template, along with giving you dedicated places for derived state, life cycle hooks, and general component logic. This is a much cleaner way of writing components, since complex logic is inevitable, and trying to shove it all into the markup gets almost as messy as using Tailwind. This lets Vue components and projects easily scale to any size.
Hi, just a quick Vim tip for 17:00 You can delete inside the double-quotes faster with: d-i-” (delete inside “)
I just watched this man press e 5 times to select a few words instead of t" and it makes me feel much better about my vim skills.
MPAs are making a big comeback thanks to videos like these.
I was looking for a better solution to exactly this problem. Thanks for the serendipity of an amazingly well timed video.
This is a good example of how atomic styles (tailwind) causes things to require JavaScript. Everything shown here can be (and should be) done entirely in CSS. I am dubious as to how useful it is to have to learn another API (Alpine) just to avoid writing document.query selector :) But if you like it and it helps with development - have fun!
I love the Go, Templ, HTMX stack & have been using it for my side projects so far. The main blocker for getting it into some of the projects at work is mainly: skillset (most coworkers are JS/TS devs) & dependency on React or JS/npm libraries.
I love it. It's just as important that you enjoy the process of building the site as much as the final quality. 🙌
I can't believe this guy has a banana as cursor
You might find that modern CSS now natively enables the accordion behavior for your modules and lessons using the `::details-content` pseudo-element. (However, browser support is still developing. Chrome is good, Firefox and Safari don't yet support this.)
Great 👌, make more projects and tutorial of alpine js ❤
slide menu is such a good name I'm gonna start using that
alpine has its own htmx like ajax plugin called alpine-ajax. Also there is a new hypermedia library called Datastar which is basically htmx+alpine with smaller bundle size.
SSR MPA is the way to go! I also a similar setup for my work: Fastify, EJS, htmx, & Alpine.
Great informative and concise video showing what alpine can do. I'll definitely try it out now, thanks!
You also need to disable settling delay in htmx if you want alpine to work after swapping, test it now by moving back in history using ht-boost and alpine components in swap
Full loop back to PHP/jQuery 13 years later. Not dissing it. SPAs were a dumb sidebar that caused so many workarounds, but also was so stupidly complicated got us PAID! But now it's like, HTMx is a good idea.
I'm pretty sure you can do all or most of the stuff you were looking to do with CSS only (hamburger menu, accordions, etc.)
@dreamsofcode