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

101–110 of 136 posts

Re: HTML Tips (2020)

#101

Post by jaeh »

great article!

just have one suggestion:

noopener is an actual security issue, the opener object is dangerous!

noreferrer is something we should do for the privacy of our users.

nofollow is for us developers to avoid our properties being connected to other properties (links are not endorsements)

maybe think about expanding that section of the docs :)

actually, rel="noopener noreferrer nofollow" should be the standard and opt-outed from. imho, rel="opener referrer follow" would have been the right thing to do.

Re: HTML Tips (2020)

#102

Post by jaeh »

tshaddox wrote: post #85
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...

its a bit flaky, sometimes it just does not work, and its hard to debug, css is a hard language to debug and get right.

https://jaeh.at works fine when reloading, no layout changes, and the layout changed slightly before i fixed it using width & height.

https://noncon.org does not (and i had no time to fix, might be because width of images is not set, might be something with the css position/float layout, we had about a week to setup the whole conference infrastructure, including the streaming server, layout flashing was my last concern at the time and i kept myself too busy since then to fix something so trivial...)

sorry for the personal links, just examples i knew from the top of my head because i built them ;)

Re: HTML Tips (2020)

#103

Post by weinzierl »

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 all odds and for whatever reason - decide not to scroll down. Kidding aside I think that as a creator I should optimize for the readers that are thoroughly interested in my whole content and therefore I should preload and not lazy load.

Re: HTML Tips (2020)

#104

Post by FriedrichN »

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.

Re: HTML Tips (2020)

#105

Post by martijn_himself »

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…

This was my thought exactly. It's infuriating and unnecessary.

Re: HTML Tips (2020)

#107

Post by TonyTrapp »

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…

I've been using this in a script I wrote for myself which is basically a huge image gallery. This gallery may consist of thousands of images on a single page. When the browser always had to load all of those thumbnails, it consumed a lot of bandwidth and was very slow. In fact, the user experience was strictly worse because images are normally loaded in the order they appear on the website, so it took several seconds until the thumbnails at the end of the page were available. Now the browser just loads those thumbnails that I can see (or am about to see), and they are there pretty much instantly even if I scroll to the end of my gallery.

Re: HTML Tips (2020)

#108

Post by Tomte »

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.

Re: HTML Tips (2020)

#109

Post by BiteCode_dev »

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.

It's also because Python has such an awesome stdlib that it's so popular. So there is that.

Re: HTML Tips (2020)

#110

Post by wolfhumble »

didymospl wrote: post #93
rchaud wrote: post #43

Earlier quoted context omitted.

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

Thanks everyone for all the recommendations. I need more time to look into them but I just wanted to add here that the book you mentioned [1] stands out as one of the most aesthetically pleasing IT books I've seen. [1] http://www.htmlandcssbook.com/

Doesn't necessarily mean anything, but I checked out the book on Amazon and see that: Publisher : John Wiley & Sons; 1st edition (November 8, 2011)

I am sure there are a lot of good stuff there, but quite a lot has happened with html/css and browser support since late 2011.

Post reply on HN