[HN Gopher] Pines - Alpine and Tailwind UI Library
___________________________________________________________________
Pines - Alpine and Tailwind UI Library
Author : vyrotek
Score : 149 points
Date : 2023-07-12 16:41 UTC (6 hours ago)
(HTM) web link (devdojo.com)
(TXT) w3m dump (devdojo.com)
| babyshake wrote:
| Alpine is basically a lightweight React alternative?
| jw1224 wrote:
| It'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.
| samwillis wrote:
| Sort 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)
| arcanemachiner wrote:
| It's similar, but the syntax and behavior are more inspired by
| Vue.
|
| 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).
| qbasic_forever wrote:
| It's more like jQuery than react. Preact is a true lightweight
| react alternative.
| cultofmetatron wrote:
| hmm, seems like it will be a realy nice base for someone to build
| a set of phoenix liveview components..
| [deleted]
| pmarreck wrote:
| This 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 =)
| xorcist wrote:
| Save your time, terminal aficionados. This has nothing to do with
| pine/alpine.
| mgiampapa wrote:
| ncurses! foiled again!
| canadiantim wrote:
| Any 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
| rco8786 wrote:
| Opening this link on my iPhone caused a hard crash a
| restart..weird
| cebert wrote:
| It loaded fine for me. Even the examples worked.
| sgt wrote:
| Could also be your battery.
| maxiwer wrote:
| Looks sweet
| Dowwie wrote:
| Does the TailwindCSS templates business model work? Pines is in
| the same category as Flowbite, right?
| arcanemachiner wrote:
| Until they upload a license to the project, this project is in
| the "All Rights Reserved" category, and should be used at your
| own peril.
| bitterblotter wrote:
| I 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 wrote:
| If 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 wrote:
| I'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 wrote:
| Fwiw, I don't think tailwind UI has any of the issues you
| raise.
|
| 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.
| badbotty wrote:
| Surely, 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
| arcanemachiner wrote:
| Looks very nice. Can't use it without a LICENSE though...
| cdelsolar wrote:
| The license is finders keepers until they put one on.
| rmorey wrote:
| I 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
| weaksauce wrote:
| Is that universal or just a USA thing?
| mindcrime wrote:
| There 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...
| debugnik wrote:
| It's a Berne Convention thing.
|
| https://en.wikipedia.org/wiki/Berne_Convention
| codemonkey-zeta wrote:
| This 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 wrote:
| The second paragraph here is a bit surprising. Do you
| have an example you can point to?
| pcthrowaway wrote:
| I 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
| bonyt wrote:
| Weird, 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')" ....
| agumonkey wrote:
| seems related (parent or sibling) to shadcn-ui
| ocharles wrote:
| Very 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 wrote:
| Each 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.
| lnoir wrote:
| This 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 wrote:
| Yep, I see the same in Firefox Android.
___________________________________________________________________
(page generated 2023-07-12 23:00 UTC)