Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML Tips (2020)

markodenic.com

Post reply on HN
Print view View original

111–120 of 136 posts

Re: HTML Tips (2020)

#111

Post by kilian »

weinzierl wrote: post #103

Very first tip: "Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them." Can someone explain to me when this is useful? As a content consumer I'm frequently annoyed, when I have to wait for images to load while scrolling. As a content creator I understand the idea that I might potentially save the consumer some bandwidth, given they might - against al…

> As a content consumer I'm frequently annoyed, when I have to wait for images to load while scrolling.

That's the experience most javascript solutions gave you. This browser native solution will load images _before_ they're visible in the viewport so you do not get the fading-in flashes you often see. Combine it with setting the width and height on an element and your page also won't shift around as you scroll.

This will actually optimize for the reader as it will improve the time it takes before they can interact with your page. I also think you'd be very disappointed if you see the percentages of people that end up scrolling on any given page.

Re: HTML Tips (2020)

#112

Post by iib »

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!

I see that it is very similar to , and may be misused as a progress bar (which w3 actually even acknowledges and guides against). I wonder why one tag could not have sufficed.

Re: HTML Tips (2020)

#113

Post by runarberg »

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!

The and are pretty amazing... I only wished they would settle on a standard way to style it. And if they would allow non-linear transformations (e.g. by putting cos and sin functions in the transformation matrix so it can appear like a speedometer) that would be golden.

Re: HTML Tips (2020)

#114

Post by runarberg »

iib wrote: post #112
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!

I see that it is very similar to , and may be misused as a progress bar (which w3 actually even acknowledges and guides against). I wonder why one tag could not have sufficed.

allows you to define an optimal and a sub-optimal value, such that a full meter might be bad (or good) depending on where the value lands relative to it.

Although, one could argue that a is just a where the optimal value is 100%.

Re: HTML Tips (2020)

#116

Post by 1_player »

gfiorav wrote: post #92

I actually used 5 (native search) for a fully static web (non spapp) that I helped build recently: https://beachboyslegacy.com

Doesn't seem to always work for me on Edge: the spinner spins, sometimes I get the autocompletion window, others I don't, or I need to focus the input again for it to appear.

Which is consistent with the experience I had with the native search widget in this article. I guess nobody uses it, so it's full of bugs and UX issues.

Re: HTML Tips (2020)

#117

Post by edflsafoiewq »

frosted-flakes wrote: post #57
teachingassist wrote: post #50

Earlier quoted context omitted.

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.

It's wasted bandwidth if the user never clicks through to the rest of the site, which is really common (think an article linked on HN).

The model a lot of devs have of the user's connection is a huge, unmetered pipe, possibly with short periods of intermittency (being on a train, etc). The web can be not such a great place if you don't match that model.

Re: HTML Tips (2020)

#118

Post by teachingassist »

edflsafoiewq wrote: post #117
frosted-flakes wrote: post #57

Earlier quoted context omitted.

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.

It's wasted bandwidth if the user never clicks through to the rest of the site, which is really common (think an article linked on HN). The model a lot of devs have of the user's connection is a huge, unmetered pipe, possibly with short periods of intermittency (being on a train, etc). The web can be not such a great place if you don't match that model.

I think I was expressing surprise that there isn't a mature infrastructure for this. (Thank you for introducing me to Gatsby)

You could turn it off if and when you face any bandwidth limitations - if it was a mature system, then you could turn it off globally in the browser.

Intermittency can be overcome with the right technical approach. It's potentially great for intermittent connections, since it can pre-download materials whenever your connection is good.

I guess it won't be supported between different sites, because it introduces risky conflict between tracking and privacy, that hasn't been legally resolved. (Any external link creates a privacy/tracking/security/authentication hole, whether the user clicks it or not). Maybe that's what has ultimately prevented wider adoption.

Re: HTML Tips (2020)

#119

Post by john-doe »

zamadatix wrote: post #46
chrismorgan wrote: post #6

Some remarks, with some opinions, some caveats, and some extra info that I find interesting: 1. Lazy loading: generally speaking, just don’t do this. It’s much better than doing it in JavaScript (especially when combined with a blurry image until it loads, which I and many others find surprisingly disconcerting), but if you’re not very close to the server (which very commonly means “if you’re not in the USA”) then it…

14. `download` attribute: this can also take a value, which will be used as the filename. This is useful if you generate a file client-side as a data: URI. Now there is one I can't believe I missed.

I've been using it with href="#", so it simply downloads the current HTML page.

Re: HTML Tips (2020)

#120

Post by vmateixeira »

FriedrichN wrote: post #104
weinzierl wrote: post #103

Very first tip: "Performance tip. You can use the loading=lazy attribute to defer the loading of the image until the user scrolls to them." Can someone explain to me when this is useful? As a content consumer I'm frequently annoyed, when I have to wait for images to load while scrolling. As a content creator I understand the idea that I might potentially save the consumer some bandwidth, given they might - against al…

It's more about saving bandwidth on the server side, plus it allows for tracking without using JS.

Exactly this. It's a problem already solved by pagination - but I guess that's not cool and doesn't allow for such granular tracking.
Post reply on HN