5 ms·

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 https://www.stavros.io (I promise

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 https://www.stavros.io (I promise I'll reply to your email soon)

jspash 7y ago
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!
- TeMPOraL 7y ago
  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.
  - quazar 7y ago
    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?
    - StavrosK 7y ago
      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.
    - extra88 7y ago
      > 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://caniuse.com/#feat=css-focus-visible https://css-tricks.com/keyboard-only-focus-styles/ https://css-tricks.com/keyboard-only-focus-styles/
  - yc12340 7y ago
    ...also known as "directional navigation" — widely used by screen readers and browsers on Android TV or some Android Auto devices.
TeMPOraL 7y ago
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 :).)
arthurcolle 7y ago
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!
greenhatman 7y ago
It's not as fast as https://dev.to/ https://dev.to/, which is an SPA. I.e. client side routing.
- detaro 7y ago
  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.
  - greenhatman 7y ago
    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.
    - detaro 7y ago
      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.
      - nkurz 7y ago
        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.
thinkloop 7y ago
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.
aurelius83 7y ago
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.
ComputerGuru 7y ago
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 https://imgur.com/a/FAX6BDW
- adrianN 7y ago
  I just set browser.display.use_document_fonts to 0 in about:config.
- weego 7y ago
  That's conflating two different issues
  - TeMPOraL 7y ago
    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.
    - kilburn 7y ago
      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

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 https://www.stavros.io (I promise I'll reply to your email soon)

jspash 7y ago

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!

TeMPOraL 7y ago
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.
- quazar 7y ago
  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?
  - StavrosK 7y ago
    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.
  - extra88 7y ago
    > 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://caniuse.com/#feat=css-focus-visible https://css-tricks.com/keyboard-only-focus-styles/ https://css-tricks.com/keyboard-only-focus-styles/
- yc12340 7y ago
  ...also known as "directional navigation" — widely used by screen readers and browsers on Android TV or some Android Auto devices.

TeMPOraL 7y ago

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

arthurcolle 7y ago

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!

greenhatman 7y ago

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

detaro 7y ago
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.
- greenhatman 7y ago
  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.
  - detaro 7y ago
    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.
    - nkurz 7y ago
      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.

thinkloop 7y ago

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.

aurelius83 7y ago

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.

ComputerGuru 7y ago

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 https://imgur.com/a/FAX6BDW

adrianN 7y ago
I just set browser.display.use_document_fonts to 0 in about:config.
weego 7y ago
That's conflating two different issues
- TeMPOraL 7y ago
  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.
  - kilburn 7y ago
    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