[{"data":1,"prerenderedAt":486},["ShallowReactive",2],{"project-23920987":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":35,"aspects":36,"strip":46,"post_text":47,"what":48,"said":90,"maker_in_thread":207,"shape":209,"grid":213,"attempts":449,"same_week":450,"maker_shows":18,"maker_hidden":478,"reader_version":479,"card":480},"23920987","css-sweeper","MineSweeper implemented in 100% CSS and HTML – no JavaScript","title","Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript","https:\u002F\u002Fgithub.com\u002Fpropjockey\u002Fcss-sweeper#readme","github.com","JaneOri",1595448233,2020,390,92,89,3028,3,"legend","games","browser minesweeper game","web_app",[24,25,26,27],"minesweeper","css","no javascript","html","curious",-0.193,{"positive":31,"neutral":32,"mixed":33,"critical":34},11,27,0,14,52,{"execution":37,"idea":39,"performance":42,"design":44,"docs":45},{"positive":18,"critical":38},5,{"positive":40,"critical":41},4,1,{"positive":41,"critical":43},7,{"positive":41,"critical":33},{"positive":33,"critical":41},[38,33,33,33,33,18,41,18,18,18,18,38,38,41,18,18,41,18,18,33,38,33,18,18,18,18,18,41,41,33,33,33,41,38,38,41,41,41,33,33],null,{"problem":49,"audience":60,"pricing":47,"motivation":65,"time_to_build":72,"stack":76,"openness":87,"stage":88,"team_size":89},{"value":50,"source":51,"evidence":52},"Demonstrates how far CSS alone can go; a technical experiment rather than a practical need","commenter",[53,57],{"id":54,"by":55,"text":56},"23920992","James0x57","I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results! I linked to the README since any web devs that…",{"id":58,"by":55,"text":59},"23921959","This took ~3.25 days. :) Since I'm brushing up against the limits of CSS, there's not enough room for a full year :P",{"value":61,"source":62,"evidence":63},"Web developers interested in CSS techniques","inferred",[64],{"id":54,"by":55,"text":56},{"value":66,"source":51,"evidence":67},"Fun, and to test the limits of CSS",[68,69],{"id":54,"by":55,"text":56},{"id":70,"by":55,"text":71},"23922621","I made a Binary Coded Decimal 7 Segment Display Decoder a couple days prior to starting this: https:\u002F\u002Fgithub.com\u002Fpropjockey\u002Fbcd7sdd After that blew up on twitter I tried thinking…",{"value":73,"source":51,"evidence":74},"About 3.25 days",[75],{"id":58,"by":55,"text":59},[77,83],{"value":78,"source":79,"evidence":80},"HTML","maker",[81],{"id":82},"post",{"value":84,"source":79,"evidence":85},"CSS",[86],{"id":82},"open_source","launched","solo",{"praise":91,"objections":113,"requests":159,"questions":177,"alternatives":192},[92,106],{"value":93,"source":51,"evidence":94},"Impressive technical feat and clever CSS hacks",[95,99,103],{"id":96,"by":97,"text":98},"23922617","ceocoder","That is impressive, just impressive. Brought back some fond memories of installing Windows XP over and over again for family and friends with fckgw rhqq2 yxrkt 8tg6w and playing…",{"id":100,"by":101,"text":102},"23928993","cnees","Thanks! I use scroll position to keep the state. In effect, each square is in a div with overflow:hidden. (In the actual code I used \u003Ci>, not \u003Cdiv>, which might've been to save…",{"id":104,"by":55,"text":105},"23930144","wow, that's super clever. I was sitting here reading the code and didn't find a negative margin or positional property anywhere, and further, no switches to hold the state.…",{"value":107,"source":51,"evidence":108},"Fun nostalgia for Minesweeper",[109,110],{"id":96,"by":97,"text":98},{"id":111,"by":101,"text":112},"23925039","No way! I've done exactly the same thing. (https:\u002F\u002Fnews.ycombinator.com\u002Fitem?id=15479160) At first I thought this was my own thread! I guess there's a healthy overlap between…",[114,129,148],{"value":115,"source":51,"evidence":116},"Very slow and CPU-heavy, locks up browsers",[117,121,125],{"id":118,"by":119,"text":120},"23924147","zootboy","Indeed. This pegged a CPU core and locked up my browser for over a minute just opening the page.",{"id":122,"by":123,"text":124},"23921707","draw_down","This is very slow in my browser, which I don't mean as a criticism. Just refreshing to see something be slow that uses no JS at all :D",{"id":126,"by":127,"text":128},"23921286","kanobo","That's crazy! The large lag between clicking and the UI updating is slightly annoying, but that's just me nitpicking at something other than the cool technical feat.",{"value":130,"source":51,"evidence":131},"Does not work on iOS\u002FSafari",[132,136,140,144],{"id":133,"by":134,"text":135},"23924813","Diskutant","Doesn’t work on iOS?",{"id":137,"by":138,"text":139},"23925293","faeyanpiraat","Can confirm",{"id":141,"by":142,"text":143},"23922410","buryat","doesn't work in Safari",{"id":145,"by":146,"text":147},"23922380","lostgame","Doesn’t work on mobile? Safari \u002F iOS 13.4.1 here.",{"value":149,"source":51,"evidence":150},"Lacks instructions; flagging is unintuitive",[151,155],{"id":152,"by":153,"text":154},"23947419","roryokane","I was so confused why everyone was saying the game is so impressive when all my clicks did nothing but place a ‘?’ where I clicked. Was each ‘?’ an error message? No, it turned…",{"id":156,"by":157,"text":158},"23922890","Sniffnoy","I'm confused -- how do I flag? Right-clicking seems to just bring up the right-click menu. Edit: Nevermind, figured it out. You click on the flag up top to switch between…",[160,170],{"value":161,"source":51,"evidence":162},"Explain how the timer and state work",[163,167],{"id":164,"by":165,"text":166},"23921499","osrec","Very interesting! Can I ask, how did you implement the timer in CSS\u002FHTML? And also, what causes the lack of responsiveness?",{"id":168,"by":55,"text":169},"23927854","This is awesome - Could you please explain how you're holding state of each box individually without checkbox:checked? It's not immediately obvious to me how that's possible or…",{"value":171,"source":51,"evidence":172},"Test on smaller grids",[173],{"id":174,"by":175,"text":176},"23921785","Tempest1981","I'm curious how it performs on a 10x10 or 16x16 grid",[178,185],{"value":179,"source":51,"evidence":180},"Is CSS\u002FHTML Turing complete?",[181],{"id":182,"by":183,"text":184},"23922028","aaroninsf","Idle question, is CSS\u002FHTML turing complete? If so I look forward to a Show HN of a CSS\u002FHTML emulator of JSMESS emulating a 386 running Windows 98.",{"value":186,"source":51,"evidence":187},"How to detect right-click versus left-click in CSS",[188],{"id":189,"by":190,"text":191},"23925657","LoSboccacc","both lack the left+right click that reveals tiles around numbers that have the sufficient amount of bomb marked, I'm curious what's the css\u002Fhtml limitation that prevents the…",[193,200],{"value":194,"source":51,"evidence":195},"Other CSS-only games such as a checkbox-based game by onion2k",[196],{"id":197,"by":198,"text":199},"23921796","onion2k","Very cool. CSS can do some amazing stuff these days. I made a game using moving checkboxes recently - https:\u002F\u002Fcodepen.io\u002Fonion2k\u002Fpen\u002FqBbKYee - with a timer and scoring. It's a…",{"value":201,"source":51,"evidence":202},"Standard JavaScript Minesweeper sites like play-minesweeper.com",[203],{"id":204,"by":205,"text":206},"23922338","seangrogg","It is rather ironic that the chief complaints about JS are how it makes things bloated and unresponsive, yet this is 100x the size of http:\u002F\u002Fwww.play-minesweeper.com and the time…",{"comments":33,"answered":33,"key":208},[],{"commenters":210,"max_depth":211,"maker_replies":33,"first_comment_mins":33,"lifespan_hours":212},57,6,59,[214,216,218,222,224,228,230,233,236,239,242,245,248,250,253,255,256,259,262,264,266,268,269,271,273,274,275,278,279,281,283,286,289,292,293,296,298,302,304,307,308,312,315,316,318,321,323,326,329,332,335,339,341,343,345,347,349,352,354,358,359,363,364,368,371,374,376,379,382,385,388,391,393,397,400,402,405,409,413,416,420,422,424,426,428,433,435,437,440,442,444,447],[54,33,18,215,55,33],"maker\u002Fneutral\u002Fnone",[96,33,38,217,97,33],"project\u002Fpositive\u002Fexecution",[219,33,33,220,221,33],"23922797","commenter\u002Fneutral\u002Fnone","krrrh",[223,33,33,220,97,33],"23922903",[225,33,33,226,227,33],"23922889","other\u002Fneutral\u002Fnone","Aeolun",[229,33,33,226,97,33],"23922943",[231,33,33,226,232,33],"23923979","panda88888",[234,33,33,226,235,33],"23922700","jonny_eh",[237,33,33,220,238,33],"23923414","ARandomerDude",[240,33,33,226,241,33],"23929548","pedrocx486",[243,33,33,226,244,33],"23924519","atoav",[246,33,18,215,247,33],"23922814","elteto",[249,33,33,220,55,33],"23922856",[251,33,33,220,252,33],"23922896","Sebb767",[133,33,41,254,134,33],"project\u002Fcritical\u002Fexecution",[137,33,41,254,138,33],[257,33,18,258,134,33],"23926406","project\u002Fneutral\u002Fexecution",[260,33,18,261,55,33],"23927977","maker\u002Fneutral\u002Fexecution",[263,33,41,254,134,33],"23939447",[111,33,38,265,101,33],"project\u002Fpositive\u002Fidea",[267,33,18,258,101,33],"23925117",[189,33,18,258,190,33],[270,33,18,258,55,33],"23927762",[272,33,33,220,190,33],"23927775",[168,33,18,258,55,33],[100,33,18,261,101,33],[276,33,38,217,277,33],"23930067","uxamanda",[104,33,38,217,55,33],[280,41,38,265,277,33],"23922401",[282,41,33,220,55,33],"23922660",[126,284,41,285,127,33],2,"project\u002Fcritical\u002Fperformance",[287,284,41,285,288,33],"23921642","distrill",[290,284,18,291,55,33],"23921677","project\u002Fneutral\u002Fperformance",[174,284,18,291,175,33],[294,284,18,291,295,33],"23922012","owl57",[297,284,33,226,252,33],"23922917",[299,284,33,300,301,33],"23932429","commenter\u002Fneutral\u002Fperformance","megablast",[303,284,33,220,288,33],"23922973",[305,18,41,285,306,33],"23922234","jedberg",[118,18,41,285,119,33],[309,18,38,310,311,33],"23924597","project\u002Fpositive\u002Fperformance","AlfeG",[313,18,18,291,314,33],"23925991","rnestler",[197,40,33,226,198,33],[317,40,33,220,55,33],"23921824",[319,40,33,226,320,33],"23922288","elliekelly",[322,40,33,226,277,33],"23930092",[324,38,38,265,325,33],"23922224","krspykrm",[327,38,38,328,55,33],"23922448","project\u002Fpositive\u002Fdesign",[330,211,33,226,331,33],"23923430","krapp",[333,43,33,226,334,33],"23923239","jagger27",[336,43,18,337,338,33],"23924590","project\u002Fneutral\u002Fidea","crumpled",[164,340,18,258,165,33],8,[342,340,18,258,55,33],"23921639",[344,340,18,258,277,33],"23922409",[346,340,18,258,55,33],"23922634",[348,340,33,220,277,33],"23923033",[350,340,18,258,351,33],"23922541","nitwit005",[353,340,18,258,55,33],"23922643",[355,356,18,215,357,33],"23921898",9,"mitchtbaum",[58,356,18,215,55,33],[360,356,18,361,362,33],"23922425","maker\u002Fneutral\u002Fidea","angrais",[70,356,18,361,55,33],[365,366,33,226,367,33],"23922147",10,"divbzero",[369,31,41,285,370,33],"23923108","kristopolous",[372,31,41,285,373,33],"23925266","quickthrower2",[182,375,33,226,183,33],12,[377,375,33,226,378,33],"23922084","Wowfunhappy",[380,375,33,226,381,33],"23922108","pacificmint",[383,375,33,384,55,33],"23922134","other\u002Fneutral\u002Fidea",[386,375,33,226,387,33],"23922881","bawolff",[389,375,33,226,390,33],"23923075","potiuper",[392,375,33,226,55,33],"23923122",[394,395,33,226,396,33],"23921963",13,"MrSourz",[398,395,33,384,399,33],"23922851","jackcosgrove",[152,34,41,401,153,33],"project\u002Fcritical\u002Fdocs",[156,403,18,404,157,33],15,"project\u002Fneutral\u002Fdesign",[406,407,33,226,408,33],"23922324",16,"hughw",[410,411,38,265,412,33],"23921733",17,"TedDoesntTalk",[414,411,38,415,55,33],"23921854","maker\u002Fpositive\u002Fnone",[417,418,38,415,419,33],"23922589",18,"soulofmischief",[141,421,41,254,142,33],19,[423,421,18,261,55,33],"23922534",[145,425,41,254,146,33],20,[427,425,18,261,55,33],"23922588",[429,430,41,431,432,33],"23925420",21,"project\u002Fcritical\u002Fidea","edem",[122,434,41,285,123,33],22,[204,434,33,436,205,33],"commenter\u002Fcritical\u002Fperformance",[438,434,33,300,439,33],"23922384","hombre_fatal",[441,434,33,300,205,33],"23922751",[443,434,33,220,123,33],"23922474",[445,434,33,226,446,33],"23922669","smichel17",[448,434,33,226,373,33],"23925274",[],[451,456,461,465,470,474],{"id":452,"name":453,"points":454,"category":455},"23896856","3D Book Image CSS Generator",638,"dev_tools",{"id":457,"name":458,"points":459,"category":460},"23880071","Simple Ops",280,"infrastructure",{"id":462,"name":463,"points":464,"category":455},"23865900","css-media-vars",248,{"id":466,"name":467,"points":468,"category":469},"23921478","React Guitar",242,"languages",{"id":471,"name":472,"points":473,"category":455},"23895540","uuid-readable",154,{"id":475,"name":476,"points":477,"category":455},"23916842","UI Playbook",145,false,"v2",{"id":481,"name":5,"line":6,"ai":478,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":482,"top":18,"kw":483,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":484,"url":9,"mix":485,"praise":93,"objection":115,"sub":21},23920987,-0.19,[24,25,26,27],"5000031333355133133050333331100015511100",[31,32,33,34],1794036593673]