[{"data":1,"prerenderedAt":341},["ShallowReactive",2],{"project-11213475":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":42,"post_text":44,"what":45,"said":74,"maker_in_thread":182,"shape":192,"grid":195,"attempts":302,"same_week":303,"maker_shows":43,"maker_hidden":333,"reader_version":334,"card":335},"11213475","Flexbox Defense","learn CSS flexbox by playing a tower defense game","title","Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game","http:\u002F\u002Fwww.flexboxdefense.com","flexboxdefense.com","ChanningAllen",1456956982,2016,243,42,101,2264,5,"notable","learning_science","interactive css tutorial","web_app",[24,25,26,27],"learn flexbox","css tutorial","flexbox game","css learning","debated",0.216,{"positive":31,"neutral":32,"mixed":33,"critical":32},11,7,3,28,{"execution":36,"docs":38,"design":39,"idea":41},{"positive":37,"critical":18},0,{"positive":33,"critical":37},{"positive":40,"critical":40},2,{"positive":18,"critical":37},[37,43,43,33,37,37,43,37,33,37,43,18,33,37,33,37,18,43,18,37,43,33,33,37,33,18,33,37,43,37,18,33,37,18,18,37,18,18,33,18],1,null,{"problem":46,"audience":53,"pricing":44,"motivation":62,"time_to_build":44,"stack":66,"openness":71,"stage":72,"team_size":73},{"value":47,"source":48,"evidence":49},"Learning CSS flexbox layout properties","maker",[50],{"id":51,"by":11,"text":52},"11213548","Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox…",{"value":54,"source":55,"evidence":56},"People learning CSS flexbox","inferred",[57,58],{"id":51,"by":11,"text":52},{"id":59,"by":60,"text":61},"11215071","nickonline","This is fantastic as I've just started learning flex-boxes, I did have one problem using it, there's no stop button once the circles start flowing!",{"value":63,"source":48,"evidence":64},"Love of tower defense games and wanting to teach flexbox; also a way to learn Ember.js",[65],{"id":51,"by":11,"text":52},[67],{"value":68,"source":48,"evidence":69},"Ember.js",[70],{"id":51,"by":11,"text":52},"open_source","launched","unknown",{"praise":75,"objections":96,"requests":130,"questions":162,"alternatives":174},[76],{"value":77,"source":78,"evidence":79},"Fun and effective way to learn flexbox","commenter",[80,84,88,92],{"id":81,"by":82,"text":83},"11213884","avonwodahs","Definitely helpful to understanding flexbox. It took me a while to notice the help '?' icon to bring the tooltip back up.",{"id":85,"by":86,"text":87},"11215095","briantmaurer","This is great. I have been meaning to learn the CSS flex box model and thanks to this game it took only a few minutes!",{"id":89,"by":90,"text":91},"11216307","Vignitus","Great tutorial !",{"id":93,"by":94,"text":95},"11216698","song","Really fun, I enjoyed playing all the waves... Would definitely be cool to have more challenge levels with maybe css transitions to move the tower while the wave is happening :-)",[97,108,119],{"value":98,"source":78,"evidence":99},"Switching browser tabs breaks the game and loses points",[100,104],{"id":101,"by":102,"text":103},"11214113","Etheryte","Cool game, but switching tabs breaks the game, you lose all points you didn't yet earn.",{"id":105,"by":106,"text":107},"11215025","wingerlang","Pretty cool. Buggy when changing tabs and I wish there were a speedup button (I don't like tower defence games).",{"value":109,"source":78,"evidence":110},"Justify-content space-between misplaces towers in Firefox",[111,115],{"id":112,"by":113,"text":114},"11213932","evunveot","In Firefox on Linux (44.0.2), Wave 3 don't seem to be working as intended because for the second tower group you've got: ``` div.board__tower-group div.tower-group__tower…",{"id":116,"by":117,"text":118},"11214031","Legion","On Wave 3, \"justify-content: space-between\" appears to position incorrectly on Firefox 44 on OS X: http:\u002F\u002Fi.imgur.com\u002Fnx6hROH.png On Chrome, it positions the turrets on the edges…",{"value":120,"source":78,"evidence":121},"Editor shakes on validation, blocking the help button",[122,126],{"id":123,"by":124,"text":125},"11215685","rootlocus","A suggestion: don't wiggle the editor when there's a problem, or move the help icon outside. I wanted to check the \"?\" icon a couple of times, but couldn't click it because it…",{"id":127,"by":128,"text":129},"11215237","unholiness","Okay, but this validation happens instead of opening the help dialog. Whatever event triggers there eats the button click. When typing an incorrect input, the first place a user…",[131,139,147,154],{"value":132,"source":78,"evidence":133},"Speed up button",[134,138],{"id":135,"by":136,"text":137},"11216090","M4v3R","While you're at it, a \"Speed up\" button would be handy as well :).",{"id":105,"by":106,"text":107},{"value":140,"source":78,"evidence":141},"Ability to move towers during waves",[142,146],{"id":143,"by":144,"text":145},"11213895","kearneyandy","This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.",{"id":93,"by":94,"text":95},{"value":148,"source":78,"evidence":149},"More waves covering flex-grow and flex-shrink",[150],{"id":151,"by":152,"text":153},"11216679","Flimm","This is cool, I'm looking forwarding to the next waves to be released, as I would love to try other properties like flex-grow and flex-shrink.",{"value":155,"source":78,"evidence":156},"Restart or stop wave controls",[157,161],{"id":158,"by":159,"text":160},"11214078","jtokoph","Very cool! Would love to be able to stop mid wave and tweak a mistake instead of waiting for the whole thing to finish\u002Frefresh. Sucks having to retype my rules all over again too.",{"id":59,"by":60,"text":61},[163],{"value":164,"source":78,"evidence":165},"Why the Firefox layout bug happens only on some platforms",[166,170],{"id":167,"by":168,"text":169},"11214214","sethish","Can someone explain to me why this only happens on linux?",{"id":171,"by":172,"text":173},"11214309","labster","No, because it's not a Linux only bug. There's a Mac OS X report below, which I can confirm.",[175],{"value":176,"source":78,"evidence":177},"Flexbox Froggy",[178],{"id":179,"by":180,"text":181},"11217741","evolve2k","Another fun 'learn flexbox' games is Flexbox Froggy http:\u002F\u002Fflexboxfroggy.com",{"comments":183,"answered":40,"key":184},10,[185,186,189],{"id":51,"text":52},{"id":187,"text":188},"11214320","Ah, thanks for the tip. Looking into it.",{"id":190,"text":191},"11220243","Just put in a fix which works on Mac OS X and should work on Linux as well.",{"commenters":193,"max_depth":18,"maker_replies":183,"first_comment_mins":31,"lifespan_hours":194},33,34,[196,198,200,203,205,207,209,212,213,217,221,223,227,229,232,233,235,237,238,243,247,250,251,254,255,257,260,263,268,270,271,273,275,276,278,279,284,286,290,292,295,297],[51,37,37,197,11,43],"maker\u002Fneutral\u002Fidea",[112,37,43,199,113,37],"project\u002Fcritical\u002Fexecution",[201,37,43,199,202,37],"11214092","eponeponepon",[167,37,33,204,168,37],"project\u002Fneutral\u002Fexecution",[171,37,37,206,172,37],"commenter\u002Fneutral\u002Fexecution",[187,37,37,208,11,43],"maker\u002Fneutral\u002Fexecution",[210,37,43,199,211,37],"11215941","foggy80",[190,37,37,208,11,43],[214,37,33,215,216,37],"11214583","project\u002Fneutral\u002Fdocs","groby_b",[218,37,37,219,220,37],"11214605","commenter\u002Fneutral\u002Fdocs","littleajax",[123,37,43,222,124,37],"project\u002Fcritical\u002Fdesign",[224,37,18,225,226,37],"11216086","maker\u002Fpositive\u002Fidea","molsson",[158,43,33,228,159,37],"project\u002Fneutral\u002Fdesign",[230,43,37,231,11,43],"11214324","maker\u002Fneutral\u002Fdesign",[135,43,33,228,136,37],[234,43,37,231,11,43],"11215231",[81,40,18,236,82,37],"project\u002Fpositive\u002Fdocs",[116,33,43,199,117,37],[239,240,18,241,242,37],"11214076",4,"project\u002Fpositive\u002Fidea","d0m",[244,240,37,245,246,37],"11215274","commenter\u002Fneutral\u002Fidea","yoklov",[248,240,37,245,249,37],"11215957","progx",[101,18,43,199,102,37],[179,252,33,253,180,37],6,"project\u002Fneutral\u002Fidea",[143,32,33,253,144,37],[256,32,37,197,11,43],"11214063",[258,32,33,253,259,37],"11214212","bburky",[261,32,18,241,262,37],"11214858","benjaminjt",[264,265,33,266,267,37],"11214932",8,"project\u002Fmixed\u002Fdesign","rajangdavis",[269,265,37,231,11,43],"11214971",[127,265,43,222,128,37],[272,265,37,231,11,43],"11215758",[93,274,18,241,94,37],9,[59,183,33,266,60,37],[277,183,37,231,11,43],"11215243",[151,31,18,241,152,37],[280,281,18,282,283,37],"11222181",12,"project\u002Fpositive\u002Fdesign","reustle",[285,281,37,231,11,43],"11222695",[287,288,18,282,289,37],"11216650",13,"Rezouce",[85,291,18,236,86,37],14,[105,293,33,294,106,37],15,"project\u002Fmixed\u002Fexecution",[89,296,18,236,90,37],16,[298,299,18,300,301,37],"11215199",17,"project\u002Fpositive\u002Fnone","cristianjd",[],[304,309,314,319,323,328],{"id":305,"name":306,"points":307,"category":308},"11192398","Bitfly",239,"security_privacy",{"id":310,"name":311,"points":312,"category":313},"11211344","Sensible Bash",173,"dev_tools",{"id":315,"name":316,"points":317,"category":318},"11187507","Wifi",153,"consumer_social",{"id":320,"name":321,"points":322,"category":308},"11188686","siga",149,{"id":324,"name":325,"points":326,"category":327},"11174815","CuriosityStream",129,"web_saas",{"id":329,"name":330,"points":331,"category":332},"11191394","54.86.121.4",126,"ai",false,"v2",{"id":336,"name":5,"line":6,"ai":333,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":337,"top":18,"kw":338,"maker":11,"domain":10,"tier":19,"attempts":37,"strip":339,"url":9,"mix":340,"praise":77,"objection":98,"sub":21},11213475,0.22,[24,25,26,27],"0113001030153030515013303530105305505535",[31,32,33,32],1794036541655]