Show HN: A simple way to make HTML websites | Hacker News Reader

Show HN: A simple way to make HTML websites

john-doe.neocities.org

200 pointsjohn-doe60 comments

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

Not related to actual Non-JavaScript/JavaScript-Free showcase, but may be interesting for js-users.

Wow, this came out of nowhere for me

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.

Is this accessible? I wonder if screen readers get it, I'd lean towards the "they don't understand it" side but no proof

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

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.

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.

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.

> Too bad google doesn't recognize the individual pages.

Not a bug, but a feature.

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.

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 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.

> 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...

> Firefox supports pure css masonry grid behind a flag.

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

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.

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?

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!

This is simple and nice. It seems suitable for landing pages and portfolio pages. Thanks for sharing it.

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...

Single Page Website, literally - love it!

With routing no less!

> Single Page Multi-Page Website

* fixed

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.

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)

> 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/

> CodePen requires JavaScript to render the code and preview areas in this view.

Thanks, but no.

You could ad some JS to play with history pushState and popState to make sure the history works.

> You could ad some JS to play

No. This showcase example especially designed to represent power of non-JS web-design.

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. 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!)

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. 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'.

> Those browser's vulnerability to those attacks are entirely based on the fact that they execute JavaScript. Thus, if your browser doesn't execute JS, it's immune.[0]

> ...

> That is the complete explanation… JavaScript. Executing arbitrary code from strangers on the Internet is what makes browsers less secure.[1]

[0] https://news.ycombinator.com/item?id=16191843#16192006

[1] https://news.ycombinator.com/item?id=16191843#16192197

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...

Reply on news.ycombinator.com