search

WebWeWant / webwewant.fyi

If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
https://webwewant.fyi
MIT License
76 stars 23 forks source link

An HTML element from displaying QR codes #238

Open aarongustafson opened 3 years ago

aarongustafson commented 3 years ago

title: An HTML element from displaying QR codes date: 2020-12-04T20:18:15.891Z submitter: PRIVATE number: 5fca99877bf33307d003bd0a tags: [ ] discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/ status: [ discussing || in-progress || complete ] related:

QR codes are very common and have been steadily increasing in usage as people move to no-touch systems. It's also one of the few safe and widely compatible ways for the web to interact with objects. While we have ways to read QR codes (shape detector) we don't have easy ways to generate them. Generating QR codes is very complex and existing libraries are big. For such a common element I think it makes sense to have an HTML element that could display common types of visual codes including different types of barcode, QR codes and others in a similar way to an image tag.

In addition to reducing developer complexity. This could make applications smaller as they would not need to have large QR code libraries, or embed images. However, like with

UAs could also improve accessibility by making it easy to full-screen the code, increase screen brightness when a user interacts with it or support things like right-click to copy the contents.

If posted, this will appear at https://webwewant.fyi/wants/5fca99877bf33307d003bd0a/

github-actions[bot] commented 3 years ago

This has gotten stale. Take a look or close it out.

aarongustafson commented 3 years ago

It looks like there is at least one web component exploring this: https://github.com/educastellano/qr-code

aarongustafson commented 3 years ago

I had a discussion with a partner who was asking for this previously as well. They were looking for it to be using in conjunction with a dynamic & rotating code (similar to 2FA) for scanning in a checkout scenario. The expiration & rotation was key for ensuring that the code could not be shared. Seems like something like this would need to support dynamic updating, which makes me think that canvas makes a lot of sense from a rendering perspective.

@sdras @christiannwamba @acekyd @cassieevans have you seen any companies looking for this or creating their own implementations?

Would also love to get thoughts from @cwilso, @travisleithead, @tantek, and @bkardell from an implementor standpoint here too.

bradisbell commented 3 years ago

@aarongustafson Why canvas? Why not SVG image?

While not a web component, I use this in my own browser-based projects: https://github.com/soldair/node-qrcode I use SVG to ensure good rendering not only on-screen, but also in a printable view.

QR code generation is easy and fast enough today in JavaScript. I don't think we need a built-in HTML element for generating them.

aarongustafson commented 3 years ago

Why canvas? Why not SVG image?

@bradisbell My thought on canvas over SVG had mainly to do with not seeing a ton of value in having a DOM for the code. I’m not super well-seasoned in either tech, so I would not consider my opinion worth much at all in the matter 😉

I use SVG to ensure good rendering not only on-screen, but also in a printable view

That seems sensible. I’m not familiar with the limitations of printing canvas contents.

QR code generation is easy and fast enough today in JavaScript. I don't think we need a built-in HTML element for generating them.

It may be easy for you, but I’d be reluctant to say that applies broadly; there may be some who struggle with it. Additionally, taking a dependency on JavaScript means that if JavaScript fails to load or execute properly, the interface will not work as intended. Then you need to bring in server-side generation as well. If the browser can work it’s magic from declarative markup, that issues goes away (with the possible exception of expiring/rotating codes, which would require a server-side fallback + declarative refresh of some sort).

Looking at QR code generation as a cowpath, the question becomes: is it worth paving. It might be.

acekyd commented 3 years ago

@sdras @christiannwamba @acekyd @cassieevans have you seen any companies looking for this or creating their own implementations?

I am vaguely aware of Visa implementing this - On the web and on mobile and I believe it involves them generating an image which is displayed on the page using regular html elements. I'm not certain of dynamic updating in this regard but it usually includes all necessary payment details including price.

Can check out Visa QR for more info.

cwilso commented 3 years ago

I agree this should be an easy-to-use component, but there's nothing inherently difficult about implementing this in JS; and the use case seems narrow enough to not want to bake it in to the platform footprint itself, to me.

I think the best way to explore the need for this would be to track uptake of node-qrcode or a similar component, and asking for web developer input on need. "It would be nice to have" isn't always good enough to bake it into every device that needs to implement HTML; I'm also concerned about the expanding feature set of QR code generators (embedded images, Kanji, etc.)

bkardell commented 3 years ago

We discussed this in a triage call and agreed (I think) that there are enough powers to explore this and enough variables and complexities to it that it really needs exploration and some cow-path laying. I agreed to do some additional research and put information here, so...

I helped coordinate some changes in how the HTTPArchive collects its data and wrote a little tool[1] that you can use to regex search for element names that appear in the datasets more or less instantly and free. So, we see the element Aaron mentions, but is it used/popular - are there others? "qr" is a pretty unique combination so we can check for that - it gives us a few elements[2], but only one of those looks qr code related (qrcode). If we query directly for that we can see it is in 71 of millions of pages, it's not a custom element - what is it? We took this sample from the HTTPArchive result URLs that matched[4]... You can explore it if you like, but a few of those are js false positives and the several others seem to be part of "areon web widgets" which I couldn't find much about, but also don't seem to be doing much here...

I do think this is an interesting idea to explore and I'd love to see some things developed here to figure out what that should be.

  1. http://rainy-periwinkle.glitch.me
  2. http://rainy-periwinkle.glitch.me/permalink/a35f00f577fde6906b4853cda9beec59550002b3f3b10a1d01333aa5e2c40fe2.html
  3. http://rainy-periwinkle.glitch.me/permalink/77bcec5c66953023fdec6060f0e0e55bd9ce6f4b8a9f007857a699445be76cb4.html
  4. https://docs.google.com/spreadsheets/d/1FpACpypdHZXeIwCoRkVr5PM7g_MvI3T-LfKU_SkpX3A/edit#gid=128289506
Malvoz commented 2 years ago

See related HTML proposal: https://github.com/whatwg/html/issues/5801.

bkardell commented 2 years ago

See related CSS Proposal https://github.com/w3c/csswg-drafts/issues/6544