[{"data":1,"prerenderedAt":186},["ShallowReactive",2],{"project-41451559":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":32,"aspects":33,"strip":37,"post_text":40,"what":41,"said":63,"maker_in_thread":115,"shape":124,"grid":127,"attempts":146,"same_week":147,"maker_shows":176,"maker_hidden":177,"reader_version":178,"card":179},"41451559","TinyJS","A better way of writing HTML via JavaScript?","title","Show HN: A better way of writing HTML via JavaScript?",null,"atum47",1725489054,2024,7,9,2973,3515,85,"shown","dev_tools","html helper library","library",[23,24,25,26],"html in javascript","createelement","jsx alternative","dom helper","debated",0.022,{"positive":30,"neutral":31,"mixed":31,"critical":30},2,1,6,{"idea":34,"design":35},{"positive":31,"critical":30},{"positive":31,"critical":36},0,[38,36,39,31,36,36,38,31,39],5,3,"Although I've been using React for at least 5 years now, I don't quite like frameworks. For personal projects I sometimes use web component but they can be over kill depending on what you are trying to achieve. I do like JSX though. I think it's quite neat to be able to write HTML inside of JavaScript code. With that in mind, I've been trying to come up with a way to better create HTML dynamically.\n\nSomething along the lines of:\n\n\n```\n  const req = await fetch('api.com\u002Fposts')   const data = await req.json()   for (const d of data)     createPost(d)  \n```\n For that, I end up writing this piece",{"problem":42,"audience":9,"pricing":9,"motivation":48,"time_to_build":9,"stack":55,"openness":60,"stage":61,"team_size":62},{"value":43,"source":44,"evidence":45},"Verbose document.createElement and append calls when building HTML dynamically","maker",[46],{"id":47},"post",{"value":49,"source":44,"evidence":50},"Create HTML dynamically with less code and no framework",[51,52],{"id":47},{"id":53,"by":10,"text":54},"41457915","I guess most people did not understand what I was trying to achieve with this code snippet; I'm trying, with the less amount of code possible, to create HTML elements…",[56],{"value":57,"source":44,"evidence":58},"JavaScript",[59],{"id":47},"open_source","beta","solo",{"praise":64,"objections":73,"requests":89,"questions":97,"alternatives":98},[65],{"value":66,"source":67,"evidence":68},"Elegant and simple approach","commenter",[69],{"id":70,"by":71,"text":72},"41460750","felipeccastro","I like it. It’s an elegant solution and you can easily make higher order components from this.",[74,85],{"value":75,"source":67,"evidence":76},"Reinvents existing JSX and hyperscript approaches",[77,81],{"id":78,"by":79,"text":80},"41451654","ssahoo","Congratulations! You have reinvented Hyper script\u002Fjsx.",{"id":82,"by":83,"text":84},"41466669","meiraleal","Everybody understood what you asked chatgpt to generate, Victor. We just don't find it good or new. Btw you should check for JS Proxies, it can improve a lot your code. I will…",{"value":86,"source":67,"evidence":87},"Code looks like generated boilerplate rather than new work",[88],{"id":82,"by":83,"text":84},[90],{"value":91,"source":67,"evidence":92},"Use JS Proxies for a nicer API",[93,94],{"id":82,"by":83,"text":84},{"id":95,"by":83,"text":96},"41466658","you can improve that using Proxy to make it like: ``` $.h1`My Blog Post`, $.div.body( $.p`My First blog post` ) ``` ... that would be a much better API. Also, there is a very…",[],[99,107,111],{"value":100,"source":67,"evidence":101},"Lit \u002F lit-html",[102,106],{"id":103,"by":104,"text":105},"41453728","dtagames","Lit is an easy way to create HTML with JS. It's a very thin layer over standard web components. https:\u002F\u002Flit.dev",{"id":82,"by":83,"text":84},{"value":108,"source":67,"evidence":109},"Hyperscript \u002F JSX",[110],{"id":78,"by":79,"text":80},{"value":112,"source":67,"evidence":113},"TiniJS",[114],{"id":95,"by":83,"text":96},{"comments":39,"answered":31,"key":116},[117,120,123],{"id":118,"text":119},"41451885","This was so nice. I really appreciate it. I've been using this $ notation to simplify the selection and creation of HTML elements (inspired by Jquery) for a while now. My goal…",{"id":121,"text":122},"41466320","ok, so, from this ideia came TinyJS and I just released it on GitHub https:\u002F\u002Fgithub.com\u002Fvictorqribeiro\u002FTinyJS",{"id":53,"text":54},{"commenters":32,"max_depth":30,"maker_replies":39,"first_comment_mins":125,"lifespan_hours":126},15,40,[128,132,133,135,137,139,141,143,144],[129,36,38,130,131,36],"41451733","maker\u002Fpositive\u002Fidea","breck",[118,36,36,130,10,31],[103,31,39,134,104,36],"project\u002Fneutral\u002Fidea",[78,30,31,136,79,36],"project\u002Fcritical\u002Fidea",[121,39,36,138,10,31],"project\u002Fneutral\u002Fexecution",[53,140,36,134,10,31],4,[70,140,38,142,71,36],"project\u002Fpositive\u002Fdesign",[82,140,31,136,83,36],[95,38,39,145,83,36],"project\u002Fmixed\u002Fdesign",[],[148,152,157,161,166,171],{"id":149,"name":150,"points":151,"category":19},"41416714","Linkpreview",362,{"id":153,"name":154,"points":155,"category":156},"41444855","tetris-sql",338,"games",{"id":158,"name":159,"points":160,"category":156},"41424371","Defrag the Game",326,{"id":162,"name":163,"points":164,"category":165},"41448439","AlphaFold3",314,"ai",{"id":167,"name":168,"points":169,"category":170},"41389176","solar concentrator",296,"hardware",{"id":172,"name":173,"points":174,"category":175},"41424954","Broadcast Box",283,"infrastructure",53,false,"v2",{"id":180,"name":5,"line":6,"ai":177,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":181,"top":17,"kw":182,"maker":10,"domain":183,"tier":18,"attempts":36,"strip":184,"url":-1,"mix":185,"praise":66,"objection":75,"sub":20},41451559,0.02,[23,24,25,26],"","503100513",[30,31,31,30],1794036660477]