Interesting that most post for this url come from accounts created the day it was posted.
Post on your own account you coward.
Also I get the irony that this account was just created.
HTML Tips (2020)
41–50 of 136 posts
Re: HTML Tips (2020)
#42#1, images that load only when they scroll into view, bother the hell of out me. I doubt there's a website that enabled this where I haven't noticed the constant flashing of content as I scroll down. Looks rather glitchy and constantly distracting from the text you're reading. Luckily not that many sites have it, but come to think of it, does anyone know of an add-on or something to disable the lazy attribute?
Not saying you’re wrong, or that it isn’t annoying, but in my experience it’s typically JS lazy loading solutions which cause this. Native HTML lazy loading, again in my own experience, is generally aggressive enough that I rarely if ever scroll to where an image would be in view before it loads.
Re: HTML Tips (2020)
#43Is there any good 'linear'(with a clear learning path, e.g. course/book, as opposed to MDN) resource to learn modern HTML/CSS? Preferably not one starting at Hello World. The thing is I'm primarily a BE developer but I have to do some front-end tasks every now and then and I often catch myself reinventing the HTML5 wheel.
John Duckett's book "HTML & CSS" is good. You can skip to the more advanced chapters if you don't want to start from zero.
As much as W3Schools is hated, I find their HTML/CSS/JS guides to be a lot simpler to understand than MDN: https://www.w3schools.com/html/default.asp
Re: HTML Tips (2020)
#44Some 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…
> In a situation like this, the ideal is to put the radio button inside its label, and make the label `display: block`, or something else that achieves this effect (if done carefully, you might even find `display: grid` suitable nowadays).
This is actually not great for accessibility. It may be okay for some screen readers if you also populate the for/id attributes, but even then you should test to be sure.
Edit to add:
> Video thumbnail: an interesting thing that has just occurred to me on this is that the poster attribute doesn’t let you provide multiple formats like does. Hmm, so you probably keep serving a JPEG here instead of WebP, AVIF or whatever else. Wonder if anything can ever be done about that. I can imagine them making poster="#foo" followed by inside the work. Eek, this similarity to svg:use made me realise that you can actually achieve this goal with SVG already: the code below ought to do it; ugh!
My solution is to skip the poster attribute and use a picture with object-fit: cover.
Re: HTML Tips (2020)
#45Earlier quoted context omitted.
> 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. ht…
SVG are absolutely an option and I've been meaning to go that route by default for some time, but old habits die hard. I mostly use them for icons, SVG feels saner than the alternative methods and easier to work with. Combined with design work it's convenient.
Webp/png can be very useful in the sense that there is a broad understanding about how to work with plain images. A low barrier to entry, and easier collaboration in some situations.
I did not know about the alpha channel workaround. That's nice to have in the toolbox, Thanks.
Re: HTML Tips (2020)
#46Some 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.
Re: HTML Tips (2020)
#47It’s probably also worth mentioning in the section about image performance:
1. The source element also accepts a media attribute with the same syntax as CSS media queries; the first match (media + type) wins, so typical usage is largest > smallest. If you enlarge the window it’ll automatically load larger images. (Annoyingly, this is not supported on video>source.)
- When styling picture elements in CSS, you actually need to select the img tag. This still trips me up time to time.
Re: HTML Tips (2020)
#48#1, images that load only when they scroll into view, bother the hell of out me. I doubt there's a website that enabled this where I haven't noticed the constant flashing of content as I scroll down. Looks rather glitchy and constantly distracting from the text you're reading. Luckily not that many sites have it, but come to think of it, does anyone know of an add-on or something to disable the lazy attribute?
In Firefox you can set "dom.image-lazy-loading.enabled" to false in about:config. In Chromium based browsers set "Enable lazy image loading" to disabled in about:config In Safari it's still an experimental feature you have to enable manually. . Of course since Safari doesn't support it yet plenty of sites lazy load via classic JS style solutions and trying to fix those is like playing whack-a-mole.
That's neat! Just searching for lazy I get all the relevant options, like bottom margin. I'll be tweaking those (when I page down, which I use a lot with spacebar, I go down about 1100px, so no wonder that the default of 300 isn't working for me) and only disable it altogether if this stuff still happens. Thanks!
Re: HTML Tips (2020)
#49Does lazy loading at least carve out a placeholder spot for the image so that it doesn't throw off the layout? Because if not, please use something that does. There's nothing more frustrating than when I'm trying to read through a page and my spot keeps getting pushed up and up because of dynamically loading elements.
If you know the size of the incoming image specify its dimensions with CSS.
Re: HTML Tips (2020)
#50Some 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.
It amazes me that modern web frameworks don't already do this by default.