HTML Tips (2020) • Hacker News Board

Re: HTML Tips (2020)

#51

Post by wanda » Wed, May 05, 2021, 10:47 PM UTC

No mention of the element [1] but that's probably because browser support isn't great—not implemented in Safari, experimental flag in Firefox.

The lazy-loading option for img elements is news to me, but I think I'd still prefer to use JavaScript for that task. Same probably goes for the dialog element actually now that I think about it.

Having a simple HTML5 option might seem cool, but I like to keep the actual logic in JavaScript and to use HTML just for page structure. Basically, I prefer to depend on HTML as little as possible for user interaction/behaviour.

  HTML: what an element *is*
  CSS:  how an element looks
  JS:   what an element *does*

There's always overlap and blurred lines but that's one of the joys [2] of developing for the web.

If you're using a framework like React you don't even care about the markup, it's all abstracted away -- but in that case, you care even less about neat little HTML5 additions, you've got components and they're woven into your event dispatch and state already.

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

[2]: horrors

Re: HTML Tips (2020)

#52

Post by edoceo » Wed, May 05, 2021, 10:59 PM UTC

theandrewbailey wrote: post #20

intergalplan wrote: post #14

Earlier quoted context omitted.

There's so much stuff in HTML that's almost good enough to replace things we use Javascript for. We should also have had built-in pagination and sorting on tables, like, years ago, with some kind of (optional, if your data aren't all available on the initial page load) back-end spec for how the requests will be shaped and for delivering the data. An awful lot of "AJAX" Javascript use could just be frames and iframes,…

> Form validation should be built-in Have you used pattern attributes? https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

and the :invalid css option (I like to just make the bottom border red, dashed)

Re: HTML Tips (2020)

#53

Post by learningwebdev » Wed, May 05, 2021, 11:01 PM UTC

mdenic wrote: post #25

tylerscott wrote: post #2

TIL about and wow is it interesting. Here is the spec: https://www.w3.org/TR/html52/sec-forms.html#the-meter-elemen... I wonder what else in the HTML5 spec I've missed... Thanks for sharing this!

Glad you enjoyed it.

Hey Marko, thank you for this resource! As somebody who is teaching themselves full-stack development, it's easy to miss out on learning tips and tricks like these. This is very useful. I'm going to link to your webpage in the first ever item on my new TIL page (https://news.ycombinator.com/item?id=27017604).

Re: HTML Tips (2020)

#54

Post by pmlnr » Wed, May 05, 2021, 11:08 PM UTC

I recently learnt about `samp`, which turned out to be ancient: https://html.com/tags/samp/

Re: HTML Tips (2020)

#55

Post by ffhhj » Wed, May 05, 2021, 11:29 PM UTC

Cool, learned some new stuff. Please add the progress tag, and tips related to encoding and languages.

Re: HTML Tips (2020)

#56

Post by 1986 » Wed, May 05, 2021, 11:34 PM UTC

open-source-ux wrote: post #26

intergalplan wrote: post #14

Earlier quoted context omitted.

There's so much stuff in HTML that's almost good enough to replace things we use Javascript for. We should also have had built-in pagination and sorting on tables, like, years ago, with some kind of (optional, if your data aren't all available on the initial page load) back-end spec for how the requests will be shaped and for delivering the data. An awful lot of "AJAX" Javascript use could just be frames and iframes,…

The HTML form element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is…

And also cross browser support for the spec in general - eg desktop Safari doesn't implement that date picker, or any special treatment of input type="date" at all.

Re: HTML Tips (2020)

#57

Post by frosted-flakes » Wed, May 05, 2021, 11:38 PM UTC

teachingassist wrote: post #50

c22 wrote: post #13

Earlier quoted context omitted.

Lately I've been a fan of lazy preloading . First I just load the requested page and all resources on it. Then, if javascript is enabled, I start loading the rest of the site (or section of the site) into hidden dom elements, starting with the resources most likely to be requested next. Then the rest of the user's interactions on the site are near-instant and you can even bring the entire thing offline.

It amazes me that modern web frameworks don't already do this by default .

They do. Gatsby is one of them, which is why people freak out when they see that one request triggers 5mb of downloads. I think by default it only pre-loads links visible in the viewport when the page loads.

Re: HTML Tips (2020)

#58

Post by felipeccastro » Wed, May 05, 2021, 11:45 PM UTC

1986 wrote: post #56

open-source-ux wrote: post #26

Earlier quoted context omitted.

The HTML form element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is…

And also cross browser support for the spec in general - eg desktop Safari doesn't implement that date picker, or any special treatment of input type="date" at all.

Apparently it will be supported in the next version! https://webkit.org/blog/11648/new-webkit-features-in-safari-...

Re: HTML Tips (2020)

#59

Post by mdaniel » Thu, May 06, 2021, 12:00 AM UTC

1986 wrote: post #56

open-source-ux wrote: post #26

Earlier quoted context omitted.

The HTML form element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in... The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is…

And also cross browser support for the spec in general - eg desktop Safari doesn't implement that date picker, or any special treatment of input type="date" at all.

I don't have a modern Safari in front of me to check, but Can I Use alleges they're about on par with Firefox as of 14.1: https://caniuse.com/?search=Input%20date

Does that mean only fully up-to-date macOS gets it, or do Safari versions move independent of the OS?

Re: HTML Tips (2020)

#60

Post by bigiain » Thu, May 06, 2021, 12:37 AM UTC

tyingq wrote: post #36

Didn't know about "> Now I can have proper zero indexed lists and annoy friends. Chrome even supports negative integers.

Sadly, it appears that the logical starting index compromise between the zero index and one index factions doesn't work.

Is not supported...