[{"data":1,"prerenderedAt":369},["ShallowReactive",2],{"project-25170078":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":5,"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":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":39,"post_text":42,"what":43,"said":67,"maker_in_thread":174,"shape":183,"grid":187,"attempts":332,"same_week":333,"maker_shows":32,"maker_hidden":361,"reader_version":362,"card":363},"25170078","john-doe","A simple way to make HTML websites","title","Show HN: A simple way to make HTML websites","https:\u002F\u002Fjohn-doe.neocities.org","john-doe.neocities.org",1605970970,2020,200,60,278,3028,10,"notable","dev_tools","html website template","web_app",[23,24,25,26,27],"html template","css only","no javascript","single page website","neocities","mixed",-0.128,{"positive":31,"neutral":17,"mixed":32,"critical":33},5,2,11,28,{"design":36,"idea":38},{"positive":32,"critical":37},3,{"positive":32,"critical":32},[40,40,37,41,40,31,37,41,40,37,37,37,41,40,31,37,40,40,41,41,40,41,41,41,40,40,31,37,37,37,40,40,40,41,40,40,37,40,40,40],0,1,null,{"problem":42,"audience":44,"pricing":42,"motivation":51,"time_to_build":42,"stack":55,"openness":65,"stage":66,"team_size":66},{"value":45,"source":46,"evidence":47},"Absolute beginners learning HTML and CSS","maker",[48],{"id":49,"by":5,"text":50},"25176645","1. Agree. But I made this with absolute beginners in mind. Starting with only HTML and CSS seemed way enough already. 2. See 1. Neocities is probably one of the easiest ways to…",{"value":52,"source":46,"evidence":53},"Make publishing a simple website easy for beginners, using only HTML and CSS.",[54],{"id":49,"by":5,"text":50},[56,61],{"value":57,"source":58,"evidence":59},"HTML","inferred",[60],{"id":49,"by":5,"text":50},{"value":62,"source":46,"evidence":63},"CSS",[64],{"id":49,"by":5,"text":50},"open_source","unknown",{"praise":68,"objections":89,"requests":129,"questions":147,"alternatives":155},[69],{"value":70,"source":71,"evidence":72},"Clever, simple single-page multi-section approach using CSS and URL fragments","commenter",[73,77,81,85],{"id":74,"by":75,"text":76},"25175539","unicornporn","This is rather genius. Nice work on the styling too. Love it! EDIT: you could have a masonry style gallery with CSS only using the CSS columns property.",{"id":78,"by":79,"text":80},"25177058","OzzyB","I see what you did there xD Essentially, instead of hijacking the Browser's history with some Javascript router api, you simple use the inbuilt url fragment to \"load\" a new page…",{"id":82,"by":83,"text":84},"25175067","jacobn","Single Page Website, literally - love it!",{"id":86,"by":87,"text":88},"25175602","AnonC","This is simple and nice. It seems suitable for landing pages and portfolio pages. Thanks for sharing it.",[90,105,118],{"value":91,"source":71,"evidence":92},"Breaks browser search and search engine indexing of individual sections",[93,97,101],{"id":94,"by":95,"text":96},"25183025","bonkabonka","I wish this didn't break browser search. You can find (but not highlight) content on other \"pages\" :(",{"id":98,"by":99,"text":100},"25177699","seanwilson","Cool trick! If you search for random phrases in the pages that aren't the front page, Google has indexed them as well even though they're hidden by default by the CSS. I'd be…",{"id":102,"by":103,"text":104},"25176435","onion2k","There aren't any individual pages. It's one page styled to look like several pages. It is not several pages bundled together. Google are going what you should expect.",{"value":106,"source":71,"evidence":107},"Accessibility with screen readers is questionable",[108,112,115],{"id":109,"by":110,"text":111},"25176186","tleb_","Is this accessible? I wonder if screen readers get it, I'd lean towards the \"they don't understand it\" side but no proof",{"id":113,"by":110,"text":114},"25177510","Not sure about that. I would believe `display: none` means that screen readers won't read every section.",{"id":116,"by":5,"text":117},"25176505","I tried briefly with VoiceOver, and I'm afraid it needs some work. Feel free to open an issue or suggest how to improve it: https:\u002F\u002Fgithub.com\u002Fcadars\u002Fjohn-doe",{"value":119,"source":71,"evidence":120},"Does not scroll or renders oddly on some mobile browsers",[121,125],{"id":122,"by":123,"text":124},"25177766","mStreamTeam","This site will not scroll on Firefox mobile",{"id":126,"by":127,"text":128},"25196008","warent","not scrolling for me either. The irony of a simple website breaking",[130,140],{"value":131,"source":71,"evidence":132},"Fix highlighting of the current page in the navigation menu",[133,137],{"id":134,"by":135,"text":136},"25175650","janaagaard","Nice. One issue, though: Highlighting the current page in the menu doesn’t always work. Browsing with an iPhone.",{"id":138,"by":5,"text":139},"25178978","Navigation isn't highlighted, the bottom border you see is a remnant of the :hover style.",{"value":141,"source":71,"evidence":142},"Use history-aware navigation with JavaScript",[143],{"id":144,"by":145,"text":146},"25176340","graderjs","You could ad some JS to play with history pushState and popState to make sure the history works.",[148],{"value":149,"source":71,"evidence":150},"How does this work with search engine indexing?",[151],{"id":152,"by":153,"text":154},"25176078","devadvance","In principle, I like it. A lingering question, however: how would this work from a search engine indexing standpoint?",[156,163],{"value":157,"source":71,"evidence":158},"TiddlyWiki",[159],{"id":160,"by":161,"text":162},"25175930","a_c","While not javascript free, suggest one to look at https:\u002F\u002Ftiddlywiki.com\u002F for what a single html file can achieve. A talk given by joe armstrong (author of erlang)…",{"value":164,"source":71,"evidence":165},"CSS tabs and checkbox hack techniques",[166,170],{"id":167,"by":168,"text":169},"25181785","ivanhoe","Isn't this exactly the same as css-tabs (e.g. https:\u002F\u002Fcss-tricks.com\u002Fcss3-tabs\u002F from 2015), just you styled the tabs header like a top menu?",{"id":171,"by":172,"text":173},"25176136","KarlTheCool","It's worth noting when doing this it registers each anchor in the browser history. If you want to avoid this, checkbox hacking with the :checked selector is an option.",{"comments":175,"answered":176,"key":177},7,4,[178,179,182],{"id":116,"text":117},{"id":180,"text":181},"25184638","It is! And I had the same conclusion when it came to highlight the active section… it's not worth repeating the markup. Maybe something with `:focus-within` could work?",{"id":138,"text":139},{"commenters":184,"max_depth":31,"maker_replies":175,"first_comment_mins":185,"lifespan_hours":186},35,840,78,[188,190,193,196,200,203,206,208,210,212,214,216,217,218,219,222,225,227,228,231,233,236,240,242,244,247,250,252,254,256,257,260,262,264,266,268,269,271,273,276,279,283,285,288,290,292,294,297,300,303,305,308,310,311,313,318,321,324,327,329],[160,40,40,189,161,40],"commenter\u002Fneutral\u002Fnone",[191,40,40,189,192,40],"25176134","bugBunny",[194,40,40,189,195,40],"25176141","app4soft",[197,41,37,198,199,40],"25176578","project\u002Fmixed\u002Fdesign","mattlondon",[201,41,40,189,202,40],"25177145","darkhorse13",[204,41,41,205,199,40],"25177616","project\u002Fcritical\u002Fnone",[207,41,40,189,202,40],"25178268",[209,41,40,189,199,40],"25179045",[78,32,31,211,79,40],"project\u002Fpositive\u002Fdesign",[109,37,37,213,110,40],"project\u002Fneutral\u002Fnone",[215,37,37,213,103,40],"25176429",[113,37,41,205,110,40],[116,37,40,213,5,41],[152,176,37,213,153,40],[220,176,37,213,221,40],"25185499","ImpressiveWebs",[223,31,37,213,224,40],"25176087","jvdvegt",[226,31,40,189,195,40],"25176123",[102,31,37,213,103,40],[167,229,41,230,168,40],6,"project\u002Fcritical\u002Fidea",[180,229,40,232,5,41],"project\u002Fneutral\u002Fidea",[234,229,40,235,221,40],"25185556","commenter\u002Fneutral\u002Fidea",[237,175,31,238,239,40],"25177657","project\u002Fpositive\u002Fnone","bradley_taunt",[98,241,41,205,99,40],8,[74,243,31,211,75,40],9,[245,243,40,246,195,40],"25176159","commenter\u002Fneutral\u002Fdesign",[248,243,40,189,249,40],"25176717","abdusco",[251,243,40,189,75,40],"25176974",[134,17,41,253,135,40],"project\u002Fcritical\u002Fdesign",[138,17,40,255,5,41],"project\u002Fneutral\u002Fdesign",[94,33,41,205,95,40],[258,33,40,189,259,40],"25183599","crtasm",[261,33,41,205,95,40],"25183772",[263,33,40,213,5,41],"25184686",[122,265,41,253,123,40],12,[267,265,37,213,75,40],"25177811",[126,265,41,205,127,40],[270,265,40,189,5,41],"25196584",[272,265,40,189,127,40],"25202582",[274,265,40,275,5,41],"25202990","maker\u002Fpositive\u002Fnone",[86,277,31,278,87,40],13,"project\u002Fpositive\u002Fidea",[280,281,41,253,282,40],"25176163",14,"6510",[82,284,31,278,83,40],15,[286,284,37,232,287,40],"25175549","quickthrower2",[289,284,37,232,195,40],"25176147",[171,291,37,213,172,40],16,[293,291,40,189,195,40],"25176145",[295,291,40,189,296,40],"25176168","axguscbklp",[298,291,40,299,195,40],"25176593","other\u002Fneutral\u002Fnone",[301,291,40,189,302,40],"25176174","pmlnr",[304,291,40,189,296,40],"25176216",[306,291,41,230,307,40],"25176185","katsura",[309,291,40,299,282,40],"25176192",[144,291,40,189,145,40],[312,291,40,189,195,40],"25176587",[314,315,37,316,317,40],"25176543",17,"project\u002Fmixed\u002Fnone","bachmeier",[319,315,40,189,320,40],"25176555","oneeyedpigeon",[322,315,40,323,195,40],"25176613","commenter\u002Fneutral\u002Fprivacy",[325,315,40,189,326,40],"25176576","tutfbhuf",[49,315,40,328,5,41],"maker\u002Fneutral\u002Fnone",[330,315,40,299,331,40],"25187098","gitgud",[],[334,339,344,348,353,357],{"id":335,"name":336,"points":337,"category":338},"25148000","Zfs.rent",403,"infrastructure",{"id":340,"name":341,"points":342,"category":343},"25161117","PMAlerts",261,"productivity",{"id":345,"name":346,"points":347,"category":19},"25158588","QuickPYTHON",181,{"id":349,"name":350,"points":351,"category":352},"25160474","Lunatic",141,"languages",{"id":354,"name":355,"points":356,"category":343},"25168900","Presenta",124,{"id":358,"name":359,"points":360,"category":343},"25150804","Screenity",103,false,"v2",{"id":364,"name":5,"line":6,"ai":361,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":365,"top":17,"kw":366,"maker":5,"domain":10,"tier":18,"attempts":40,"strip":367,"url":9,"mix":368,"praise":70,"objection":91,"sub":20},25170078,-0.13,[23,24,25,26,27],"0031053103331053001101110053330001003000",[31,17,32,33],1793991019145]