6 ms·

A lot (the majority?) of web developers know their framework and how to script things but don't know that HTML has been able to do things like this out of the b

by ttfkam 3y ago

A lot (the majority?) of web developers know their framework and how to script things but don't know that HTML has been able to do things like this out of the box for over a decade. Even IE 10 supported it. So much simpler and more reliable than using JavaScript. <input name="foo" type="text" autofocus> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

naikrovek 3y ago
more than two decades. I was setting my websites at work up to do this in 2001. it's amazing how many web developer don't know what browsers are capable of, and only consider what features the framework they're using has.
Kuinox 3y ago
Autofocus works only on page load and not when the input is injected later by JS.
- xigoi 3y ago
  So why not have the input be there on page load?
  - Kuinox 3y ago
    Because when you do reactive web pages, they are not necessarly here on page load. I made a JS file explorer, to see files on the server from the browser. I wanted to mimic the windows explorer breadcrumb path bar. If you look at the behavior of the breadcrumb pathbar, you can't do that on page load, you have to replace the breadcrumb by an input text on clic, so not at page load. Yes theroically, you can fetch a whole new page for that, but it would imply fetching a new page from the server just for this: it doesn't make sense.
herbst 3y ago
I honestly don't know. But I believe one big reason why my SEO game seems always a bit better than others is because I learned and still practice to build websites user friendly. This starts by using the right tags for things (articles, section, header, ...) over autofocus, alt and title tags and even rel attributes. No magical js page builds. All my websites are screen reader friendly by default.
- ttfkam 3y ago
  Yep, 100%. Using HTML as it was intended helps with SEO, accessibility, readability, semantic understanding, etc. It's got it all out of the box. Folks just seem to go out of their way to make things harder by focusing on the JS layers and frameworks above it all. Converting everything to a sea of divs that you have to go back it to style, add ARIA roles and labels, and make keyboard-accessible. It's all like enriched white bread: stripping out everything healthy, adding a bucket of preservatives, supplement with a few of the vitamins and minerals they leached out earlier, and market its insubstantial tastelessness like it's normal.
bob1029 3y ago
This is why I moved away from web frameworks. I could feel them making me incapable of solving really simple problems like this. Autofocus & tab order are a nightmare-tier mission if you absolutely have to get them right but find yourself trapped inside some dynamic DOM circus. As far as I am aware, whatever magic is happening inside the browser's HTML engine is infinitely more reliable and predictable than what any JS framework could provide on top. JS certainly won't be making it faster or more responsive.
- codex_i 3y ago
  That is the whole reason that made me stop using them. Frameworks make you lose capability to write anything outside of them, locking you inside it's own Ecosystem and making you unable to write a single line of code outside of it.
  - ttfkam 3y ago
    Try Svelte. It's quite easy to use most vanilla JS libraries and techniques with it. https://hackmd.io/@roguegpu/r1RKQMdt3 https://hackmd.io/@roguegpu/r1RKQMdt3 The ChartJS section is a good example. You're following the ChartJS tutorials to use it, not just some bespoke framework wrapper around it.
- frob 3y ago
  I have this battle with newer developers quite frequently. They immediately want to reach for a framework for everything and they try to abstract away as much html and css as possible. A common experience has been with new grads who have a lot of experience with tailwind. They're used to being able to just apply a tailwind class for everything. However, I find they often lack the understanding of what is actually going on at a css-level so are unable to easily do anything that breaks the tailwind mold. I often have them sit down with a more senior developer to watch them use raw css (with some developer ergonomics like styled components or sass) for a bit, and they come away with a new appreciation for how the fundamental languages of the (modern) browser are quite expressive and powerful.
  - 3y ago

by ttfkam 3y ago

naikrovek 3y ago

more than two decades. I was setting my websites at work up to do this in 2001. it's amazing how many web developer don't know what browsers are capable of, and only consider what features the framework they're using has.

Kuinox 3y ago

Autofocus works only on page load and not when the input is injected later by JS.

xigoi 3y ago
So why not have the input be there on page load?
- Kuinox 3y ago
  Because when you do reactive web pages, they are not necessarly here on page load. I made a JS file explorer, to see files on the server from the browser. I wanted to mimic the windows explorer breadcrumb path bar. If you look at the behavior of the breadcrumb pathbar, you can't do that on page load, you have to replace the breadcrumb by an input text on clic, so not at page load. Yes theroically, you can fetch a whole new page for that, but it would imply fetching a new page from the server just for this: it doesn't make sense.

herbst 3y ago

I honestly don't know. But I believe one big reason why my SEO game seems always a bit better than others is because I learned and still practice to build websites user friendly. This starts by using the right tags for things (articles, section, header, ...) over autofocus, alt and title tags and even rel attributes. No magical js page builds. All my websites are screen reader friendly by default.

ttfkam 3y ago
Yep, 100%. Using HTML as it was intended helps with SEO, accessibility, readability, semantic understanding, etc. It's got it all out of the box. Folks just seem to go out of their way to make things harder by focusing on the JS layers and frameworks above it all. Converting everything to a sea of divs that you have to go back it to style, add ARIA roles and labels, and make keyboard-accessible. It's all like enriched white bread: stripping out everything healthy, adding a bucket of preservatives, supplement with a few of the vitamins and minerals they leached out earlier, and market its insubstantial tastelessness like it's normal.

bob1029 3y ago

This is why I moved away from web frameworks. I could feel them making me incapable of solving really simple problems like this. Autofocus & tab order are a nightmare-tier mission if you absolutely have to get them right but find yourself trapped inside some dynamic DOM circus. As far as I am aware, whatever magic is happening inside the browser's HTML engine is infinitely more reliable and predictable than what any JS framework could provide on top. JS certainly won't be making it faster or more responsive.

codex_i 3y ago
That is the whole reason that made me stop using them. Frameworks make you lose capability to write anything outside of them, locking you inside it's own Ecosystem and making you unable to write a single line of code outside of it.
- ttfkam 3y ago
  Try Svelte. It's quite easy to use most vanilla JS libraries and techniques with it. https://hackmd.io/@roguegpu/r1RKQMdt3 https://hackmd.io/@roguegpu/r1RKQMdt3 The ChartJS section is a good example. You're following the ChartJS tutorials to use it, not just some bespoke framework wrapper around it.
frob 3y ago
I have this battle with newer developers quite frequently. They immediately want to reach for a framework for everything and they try to abstract away as much html and css as possible. A common experience has been with new grads who have a lot of experience with tailwind. They're used to being able to just apply a tailwind class for everything. However, I find they often lack the understanding of what is actually going on at a css-level so are unable to easily do anything that breaks the tailwind mold. I often have them sit down with a more senior developer to watch them use raw css (with some developer ergonomics like styled components or sass) for a bit, and they come away with a new appreciation for how the fundamental languages of the (modern) browser are quite expressive and powerful.
- 3y ago