[{"data":1,"prerenderedAt":618},["ShallowReactive",2],{"project-17146451":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":45,"post_text":48,"what":49,"said":103,"maker_in_thread":258,"shape":267,"grid":272,"attempts":575,"same_week":580,"maker_shows":269,"maker_hidden":610,"reader_version":611,"card":612},"17146451","Wired-elements","UI web components with a hand drawn, sketchy look","title","Show HN: Wired-elements – UI web components with a hand drawn, sketchy look","https:\u002F\u002Fwiredjs.com\u002F","wiredjs.com","shihn",1527184155,2018,650,120,14,2155,1,"legend","dev_tools","ui component library","library",[24,25,26,27,28],"web components","sketchy ui","wireframe","hand drawn ui","lit-element","mixed",0.199,{"positive":32,"neutral":33,"mixed":34,"critical":35},26,21,2,13,62,{"execution":38,"idea":41,"design":43},{"positive":39,"critical":40},3,10,{"positive":42,"critical":34},9,{"positive":44,"critical":18},12,[46,39,18,46,39,39,39,18,39,46,39,46,46,47,18,39,18,39,46,39,46,46,46,39,39,46,39,46,46,18,18,46,46,46,46,46,18,39,18,39],5,0,null,{"problem":50,"audience":62,"pricing":48,"motivation":73,"time_to_build":48,"stack":81,"openness":100,"stage":101,"team_size":102},{"value":51,"source":52,"evidence":53},"Lets developers build sketchy-looking interactive mockups that steer clients away from visual design","commenter",[54,58],{"id":55,"by":56,"text":57},"17146929","spking","This is fantastic! Very useful to get a concept into the browser and hopefully minimize clients focusing on visual design preferences too early in the process.",{"id":59,"by":60,"text":61},"17148093","jedberg","I hadn't thought of this, but this is an excellent point! You can use this to make a functional mockup for a client\u002Fboss\u002Fwhomever, and by using these they will completely ignore…",{"value":63,"source":64,"evidence":65},"Developers and designers making wireframes and interactive mockups","inferred",[66,69],{"id":67,"by":11,"text":68},"17146909","Yep. It was mostly done for fun. I can see it being a tool for wire-framing or interactive mockups.",{"id":70,"by":71,"text":72},"17146924","maccio92","the balsamiq wireframing software is stylized like this, and i think it suits the wireframing context very nicely https:\u002F\u002Fbalsamiq.com\u002F that's just one specific use case, but…",{"value":74,"source":75,"evidence":76},"Built after working on Rough.js; mostly for fun, with interest in web components","maker",[77,80],{"id":78,"by":11,"text":79},"17146956","After working on http:\u002F\u002Froughjs.com\u002F I thought it would be interesting to create common sketchy UI components that worked like actual controls. Web components seemed liked the…",{"id":67,"by":11,"text":68},[82,86,92,95],{"value":83,"source":75,"evidence":84},"Web Components",[85],{"id":78,"by":11,"text":79},{"value":87,"source":75,"evidence":88},"SVG",[89],{"id":90,"by":11,"text":91},"17147012","The web components use SVG and are build on lit-element (https:\u002F\u002Fgithub.com\u002FPolymer\u002Flit-element) as the web-component base. Rough.js can render to either canvas or SVG.",{"value":28,"source":75,"evidence":93},[94],{"id":90,"by":11,"text":91},{"value":96,"source":75,"evidence":97},"Rough.js",[98,99],{"id":90,"by":11,"text":91},{"id":78,"by":11,"text":79},"open_source","beta","unknown",{"praise":104,"objections":133,"requests":175,"questions":201,"alternatives":220},[105,124],{"value":106,"source":52,"evidence":107},"Fun, charming sketchy look",[108,112,116,120],{"id":109,"by":110,"text":111},"17146890","ai_ia","Really nice project. Not sure what's the use case but good fun project. Will use someday. :)",{"id":113,"by":114,"text":115},"17149132","acobster","This is really rad! It's fun just to refresh a couple times and see the randomness at work. Nice job!",{"id":117,"by":118,"text":119},"17151835","donmatito","I am not a designer but THIS IS SO AWESOME",{"id":121,"by":122,"text":123},"17150711","ryan-allen","This is great! I like the aesthetic, I'd happily use a web-app that was made with these components.",{"value":125,"source":52,"evidence":126},"Useful for wireframes and client mockups",[127,128,132],{"id":55,"by":56,"text":57},{"id":129,"by":130,"text":131},"17149172","hestefisk","Same on iOS. Otherwise great job! I can easily see his being used for rapid prototyping so give clients the feel that the UI is not set. Would be good to use the awesome font at…",{"id":70,"by":71,"text":72},[134,153,164],{"value":135,"source":52,"evidence":136},"Sliders broken on mobile and some browsers",[137,141,145,149],{"id":138,"by":139,"text":140},"17147851","asdsa5325","Looks nice, but I have a bug: The sliders don't work properly, when trying to move them they will always start back at 0. (I'm using Firefox 60).",{"id":142,"by":143,"text":144},"17148412","Tijdreiziger","FYI, the slider doesn't work at all on Chrome Android.",{"id":146,"by":147,"text":148},"17147320","JasonFruit","Sliders don't seem to be movable with Chrome for Android. Nicely done, though.",{"id":150,"by":151,"text":152},"17150653","bonoetmalo","Slider handle doesn't work on Chrome Android 66.0",{"value":154,"source":52,"evidence":155},"Not accessible to keyboard or screen readers",[156,160],{"id":157,"by":158,"text":159},"17147104","laken","I really like the look, very nice job on that. Is there any particular reason though why you didn't follow the aria standards for the controls? None of these controls can be used…",{"id":161,"by":162,"text":163},"17149426","binthere","As always, accessibility is the last thing people care about.",{"value":165,"source":52,"evidence":166},"React interop problems",[167,171],{"id":168,"by":169,"text":170},"17149621","hugozap",">These are web components and work fine within React already I tried with a simple CodeSandbox and they are not working for me. ( Unless I'm doing something wrong? )…",{"id":172,"by":173,"text":174},"17150649","d4l3k","There's something weird going on in Chrome. This link works in Firefox though with the webcomponents polyfill https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fjn85y61kx9",[176,181,191],{"value":177,"source":52,"evidence":178},"Make controls accessible",[179,180],{"id":157,"by":158,"text":159},{"id":161,"by":162,"text":163},{"value":182,"source":52,"evidence":183},"More components and fixes for touch support",[184,188],{"id":185,"by":186,"text":187},"17147714","dmix","Strange, that designer link doesn't load in Firefox Nightly, with this error: ``` Loading failed for the \u003Cscript> with source…",{"id":189,"by":11,"text":190},"17147346","Yep. Doesn't work with touch events properly at the moment. Work in progress!",{"value":192,"source":52,"evidence":193},"Avoid re-rendering shapes when state changes",[194,198],{"id":195,"by":196,"text":197},"17152412","Vinnl","That's brilliant! One suggestion I have is to prevent rerendering when changing states, e.g. when checking a checkbox, draw a checkmark without changing the shape of the actual…",{"id":199,"by":11,"text":200},"17155172","It's actually simpler than that. Most of the time it should not re-render at all. Should only re-render when the size has changed - at which point one needs to recompute anyway.…",[202,210],{"value":203,"source":52,"evidence":204},"What is the use case for this library",[205,209],{"id":206,"by":207,"text":208},"17148258","Walkman","What is the use-case for this? I read and agree that writing HTML or JavaScript is too costly for wireframes and this is why wireframe tools are handy, because you can cheaply…",{"id":109,"by":110,"text":111},{"value":211,"source":52,"evidence":212},"Which font is used and is it free",[213,217],{"id":214,"by":215,"text":216},"17147601","suyash","What is the font type that is used in this blog? Is it available for free use?",{"id":218,"by":11,"text":219},"17147619","Yes: https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FGloria+Hallelujah",[221,229,240,251],{"value":222,"source":52,"evidence":223},"Balsamiq",[224,225],{"id":70,"by":71,"text":72},{"id":226,"by":227,"text":228},"17153347","pc86","This is why I purchased Balsamiq when I was contracting, even the basic Bootstrap theme, even with bold text saying \"ignore everything design related!!\" I'd still get comments…",{"value":230,"source":52,"evidence":231},"PaperCSS",[232,236],{"id":233,"by":234,"text":235},"17149344","rhyneav","This is amazing, I love the sketched feel to it. I started an open source project in the fall, PaperCSS, that’s in the same category as wiredJS. PaperCSS is like if someone…",{"id":237,"by":238,"text":239},"17149294","p2t2p","PaperCSS looks a bit better imho and they are also working on set of react components.",{"value":241,"source":52,"evidence":242},"Napkin look and feel for Java Swing",[243,247],{"id":244,"by":245,"text":246},"17147585","0x445442","Reminds of the Napkin look and feel for Java Swing apps. I worked on a project where we only demoed the Napkin L&F to our customers until we were feature complete. The idea was…",{"id":248,"by":249,"text":250},"17150452","uryga","Another comment in this thread mentioned a similar project, a Swing \"napkin\" theme, which managed a rough look as normal styling. So I guess Swing did something better than…",{"value":252,"source":52,"evidence":253},"Pencil with Sketchy GUI stencil",[254],{"id":255,"by":256,"text":257},"17148120","dalacv","For a different free version of balsamiq, also check out https:\u002F\u002Fpencil.evolus.vn\u002F and use the Sketchy GUI stencil.",{"comments":259,"answered":260,"key":261},28,8,[262,263,264],{"id":78,"text":79},{"id":90,"text":91},{"id":265,"text":266},"17147894","Yep sliders aren't quite baked yet. Should work on chrome. Thanks for reporting. https:\u002F\u002Fgithub.com\u002Fwiredjs\u002Fwired-slider\u002Fissues\u002F3",{"commenters":268,"max_depth":269,"maker_replies":259,"first_comment_mins":270,"lifespan_hours":271},79,6,43,94,[273,275,279,281,285,287,288,289,292,294,298,300,302,306,309,312,315,316,320,321,324,327,329,331,334,335,338,341,342,343,346,347,349,352,354,359,361,364,367,371,373,375,378,380,383,384,385,387,390,393,395,396,397,400,403,406,409,412,413,416,418,420,423,426,429,432,433,434,435,438,442,444,447,448,451,454,457,459,462,466,468,470,474,476,478,482,484,488,491,493,494,495,497,500,504,507,509,513,516,518,522,526,529,533,535,537,541,543,545,548,550,552,553,557,561,563,565,567,571,573],[78,47,47,274,11,18],"maker\u002Fneutral\u002Fidea",[276,47,46,277,278,47],"17146987","project\u002Fpositive\u002Fexecution","njx",[90,47,47,280,11,18],"project\u002Fneutral\u002Fexecution",[282,47,46,283,284,47],"17150497","project\u002Fpositive\u002Fidea","mathisonian",[138,18,18,286,139,47],"project\u002Fcritical\u002Fexecution",[265,18,47,280,11,18],[142,18,18,286,143,47],[290,18,18,286,291,47],"17148469","myguysi",[293,18,47,280,11,18],"17151880",[295,18,39,296,297,47],"17153253","project\u002Fmixed\u002Fexecution","131012",[299,18,46,277,139,47],"17156483",[301,18,47,280,11,18],"17148488",[303,18,18,304,305,47],"17149692","project\u002Fcritical\u002Fidea","intrasight",[307,18,39,308,305,47],"17149708","project\u002Fneutral\u002Fidea",[310,18,46,277,311,47],"17149937","arbie",[313,18,39,308,314,47],"17150461","kbenson",[248,18,39,308,249,47],[317,18,47,318,319,47],"17153265","other\u002Fneutral\u002Fnone","pjmlp",[129,18,39,296,130,47],[322,18,47,323,11,18],"17149234","project\u002Fneutral\u002Fdesign",[325,18,39,280,326,47],"17149945","mirimir",[328,18,47,280,11,18],"17149967",[330,18,47,280,11,18],"17151884",[332,18,18,286,333,47],"17150199","antoaravinth",[244,34,39,308,245,47],[336,34,47,318,337,47],"17148343","Bjartr",[339,34,47,318,340,47],"17159689","DonHopkins",[55,39,46,283,56,47],[59,39,46,283,60,47],[344,39,39,308,345,47],"17149887","DougWebb",[226,39,39,308,227,47],[348,39,47,318,340,47],"17159586",[350,39,47,318,351,47],"17169903","matt_the_bass",[353,39,47,318,340,47],"17173197",[355,356,46,357,358,47],"17147120",4,"project\u002Fpositive\u002Fdesign","swyx",[360,356,47,280,11,18],"17147148",[362,356,46,357,363,47],"17147174","sandGorgon",[365,356,47,366,11,18],"17147201","project\u002Fneutral\u002Fnone",[368,356,47,369,370,47],"17147184","commenter\u002Fneutral\u002Fnone","spankalee",[372,356,47,369,358,47],"17148535",[374,356,47,369,370,47],"17148759",[376,356,47,369,377,47],"17149383","spicyj",[379,356,47,369,358,47],"17154330",[381,356,47,369,382,47],"17152602","ergo14",[168,356,18,286,169,47],[172,356,39,280,173,47],[386,356,47,280,11,18],"17151476",[388,356,39,280,389,47],"17158799","e111077",[391,356,47,392,358,47],"17154321","other\u002Fcritical\u002Fnone",[394,356,47,277,11,18],"17160063",[185,356,18,286,186,47],[255,356,47,318,256,47],[398,356,47,369,399,47],"17149661","depressedpanda",[401,46,39,308,402,47],"17148194","placebo",[404,46,47,318,405,47],"17148389","mygo",[407,46,46,283,408,47],"17148914","jen729w",[410,46,47,318,411,47],"17151591","zimpenfish",[195,269,39,280,196,47],[414,269,39,280,415,47],"17153453","Diggsey",[199,269,47,417,11,18],"maker\u002Fneutral\u002Fexecution",[233,419,46,357,234,47],7,[421,419,47,369,422,47],"17149444","psetq",[424,260,47,318,425,47],"17148077","k__",[427,42,47,318,428,47],"17147928","tambourine_man",[430,42,47,318,431,47],"17148531","delinka",[109,40,46,283,110,47],[67,40,47,274,11,18],[70,40,46,357,71,47],[436,40,47,318,437,47],"17147086","Angostura",[439,440,47,318,441,47],"17151075",11,"hinkley",[443,440,47,280,11,18],"17151481",[445,44,39,323,446,47],"17149664","capkutay",[206,35,18,304,207,47],[449,35,46,283,450,47],"17148315","ctrl-j",[452,35,47,369,453,47],"17149980","gitgud",[455,16,46,283,456,47],"17151390","npunt",[458,16,47,318,11,18],"17151437",[460,16,46,461,456,47],"17151465","maker\u002Fpositive\u002Fnone",[463,464,39,323,465,47],"17154569",15,"csomar",[467,464,47,280,11,18],"17155128",[469,464,47,318,465,47],"17162561",[471,472,39,308,473,47],"17151329",16,"YorkshireSeason",[475,472,47,308,11,18],"17151494",[117,477,46,357,118,47],17,[479,480,47,318,481,47],"17154550",18,"nshillingford",[113,483,46,357,114,47],19,[485,486,46,357,487,47],"17152938",20,"roddux",[489,486,47,318,490,47],"17153205","fredley",[492,486,47,318,319,47],"17153283",[146,33,18,286,147,47],[189,33,47,280,11,18],[157,496,18,286,158,47],22,[498,496,47,499,11,18],"17147171","maker\u002Fneutral\u002Fnone",[501,502,46,283,503,47],"17151304",23,"dr_jerry",[505,506,39,280,169,47],"17149630",24,[508,506,47,280,11,18],"17160068",[510,511,46,357,512,47],"17150309",25,"lgregg",[514,32,46,357,515,47],"17157421","framestr",[517,32,47,499,11,18],"17157598",[519,32,46,520,521,47],"17160279","maker\u002Fpositive\u002Fdesign","varrock",[523,524,39,308,525,47],"17147429",27,"desireco42",[527,259,46,357,528,47],"17151860","Naushad",[530,531,39,323,532,47],"17150198",29,"nimos",[534,531,47,323,11,18],"17150249",[121,536,46,357,122,47],30,[538,539,39,323,540,47],"17150414",31,"webXL",[542,539,47,323,11,18],"17150467",[544,539,46,461,540,47],"17157098",[237,546,18,547,238,47],32,"project\u002Fcritical\u002Fdesign",[549,546,47,318,234,47],"17149316",[214,551,39,323,215,47],33,[218,551,47,323,11,18],[554,555,47,318,556,47],"17148366",34,"megamindbrian2",[558,559,39,308,560,47],"17150894",35,"PhasmaFelis",[562,559,47,308,11,18],"17151027",[150,564,18,286,151,47],36,[566,564,47,277,11,18],"17151886",[568,569,46,283,570,47],"17147437",37,"osrec",[161,572,18,286,162,47],38,[574,572,47,499,11,18],"17149482",[576,579],{"id":577,"t":578,"points":356,"comments":47},"15187419",1504734837,{"id":4,"t":12,"points":14,"comments":15},[581,586,591,596,601,605],{"id":582,"name":583,"points":584,"category":585},"17173051","Crypto51",581,"finance_crypto",{"id":587,"name":588,"points":589,"category":590},"17147272","Parabola.io",291,"web_saas",{"id":592,"name":593,"points":594,"category":595},"17189652","Writing Streak",262,"productivity",{"id":597,"name":598,"points":599,"category":600},"17180686","Recursive Recipes",250,"consumer_social",{"id":602,"name":603,"points":604,"category":595},"17149371","Clippi.io",208,{"id":606,"name":607,"points":608,"category":609},"17152630","NimForum",186,"infrastructure",false,"v2",{"id":613,"name":5,"line":6,"ai":610,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":614,"top":18,"kw":615,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":616,"url":9,"mix":617,"praise":106,"objection":135,"sub":21},17146451,0.2,[24,25,26,27,28],"5315333135355013135355533535511555551313",[32,33,34,35],1794036566267]