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

11–20 of 136 posts

Re: HTML Tips (2020)

#11

Post by theandrewbailey »

chrismorgan wrote: post #7
yummybear wrote: post #4

I want a cachebust="yes" attribute that invalidates an image when it changes, yet never contacts the server when the image is unchanged.

A common technique here is to use the query string to control this, with something like ?t=‹timestamp› or ?v=‹version› or ?‹hash of file contents›. Then the server can include proper cache-control headers to say “this is immutable, never going to change, don’t bother asking me if it’s changed”. A cachebust="yes" attribute wouldn’t be useful in practice because the server would either be serving it to everyone, effect…

I've seen tools that complain about query strings for external assets. The reasons for doing so probably aren't important anymore. Instead, I include a last modified timestamp in the URL path, e.g. /files/AXkgRCa3/style.css

Re: HTML Tips (2020)

#12

Post by theandrewbailey »

> 5. HTML Native Search

I've dynamically updated on a site, only to find out that browsers will only show options that strictly begin with whatever you've typed into the . When you want to do Google Search-esque suggestions, that's a problem. I don't know how to override that to force it to show all options.

Re: HTML Tips (2020)

#13

Post by c22 »

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…

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.

Re: HTML Tips (2020)

#14

Post by intergalplan »

theandrewbailey wrote: post #12

> 5. HTML Native Search I've dynamically updated on a site, only to find out that browsers will only show options that strictly begin with whatever you've typed into the . When you want to do Google Search-esque suggestions, that's a problem. I don't know how to override that to force it to show all options.

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, if they were somewhat better.

Form validation should be built-in (with optional light JS for defining non-built-in validators). The browser should supply a lot more input types, including some kind of payment integration. It's absurd those things have to be built over and over and delivered by the website.

I could go on. It's a damn shame.

Re: HTML Tips (2020)

#16

Post by yummybear »

intergalplan wrote: post #15
yummybear wrote: post #4

I want a cachebust="yes" attribute that invalidates an image when it changes, yet never contacts the server when the image is unchanged.

Huh? That's what HEAD requests and correct HTTP headers are for, surely?

It was kind of tounge-in-cheek though

Re: HTML Tips (2020)

#17

Post by yummybear »

beachy wrote: post #5
yummybear wrote: post #4

I want a cachebust="yes" attribute that invalidates an image when it changes, yet never contacts the server when the image is unchanged.

Why not just give it a new url?

It was kind of tounge-in-cheek, but giving a new url may require a redeployment which isn’t always practical

Re: HTML Tips (2020)

#18

Post by slver »

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…

Regarding lazy image loading, I'm not a fan of these wholesale opinions that don't consider how varied our needs are. I'm showing a gallery of photo thumbnails going back a decade.

I want to provide a smooth experience similar to how you'd watch your gallery on Android or iOS.

So this means no, I don't want to have the user click links with years and months on them, I want a single page.

But do I want to load literally THOUSANDS OF IMAGES at once? No.

I want to know where on the page I am, and load the visible images, and also few rows above the fold and few rows below the fold.

And I can do this with JS.

What's the lesson here? "They won't be loaded when you scroll anyway". They can be. "HTML is much better than JavaScript" sometimes (often) it isn't. "if you care about the image, you very probably shouldn’t use lazy loading on it; and if you don’t care about it, hey, why not just remove it?" Well, BS.

Re: HTML Tips (2020)

#19

Post by chrismorgan »

Jiocus wrote: post #10
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…

> 15. .webp: significantly overrated, in my opinion. It doesn’t give anywhere near as big a boost in compression relative to properly-done JPEG as people think (like under 10% a lot of the time). Now AVIF, that’s another matter. I was saying the same thing but then I realized something. The thing about webp isn't about how it compares to jpg[0]. Png on the other hand, with all those logos and some with transparency.…

Good call, when you need transparency it’s a much more meaningful gain.

Heh, this is even another place where you can invoke SVG (though slightly less awful than the HTML-in-SVG-in-HTML I just mentioned, yet nonetheless pretty unnecessary nowadays): you split the alpha channel out into a separate, greyscale, image, and use it as a mask for the other image. Thus you can add a PNG or JPEG alpha channel to your JPEG. https://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/ is a good description of the technique; and JPNG.svg, at https://codepen.io/shshaw/full/LVKEdv, is one tool to generate such things.

Re: HTML Tips (2020)

#20

Post by theandrewbailey »

intergalplan wrote: post #14
theandrewbailey wrote: post #12

> 5. HTML Native Search I've dynamically updated on a site, only to find out that browsers will only show options that strictly begin with whatever you've typed into the . When you want to do Google Search-esque suggestions, that's a problem. I don't know how to override that to force it to show all options.

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

Post reply on HN