[{"data":1,"prerenderedAt":365},["ShallowReactive",2],{"project-28600804":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"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":34,"aspects":35,"strip":42,"post_text":44,"what":45,"said":74,"maker_in_thread":168,"shape":179,"grid":184,"attempts":327,"same_week":328,"maker_shows":41,"maker_hidden":357,"reader_version":358,"card":359},"28600804","7GUIs in Vanilla HTML, CSS, JavaScript","title","Show HN: 7GUIs in Vanilla HTML, CSS, JavaScript","https:\u002F\u002F7guis.bradwoods.io\u002F","7guis.bradwoods.io","bradwoodsio",1632184908,2021,144,56,345,2533,14,"notable","languages","ui implementation examples","web_app",[23,24,25,26],"vanilla javascript","7guis","gui benchmark","dom state management","mixed",0.113,{"positive":30,"neutral":31,"mixed":32,"critical":33},7,10,1,4,22,{"execution":36,"idea":39,"design":40},{"positive":37,"critical":38},0,3,{"positive":33,"critical":37},{"positive":41,"critical":32},2,[32,37,37,37,38,38,38,43,37,43,37,37,37,37,43,37,37,37,37,37,37,37,38,38,38,43,38,32,37,37,37,37,43,32,38,37,43,32,38,37],5,null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":58,"openness":73,"stage":73,"team_size":73},{"value":47,"source":48,"evidence":49},"Shows how common GUI tasks are built with plain HTML, CSS and JavaScript instead of frameworks","inferred",[50,54],{"id":51,"by":52,"text":53},"28602093","adlpz","These examples are very reassuring to me. Sometimes, after a long day of fighting whatever trendy JS framework my current project uses, I may be tempted to advocate for a \"back…",{"id":55,"by":56,"text":57},"28602564","BiteCode_dev","I like it, and it's also a good example of why a framework will start to be useful if you get more complex code. When we arrive at the CRUD widget,a simple \u003Cscript> dep on…",[59,65,69],{"value":60,"source":61,"evidence":62},"HTML","maker",[63],{"id":64},"post",{"value":66,"source":61,"evidence":67},"CSS",[68],{"id":64},{"value":70,"source":61,"evidence":71},"JavaScript",[72],{"id":64},"unknown",{"praise":75,"objections":89,"requests":129,"questions":141,"alternatives":149},[76,85],{"value":77,"source":78,"evidence":79},"Good teaching example of vanilla DOM and MVC approaches","commenter",[80,84],{"id":81,"by":82,"text":83},"28603856","dsego","I think this is a good teaching example of doing GUIs with the DOM and the MVC approach. It builds up step by step to introduce all the concepts.…",{"id":55,"by":56,"text":57},{"value":86,"source":78,"evidence":87},"Reassuring example of what plain JS can do",[88],{"id":51,"by":52,"text":53},[90,104,119],{"value":91,"source":78,"evidence":92},"Code becomes hard to maintain as state grows in larger apps",[93,96,100],{"id":94,"by":82,"text":95},"28603655","This is what you can end up with, managing all possible state changes manually. I've done this myself with jQuery, show\u002Fhide, enable\u002Fdisable elements. Turns into a game of…",{"id":97,"by":98,"text":99},"28605474","dmix","The problem is when you have a large app with multiple components and plenty of state to manage. These things always look easy when they are small toy isolated projects. This…",{"id":101,"by":102,"text":103},"28604689","fendy3002","It works well until you need to manage many states in one page. Even with knockout js, when an application become a little complex, it become hard to develop.",{"value":105,"source":78,"evidence":106},"Cells example lacks keyboard navigation and has Safari and iOS bugs",[107,111,115],{"id":108,"by":109,"text":110},"28601879","chrismorgan","The cells example would be improved by keeping the top left corner clear by making that cell stick in place and on top: ``` #colHeadings .rowHeading { z-index: 3; top: 0; } ``` I…",{"id":112,"by":113,"text":114},"28601201","wsc981","The Cells example doesn't seem to work properly on my Mac in Safari: https:\u002F\u002F7guis.bradwoods.io\u002Fcells\u002F",{"id":116,"by":117,"text":118},"28607066","whatsapps2020","Cells and Circle do not work on iOS",{"value":120,"source":78,"evidence":121},"Some task UX designs are poor, e.g. CRUD and circle drawer",[122,126],{"id":123,"by":124,"text":125},"28603371","tobr","Imagine if a GUI programming benchmark had GUI specifications with reasonable UX? The 7GUIs designs are criminally bad, especially CRUD and Circle drawer.",{"id":127,"by":124,"text":128},"28603678","I don’t believe that the UX problems here are motivated by reducing complexity. Perhaps the circle drawer one, where any reasonable redesign would turn it into a direct…",[130,134],{"value":131,"source":78,"evidence":132},"Add keyboard navigation to the cells example",[133],{"id":108,"by":109,"text":110},{"value":135,"source":78,"evidence":136},"Add undo\u002Fredo as a requirement",[137],{"id":138,"by":139,"text":140},"28602405","WA","Very cool. I had to code a Cells app in Java back in university, too. One thing though: add undo\u002Fredo to the Cell task as a requirement. After all, \"a good paradigm should give…",[142],{"value":143,"source":78,"evidence":144},"What are the alternatives to managing state manually?",[145],{"id":146,"by":147,"text":148},"28605015","tonetheman","What are the other options here then? Not trolling just wondering. If an app has state it has to be dealt with somewhere...",[150,154,161],{"value":151,"source":78,"evidence":152},"petite-vue",[153],{"id":55,"by":56,"text":57},{"value":155,"source":78,"evidence":156},"SlickGrid",[157],{"id":158,"by":159,"text":160},"28604444","jhgb","> because I've longed for an open source, liberally licensed, spreadsheet component for the web I assume SlickGrid (https:\u002F\u002Fgithub.com\u002F6pac\u002FSlickGrid\u002Fwiki\u002FExamples) didn't…",{"value":162,"source":78,"evidence":163},"React and Vue",[164],{"id":165,"by":166,"text":167},"28609293","Otek","So let's look at the data: According to stateofjs survey: 100% of JS developers know what React is, 80% are using it, 88% are satisfied. There is no \"one size fits all\" but…",{"comments":43,"answered":32,"key":169},[170,173,176],{"id":171,"text":172},"28602299","nodemon was my build tool.",{"id":174,"text":175},"28601944","Good points.",{"id":177,"text":178},"28603547","They are pretty windows 95ish.",{"commenters":180,"max_depth":181,"maker_replies":43,"first_comment_mins":182,"lifespan_hours":183},37,6,64,40,[185,187,191,194,198,199,201,203,205,209,211,212,216,219,222,224,227,229,230,232,233,236,238,241,243,246,247,250,253,256,258,261,264,265,268,269,274,276,278,279,282,284,287,289,292,297,299,301,303,306,308,311,314,316,320,324],[94,37,32,186,82,37],"project\u002Fcritical\u002Fexecution",[188,37,37,189,190,37],"28604194","commenter\u002Fneutral\u002Fnone","jdthedisciple",[192,37,37,193,82,37],"28604380","commenter\u002Fneutral\u002Fidea",[195,37,37,196,197,37],"28604655","commenter\u002Fneutral\u002Fexecution","whalesalad",[97,37,37,193,98,37],[200,37,37,189,82,37],"28605817",[146,37,38,202,147,37],"project\u002Fneutral\u002Fidea",[204,37,38,202,82,37],"28605252",[206,37,38,207,208,37],"28618466","project\u002Fneutral\u002Fexecution","edflsafoiewq",[55,32,43,210,56,37],"project\u002Fpositive\u002Fidea",[81,32,43,210,82,37],[213,41,37,214,215,37],"28602524","other\u002Fneutral\u002Fnone","seer",[217,38,43,210,218,37],"28601465","benatkin",[220,38,37,196,221,37],"28601749","csande17",[223,38,37,189,218,37],"28601818",[225,38,37,189,226,37],"28603575","scns",[228,38,37,189,218,37],"28606006",[158,38,37,214,159,37],[231,38,37,214,218,37],"28608061",[51,33,43,210,52,37],[234,33,37,214,235,37],"28602256","tdeck",[171,33,37,237,10,32],"maker\u002Fneutral\u002Fnone",[239,33,37,214,240,37],"28602374","tonis2",[242,33,37,189,166,37],"28603296",[244,33,37,189,245,37],"28605456","sgc",[165,33,37,189,166,37],[248,33,37,214,249,37],"28602823","rimliu",[251,33,37,214,252,37],"28603581","dspillett",[254,33,37,214,255,37],"28604031","_red",[101,33,37,257,102,37],"other\u002Fneutral\u002Fidea",[259,43,37,257,260,37],"28607965","z3t4",[262,181,38,202,263,37],"28602080","xixixao",[108,30,38,207,109,37],[266,30,38,267,218,37],"28601903","project\u002Fneutral\u002Fdesign",[174,30,37,237,10,32],[270,271,43,272,273,37],"28605691",8,"maker\u002Fpositive\u002Fdesign","brianzelip",[138,275,38,202,139,37],9,[123,31,32,277,124,37],"project\u002Fcritical\u002Fdesign",[177,31,37,267,10,32],[280,31,37,189,281,37],"28603596","aethertron",[127,31,37,283,124,37],"commenter\u002Fneutral\u002Fdesign",[285,31,37,286,281,37],"28604313","other\u002Fneutral\u002Fdesign",[288,31,37,189,124,37],"28607141",[290,31,37,214,291,37],"28605356","yarcob",[293,294,43,295,296,37],"28603092",11,"maker\u002Fpositive\u002Fnone","xupybd",[298,294,38,237,226,37],"28603562",[112,300,32,186,113,37],12,[302,300,37,237,10,32],"28601724",[304,300,38,267,305,37],"28602656","dmitriid",[307,300,37,267,10,32],"28602910",[309,300,43,310,113,37],"28602696","project\u002Fpositive\u002Fdesign",[312,300,38,313,252,37],"28603600","maker\u002Fneutral\u002Fexecution",[116,315,32,186,117,37],13,[317,17,38,318,319,37],"28603937","project\u002Fmixed\u002Fidea","begueradj",[321,322,37,214,323,37],"28601353",15,"splch",[325,322,37,214,326,37],"28602286","phist_mcgee",[],[329,334,338,343,347,352],{"id":330,"name":331,"points":332,"category":333},"28595967","hacker-recommended-books",1359,"learning_science",{"id":335,"name":336,"points":337,"category":333},"28585208","libgen.fun",452,{"id":339,"name":340,"points":341,"category":342},"28587458","I built four eight-foot-long handwriting robots",408,"hardware",{"id":344,"name":345,"points":346,"category":19},"28616043","Motion One",327,{"id":348,"name":349,"points":350,"category":351},"28617596","Noteship",128,"productivity",{"id":353,"name":354,"points":355,"category":356},"28589842","Errorpush",124,"dev_tools",false,"v2",{"id":360,"name":5,"line":5,"ai":357,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":361,"top":17,"kw":362,"maker":10,"domain":9,"tier":18,"attempts":37,"strip":363,"url":8,"mix":364,"praise":77,"objection":91,"sub":20},28600804,0.11,[23,24,25,26],"1000333505000050000000333531000051305130",[30,31,32,33],1794036611453]