7 ms·
Pines – Alpine and Tailwind UI Library
- arcanemachiner 3y agoLooks very nice. Can't use it without a LICENSE though...
- cdelsolar 3y agoThe license is finders keepers until they put one on.
- rmorey 3y agoI think technically, legally, it is the opposite. Works are automatically copyrighted upon creation, so without a license, by default it is not free to use. In practice, who cares, that’s why they put it on GitHub, just use it
- codemonkey-zeta 3y agoThis is correct. The work is "all rights reserved" unless explicitly stated otherwise. 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.
- chadash 3y agoThe second paragraph here is a bit surprising. Do you have an example you can point to?
- pcthrowaway 3y agoI think this would only apply in a situation where the original author stepped away from an unlicensed project that got forked or taken over, then the people forking it added an OS license (the original author could come back and license the original work under whatever terms they want) 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
- weaksauce 3y agoIs that universal or just a USA thing?
- mindcrime 3y agoThere are almost certainly going to be some exceptions, but copyright law is largely consistent in the broad brush strokes at least, among a large portion of the world's nations. See: https://copyrightresource.uw.edu/copyright-law/international-copyright-law/ https://copyrightresource.uw.edu/copyright-law/international...
- debugnik 3y agoIt's a Berne Convention thing. https://en.wikipedia.org/wiki/Berne_Convention https://en.wikipedia.org/wiki/Berne_Convention
- JimDabell 3y agoNot just the Berne Convention. TRIPS brought automatic copyright to WTO members as well, so it’s true of almost every country in the world.
- debugnik 3y agoTIL. There are apparently more Berne Convention signatories than WTO members, though, so I guess the former still has more reach, but I assume the intersection isn't empty, so of course TRIPS must have had some impact as well.
- babyshake 3y agoAlpine is basically a lightweight React alternative?
- samwillis 3y agoSort of... 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)
- jw1224 3y agoIt’s great for quickly adding interactivity to any static HTML element. 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> Without JS, everything would be visible at all times. 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> When the button is clicked, the menu opens (or closes). x-transition adds a smooth fade effect, @click.outside hides the menu when clicked away from the element, and x-cloak prevents it from appearing before the DOM has fully loaded. 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.
- arcanemachiner 3y ago
- pmarreck 3y agoThis page looks really bad on my system- Firefox Nightly and a UWQHD display- The black circle occupies most of the screen (obscuring the text) and it animates very slowly. 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 =)
- mstange 3y agoThis appears to be a box-shadow which bleeds out of the input type="range". It seems that there's a missing overflow:hidden somewhere.
- deleted 3y ago[deleted]
- Dowwie 3y agoDoes the TailwindCSS templates business model work? Pines is in the same category as Flowbite, right?
- arcanemachiner 3y agoUntil they upload a license to the project, this project is in the "All Rights Reserved" category, and should be used at your own peril.
- hoistbypetard 3y agoIt seems to work for the authors of TailwindCSS: https://tailwindui.com https://tailwindui.com
- rco8786 3y agoOpening this link on my iPhone caused a hard crash a restart..weird
- agumonkey 3y agoseems related (parent or sibling) to shadcn-ui
- lnoir 3y agoThis is cool, but viewing the examples on mobile (Pixel 4, Firefox) I saw issues with text overlapping icons in the Accordion and Alert examples.
- doublesocket 3y agoYep, I see the same in Firefox Android.
- canadiantim 3y agoAny options for graceful degradation for non-js users? I really love this integration and would 100% use this if there's an ergonomic way of handing non-js users gracefully
- ocharles 3y agoVery nice, but what's the upgrade story on these kind of things? Like if there's a bug in any of these, you've got to basically manually watch the repository and manually copy bug fixes back over
- jw1224 3y agoEach component is so simple, there’s no upgrading to be done. It’s just an handful of Alpine directives, most don’t include more than a line or two of JavaScript. Just copy-paste into your project, tweak as needed, and that’s it.
- josefrichter 3y agoThat’s his point. Once you copy/paste, you’re breaking any link to the source that could be observed for updates and bug fixes.
- fouc 3y agothat's an interesting question, has there been an upgrade story for any similar project/service? Since there's many out there..
- xorcist 3y agoSave your time, terminal aficionados. This has nothing to do with pine/alpine.
- mgiampapa 3y agoncurses! foiled again!
- bitterblotter 3y agoI desperately want a good library like this but every time i find one they have 3 additonal premium tiers that make the free content feel like something my project cant rely on. Really good work though
- switz 3y agoIf you desperately want good libraries, but aren't willing to pay for them then what is the real problem here? Also, as far as I can see, the library shared here is completely free.
- freedomben 3y agoI'm not GP, but I agree with them. I'm totally willing to pay (I bought Tailwind UI in fact) but if the license is restrictive in what I can do with it, I won't invest time/money into learning it. If I can't use it on an open source project I built (not a UI library of course) then it's unacceptable. If I can't use it on things I build for customers, it's unacceptable. It's not the money that is the problem for me with the premium offerings, it's the license terms. To be clear, I'm speaking broadly in general terms. I'm not suggesting that Pines has this problem.
- srcreigh 3y agoFwiw, I don’t think tailwind UI has any of the issues you raise. https://tailwindui.com/license 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.
- freedomben 3y agoYep, tailwind is pretty good on that front. I paid in part because they're fine with open sourcing and using for customer projects and such. I haven't used it as much as I thought, but overall a good investment.
- rkangel 3y ago
- bonyt 3y agoWeird, right clicking on this page seems to trigger a popup of "rad" for some reason for me... <div oncontextmenu="if (!window.__cfRLUnblockHandlers) return false; alert('rad')" ....
- rafaelgoncalves 3y agosame here, and seems a bit strange, maybe some cloudflare injection/treatment
- lolinder 3y agoThe `if...return false` is from CloudFlare's Rocket Loader. The alert('rad') appears to be from the site itself, though, and is definitely odd.
- cultofmetatron 3y agohmm, seems like it will be a realy nice base for someone to build a set of phoenix liveview components..
- maxiwer 3y agoLooks sweet
- badbotty 3y agoSurely, when you are writing little 150+ line js programs in your html attributes you have to start considering if Alpine.js is the right tool for the job. https://devdojo.com/pines/docs/select https://devdojo.com/pines/docs/select
- crooked-v 3y agoFrom a brief scan, there's also a bunch of stuff in there that seems like it would be more straightforward as `data-` attributes, since you can easily use those as arbitrary selectors for Tailwind styling. I don't know if it's actually more efficient, but it sure seems easier to read to me than dynamically generating the class string based on state.
- teaearlgraycold 3y agoGotta be honest with you. React is still king.
- mhitza 3y agoThat is ridiculous amount of javascript within an html attribute. Do all major editors/IDE have proper Alpine plugins in order to highlight autocomplete js code within those html attributes?
- badbotty 3y agoNo idea
- iambateman 3y agoIt's possible to extract the data-attribute out to it's own thing: 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.
- selcuka 3y ago> Do all major editors/IDE have proper Alpine plugins 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`.
- iambateman 3y agoThe creator of this - Tony - is a friend and really active member of the Laravel community. This project is so fun and I’ve already used it for a couple projects!
- clementmas 3y agoGood job! I've been using Flowbite and building on top of it but having Alpine as a base makes it easier.
- nocsi 3y agoPerfect timing, just finished purging alpinejs from my elixir projects in favor of LiveJS.
- Nezteb 3y agoAre you referring to LiveJS [1] or Phoenix LiveView's JavaScript functionality [2][3]? [1] https://github.com/Q42/LiveJS https://github.com/Q42/LiveJS [2] https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.htm... [3] https://www.npmjs.com/package/phoenix_live_view https://www.npmjs.com/package/phoenix_live_view
- jostylr 3y agoAs someone who adores alpinejs and is just getting into LiveView, can you explain was this removal a preference to minimize or for an alternate syntax or is there an important reason, such as if there exist conflicts between LiveView and AlpineJS clobbering each other?
- arun-mani-j 3y agoIf you like TailwindCSS and just want a UI library, check out daisyUI https://daisyui.com/ https://daisyui.com/ (It is JS free, so limitations apply)
- Incipient 3y agoHasn't that just come full circle back to what's basically bootstrap? Out of the box prestyled components?
- NayamAmarshe 3y agoYes and no. Yes because the classes remind you of bootstrap. No because you still cannot use it without Tailwind classes. Layouts and alignments and many other things still need Tailwind.
- cjboco 3y agoI just tried daisyUI for a current job and found it a little frustrating. Couldn’t figure out how to modify backdrop on a modal, is just one example. Wound up just using headlessUI, which is from the makers of Tailwind… and also free. Albeit, not as robust as DaisyUI.
- arun-mani-j 3y agoI can agree that daisyUI works good as it is but can be a pain if you need to customize it a "little". I often write my own components if I have to make change to Daisy's. :)
- deleted 3y ago[deleted]
- lakomen 3y agoThe horror. 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> It would also totally collide with Vue's template syntax.
- mushufasa 3y agoCan you elaborate on what specifically is horrible there? Compatibility with Vue wouldn't make sense as a goal for a competitive JS framework.
- err4nt 3y agoAnd is invalid HTML. You can invent any attribute so long as it begins with 'data-', or you can define custom HTML elements with whatever custom attributes you want, but you aren't allowed to invent non-standard attributes for standard elements.
- volkandkaya 3y agoWhy would you use Vue and Alpine together?
- mfru 3y agoi'm always sad when accessibility is not mentioned in docs for new stuff
- thinkpad13 3y agoI just wish there is an stimulus js headless ui