6 ms·

> One way to enhance the usability of unique identifiers is by making them easily copyable. No matter what your identifiers look like, if you want them to be e

> One way to enhance the usability of unique identifiers is by making them easily copyable. No matter what your identifiers look like, if you want them to be easily copyable you should add `user-select: all` to the element containing them. If you do this, all of the text will be selected automatically when you click on the element. https://developer.mozilla.org/en-US/docs/Web/CSS/user-select https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

eternityforest 3y ago
Additionally, copy buttons are very nice.
blue_pants 3y ago
That's true, but there are a lot of places where ids live, but where I can't add `user-select: all`. For example, in terminal (logs), Studio3t (db client) etc.
- cess11 3y ago
  I find double click to select word, triple to select line or buffer, in surprisingly many contexts. Does this work for you?
  - saurik 3y ago
    The whole point of this article is that double-click to select a word doesn't work with a UUID... though, I think this should just be fixed: I have XTerm set up where double clicking selects a word, triple clicking selects a filename (which can include a hyphen, but not a slash), quadruple clicking selects a URL or path, and quintuple clicking selects the rest of the line.
    - iaaan 3y ago
      The workaround I've landed on is double-click and hold, then drag in the correct direction. Precise enough to just grab the UUID, imprecise enough to be quick and not annoying
      - fiddlerwoaroof 3y ago
        A lot of terminals let you adjust the characters that break words. I’ve always configured my terminals and editors to treat `-` as a word character.
      - eyelidlessness 3y ago
        This is what I use, because it works almost everywhere almost exactly the same way, even when quite a lot else doesn’t have that quality. I similarly use long-press+slide for very similar behavior on iOS (although that has much more variance in behavior across apps, and sometimes even within the same app).
    - jraph 3y ago
      Adding clicks is not ideal, many people already have some troubles with double clicks (because they can't be fast enough, or it hurts), triple click is already harder. Also more than 3 clicks starts taking a considerable about of time.
    - cess11 3y ago
      OK, right, yeah, they might have some word-break config that would need touching up. Thanks.
  - yndoendo 3y ago
    Now replace the double click, desktop, interaction, with press and hold, touch screen. I don't know of any triple click interaction that maps to a simplistic touch screen interaction.
mynameisvlad 3y ago
The example used is a URL. I don't believe there is an equivalent for the address bar. Plenty of other examples exist, but that one is pretty easily reachable by users.
- hot_gril 3y ago
  But you shouldn't be asking users to copy UUIDs out of your URLs... or really in general at all.
  - dumbo-octopus 3y ago
    API keys are basically just UUID's, they need copying quite often.
  - mynameisvlad 3y ago
    Why not? > Customer: "I'm having issues with an order" > CS: "Can you give me the order number?" > Customer: "Sure, it's zero two a as in apple five..." This seems entirely reasonable considering the whole point of TFA is to move away from using UUIDs as unique identifiers for resources in a service.
    - Mtinie 3y ago
      I’m inferring the comment you were responding to meant “Asking the customer to copy/paste the UUID from a URL to send to Support via an email or chat.” Rather than asking a customer to read it out to you.
BeFlatXIII 3y ago
I support all extension makers who strip user-select: none from all stylesheets.
christophilus 3y ago
Wow. TIL. I’ve been using JavaScript for that.
- keyle 3y ago
  There is danger in that as well, you could be copying transparent/hidden text as part of the copy, and if you paste and <enter> without reading what you've entered, it can be dangerous. That being said, most people copy and run bash script straight off the internet, so clearly not worried about copying stuff they haven't read! e.g. https://bun.sh https://bun.sh curl -fsSL https://bun.sh/install | bash
  - rgoulter 3y ago
    > That being said, most people copy and run bash script straight off the internet, so clearly not worried about copying stuff they haven't read! The most common complaint about "pipe to bash" I've seen is the possibility for the server's response to detect it's being piped to bash, and then execute malicious code. The suggested remedy is to first download the install script (and check it) then run it. -- This seems overblown to me, since if you think the server may be malicious, then downloading programs from that server also seems risky. Criticising people for not reading bash scripts from install pages is weirder to me. -- It's possible that some software author would hide malware in the install script; but, then why wouldn't they just hide malware in the installed program itself.
    - eyelidlessness 3y ago
      > This seems overblown to me, since if you think the server may be malicious, then downloading programs from that server also seems risky. I heed the risk with the reasoning that even a benevolent server may be compromised, and that detecting pipe to bash is a potential way for that to go unnoticed.
pphysch 3y ago
Thanks, I was looking this up yesterday and only found a bunch of JS that didn't work.
kiitos 3y ago
In the browser, fine, but what about in the terminal?
accrual 3y ago
I like that some tools also provide a copy button next to fields, it looks like two overlapping boxes (kind of like: ⎘). If I were building a tool that exposed user copyable keys, I'd be sure to add these to my forms and fields. A brief contextual "copied!" modal that quickly fades away is a nice touch too.
timnetworks 3y ago
Triple clicking has been around for a long-long time, no?
- keyle 3y ago
  This is a neat trick but it will select the whole 'paragraph', which in most logs means the entire row. Triple click the following: b214a2bb-c3c1-48fb-8272-10a2808337f3, something, ... b214a2bb-c3c1-48fb-8272-10a2828337f3, something else...
  - jraph 3y ago
    Yep, double-click+drag is how I do it. On Linux double-click selects a chunk, and then dragging selects more chunks (fully). I double-click on the first or last chunk and go towards the other end. Not as good as double-click selects all the id, but at least id doesn't take too much time and I don't have to precisely go to one of the ends.
    - danlindley 3y ago
      I did not know about the double-click+drag feature. Thanks for sharing!
    - keyle 3y ago
      I've had computers since the mouse was commercialised and I didn't know this was a thing. Amazing, thank you.
kazinator 3y ago
How can I do that in my comment here? Say I want the word "double-click" to be simply selectable, right in this sentence. I'm grateful to be informed about select-all, though!

eternityforest 3y ago

Additionally, copy buttons are very nice.

blue_pants 3y ago

That's true, but there are a lot of places where ids live, but where I can't add `user-select: all`. For example, in terminal (logs), Studio3t (db client) etc.

cess11 3y ago
I find double click to select word, triple to select line or buffer, in surprisingly many contexts. Does this work for you?
- saurik 3y ago
  The whole point of this article is that double-click to select a word doesn't work with a UUID... though, I think this should just be fixed: I have XTerm set up where double clicking selects a word, triple clicking selects a filename (which can include a hyphen, but not a slash), quadruple clicking selects a URL or path, and quintuple clicking selects the rest of the line.
  - iaaan 3y ago
    The workaround I've landed on is double-click and hold, then drag in the correct direction. Precise enough to just grab the UUID, imprecise enough to be quick and not annoying
    - fiddlerwoaroof 3y ago
      A lot of terminals let you adjust the characters that break words. I’ve always configured my terminals and editors to treat `-` as a word character.
    - eyelidlessness 3y ago
      This is what I use, because it works almost everywhere almost exactly the same way, even when quite a lot else doesn’t have that quality. I similarly use long-press+slide for very similar behavior on iOS (although that has much more variance in behavior across apps, and sometimes even within the same app).
  - jraph 3y ago
    Adding clicks is not ideal, many people already have some troubles with double clicks (because they can't be fast enough, or it hurts), triple click is already harder. Also more than 3 clicks starts taking a considerable about of time.
  - cess11 3y ago
    OK, right, yeah, they might have some word-break config that would need touching up. Thanks.
- yndoendo 3y ago
  Now replace the double click, desktop, interaction, with press and hold, touch screen. I don't know of any triple click interaction that maps to a simplistic touch screen interaction.

mynameisvlad 3y ago

The example used is a URL. I don't believe there is an equivalent for the address bar. Plenty of other examples exist, but that one is pretty easily reachable by users.

hot_gril 3y ago
But you shouldn't be asking users to copy UUIDs out of your URLs... or really in general at all.
- dumbo-octopus 3y ago
  API keys are basically just UUID's, they need copying quite often.
- mynameisvlad 3y ago
  Why not? > Customer: "I'm having issues with an order" > CS: "Can you give me the order number?" > Customer: "Sure, it's zero two a as in apple five..." This seems entirely reasonable considering the whole point of TFA is to move away from using UUIDs as unique identifiers for resources in a service.
  - Mtinie 3y ago
    I’m inferring the comment you were responding to meant “Asking the customer to copy/paste the UUID from a URL to send to Support via an email or chat.” Rather than asking a customer to read it out to you.

BeFlatXIII 3y ago

I support all extension makers who strip user-select: none from all stylesheets.

christophilus 3y ago

Wow. TIL. I’ve been using JavaScript for that.

keyle 3y ago
There is danger in that as well, you could be copying transparent/hidden text as part of the copy, and if you paste and <enter> without reading what you've entered, it can be dangerous. That being said, most people copy and run bash script straight off the internet, so clearly not worried about copying stuff they haven't read! e.g. https://bun.sh https://bun.sh curl -fsSL https://bun.sh/install | bash
- rgoulter 3y ago
  > That being said, most people copy and run bash script straight off the internet, so clearly not worried about copying stuff they haven't read! The most common complaint about "pipe to bash" I've seen is the possibility for the server's response to detect it's being piped to bash, and then execute malicious code. The suggested remedy is to first download the install script (and check it) then run it. -- This seems overblown to me, since if you think the server may be malicious, then downloading programs from that server also seems risky. Criticising people for not reading bash scripts from install pages is weirder to me. -- It's possible that some software author would hide malware in the install script; but, then why wouldn't they just hide malware in the installed program itself.
  - eyelidlessness 3y ago
    > This seems overblown to me, since if you think the server may be malicious, then downloading programs from that server also seems risky. I heed the risk with the reasoning that even a benevolent server may be compromised, and that detecting pipe to bash is a potential way for that to go unnoticed.

pphysch 3y ago

Thanks, I was looking this up yesterday and only found a bunch of JS that didn't work.

kiitos 3y ago

In the browser, fine, but what about in the terminal?

accrual 3y ago

I like that some tools also provide a copy button next to fields, it looks like two overlapping boxes (kind of like: ⎘). If I were building a tool that exposed user copyable keys, I'd be sure to add these to my forms and fields. A brief contextual "copied!" modal that quickly fades away is a nice touch too.

timnetworks 3y ago

Triple clicking has been around for a long-long time, no?

keyle 3y ago
This is a neat trick but it will select the whole 'paragraph', which in most logs means the entire row. Triple click the following: b214a2bb-c3c1-48fb-8272-10a2808337f3, something, ... b214a2bb-c3c1-48fb-8272-10a2828337f3, something else...
- jraph 3y ago
  Yep, double-click+drag is how I do it. On Linux double-click selects a chunk, and then dragging selects more chunks (fully). I double-click on the first or last chunk and go towards the other end. Not as good as double-click selects all the id, but at least id doesn't take too much time and I don't have to precisely go to one of the ends.
  - danlindley 3y ago
    I did not know about the double-click+drag feature. Thanks for sharing!
  - keyle 3y ago
    I've had computers since the mouse was commercialised and I didn't know this was a thing. Amazing, thank you.

kazinator 3y ago

How can I do that in my comment here? Say I want the word "double-click" to be simply selectable, right in this sentence. I'm grateful to be informed about select-all, though!