Pro Tip: Use a unique id generator
The face you make when you realize your unique-id... not so much

Pro Tip: Use a unique id generator

?? Anthony Delorie ?? Anthony Delorie

?? Anthony Delorie

AI + DX / UX, ensuring repeatable outcomes at scale

发布日期: 2023年5月2日
+ 关注

Had a consultation with a react dev team today, demonstrated my tried and proven three-pronged approach to automating accessibility compliance.

  1. linting: eslint-plugin-jsx-a11y (which comes baked into create-react-app and create-next-app)
  2. live console audits: @axe-core/react
  3. any test runner w/ axe-core test injection: Cypress | PlayWright | TestCafe

I covered the limitations of each approach but also what they did that others didn't even though all three are basically powered by the same ruleset updated by deque.

One of the issues I talked about was one I have seen many good intentioned teams make and that's allowing users to generate non-unique ids by allowing users to grow a form. My past self, guilty of this, so don't feel bad if you do this.

Scenario: Job history form, with reference input field

A developer might use a concatenation of 'reference' + 'employer_id' assuming it is unique combination. Now a person could leave a company and return to it. So maybe instead they add a 3rd variable which is a number so now if I had two stints at LinkedIn for example my reference field would be unique for both. But maybe later developers tasked with adding a feature to let users add multiple references, so one required and ability to create additional.

Hopefully you can see generating your own unique-id not guaranteed to scale with time, be it changing or future features, or integrating 3rd party components.

领英推荐

Not a new concept, and what to use in a Modern SPA

An idea of UUID (universal) and GUID (global) have been around for a while in the backend languages and databases.

React: https://react.dev/reference/react/useId

import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); // ...

For Angular, Vue, vanilla, or to-be-named framework....

I recommend using: uuid - npm (npmjs.com)

import { v4 as uuidv4 } from 'uuid'; uuidv4(); // ? '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

要查看或添加评论，请登录

?? Anthony Delorie的更多文章

社区洞察

其他会员也浏览了