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

81–90 of 136 posts

Re: HTML Tips (2020)

#81

Post by blacksmith_tb »

robertoandred wrote: post #65
Jiocus wrote: post #10

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

Try https://tinypng.com/ for png compression.

My personal fave is Crunch[1].

1: https://github.com/chrissimpkins/Crunch

Re: HTML Tips (2020)

#83

Post by asddubs »

lmm wrote: post #74
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,…

In Python there's a saying: the standard library is where modules go to die. That effect applies even more so for browser builtins. IMO we would be better off moving most of these things out of the browsers and into some kind of web component standard.

no way, browsers have a stacked deck especially in regards to accessibility, but also things like platform appropriateness and handling corner cases that only affect specific scenarios. web components tend to be the 80% that whoever made them cared about, which varies from use case to use case.

Re: HTML Tips (2020)

#84

Post by afavour »

wanda wrote: post #51

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…

I’d argue that image lazy loading isn’t really a thing an image does, it’s a browser optimisation for asset loading. The built in functionality ensures the image is loaded well before it appears on the screen.

Re: HTML Tips (2020)

#85

Post by tshaddox »

AdmiralAsshat wrote: post #27

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

As other replies have mentioned, you need to set the width and height attributes on the img element. I believe that now works for responsive images in recent versions of popular browsers.

It used to not work for responsive images. We had to do tricks like pseudo elements with padding set to a percent value: https://css-tricks.com/preventing-content-reflow-from-lazy-l...

Re: HTML Tips (2020)

#86

Post by livinginfear »

extra88 wrote: post #77
livinginfear wrote: post #63

Awesome list! The ' tip reminds me that I wish there was a better way to do nested list numbering of the kind you'd likely find in a table of contents, such as "1.1.2" and so on. As far as I'm aware there's no simple way to do this natively without using CSS or JS to change the list item prefix.

You can do that with CSS alone. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_a...

I'm familiar with that trick. This is the CSS solution I was referring to above. I still consider this quite 'hacky', and non-intuitive.

Re: HTML Tips (2020)

#87

Post by livinginfear »

marcosdumay wrote: post #67
livinginfear wrote: post #63

Awesome list! The ' tip reminds me that I wish there was a better way to do nested list numbering of the kind you'd likely find in a table of contents, such as "1.1.2" and so on. As far as I'm aware there's no simple way to do this natively without using CSS or JS to change the list item prefix.

Hum... Are you referring to the numbers that appear when you nest lists? As in putting an ol inside an item of another ol?

Yes. Nesting elements alone does not yield the kind of results I'm after.

Re: HTML Tips (2020)

#88

Post by tommek4077 »

ilkka_es wrote: post #8

Wow, I had no clue that these existed, and I am a front-end developer!

Not to go after you in particular. But this is somehow the state of the modern web.

Frontend devs not knowing HTML, but having complicated and over engineered build pipelines and continous integration for their JS cruft.

I wonder why sites don't load faster or render... ah right Javascript in the mega bytes.

Re: HTML Tips (2020)

#89

Post by Zardoz84 »

wanda wrote: post #51

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…

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

There is a polyfill that makes it works even on IE.

I embraced and use it on a product that it's remaking&modernizing all the frontend. Sadly, when I take the decision a few years ago, I thought that would be supported for all browsers, but looks that adoption has been paralyzed.

Re: HTML Tips (2020)

#90

Post by wilsonrocks »

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

I know it uses JS but the customValidity stuff is pretty cool too!
Post reply on HN