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

21–30 of 136 posts

Re: HTML Tips (2020)

#21

Post by chrismorgan »

slver wrote: post #18
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 literal…

Generally speaking, I said. And “very probably”. Certainly there are situations where you need to control the loading behaviour, but for typical scrolling content—a place where JS-based lazy loading has been popular—it’s not a great idea.

(And yeah, if you need lazy loading, which a large gallery probably does, then loading=lazy is unsuitable as it doesn’t guarantee anything at all, so definitely do it in JS.)

Re: HTML Tips (2020)

#22

Post by jnellis »

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.

Is that only an artifact of dynamically updating them? Firefox and chrome do as expected in the example; match any substring.

Re: HTML Tips (2020)

#23

Post by asddubs »

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.

on firefox it finds all phrases containing the entered string

Re: HTML Tips (2020)

#24

Post by asddubs »

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,…

drag and drop rearrangeable lists as a form element!

Re: HTML Tips (2020)

#25

Post by mdenic »

tylerscott wrote: post #2

TIL about and wow is it interesting. Here is the spec: https://www.w3.org/TR/html52/sec-forms.html#the-meter-elemen... I wonder what else in the HTML5 spec I've missed... Thanks for sharing this!

Glad you enjoyed it.

Re: HTML Tips (2020)

#26

Post by open-source-ux »

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,…

The HTML form element has a lot of interactive controls already e.g. colour picker, a date control for entering dates, file picker, number entry with spinner controls and more:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

The problem is that some HTML form controls cannot be styled with CSS to render consistently across browsers. So, many sites fall back on JavaScript to render the control. Here is an example from 2016 on styling HTML checkboxes and radio buttons to make them larger (which, as far I can tell, is still a problem): https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-...

Re: HTML Tips (2020)

#27

Post by AdmiralAsshat »

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.

Re: HTML Tips (2020)

#30

Post by lucb1e »

#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?

Post reply on HN