Posts

Showing posts from February, 2023

UX research resources including W3C and Nielsen and examples for accessible ui controls

  Nielsen Norman Group is a good resource for UX research articles e.g. SplitButton guidance Bootstraps split button implementation: https://getbootstrap.com/docs/5.2/components/dropdowns/#split-button notice the html Material UI is another good resouce for UX and compoents. Here's their Accordion implementation For web accessibility the W3C has good guides: Main page Read this first Their patterns page is a good resource e.g. Date Picker combobox , Tabs pattern   For quick lookup by control, checkout the index Interesting css for toggle btn

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h

advice on using react memoization: useMemo, useCallback

I like the "new" react beta docs , lots more info, real helpful info. Well written, good examples, lots of details. Helping me learn & improve. The docs have very helpful guidance for useMemo and when to use use useMemo to cache expensive calculations, don't use for non expensive calculations "In general, unless you’re creating or looping over thousands of objects, it’s probably not expensive" if "time adds up to a significant amount (say, 1ms or more), it might make sense to memoize that calculation" I like the example they show for taking measurements. Why? blanket use of us eMemo (or useCallback) is not harmful but the "code becomes less readable", it also adds to cognitive overhead and does add another function. "Optimizing with useMemo is only valuable in a few cases" the calculation is noticeably slow and dependencies rarely change you should know it's slow before you optimize with useMemo check your dependencies, log