[{"data":1,"prerenderedAt":271},["ShallowReactive",2],{"project-38149422":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":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":43,"post_text":44,"what":45,"said":63,"maker_in_thread":144,"shape":153,"grid":158,"attempts":232,"same_week":233,"maker_shows":262,"maker_hidden":263,"reader_version":264,"card":265},"38149422","Hyphen","an elegant custom element base class with good ergonomics","title","Show HN: Hyphen – an elegant custom element base class with good ergonomics","https:\u002F\u002Fgithub.com\u002F00000o1\u002F-","github.com","keepamovin",1699174160,2023,36,32,1276,3109,42,"shown","languages","web component library","library",[24,25,26,27],"web components","custom elements","javascript","base class","mixed",-0.333,{"positive":31,"neutral":32,"mixed":33,"critical":32},0,7,2,16,{"execution":36,"privacy":38,"design":40,"docs":41,"idea":42},{"positive":31,"critical":37},1,{"positive":31,"critical":39},3,{"positive":31,"critical":37},{"positive":31,"critical":33},{"positive":31,"critical":31},[39,31,31,31,37,31,37,31,37,37,31,31,31,31,31,31,31,31,39,39,37,37,39,39,39,37,31,31,39,39,39,31],null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":54,"openness":62,"stage":62,"team_size":62},{"value":47,"source":48,"evidence":49},"Web component spec is bare, so reusable rote boilerplate gets custom-implemented","commenter",[50],{"id":51,"by":52,"text":53},"38150758","deanebarker","This is correct. It's a wrapper around web components, kind of like Lit (which they credit in the acknowledgements). Web components are cool, but the spec is bare. This means, a…",[55],{"value":56,"source":48,"evidence":57},"JavaScript",[58],{"id":59,"by":60,"text":61},"38154347","evan_","Here’s the function that evaluates the template: ``` with (this.state) { return eval(`(function $ {this.template.toString().replace(\u002F^\\s*function\\s+\u002F,'')}())`); } ``` So it’s…","unknown",{"praise":64,"objections":80,"requests":110,"questions":126,"alternatives":135},[65,75],{"value":66,"source":48,"evidence":67},"Clever and elegant code, good ergonomics",[68,72],{"id":69,"by":70,"text":71},"38153053","catapart","Odd that they chose to use the unsafe \"eval\", where there's a drop-in, safe(r) replacement with ``` const properties = Object.keys(injections); const values =…",{"id":73,"by":11,"text":74},"38158210","Thank you for your kind words about Hyphen, catapart! And that is a very sweet little thing, the code. I like your bloody clever little code hack, that is pretty cool. I modified…",{"value":76,"source":48,"evidence":77},"Good to see alternative approaches to web components",[78,79],{"id":69,"by":70,"text":71},{"id":73,"by":11,"text":74},[81,92,103],{"value":82,"source":48,"evidence":83},"Uses eval, which is unsafe and breaks CSP",[84,85,89],{"id":69,"by":70,"text":71},{"id":86,"by":87,"text":88},"38151707","morbicer","Fair warning about the use of eval in the readme. Anyone caring about CSP headers can't use this project and that anyone should be everyone even though the CSP header is PITA to…",{"id":90,"by":87,"text":91},"38159621","Imho same problem as eval and on top of that it creates the function only in the global scope. Honestly it's a construct I've never seen out in the wild so I am not an expert.",{"value":93,"source":48,"evidence":94},"README was unclear about what the project does",[95,99],{"id":96,"by":97,"text":98},"38150356","rco8786","I read the entire README and have absolutely zero idea what Hypen does (and I am a relatively experienced javascript\u002Freact programmer). Perhaps a 1-2 sentence explanation, plus…",{"id":100,"by":101,"text":102},"38150840","andybak","Me neither. \"An elegant custom element base class\" could relate to any programming language. I skim the page and see angle brackets - so it's browser-related. Great - but for…",{"value":104,"source":48,"evidence":105},"Name $ may conflict with jQuery-style naming",[106],{"id":107,"by":108,"text":109},"38150977","garrettjoecox","I’d suggest not naming the your main interface of your library “$”, for various obvious reasons.",[111,119],{"value":112,"source":48,"evidence":113},"Add a clearer one-sentence explanation and code examples",[114,115],{"id":96,"by":97,"text":98},{"id":116,"by":117,"text":118},"38150980","dhimes","Thank you. That would be a great leading paragraph on their web page if anyone from the project is reading this.",{"value":120,"source":48,"evidence":121},"Link custom element term to a definition",[122],{"id":123,"by":124,"text":125},"38155667","verisimilidude","It's really clear to me. (And I did account for the subsequent README commits since your comment). But that's probably because I already know Web Components well. I'm in the…",[127],{"value":128,"source":48,"evidence":129},"How does the template scope variables like greeting and host",[130,134],{"id":131,"by":132,"text":133},"38153059","spankalee","How does something like this work: ``` template() { return ` \u003Cspan>$ {greeting}, $ {host.name}!\u003C\u002Fspan> \u003Cbutton onclick=\"changeGreeting\">Change Greeting\u003C\u002Fbutton> `; } ``` I don't…",{"id":59,"by":60,"text":61},[136,140],{"value":137,"source":48,"evidence":138},"Lit",[139],{"id":51,"by":52,"text":53},{"value":141,"source":48,"evidence":142},"jQuery",[143],{"id":107,"by":108,"text":109},{"comments":32,"answered":37,"key":145},[146,147,150],{"id":73,"text":74},{"id":148,"text":149},"38172930","Your answer is fantastic! You're a really cool person. I like how you handle each point comprehensively and informatively and maintain a friendly tone throughout. And very funny…",{"id":151,"text":152},"38158234","That's a good point re CSP, while I don't want to restrict it, I also don't want to restrict developers. For example, unsafe-inline may even be required as we use inline event…",{"commenters":154,"max_depth":155,"maker_replies":32,"first_comment_mins":156,"lifespan_hours":157},18,6,185,43,[159,161,164,166,167,170,171,172,174,175,177,180,183,186,188,191,194,197,200,202,204,207,210,213,215,216,217,220,223,226,228,230],[69,31,39,160,70,31],"project\u002Fmixed\u002Fexecution",[162,31,31,163,132,31],"38153134","commenter\u002Fneutral\u002Fnone",[165,31,31,163,70,31],"38153291",[73,31,31,163,11,37],[168,31,37,169,70,31],"38162075","project\u002Fcritical\u002Fprivacy",[148,31,31,163,11,37],[86,37,37,169,87,31],[151,37,31,173,11,37],"project\u002Fneutral\u002Fprivacy",[90,37,37,169,87,31],[107,33,37,176,108,31],"project\u002Fcritical\u002Fdesign",[178,33,31,163,179,31],"38151217","regularfry",[181,33,31,182,101,31],"38151925","other\u002Fneutral\u002Fnone",[184,33,31,182,185,31],"38153305","dr_kiszonka",[187,33,31,182,101,31],"38154133",[189,33,31,182,190,31],"38159879","eternityforest",[192,33,31,182,193,31],"38154745","troupo",[195,33,31,182,196,31],"38152216","explaininjs",[198,33,31,199,11,37],"38158320","maker\u002Fneutral\u002Fdesign",[131,39,39,201,132,31],"project\u002Fneutral\u002Fdocs",[59,39,39,203,60,31],"project\u002Fneutral\u002Fexecution",[205,39,37,206,132,31],"38155163","project\u002Fcritical\u002Fexecution",[96,208,37,209,97,31],4,"project\u002Fcritical\u002Fdocs",[211,208,39,201,212,31],"38150702","dmix",[51,208,39,214,52,31],"project\u002Fneutral\u002Fidea",[116,208,39,201,117,31],[100,208,37,209,101,31],[218,208,31,219,11,37],"38150946","maker\u002Fneutral\u002Fnone",[221,208,31,222,11,37],"38150931","maker\u002Fneutral\u002Fdocs",[224,208,39,201,225,31],"38152184","croes",[227,208,39,201,97,31],"38157749",[123,208,39,229,124,31],"project\u002Fmixed\u002Fdocs",[231,208,31,219,11,37],"38158569",[],[234,239,243,248,252,257],{"id":235,"name":236,"points":237,"category":238},"38167363","Inshellisense",388,"dev_tools",{"id":240,"name":241,"points":242,"category":238},"38161452","Ladder",377,{"id":244,"name":245,"points":246,"category":247},"38155544","WireHub",312,"infrastructure",{"id":249,"name":250,"points":251,"category":238},"38152109","Sshx",242,{"id":253,"name":254,"points":255,"category":256},"38194586","Bulletpapers",178,"ai",{"id":258,"name":259,"points":260,"category":261},"38108044","DoltgreSQL",162,"data",31,false,"v2",{"id":266,"name":5,"line":6,"ai":263,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":267,"top":18,"kw":268,"maker":11,"domain":10,"tier":19,"attempts":31,"strip":269,"url":9,"mix":270,"praise":66,"objection":82,"sub":21},38149422,-0.33,[24,25,26,27],"30001010110000000033113331003330",[31,32,33,32],1794036644287]