john-doe
Dev tools
html website template
SHOW HN2020
How HN took it
5 positive, 10 neutral or asking, 2 mixed, 11 critical, out of 28 comments about the project. Thread score -0.13.
Design: 2 for, 3 againstIdea: 2 for, 2 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clever, simple single-page multi-section approach using CSS and URL fragments
From 4 comments
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.
unicornporn on HNI 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…
OzzyB on HNSingle Page Website, literally - love it!
jacobn on HNThis is simple and nice. It seems suitable for landing pages and portfolio pages. Thanks for sharing it.
AnonC on HN
Objections
Breaks browser search and search engine indexing of individual sections
From 3 comments
I wish this didn't break browser search. You can find (but not highlight) content on other "pages" :(
bonkabonka on HNCool 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…
seanwilson on HNThere 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.
onion2k on HN
Accessibility with screen readers is questionable
From 3 comments
Is this accessible? I wonder if screen readers get it, I'd lean towards the "they don't understand it" side but no proof
tleb_ on HNNot sure about that. I would believe `display: none` means that screen readers won't read every section.
tleb_ on HNI 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://github.com/cadars/john-doe
john-doe on HN
Does not scroll or renders oddly on some mobile browsers
From 2 comments
This site will not scroll on Firefox mobile
mStreamTeam on HNnot scrolling for me either. The irony of a simple website breaking
warent on HN
Requests
Fix highlighting of the current page in the navigation menu
From 2 comments
Nice. One issue, though: Highlighting the current page in the menu doesn’t always work. Browsing with an iPhone.
janaagaard on HNNavigation isn't highlighted, the bottom border you see is a remnant of the :hover style.
john-doe on HN
Use history-aware navigation with JavaScript
From 1 comment
You could ad some JS to play with history pushState and popState to make sure the history works.
graderjs on HN
Questions
How does this work with search engine indexing?
From 1 comment
In principle, I like it. A lingering question, however: how would this work from a search engine indexing standpoint?
devadvance on HN
Alternatives named
TiddlyWiki
From 1 comment
While not javascript free, suggest one to look at https://tiddlywiki.com/ for what a single html file can achieve. A talk given by joe armstrong (author of erlang)…
a_c on HN
CSS tabs and checkbox hack techniques
From 2 comments
Isn't this exactly the same as css-tabs (e.g. https://css-tricks.com/css3-tabs/ from 2015), just you styled the tabs header like a top menu?
ivanhoe on HNIt'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.
KarlTheCool on HN