Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: UI Playbook – A documented collection of UI components

uiplaybook.dev

Post reply on HN
Print view View original

21–30 of 36 posts

Re: Show HN: UI Playbook – A documented collection of UI components

#21

Post by corytheboyd »

parhamn wrote: post #19
corytheboyd wrote: post #18

Was wondering why OP only seems to recommend reach-io as examples, turns out they are a contributor. It’s all open source so like, you’re not doing anything malicious for profit here, but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example system if this is supposed to be system agnostic documentation

> but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example No it wouldn’t. That’s a lot of disclaimer burden to put on someone.

> That’s a lot of disclaimer burden

No it is not, a disclaimer is very low effort. Here is an example disclaimer: "Just a heads up, I am a Reach-UI contributor!"

That is in no way a large burden, still gets the message out about both UI Playbook and Reach-UI, and is just the more respectable thing to do here. I really don't think OP did anything WRONG, there is clearly no malice here, it's just an observation I had to better communicate in the future for the people like me who care about these details, I know I am not alone here.

Re: Show HN: UI Playbook – A documented collection of UI components

#22

Post by raunofreiberg »

ibdf wrote: post #11

I would recommend a couple of things: Sidebar with links to headers similar to other documentation sites. And if you are going to provide insights on accessibility, which is great, make sure your site is also accessible.

Care to elaborate which parts weren’t accessible for ya? Thanks.

Re: Show HN: UI Playbook – A documented collection of UI components

#23

Post by raunofreiberg »

corytheboyd wrote: post #18

Was wondering why OP only seems to recommend reach-io as examples, turns out they are a contributor. It’s all open source so like, you’re not doing anything malicious for profit here, but it would come across as disingenuous if you didn’t mention being a contributor to the most prominently linked example system if this is supposed to be system agnostic documentation

The documentation itself is system agnostic. You don’t need to use Reach UI for the docs to make sense.

I recommend Reach UI because in my experience it has worked out great. Feel free to extend the examples with additional libraries! :-)

Re: Show HN: UI Playbook – A documented collection of UI components

#24

Post by folz »

corytheboyd wrote: post #17
RunawayGalaxy wrote: post #14

Earlier quoted context omitted.

It's not a design system. It's documentation/best practices around common UI components that you'd find in most design systems.

Oh, then I guess I don’t see the point? Actual design systems vary quite a bit, refer to their documentation for their exact flavor of how to implement UI correctly and eliminate the middleman. I’m not saying having a general knowledge of the underlying tools is bad, that’s great knowledge to have, but it does already exist if you look for it.

If I had to guess, the point is that OP enjoys learning about design systems and is trying to create a resource for other people to also learn from. Tons of knowledge already exists, but that doesn't stop people from trying to create or share new approaches to it anyway.

Re: Show HN: UI Playbook – A documented collection of UI components

#27

Post by amelius »

hoonie12 wrote: post #26
amelius wrote: post #25

I don't get it, why isn't the "select" box opening, i.e. showing a dropdown?

The select at the top isn't actually a select input, if you scroll down to examples it has an actual select box.

You're right. Hmmm, I don't think it's very good UI design to show a UI element that turns out to be just an image or a button.

Re: Show HN: UI Playbook – A documented collection of UI components

#28

Post by apeescape »

I feel like many commenters didn't bother to give 2 minutes to check out the site to get the gist of it. Sure, on first glance it does look like Yet Another design system or an alternative to Storybook, but in fact it's something else. This is sort of a wiki for common UI components, i.e., there's information on when to use them, how to implement them, common gotchas, and so on. Since using a 3rd party design system is not feasible for many businesses, I think this has the potential to be a great resource.

Re: Show HN: UI Playbook – A documented collection of UI components

#29

Post by sankalp221 »

Very cool resource! Thanks for creating it.

Accessibility is a whole beast in itself. It'd be cool to give quick suggestions on how to make the components accessible. The W3 docs are good if you want to dive deep and understand the nuances, but a quick handy reference of good accessibility patterns for common components would go a long way. For example on buttons you could add something similar to this: https://a11y-101.com/development/aria-disabled.

Overall, looks awesome!

Post reply on HN