- 64comments
- 14comments
- 4comments
- 349comments
- 160comments
- 3comments
- 34comments
- 3comments
- 515comments
- 4comments
- 91comments
- 119comments
- 160comments
- 16comments
- 299comments
- 4comments
- 356comments
- 1comments
- 23comments
- 21comments
- 87comments
- 46comments
- 42comments
- 111comments
- 5comments
- 6comments
- 117comments
- 275comments
- 4comments
- 6comments
Single Page Website, literally - love it!
With routing no less!
* fixed
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.
Could you provide example?
Not using `columns`, but Firefox supports pure css masonry grid behind a flag.
- https://www.smashingmagazine.com/native-css-masonry-layout-c...
That has less support than Bieber at a black metal festival though.
Here's[1] the columns (or flexbox) way of doing it. Note that images will be a bit strangely ordered (as you would read columns). That's not solvable without JS (AFAIK). That's why W3C/CSSWG is looking at possible solutions[2] that resulted in the Firefox experiment you're referencing.
[1] https://css-tricks.com/piecing-together-approaches-for-a-css...
[2] https://github.com/w3c/csswg-drafts/issues/4650
This is simple and nice. It seems suitable for landing pages and portfolio pages. Thanks for sharing it.
Nice.
One issue, though: Highlighting the current page in the menu doesn’t always work. Browsing with an iPhone.
Navigation isn't highlighted, the bottom border you see is a remnant of the :hover style.
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) https://www.youtube.com/watch?v=Uv1UfLPK7_Q on it
Wow, this came out of nowhere for me
Not related to actual Non-JavaScript/JavaScript-Free showcase, but may be interesting for js-users.
In principle, I like it. A lingering question, however: how would this work from a search engine indexing standpoint?
From my experience, search engines will not index the “hash” variants as separate pages. It will all be considered one page.
Pretty much the same idea I used on https://www.vankeekenpodologie.nl . Too bad google doesn't recognize the individual pages.
Not a bug, but a feature.
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.
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.
Any Screenshots/Tutorial?
https://css-tricks.com/the-checkbox-hack/
Thanks, but no.
Don't do this. Registering the anchor is for back button compatibility; I'm so tired of spas and 'modern' js constantly breaking it.
I am tired of that too, but you can use the checkbox hack to implement features such as tabbed content for which storing user selections in the browser's history would probably result in unintuitive UX.
Isn’t that the point of links though? If you use checkboxes you won’t be able to share a specific page with a friend.
I also suggested an update.. but but but.... Its a normal webpage with normal history behavior... STOP TRYING TO FIX IT! ENOUGH ALREADY! (ha-ha)
You could ad some JS to play with history pushState and popState to make sure the history works.
No. This showcase example especially designed to represent power of non-JS web-design.
The use of target is cool, the header is weird and it lacks color.
Maybe: http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Joh...
Is this accessible? I wonder if screen readers get it, I'd lean towards the "they don't understand it" side but no proof
It'll treated as one big long page with helpers to jump to each section. It'd be better if each section had it's own role (probably "contentinfo") and aria-label attribute. It'll probably work better than a lot of other 'modern' approaches even as it is now though.
Not sure about that. I would believe `display: none` means that screen readers won't read every section.
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://github.com/cadars/john-doe
Two comments
1. I know HN hates JS, and there are times I do too, but how is celebrating JS-free anything but fundamentalism? A little JS won't hurt performance.
2. Gitlab offers a full IDE that you could use to edit your files. The post talks about the neocities and github editors only, both of which suck compared to the gitlab IDE.
1. Do you accept that "doesn't require JavaScript" is a net positive, however small? If so, "doesn't use JavaScript" is just a guarantee of that - still a net benefit even if it's not the 'one true way'.
[0] https://news.ycombinator.com/item?id=16191843#16192006
[1] https://news.ycombinator.com/item?id=16191843#16192197
HN doesn't like bloat and things that are unnecessarily complex. If you add a few lines of JS without obfuscation, then no one's complaining.
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 publish something online for a neophyte, either with their editor or file uploader. (but they have a CLI too!)
For me I just like seeing hacks to create systems with less code and complexity than web-packing heaps of npm lib's together... I guess put more simply:
The best code, is the code you don't have to write...
Kinda interesting that the things we used to be doing years and years ago are now being submitted to sites like HN.
Almost exactly the same things were the de facto standards when "tabs" were all the rage way back when.
Kudos though for the modern CSS, although things like var etc wont work in old browsers
CSS variables have ~96% coverage at this moment: https://caniuse.com/css-variables. If you are not using Internet Explorer, you should very likely be able to render a page using var.
The trouble with caniuse is that it only covers the "mainstream".
It does not cover more exotic things like browser in RiscOS or Amiga or text-only browsers etc. These are often consumers of text-only sites, deliberably or not. Small market share though I admit, but probably larger market share for text-only sites Vs other "normal" sites.
I think covering the "mainstream" is the point of the site. Don't get me wrong, I really do enjoy fast loading text based websites, but if web devs had to worry about those browsers, then CSS (and web technology in general) could never develop past its infancy. Whether that's a good thing or bad thing is up to you.
Yeah I have no problem.with caniuse and for most sites it is a great tool, just for text-only you often have a different market to consider :)
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 by using CSS to hide/show content based on that #fragment.
What I like about it is that the urls are "honest" -- you're not navigating to a new page (there isn't one, just like there isn't one when you do the same w/ a Jamstack App) -- and the urls show this.
This is pretty awesome. I decided to quickly build a Jekyll version of this template for those who might be interested!
1. https://github.com/bradleytaunt/john-doe-jekyll
2. https://john-doe-jekyll.netlify.app/
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 cautious for SEO reasons as it's non-standard though.
This site will not scroll on Firefox mobile
Scrolls fine (using latest Fennec on Android).
not scrolling for me either. The irony of a simple website breaking
Which Browser / OS ?
firefox, android 9
EDIT: nevermind I'm an idiot, the first page fits my screen, theres nothing to scroll.
I'm not sure why I was convinced it was broke. Maybe so used to typical page footers that I assumed there was more?
^^ Thanks for checking!
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?
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?
I actually wrote about this 10 years ago, but mine was with just anchors and some CSS2:
https://www.impressivewebs.com/javascript-content-switcher-w...
Same overall principle with even deeper old browser support.
I wish this didn't break browser search. You can find (but not highlight) content on other "pages" :(
Which browser? Seems fine here in Firefox.
Firefox 83. I did a search for "section" and got 4 hits but none of them were visible.
Can't reproduce this on macOS, Firefox 83. Does adding `visibility: hidden;` help?