[{"data":1,"prerenderedAt":309},["ShallowReactive",2],{"project-23916842":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":44,"post_text":47,"what":48,"said":69,"maker_in_thread":191,"shape":198,"grid":201,"attempts":272,"same_week":273,"maker_shows":34,"maker_hidden":301,"reader_version":302,"card":303},"23916842","UI Playbook","A documented collection of UI components","title","Show HN: UI Playbook – A documented collection of UI components","https:\u002F\u002Fuiplaybook.dev","uiplaybook.dev","raunofreiberg",1595425331,2020,145,33,415,3028,14,"notable","dev_tools","ui component documentation","web_app",[24,25,26,27,28],"ui components","design system","accessibility","best practices","ui patterns","roasted",-0.167,{"positive":32,"neutral":33,"mixed":34,"critical":35},4,6,1,12,23,{"idea":38,"docs":39,"execution":40,"design":42},{"positive":34,"critical":32},{"positive":34,"critical":34},{"positive":41,"critical":32},0,{"positive":41,"critical":43},2,[45,34,41,41,34,34,46,34,41,34,41,46,46,41,34,45,34,34,34,46,34,45,46,46,46,45,34,41,34,41,41,41],5,3,null,{"problem":49,"audience":47,"pricing":47,"motivation":56,"time_to_build":47,"stack":60,"openness":67,"stage":68,"team_size":67},{"value":50,"source":51,"evidence":52},"Lacks a documented reference of how to use, implement and make accessible common UI components","maker",[53],{"id":54,"by":11,"text":55},"23916843","Hey! After my first experience with design systems, I decided to kickstart a project called UI Playbook which is my attempt to document common UI components, their functionality,…",{"value":57,"source":51,"evidence":58},"Author's first design system experience led to documenting common UI components",[59],{"id":54,"by":11,"text":55},[61],{"value":62,"source":51,"evidence":63},"Reach UI used in examples",[64],{"id":65,"by":11,"text":66},"23918587","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.…","unknown","beta",{"praise":70,"objections":94,"requests":132,"questions":152,"alternatives":178},[71,83],{"value":72,"source":73,"evidence":74},"Useful wiki-style resource for common UI components","commenter",[75,79],{"id":76,"by":77,"text":78},"23919040","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…",{"id":80,"by":81,"text":82},"23919231","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…",{"value":84,"source":73,"evidence":85},"Good resource for learning and bookmarking",[86,90],{"id":87,"by":88,"text":89},"23917243","akoncius","nice, will bookmark it for later use when there will be more content :) thanks for the effort!",{"id":91,"by":92,"text":93},"23917935","d0liver","Nice! This is awesome!",[95,105,115,126],{"value":96,"source":73,"evidence":97},"Looks like another design system, which is redundant",[98,102],{"id":99,"by":100,"text":101},"23917670","corytheboyd","Agree with this comment. I think it is awesome that OP worked on a design system for the first time, that’s great experience to have, but it doesn’t warrant further diluting the…",{"id":103,"by":100,"text":104},"23918213","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…",{"value":106,"source":73,"evidence":107},"Site has accessibility issues itself",[108,112],{"id":109,"by":110,"text":111},"23917774","ibdf","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…",{"id":113,"by":110,"text":114},"23919429","Install an accessibility tool such as the Wave browser extension and you can see some of the issues... eg. missing form label and contrast.",{"value":116,"source":73,"evidence":117},"Some demo elements look interactive but are not",[118,122],{"id":119,"by":120,"text":121},"23918930","amelius","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.",{"id":123,"by":124,"text":125},"23917663","mudiadamz","Not as i expected but, great work, continue, maybe in the future it doesn't just a display of only 5 different things that i already know, and one of them isn't clickable.",{"value":127,"source":73,"evidence":128},"Undisclosed maintainer link to Reach UI",[129],{"id":130,"by":100,"text":131},"23918296","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…",[133,137,141],{"value":134,"source":73,"evidence":135},"Add accessibility patterns for components",[136],{"id":80,"by":81,"text":82},{"value":138,"source":73,"evidence":139},"Add sidebar navigation with header links",[140],{"id":109,"by":110,"text":111},{"value":142,"source":73,"evidence":143},"Add more components such as spinbox or number input",[144,148],{"id":145,"by":146,"text":147},"23917811","brirec","Why no spinbox?",{"id":149,"by":150,"text":151},"23918023","yboris","Had to look it up. I think these are more-commonly called \"Number Input Box\" ?",[153,164,171],{"value":154,"source":73,"evidence":155},"How does it differ from Storybook",[156,160],{"id":157,"by":158,"text":159},"23917049","rebelrexx858","What are the main differences between this and storybook?",{"id":161,"by":162,"text":163},"23917101","lajr","This is a website detailing various UI components whereas storybook is a development tool where you can manipulate and view components you are building locally (although some…",{"value":165,"source":73,"evidence":166},"Should it collaborate with open-ui",[167],{"id":168,"by":169,"text":170},"23928572","miguelsm","This reminds me of open-ui [1]. The goal of that project is also to tackle fragmentation and allow interoperability between component frameworks and design systems. How does UI…",{"value":172,"source":73,"evidence":173},"Why adapt an existing design system instead of building from scratch",[174],{"id":175,"by":176,"text":177},"23917250","masonhensley","What's your general thought on adapting one of the bigger design systems with thousands of hours of improvement & polishing vs building one from scratch? I do think there is need…",[179,183,187],{"value":180,"source":73,"evidence":181},"Storybook",[182],{"id":157,"by":158,"text":159},{"value":184,"source":73,"evidence":185},"Existing corporate design systems",[186],{"id":175,"by":176,"text":177},{"value":188,"source":73,"evidence":189},"open-ui",[190],{"id":168,"by":169,"text":170},{"comments":46,"answered":41,"key":192},[193,194,197],{"id":54,"text":55},{"id":195,"text":196},"23918529","Care to elaborate which parts weren’t accessible for ya? Thanks.",{"id":65,"text":66},{"commenters":199,"max_depth":33,"maker_replies":46,"first_comment_mins":41,"lifespan_hours":200},22,26,[202,204,208,211,213,215,216,220,221,224,226,228,229,231,233,235,237,238,241,244,248,249,252,254,255,259,261,263,264,266,269,271],[76,41,45,203,77,41],"project\u002Fpositive\u002Fidea",[205,41,34,206,207,41],"23920737","project\u002Fcritical\u002Fdocs","iaml",[209,41,41,210,77,41],"23921179","commenter\u002Fneutral\u002Fnone",[54,34,41,212,11,34],"maker\u002Fneutral\u002Fidea",[175,34,34,214,176,41],"project\u002Fcritical\u002Fidea",[99,34,34,214,100,41],[217,34,46,218,219,41],"23917938","project\u002Fneutral\u002Fidea","RunawayGalaxy",[103,34,34,214,100,41],[222,34,41,210,223,41],"23918671","folz",[225,34,34,214,92,41],"23918189",[227,34,41,210,176,41],"23918467",[168,34,46,218,169,41],[109,43,46,230,110,41],"project\u002Fmixed\u002Fdocs",[195,43,41,232,11,34],"maker\u002Fneutral\u002Fnone",[113,43,34,234,110,41],"project\u002Fcritical\u002Fexecution",[80,46,45,236,81,41],"project\u002Fpositive\u002Fdocs",[123,32,34,234,124,41],[239,45,34,234,240,41],"23920484","jagged-chisel",[242,33,34,243,120,41],"23918757","project\u002Fcritical\u002Fdesign",[245,33,46,246,247,41],"23918780","project\u002Fneutral\u002Fdesign","hoonie12",[119,33,34,243,120,41],[87,250,45,251,88,41],7,"project\u002Fpositive\u002Fnone",[157,253,46,218,158,41],8,[161,253,46,218,162,41],[256,257,46,232,258,41],"23917703",9,"moneywoes",[91,260,45,251,92,41],10,[145,262,34,234,146,41],11,[149,262,41,210,150,41],[130,35,34,265,100,41],"maker\u002Fcritical\u002Fnone",[267,35,41,210,268,41],"23918386","parhamn",[270,35,41,210,100,41],"23918507",[65,35,41,232,11,34],[],[274,278,283,288,292,297],{"id":275,"name":276,"points":277,"category":20},"23896856","3D Book Image CSS Generator",638,{"id":279,"name":280,"points":281,"category":282},"23920987","css-sweeper",390,"games",{"id":284,"name":285,"points":286,"category":287},"23880071","Simple Ops",280,"infrastructure",{"id":289,"name":290,"points":291,"category":20},"23865900","css-media-vars",248,{"id":293,"name":294,"points":295,"category":296},"23921478","React Guitar",242,"languages",{"id":298,"name":299,"points":300,"category":20},"23895540","uuid-readable",154,false,"v2",{"id":304,"name":5,"line":6,"ai":301,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":305,"top":18,"kw":306,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":307,"url":9,"mix":308,"praise":72,"objection":96,"sub":21},23916842,-0.17,[24,25,26,27,28],"51001131010330151113153335101000",[32,33,34,35],1794036593650]