Pines – Alpine and Tailwind UI Library
devdojo.com
devdojo.com
document.addEventListener('alpine:init', () => { Alpine.data('video', () => ({ 'show_video': false, ...
That way there's code highlighting and syntax checking for JS.
I definitely go this route for Alpine about half the time.
PyCharm doesn't seem to have one (I hope I'm wrong). That being said, it is possible to put the code into a proper <script> block. I personally only a trivial amount of code in html attributes such as checking a boolean value with `x-show`.
HTML attributes are fine, 150+ line JS programs are fine, 150+ lines crammed into your HTML attributes is not fine.
A sufficiently advanced precompiler can extract those JS programs into their own files and a sufficiently advanced IDE can allow you to write even a 1000 line JS program in an attribute with no problems.
Yet, those do not exist today.
which tells you what is happening right there. So if you eliminate the data outside the component, as one should, I think it becomes a very nice readable interface.
<div oncontextmenu="if (!window.__cfRLUnblockHandlers) return false; alert('rad')" ....Really good work though
Also, as far as I can see, the library shared here is completely free.
To be clear, I'm speaking broadly in general terms. I'm not suggesting that Pines has this problem.
https://tailwindui.com/license
They do have a catch all, but for PR sake they probably won’t use that unless you’re clearly in the wrong.
If you're relying on PR then what's the point in the licence? This is a legal agreement - it should be scoped for intended meaning of the agreement, not relying on outside influences to decide how the company will choose to interpret it because those influences change over time.
The catch all here is "Use the Components and Templates to produce anything that may be deemed by Tailwind Labs Inc, in their sole and absolute discretion, to be competitive or in conflict with the business of Tailwind Labs Inc.". What happens if I use Tailwind to build a site designer service? For a while it'll be fine, but what happens if Tailwind (the company) bring out a site designer product, and now decide that I'm in competition? Is my whole business dead? There's no caveats in that clause on time limits, ordering, or in fact anything. It doesn't even have to be a close competitor due to the "sole and absolute discretion" wording.
When component libraries doesn't rely on anything proprietary, isn't complex, has convoluted/restrictive licenses, is expensive or a subscription and meanwhile could absolutely be done 100% open source, then of course I'd prefer that.
The whole point of these libraries is to make building products easier, but restrictive licenses & expensive pricing makes it feel like that won't be the case.
It doesn't have the long tail of components because they're CSS (via tailwind)-only, but it gives a great foundation.
This has even been applied to projects that began with no license, but added one later on. An original author on some open source software can come back years later and claim copyright over the first few commits, when no license was present. That's why it is important to START your project with a LICENSE, and why it is a default option when creating a repository on GitHub.
If the original author added the license at some point in the future it would apply to the entire codebase at the time they added it, which they presumably hold the copyright for, so I don't think they could make the argument that some chunk of the codebase which existed at the time of licensing falls under a different license.
I suppose if an unlicensed project gets an early outside contributor, and then the original author adds a license, the outside contributor could claim they didn't consent to the license change (this is why many professional OS projects require contributors to sign a CLA)... but in practice I'm not sure how this would work, since this would mean the outside contributor forked and modified the unlicensed project, so they would have been potentially violating copyright in the first place
See:
https://copyrightresource.uw.edu/copyright-law/international...
(It is JS free, so limitations apply)
[1] https://github.com/Q42/LiveJS
[2] https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.htm...
The dropdown example
<div x-data="{ open: false }" @click.outside="open=false" class="relative text-sm">
<button @click="open=!open" class="bg-white rounded-md shadow-sm cursor-pointer">
<span class="block px-4 py-2">Dropdown</span>
</button>
<ul x-show="open" class="absolute origin-top-left top-0 w-32 p-4 mt-10 bg-white rounded-md shadow-sm" x-transition x-cloak>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</div>
Compatibility with Vue wouldn't make sense as a goal for a competitive JS framework.
The giant black circle only shows up when the viewport is very narrow, and when it's very wide (like full-width on my screen)- if I shrink the browser window to a medium width (which is likely how it was developed), the issue goes away.
Aaaaand the fact that it's not easy to automated-test things like this is why I'm mainly a back-end developer =)
I really love this integration and would 100% use this if there's an ergonomic way of handing non-js users gracefully
Just copy-paste into your project, tweak as needed, and that’s it.
I would describe it as closer to an alternative to hand rolling js, using JQuery, or older templating libraries like Knockout.
Where its at its best is with server rendered frameworks like Django, Laravel, or plane old hand rolled CGI. You can sprinkle in some Alpine with no build steps. It works particularly well with HTMX.
I wouldn't call it a React alternative because there are places where React (or Vue, or Svelt...) are better placed. But there are places they are overkill and it slots in perfectly.
Alpine borrows quite heavily from Vue, it has a very similar template DSL, and uses its reactivity subsystem (I personally think this is very well designed and makes Vue 3 an incredibly good app platform).
I also believe the new Laravel Livewire just released is built on top of Alpine, they are from the same developer.
If I'm doing server side rendering and need to sprinkle in some client side interactivity Alpine is what I reach for.
(You could describe any client side templating system as a React alternative)
You can turn any element into an “Alpine component” simply by adding the x-data attribute.
Imagine a drop-down menu like so:
<div>
<button>Toggle menu</button>
<div>
Menu item 1…
Menu item 2…
etc…
</div>
</div>
You’d make this reactive with Alpine like this:
<div x-data=“menuVisible = false”>
<button @click=“menuVisible = !menuVisible”>Toggle menu</button>
<div x-cloak x-show=“menuVisible” x-transition @click.outside=“menuVisible = false”>
Menu item 1…
Menu item 2…
etc…
</div>
</div>
Those are just a few of the most common Alpine directives. It doesn’t try to do everything, just the basics simply and efficiently.
I use it for most projects now.
It's great for embedding behavior into HTML elements, as others have said. I have found it be very flexible and powerful. And it doesn't require a build step, so you can just pop it into plain old HTML (after importing the script, of course).