[HN Gopher] Precedent - Building Blocks for Next.js
___________________________________________________________________
Precedent - Building Blocks for Next.js
Author : steventey
Score : 42 points
Date : 2023-01-13 17:11 UTC (5 hours ago)
(HTM) web link (precedent.vercel.app)
(TXT) w3m dump (precedent.vercel.app)
| super256 wrote:
| I've checked out the <Modal /> component [1]. What's the reason
| to go through so many hoops instead of just using the HTML native
| <dialog> element [2]?
|
| [1] https://github.com/steven-
| tey/precedent/blob/main/components...
|
| [2] https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/di...
| kylemh wrote:
| https://www.oidaisdes.org/native-dialog-element.en/
|
| covers it pretty well.
|
| it's not accessible... yet!
| brundolf wrote:
| The native <dialog> does very little on its own in terms of
| functionality. It's mainly there for accessibility/semantic
| markup
| AirMax98 wrote:
| 2/3 of these components are broken on iOS safari. I also see some
| questionable things happening in the hooks that might not make it
| past a review.
|
| It's a good start, but definitely keep it up.
|
| [1] -- https://github.com/steven-
| tey/precedent/blob/main/lib/hooks/... (you don't need the ref if
| you are ignoring exhaustive-deps, not sure why you stringify
| threshold)
|
| [2] - https://github.com/steven-
| tey/precedent/blob/main/lib/hooks/... (you maybe want to check if
| a key exists and warn before you set it)
|
| [3] - https://github.com/steven-
| tey/precedent/blob/main/lib/hooks/... (you probably want
| debounce/throttle options here)
| yawnxyz wrote:
| Is that number in the green circle just counting down way into
| the negative numbers for anyone else?
| steventey wrote:
| oooh yeah that was a bug, it should be fixed now tho!
| Alifatisk wrote:
| I love Vercels design, I remember reading on their discussion
| page that they were working on open-sourcing their components and
| design system, but that was about two years ago?
|
| Now the closest thing we have is geist-ui.dev
| puppycodes wrote:
| Looks cool but im always discouraged by any UI kit that isn't
| optimized for mobile devices in their demo elements on the front
| page. Might wanna check the experience on iOS safari ;)
| thrownblown wrote:
| Popover drop-down is broken in mobile chrome on Android unless I
| request the desktop site.
| ushakov wrote:
| Only 3 components?
| ch71r22 wrote:
| I think they're just bundling Radix UI: https://www.radix-
| ui.com/
| steventey wrote:
| Hey! OP here - this is not meant to be a design / component
| system, though I plan to add more components to it in the
| future if it makes sense. Rather, it's meant to be a powerful
| hello-world template that you can clone when you start a new
| Next.js project.
|
| Highly recommend Radix if you want more components!
| brap wrote:
| This seems kinda weird. Random UI components, ORM, and string
| formatting utilities(???) all part of the same "thing"? I don't
| get what this is, seems like a mishmash.
| steventey wrote:
| Hey! OP here - this is meant to be a powerful hello-world
| template that you can clone when you start a new Next.js
| project, something that I built for myself because I start way
| too many side projects haha
| rajangdavis wrote:
| I think this is pretty neat, my only feedback is that I'd like to
| see documentation on how to incorporate with an existing or new
| Next.js project.
| steventey wrote:
| Thanks! It's not meant to be integrated with an existing
| project, though you can copy some of the components over if
| you'd like!
|
| To use it to bootstrap a new project, you can run:
|
| ``` npx create-next-app precedent --example
| "https://github.com/steven-tey/precedent" ```
| moneywoes wrote:
| Looking to learn and build a react app, should I start with this?
|
| Did review some html css prior.
| steventey wrote:
| I highly recommend learning Next.js as a way to learn React -
| it is built on top of React and focuses on some of the most
| important hooks (useState, useEffect) while also giving you
| functions for server-side rendering that help make sure your
| app is performant from the get-go.
|
| That's actually how I learned React myself :)
|
| Disclaimer: I work at Vercel (we maintain Next.js)
| moneywoes wrote:
| Any courses you suggest? Was looking at frontend masters
|
| Also tailwindui or mui or ant?
| smt88 wrote:
| Ant Design is phenomenal, mature, and fully featured. I highly
| recommend it instead of this.
| crucialfelix wrote:
| But it's very hard to not look like Ant. Some of the
| components are great though.
|
| Chakra is easy to design with, and fully accessible. Well
| thought out.
| smt88 wrote:
| > _But it 's very hard to not look like Ant._
|
| I don't know why this matters. Users certainly don't notice
| or care. Worrying about it early in the development cycle
| is a waste of time.
|
| They also have general theming to allow you to quickly get
| it to look like your brand's colors:
| https://ant.design/docs/react/customize-theme
| nwienert wrote:
| Tamagui gets you Chakra-like features with even better
| theming, performance and works on Native to boot.
| moneywoes wrote:
| Is it better than Tailwind UI?
| smt88 wrote:
| I despise flat/Material design and Tailwind's entire
| philosophy, so I would say "yes"
| no_wizard wrote:
| and if this matters at all, the documentation is not that
| great, IMO. It suffers from some translation issues and isn't
| always very clear.
|
| I also audited their code quite a few times, and they do some
| very bizarre things in the name of "performance" under the
| hood.
| zdragnar wrote:
| If you want to learn, my advice would be to focus on learning
| one thing at a time. Pick up react. Just react. NextJS (and
| other libraries included here) solve specific problems in
| specific ways. It's hard to know if they solve them in the way
| that works for you if you don't understand the problem they are
| solving, or what other approaches might look like.
|
| Once you're comfortable with how react works, _then_ start
| layering in additional libraries and tools, and get a feel for
| how they work. You may also find they introduce new pain points
| that don 't work for your particular project. When you're
| trying to learn everything all at once, it's hard to figure out
| where a pain point is even coming from.
| brundolf wrote:
| Totally disagree. Trying to fully understand a stack this
| tall from the get-go would be a huge barrier
|
| One of the best things about Next is that it configures
| everything for you and lets you just start writing some React
| code and seeing results. I would recommend the GP start with
| Next, and dig deeper as they go along
| jstummbillig wrote:
| Agreed. React by itself is mostly unusable for building
| anything - although that is slowly changing but alas:
| NextJS gives you a more solid starting point to build stuff
| around React.
|
| Precedent seems a little half-hearted at this point.
| bottlepalm wrote:
| I'm already using most of this stack except for Radix, anyone
| know how it compares to MUI?
|
| Surprised they didn't include a query library. I like the idea of
| tRPC, but would like to use it on any REST style url.
___________________________________________________________________
(page generated 2023-01-13 23:01 UTC)