Health to the Web

I gotta say I love react-intl plural support for internationalizations. Its easy to use and works e.g. "Top {num}% of customers in the past {period} {period, plural, one {month} other {months}}" The `{select}` feature is pretty cool too. Can use for either or choices as well as multiples.

User Scenario: As a user who edits xyz properties, when I leave the page then I should see a warning prompt to leave and lose changes or stop leaving and remain.  This is a typical scenario and the approach to handle has not changed in a long time. So lets review it. But first what are some of the ways a user could "leave" the page reload the page browser back button navigation action to a different url than this app  edit url in the address bar and hit enter close the tab close the browser navigation action to a different url within this app close app modal with edits & unsaved changes considering mobile it gets more complicated because there are other lifecycle events. On Android and iOS mobile apps can be started and stopped as needed by the OS, which is not something web has historically had to deal with. Web has typically just had to deal with user initiated events Choices 1-6 are all similar: unloading the web page/single page app and are commonly handled u...

this is a cool library which an be used for tooltips, menu btn activator etc  https://floating-ui.com/ https://floating-ui.com/docs/react-examples

  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

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...

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 ...

https://motherfuckingwebsite.com/ they do a really good job hiding all the complexity 🤣