Show HN: A simple way to make HTML websites

(john-doe.neocities.org)

199 points | by john-doe 9 days ago

18 comments

  • a_c 8 days ago

    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

    • app4soft 8 days ago

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

      • bugBunny 8 days ago

        Wow, this came out of nowhere for me

      • mattlondon 8 days ago

        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

        • darkhorse13 8 days ago

          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.

          • mattlondon 8 days ago

            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.

            • darkhorse13 8 days ago

              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.

              • mattlondon 8 days ago

                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 :)

        • OzzyB 8 days ago

          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.

          • tleb_ 8 days ago

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

            • john-doe 8 days ago

              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

              • onion2k 8 days ago

                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.

                • tleb_ 8 days ago

                  Not sure about that. I would believe `display: none` means that screen readers won't read every section.

              • devadvance 8 days ago

                In principle, I like it. A lingering question, however: how would this work from a search engine indexing standpoint?

                • ImpressiveWebs 7 days ago

                  From my experience, search engines will not index the “hash” variants as separate pages. It will all be considered one page.

                • bradley_taunt 8 days ago

                  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/

                  • jvdvegt 8 days ago

                    Pretty much the same idea I used on https://www.vankeekenpodologie.nl . Too bad google doesn't recognize the individual pages.

                    • onion2k 8 days ago

                      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.

                      • app4soft 8 days ago

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

                        Not a bug, but a feature.

                      • ivanhoe 7 days ago

                        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?

                      • seanwilson 8 days ago

                        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.

                        • unicornporn 8 days ago

                          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.

                        • janaagaard 8 days ago

                          Nice.

                          One issue, though: Highlighting the current page in the menu doesn’t always work. Browsing with an iPhone.

                          • john-doe 8 days ago

                            Navigation isn't highlighted, the bottom border you see is a remnant of the :hover style.

                          • bonkabonka 7 days ago

                            I wish this didn't break browser search. You can find (but not highlight) content on other "pages" :(

                            • crtasm 7 days ago

                              Which browser? Seems fine here in Firefox.

                              • bonkabonka 7 days ago

                                Firefox 83. I did a search for "section" and got 4 hits but none of them were visible.

                                • john-doe 7 days ago

                                  Can't reproduce this on macOS, Firefox 83. Does adding `visibility: hidden;` help?

                            • mStreamTeam 8 days ago

                              This site will not scroll on Firefox mobile

                              • unicornporn 8 days ago

                                Scrolls fine (using latest Fennec on Android).

                                • warent 6 days ago

                                  not scrolling for me either. The irony of a simple website breaking

                                  • john-doe 6 days ago

                                    Which Browser / OS ?

                                    • warent 6 days ago

                                      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?

                              • AnonC 8 days ago

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

                                • 6510 8 days ago

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

                                  • jacobn 8 days ago

                                    Single Page Website, literally - love it!

                                  • KarlTheCool 8 days ago

                                    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.

                                    • pmlnr 8 days ago

                                      Don't do this. Registering the anchor is for back button compatibility; I'm so tired of spas and 'modern' js constantly breaking it.

                                      • axguscbklp 8 days ago

                                        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.

                                      • katsura 8 days ago

                                        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.

                                        • 6510 8 days ago

                                          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)

                                          • app4soft 8 days ago

                                            > If you want to avoid this, checkbox hacking with the :checked selector is an option.

                                            Any Screenshots/Tutorial?

                                          • graderjs 8 days ago

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

                                            • app4soft 8 days ago

                                              > You could ad some JS to play

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

                                          • bachmeier 8 days ago

                                            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.

                                            • john-doe 8 days ago

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

                                              • tutfbhuf 8 days ago

                                                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.

                                                • oneeyedpigeon 8 days ago

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

                                                • gitgud 7 days ago

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