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

121–130 of 136 posts

Re: HTML Tips (2020)

#121

Post by thrwaeasddsaf »

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…

> Basically, I prefer to depend on HTML as little as possible for user interaction/behaviour.

I prefer to depend on the user agent for user interaction and behavior. Javascript and all its potential for tracking, malware, side channel exploits, etc. should be abolished from the safe web.

Re: HTML Tips (2020)

#122

Post by Jiocus »

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.

I did a quick test, here's how it went.

Choose an example png(1) but had to redo with png(2) because tinypng.com won't chew a file larger than 5MB.

png 2.4MB ← original png

png 2.1MB ← Trimage image compressor

jpg 876.6kB ← Converseen image converter

jpg 808.2kB ← jpegcrush ← Converseen image converter

png 743.0kB ← tinypng.com (impressive!)

webp 416.3kB ← Converseen image converter

Re: HTML Tips (2020)

#123

Post by nicbou »

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.

On the client side too. I use it to avoid loading below-the-fold images until it's necessary. For example, I don't load the thumbnails of related articles.

It makes a non-negligible impact on bandwidth usage and page load time.

Re: HTML Tips (2020)

#124

Post by dspillett »

Tomte wrote: post #108
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…

When I read that tip I was thinking whether I should use it on https://www.2uo.de/russland-2013/ It's a longish travel report, lots of photos, interspersed with comments. I think it might be nice not to have all of them loaded in the beginning. Especially since random visitors probably won't read it till the end.

Ideal in this case might be to load images that are within one or two screenfuls of the current position, then someone scrolling down actually ingesting the content might not be bothered by the delay as they probably won't see it. That would require JS though, and you need to deal with page resizes as well as scroll events. Also make sure you include width & height settings for the image tag or you scroll position reference will be off when considering images further down the page. Maybe load a low-res placeholder for the other images in case the user drops offline as they scroll, either an "image not loaded" marker just so they know something _should_ be there or a very compressed version of the actual photo.

Re: HTML Tips (2020)

#125

Post by runarberg »

Ayesh wrote: post #96

I wish the tag receuves some love, from both users and browsers. I recently worked on a page (e.g https://php.watch/rfcs/fibers ) that I didn't want to set inline CSS to set a dynamic width for an element. Helps me not use a strict CSP. I kind of abused the progress element because it has customizable width. Elements that support a width attribute (object, iframe, image, etc) didn't fit that well. Progress elements a…

I agree. A couple of years ago I answered an SO question about how to style a tag cross browser[1]. It is kind of ridiculous the amount of vendor prefix one must use to achieve this. At this point I would even just settle on a standard so that I could have autoprefixer do this for me.

Also both and would be an order of magnitute more usable if non-linear functions (such as sin(), cos(), pow(), exp(), etc.) were allowed as values in CSS transformation matrices so that I could use instead of when my designer wants the meter bar to look like a speedometer (which is a quite common, and a valid design choice).

1: https://stackoverflow.com/questions/8094835/how-to-style-htm...

Re: HTML Tips (2020)

#126

Post by intergalplan »

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

Yes! That is definitely a big step in the right direction. It's usually enough to remove at least some of the JS burden on forms. I'm not sure how widespread its use is in practice, though.

Re: HTML Tips (2020)

#127

Post by felipeccastro »

lstamour wrote: post #75
felipeccastro wrote: post #58

Earlier quoted context omitted.

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

In fact, Safari 14.1 is current as of last week (well, this week...) https://support.apple.com/en-us/HT212340 And iOS 14.5 (well, 14.5.1) is also current: https://support.apple.com/en-ca/HT211808#1451 But we'll have to wait a few weeks to months before all Safari users upgrade and see the latest improvements.

Yes, but still I think it's great news as it looks like we can realistically make forms using native inputs only and validation, complex inputs (like date pickers) all can be setup with little to no javascript. This enables much simpler architectures, like traditional server side rendered apps, that still have a great UX.

Re: HTML Tips (2020)

#128

Post by chrismorgan »

john-doe wrote: post #119
zamadatix wrote: post #46

Earlier quoted context omitted.

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.

Shorter!

  Download this page
(Explanation: href is equivalent to href="", and an empty string is a valid URL string, a relative URL with no scheme, no host, zero path segments, no query string and no fragment. # is a valid URL string representing the same URL, but with an empty fragment (rather than no fragment).

URLs are resolved relative to what the HTML spec calls the document base URL, and relative URL resolution of an empty string against that will yield that base URL sans fragment, just as resolving # will yield that base URL with an empty fragment.

Note also that you can’t just omit the href attribute, or else it won’t be a link.

Also note that a element will affect the document base URL and is thus likely to make both of these links do the wrong thing.)

Re: HTML Tips (2020)

#129

Post by sandreas »

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.

Well, I would prefer an attribute, that is already there for some elements (like css or js files):

  integrity=""
This would kill two birds with one stone: If it changes in HTML, this means:

- Please bust cache

- Refetch and ensure, that the fetched file is securely valid

And it could be optional for every fetchable resource (img, video, css, js, etc.)

Re: HTML Tips (2020)

#130

Post by mdenic »

learningwebdev wrote: post #53
mdenic wrote: post #25

Earlier quoted context omitted.

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

Awesome! Thanks.
Post reply on HN