6 ms·
Show HN: A simple way to make HTML websites
- jacobn 6y agoSingle Page Website, literally - love it!
- quickthrower2 6y agoWith routing no less!
- app4soft 6y ago> Single Page Multi-Page Website * fixed
- unicornporn 6y agoThis 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.
- app4soft 6y ago> EDIT: you could have a masonry style gallery with CSS only using the CSS columns property. Could you provide example?
- abdusco 6y agoNot using `columns`, but Firefox supports pure css masonry grid behind a flag. - https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/ https://www.smashingmagazine.com/native-css-masonry-layout-c...
- unicornporn 6y ago> 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-masonry-layout/#is-vertical-order-with-ragged-bottoms-ok https://css-tricks.com/piecing-together-approaches-for-a-css... [2] https://github.com/w3c/csswg-drafts/issues/4650 https://github.com/w3c/csswg-drafts/issues/4650
- AnonC 6y agoThis is simple and nice. It seems suitable for landing pages and portfolio pages. Thanks for sharing it.
- janaagaard 6y agoNice. One issue, though: Highlighting the current page in the menu doesn’t always work. Browsing with an iPhone.
- john-doe 6y agoNavigation isn't highlighted, the bottom border you see is a remnant of the :hover style.
- a_c 6y agoWhile not javascript free, suggest one to look at https://tiddlywiki.com/ 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 https://www.youtube.com/watch?v=Uv1UfLPK7_Q on it
- devadvance 6y agoIn principle, I like it. A lingering question, however: how would this work from a search engine indexing standpoint?
- ImpressiveWebs 6y agoFrom my experience, search engines will not index the “hash” variants as separate pages. It will all be considered one page.
- jvdvegt 6y agoPretty much the same idea I used on https://www.vankeekenpodologie.nl https://www.vankeekenpodologie.nl . Too bad google doesn't recognize the individual pages.
- KarlTheCool 6y agoIt'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.
- app4soft 6y ago> If you want to avoid this, checkbox hacking with the :checked selector is an option. Any Screenshots/Tutorial?
- axguscbklp 6y agohttps://css-tricks.com/the-checkbox-hack/ https://css-tricks.com/the-checkbox-hack/
- app4soft 6y ago> CodePen requires JavaScript to render the code and preview areas in this view. Thanks, but no.
- pmlnr 6y agoDon't do this. Registering the anchor is for back button compatibility; I'm so tired of spas and 'modern' js constantly breaking it.
- axguscbklp 6y agoI 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 6y agoIsn’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 6y ago
- 6510 6y agoThe use of target is cool, the header is weird and it lacks color. Maybe: http://patorjk.com/software/taag/#p=display&f=Graffiti&t=John%20%20%20Doe http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Joh...
- tleb_ 6y agoIs this accessible? I wonder if screen readers get it, I'd lean towards the "they don't understand it" side but no proof
- onion2k 6y agoIt'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_ 6y agoNot sure about that. I would believe `display: none` means that screen readers won't read every section.
- john-doe 6y agoI 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 https://github.com/cadars/john-doe
- bachmeier 6y agoTwo 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.
- oneeyedpigeon 6y ago1. 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'.
- app4soft 6y ago> 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 https://news.ycombinator.com/item?id=16191843#16192006 [1] https://news.ycombinator.com/item?id=16191843#16192197 https://news.ycombinator.com/item?id=16191843#16192197
- tutfbhuf 6y agoHN 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.
- john-doe 6y ago1. 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!)
- gitgud 6y agoFor 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...
- mattlondon 6y agoKinda 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 6y agoCSS variables have ~96% coverage at this moment: https://caniuse.com/css-variables 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 6y agoThe 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 6y agoI 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 6y agoYeah 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 6y agoI 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.
- bradley_taunt 6y agoThis 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 https://github.com/bradleytaunt/john-doe-jekyll 2. https://john-doe-jekyll.netlify.app/ https://john-doe-jekyll.netlify.app/
- seanwilson 6y agoCool 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.
- mStreamTeam 6y agoThis site will not scroll on Firefox mobile
- unicornporn 6y agoScrolls fine (using latest Fennec on Android).
- warent 6y agonot scrolling for me either. The irony of a simple website breaking
- john-doe 6y agoWhich Browser / OS ?
- ivanhoe 6y agoIsn't this exactly the same as css-tabs (e.g. https://css-tricks.com/css3-tabs/ https://css-tricks.com/css3-tabs/ from 2015), just you styled the tabs header like a top menu?
- john-doe 6y agoIt 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?
- ImpressiveWebs 6y agoI actually wrote about this 10 years ago, but mine was with just anchors and some CSS2: https://www.impressivewebs.com/javascript-content-switcher-without-javascript/ https://www.impressivewebs.com/javascript-content-switcher-w... Same overall principle with even deeper old browser support.
- bonkabonka 6y agoI wish this didn't break browser search. You can find (but not highlight) content on other "pages" :(
- crtasm 6y agoWhich browser? Seems fine here in Firefox.
- bonkabonka 6y agoFirefox 83. I did a search for "section" and got 4 hits but none of them were visible.
- john-doe 6y agoCan't reproduce this on macOS, Firefox 83. Does adding `visibility: hidden;` help?