Hacker News Reader

Comment by StavrosK | Hacker News Reader

Case in point, navigation on my site is pretty fast (to me, at least) and doesn't use much JS at all: https://www.stavros.io

(I promise I'll reply to your email soon)

View on HN

I'll admit it is pretty fast. Assuming you are using a mouse. But keyboard navigation is non-existent. So you have to ask yourself is it worth it to go against decades of effort put in to standard web navigation for what gain? Obviously only you can answer that for your blog. I'm not having a go.

But I will give you credit for the fact that it does work with Lynx!

By "keyboard" I assume you mean TAB-key-based navigation (I don't know of any other included in the browsers)? If so, it looks to me that links are in fact TAB-stops, but they're not being highlighted. It's something that should be solvable with a CSS adjustment.

If the links are not highlighted by default, then tab navigation is basically non-existent since I cannot see where I'd be redirected and I personally bother to write custom CSS only for the websites I visit very often.

Is there an actual reason to disable highlighting? It lowers usability and accessibility, but I'm not sure what do you get in return?

Oops, I'll fix that, thank you. I'm assuming the designer thought it looked "better".

Also I use Vimium so I never noticed, since that mode of navigation is much faster.

> Is there an actual reason to disable highlighting?

Some browsers, Chrome especially, show the focus outline when elements are clicked with a mouse and some people think it looks unacceptably bad.

Focus-visible is a CSS property meant to solve that but it’s only supported in Firefox and requires browser heuristics to do the right thing.

https://caniuse.com/#feat=css-focus-visible

https://css-tricks.com/keyboard-only-focus-styles/

...also known as "directional navigation" — widely used by screen readers and browsers on Android TV or some Android Auto devices.

Yeah, but you force me to stare at blank spaces while your webfont downloads [0]. I guess I should be thankful you’re not using that font for the body text, too (most sites do!).

[0]: https://imgur.com/a/FAX6BDW

I just set browser.display.use_document_fonts to 0 in about:config.

That's conflating two different issues

It's the same meta-problem, though: modern webdev practices involving adding gimmicks for no good reason that introduce extra complexity and resource use, and then adding even more complexity and resource use trying to fix all the expected behavior and features of browsers that the initial gimmick broke... and doing it poorly.

I hate all these gimmicks you are talking about (slow to load fonts, unnecessary videos, fucked up scrolling, spinners everywhere, etc.).

That being said I challenge the assertion that they are used for no good reason.

- Custom fonts are used because they help shape a brand. Properly used, the choice of fonts communicates a lot (at a subconscious level) about the company or person behind it.

- Unnecessary videos unfortunately work (i.e., help grab and retain user attention). Not for me (quite the contrary!), but for the majority of people stumbling upon a company's website.

- Same for weird gimmicks involving animations and what not. I can feel them draining my battery out and it phisically hurts, but most people like them and take away the impression that "this is a modern person/company".

All in all, many website's primary goal is not to communicate factual information, but to capture user attention and/or communicate at a subconscious level, and gimmicky things work for that purpose :S

This idea that users need to see all text on your website in a particular font face (which is usually just a poorly packaged riff off of a famous font with minor changes that will largely go unnoticed by the unwashed masses) in order to market your product is absolute BS. Aside from a very few iconic font associations (e.g. IBM), there's no actual evidence that it actually works.

I fully support using a custom font for your visual assets - that's what SVG with text exported as curves/outlines was created for. But why should I use your horribly hinted, terribly rendered, absolutely illegible webfont (and have to download it to boot) just to read the copy on your website? Why should anyone?

Look at Apple. Despite what I'm sure their design team tells them, even they don't have an iconic font. They've bounced around between Helvetica, Myriad, Lucida, and a half-dozen other sans serif fonts that share certain design traits (which people do identify and associate in general), yet each time they introduce a new font they update their website to trigger your browser to download the webfont to render the page. It's a pointless exercise in the name of job security.

Companies have had websites going back 30 years. Web fonts have existed for a long time. This trend of each company having to pay tens of thousands to commission an unrecognizable, undistinguishable typeface that all text on their website must appear in is a brand new phenomenon, and there's zero proof it does anything besides (poorly) accomplish what someone thought was a good idea.

I agree; I cheated by purposefully using both meanings of "good". The reasons you mention I consider bad in ethical sense, and I believe the world would be better off if sites didn't do it.

About as fast as mine on my underpowered machine, and mine is plain HTML without much attention paid to optimizing it further.

> (I promise I'll reply to your email soon)

(Take as much time as you need; also, I didn't expect a reply over the weekend :).)

It's not as fast as https://dev.to/, which is an SPA. I.e. client side routing.

And it took me 2 minutes clicking around to break its idea of the page state. I am partially scrolled down the home page, and it just decided to deactivate scrollbars and the ability to scroll.

A great example of how it's quite difficult to reimplement stuff that works perfectly well on traditional pages.

(At least they seem to haven gotten rid of some of the dark patterns they had in the past, that's nice to see)

EDIT: and within a minute more found another state bug :D

Yes, you can make perfect SPAs, but many people fail and it's a good question if the effort required to do it properly is worth it.

I've never found a bug on there, and I've been on it many times.

I'd love if you can show me how to reproduce this bug.

I just don't have this experience with SPAs breaking. I actually have no idea where it's coming from.

I just reproduced it following the commenters instructions -- clicked the sidebar link, got a popup, pressed the back button and I have no scroll bar.

I can see what is happening there: the popup removes scrolling (because of the overlay) but the back button doesn't restore it.

This certainly does lend to the conclusion that managing page state in a SPA is not trivial.

It doesn't happen 100 % of the time, but right now going to the homepage, clicking one of the listings in the "newest listings" box, and then returning to the homepage through the browser back button triggered it.

I am able to reproduce this bug with Safari on a Macbook. I clicked on an item in "newest", then quickly pressed Cmd-Left to return to the previous "page". The front page reappears, but I'm unable to scroll with arrow keys or trackpad. An additional press of Esc returns the expected functionality.

It seems to be a fast and responsive site when it works, though.

> It seems to be a fast and responsive site when it works, though.

LOL.

Y'all, I love speed as much as anyone, but your development priorities should be 1) it works and 2) it's fast.

Using HTML links where 1) is never in doubt and all focus can be placed on 2) seems like good engineering to me.

Reinventing browser navigation is like building a rocket. You should be really, really sure that you need to do it before you try.

Ah, the good old “footer at the bottom of an infinitely long page.”

Facebook and Google used to be guilty of this, but it’s been a while since I ran into that particular brand of user-hostile web design.

Addendum - I may have been too harsh here. The page most likely is not infinite. You should able to scroll through the entire backlog of dev.to content to access the footer.

Seriously though, you can't just bolt infinite scrolling into the middle of an existing page if you have content at the bottom.

They've duplicated most of that (but not the copyright) in the sidebar's "Key Links" box, so it's not as big a problem as I've seen on other sites.

If they hadn't, I wonder about the legal implications of making your privacy policy, terms of use, and copyright notice completely unreachable. And why keep them in the footer if you never leave it on screen long enough to click it? Just a "not my job" issue with whoever implemented the continuous scroll? Clearly someone thought about it long enough to put the links somewhere reachable, but not long enough to get rid of the old ones?

It is fast, but it breaks even faster. Managed to get myself in locked up state in some 15 seconds. Couldn't go back, displayed page was incomplete but no scrollbars were to be seen.

Good: it detects when you’re offline and displays a fun error page.

Bad: this only works on every other click. Half the time the links just silently fail....

For me, it always displays the "you're offline" page.

A good demonstration of one of the major hazards of reinventing basic functionality like this: it’s really easy to end up with something that behaves differently on different browsers or just for different people.

You just reminded me that slate.com frequently tells me I'm offline after clicking the back button.

How do I access the footer on mobile? It just keeps scrolling it down as soon as it appears

Scrolling is extremely laggy on latest mid range Android using Chrome. Almost unusable.

That definitely seems faster, I'll give you that:

https://i.imgur.com/bx1LUZD.png

Scroll, click a story, click a link off the site and then hit back button twice. You will jump to top of homepage incorrectly.

Sure, I mean all you're doing is basically loading up static content. In which case SSR HTML will perform just fine, but you do happen to use client side logic for your comments section which also makes sense to me. A SPA for your site isn't really the use case for SPA.

Scrolling on the hamburger buttons is in my opinion much smoother on your site than on sites that force you to click their links in the page itself. I'll have to check out the source when I get home, its overall a great UX with a focus on functionality over form, but the form is still nice enough to get the job done!

Your site is great and the perfect usecase for traditional links, but it's literally like 99% content, with very little markup. The difference is more stark on design heavy pages.

Reply on news.ycombinator.com