[{"data":1,"prerenderedAt":222},["ShallowReactive",2],{"project-29665246":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":41,"post_text":43,"what":44,"said":71,"maker_in_thread":142,"shape":148,"grid":152,"attempts":184,"same_week":185,"maker_shows":40,"maker_hidden":214,"reader_version":215,"card":216},"29665246","Photo Sheet","HTML\u002FCSS Photo Sheet","title","Show HN: HTML\u002FCSS Photo Sheet","https:\u002F\u002Fcadars.github.io\u002Fphotosheet\u002F","cadars.github.io","john-doe",1640286381,2021,33,16,1091,2533,44,"shown","creative","photo gallery","web_app",[24,25,26,27],"html css gallery","photo sheet","css only lightbox","javascript free gallery","roasted",-0.276,{"positive":31,"neutral":32,"mixed":31,"critical":33},3,0,8,14,{"execution":36,"idea":39},{"positive":37,"critical":38},1,7,{"positive":40,"critical":37},2,[32,37,37,31,37,37,32,42,37,37,31,42,37,31,42,37],5,null,{"problem":45,"audience":43,"pricing":43,"motivation":52,"time_to_build":43,"stack":56,"openness":69,"stage":70,"team_size":69},{"value":46,"source":47,"evidence":48},"Shows a grid of photos with an enlarged view, using only HTML and CSS","maker",[49],{"id":50,"by":11,"text":51},"29665443","Disclaimer: it’s more of an experiment than something anyone should use: browser performance might get worse when displaying too many images. There is a tiny bit of Javascript to…",{"value":53,"source":47,"evidence":54},"An experiment in (ab)using HTML and CSS for an interactive gallery",[55],{"id":50,"by":11,"text":51},[57,61,65],{"value":58,"source":47,"evidence":59},"HTML",[60],{"id":50,"by":11,"text":51},{"value":62,"source":47,"evidence":63},"CSS",[64],{"id":50,"by":11,"text":51},{"value":66,"source":47,"evidence":67},"JavaScript (tiny Esc key handler)",[68],{"id":50,"by":11,"text":51},"unknown","prototype",{"praise":72,"objections":89,"requests":131,"questions":136,"alternatives":137},[73],{"value":74,"source":75,"evidence":76},"Nice looking photos and a fun experiment","commenter",[77,81,85],{"id":78,"by":79,"text":80},"29665349","themodelplumber","Wow nice job. I want to find a drop-in solution like this for projects where I use llgal\u002Flazygal\u002Fetc.",{"id":82,"by":83,"text":84},"29678823","lsferreira42","I wrote something like that in shell script very long time ago, it's a very fun experiment to share photos with your friends Congrats!",{"id":86,"by":87,"text":88},"29667217","bigwheeler","The page loads on Firefox\u002FMac, but that’s about it. Clicking around does nothing. They look like great little pics though!",[90,113,124],{"value":91,"source":75,"evidence":92},"Does not work in Firefox on Linux, Mac or mobile, nor in Safari",[93,97,101,105,109],{"id":94,"by":95,"text":96},"29667194","RobertRoberts","Doesn't work at all in Firefox Linux. (ie, I click on an image and nothing happens)",{"id":98,"by":99,"text":100},"29667489","uhoh-itsmaciek","Also not working here on FF\u002FLinux. Tried Chrome and it's pretty nice. One odd thing I noticed: if I click on an image and then click left or right to go forward or back, after…",{"id":102,"by":103,"text":104},"29666426","tomcooks","In Mobile FF clicking does nothing, URL changes",{"id":106,"by":107,"text":108},"29666615","soperj","Got the same issue with non-mobile firefox.",{"id":110,"by":111,"text":112},"29666310","DHPersonal","It fails in Safari. :(",{"value":114,"source":75,"evidence":115},"Back button and navigation behave incorrectly in Chrome and Android",[116,120],{"id":117,"by":118,"text":119},"29666991","marginalia_nu","Pressed a picture. The image shows. Pressed the back button. Nothing happens. Pressed the back button again. The browser left the site. Chrome on Android.",{"id":121,"by":122,"text":123},"29666951","adamredwoods","I clicked the back button and that did not work (Chrome, desktop). Seems this demo has a ways to go yet. Not bad for an MVP!",{"value":125,"source":75,"evidence":126},"Lacks JavaScript, which hurts accessibility for interactive elements",[127],{"id":128,"by":129,"text":130},"29667320","zichy","Really nice showcase. While I like non-JS solutions, some kind of JavaScript is almost always needed when creating interactive elements to ensure accessibility.",[132],{"value":133,"source":75,"evidence":134},"Drop-in solution usable with gallery generators",[135],{"id":78,"by":79,"text":80},[],[138],{"value":139,"source":75,"evidence":140},"llgal and lazygal gallery generators",[141],{"id":78,"by":79,"text":80},{"comments":40,"answered":32,"key":143},[144,145],{"id":50,"text":51},{"id":146,"text":147},"29666767","Right… I had it working at some point, I guess :focus-within has some limitations. (This could be solved by :target-within, if browsers implement it someday)",{"commenters":149,"max_depth":31,"maker_replies":40,"first_comment_mins":150,"lifespan_hours":151},15,9,28,[153,155,157,158,160,162,163,165,169,172,175,176,178,181,182,183],[50,32,32,154,11,37],"project\u002Fneutral\u002Fidea",[94,37,37,156,95,32],"project\u002Fcritical\u002Fexecution",[117,40,37,156,118,32],[86,31,31,159,87,32],"project\u002Fmixed\u002Fexecution",[102,161,37,156,103,32],4,[106,161,37,156,107,32],[146,161,32,164,11,37],"maker\u002Fneutral\u002Fexecution",[166,161,42,167,168,32],"29666638","project\u002Fpositive\u002Fexecution","ssss11",[170,161,37,156,171,32],"29666788","masswerk",[173,161,37,156,174,32],"29668383","dole",[121,161,31,159,122,32],[78,42,42,177,79,32],"project\u002Fpositive\u002Fidea",[128,179,37,180,129,32],6,"project\u002Fcritical\u002Fidea",[98,38,31,159,99,32],[82,33,42,177,83,32],[110,150,37,156,111,32],[],[186,191,196,201,206,211],{"id":187,"name":188,"points":189,"category":190},"29690877","mwmbl",441,"web_saas",{"id":192,"name":193,"points":194,"category":195},"29726787","Voiceliner",297,"productivity",{"id":197,"name":198,"points":199,"category":200},"29715464","ntfy",241,"infrastructure",{"id":202,"name":203,"points":204,"category":205},"29729335","Wall of Text",145,"learning_science",{"id":207,"name":208,"points":209,"category":210},"29705794","Drovp",105,"dev_tools",{"id":212,"name":213,"points":209,"category":200},"29711433","Uptrace",false,"v2",{"id":217,"name":5,"line":6,"ai":214,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":218,"top":18,"kw":219,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":220,"url":9,"mix":221,"praise":74,"objection":91,"sub":21},29665246,-0.28,[24,25,26,27],"0113110511351351",[31,32,31,33],1793991037847]