Tag photos

[AllAboutLearningPress]

Ability to tag photos and have a listing of tags (so the user can filter by tags and view most popular tags).

[andreyvolokitin]

While entering a new tag in the input, there could be some autocomplete functionality. The problem is that any JS-based solution has somewhat awful UX on mobile. Best solutions working there are native ones, i.e. for select there's a native OS widget for choosing options. There's also a native support for datalist, which provides autocomplete. It can't be styled, but it has nice mobile UX and works everywhere we need. The single datalist of all/relevant tags might be included in HTML, then any tag input can use same datalist.

Not sure about maximum amount possible to include in a datalist, but I think it should be decent. Also, if needed, maybe things like fetching subset of tags on input change and including in a datalist with JS could be investigated

[andreyvolokitin]

So , for dynamically populating datalist — in chrome and firefox it works. So you can enter something, fetch based on the value, populate datalist, and then the dropdown will be shown automatically in those browsers. In Safari though (iOS and desktop), it doesn't show dropdown when it gets populated, and I didn't find a way yet to trigger it (it might be impossible).

@AshrafAkon , can the html page contain all existing tags on page load in a <datalist>? Brotli/gzip compression can help if there would be thousands of tags. Still it is very doubtful. But maybe we can get away with it? For the newly entered unique tags, they can be appended to existing datalist and then they'll appear in the next opened datalist dropdown

[andreyvolokitin]

Related: https://bugs.webkit.org/show_bug.cgi?id=201121

Managed to make it work on iPhone & iPad, desktop looks like won't surrender... @dyner, do we even need tags autocomplete?

[AshrafAkon]

@andreyvolokitin If the taglist become too big then fetchcing all of them at once might cause page load issues. So my suggestion is can you complete an working ui where a small list pops down the tags bar. You can work with a small list of 15-20 tags. Then I can handle the rest to add more data as user types.

[andreyvolokitin]

@AshrafAkon "small list popup down the bar" is the problem I started with, see above comments. The most useful and convenient thing is <datalist>, because it works flawlessly on mobile (and JS-based popups work quite bad).

But dynamically adding more data to the <datalist> is a problem in Safari. Because of that I thought if all tags can be included in the page. I don't know how big tag list can become (another reason I asked), but compression might solve this, and if the <datalist> is located at the end of a page (which it is) it won't affect any HTML parsing/rendering, only download stage will be affected, which might be solved with compression

[andreyvolokitin]

P.S.: BTW, all tags shouldn't be strictly loaded at the first page render. They can be loaded in the background after the page is already loaded, they just should be there when the user clicks on the "specify tag" input, which might take them quite some time

[AshrafAkon]

@andreyvolokitin please look at this https://vue-select.org/ I was talking about something similar to this. Can you work on something similar to this? Just the ui should be okay for me to start with. This works quite well in smartphone.

[andreyvolokitin]

All JS solutions will be (by far) inferior to the native ones. This specific lib you linked looks better than others — it just refuses to loose the focus on the input so that dropdown doesn't hide randomly as it usually happens with such solutions (at least judging by quick tests). They do it on mobile, and not on desktop. But again, mobile can't be reliably detected, they probably rely on touch events for this distinction, but touch events are also present on desktops with a touchscreen. So... This is complicated, and there's a reason many prefer native controls for some cases.

If you believe they covered all things and made it actually useable on mobile, then OK, you can just use it as-is (see P.S., also lib issue list might be also relevant). Note that it is 20K, not sure if a size of all compressed tags will differ by far (in case of <datalist> solution)

P.S.: to use something like that, it needs to be used as a whole (i.e., this specific lib). Maybe just styled differently. So no big point to make something from scratch, because you'll need to cover much of things covered in the lib to again make it useable

[andreyvolokitin]

Maybe I'll generate an insane amount of tags (like 40000), compress it and see how it actually works with a <datalist>?

By a rough estimate: if 1 char is 1 byte and an average tag length is 10 characters, there will be 100000 tags in 1mb of uncompressed text. Brotli text compression ratio is 4.347 (https://i.imgur.com/ItHvx1F.png). So 100K tags will fit in 230kb (the average image size). 1M tags will fit in 2.3mb compressed. Which also doesn't look like much to just load over the network and also not for initial render, but in the background

Just a thought, probably this is all insane... Again, for mobiles, if they will be on something like 3G network, this will be definitely close to bad, or just plain bad. Though on 3G they'll hardly be able to use this image-based site, where all images they interact with are tens of megabytes or more in total...

[AshrafAkon]

We could lazy load all tags at once after the initial page load. Thats not a issue. But i guess we should support the latest safari at least. As there are mac users who mostly uses safari. As you mentioned you couldnt find a way to dynamically populate the datalist on ios/desktop. I think we should move to a js one. The logics are already there. If you could deliver me the ui I can handle the rest on vue. Let me know what you think.

[andreyvolokitin]

Safari isn't a problem if all tags will be preloaded. In a nutshell:

• tags are preloaded and populated into the list, that's not a problem in Safari
• all things work automatically everywhere when the user starts using it

Safari doesn't fully support the case when you start typing in input, fetch tags based on what you typed, update datalist with fetched results, and then it should automatically show newly fetched tags. In safari it doesn't happen. If all tags will be preloaded, this is not an issue at all.

[andreyvolokitin]

I propose to test it with a huge (but realistic, also for open-source scenario) amount of tags. In case of problems — switch to JS

[AshrafAkon]

Ability to add tags implemented with backend.