Health to the Web

Let's say you have a friend with a small online business with a website, but their products are not appearing in google search. How would you help them troubleshoot it? You'd probably start by going to the site, understand the products and pages and then run google searches for those products. Does you see results? even if you scroll down lots of results pages? Is there a robots.txt for the site? what rules are specified? are there any exclusions? Check also for any robots meta tag in the html. Is a sitemap.xml provided? What urls are in it? You might also examine the html for the product pages. Are the basics present? title tag, meta tag for description which match the content on the page. Sensible use of h1 etc tags on the page. Useful and accurate content about each product page. Urls which are search friendly. You might run Chrome Lighthouse checking SEO, Performance and Accessibility scores to see if any red flags exist. So you find that your "friends" website pr...

"An idea is more cognitively complex if it causes you to hold more concepts in mind and think about how they relate to each other. A simple example of this is the number of moves and countermoves available in Checkers vs. Chess." It's a measure of how hard something is to understand. Not recognizing complexity up front is one of the biggest frustrations for teams. I've seen teams think a problem is simpler than it is and/or not want to dig into the details which led to large overruns and significant stress on teams. It can make or break a team. It's not an exact science but there are strategies. First, how do you recognize? some data points  how many concepts are involved?  e.g. building a responsive multi form layout for a user profile to be used in multiple different apps each of which wants to highlight slightly different data/functionality has more concepts involved than a single use table view. e.g. supporting different billing address rules by 16 locale/regi...

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