Health to the Web

npmtrends is cool great for researching npm packages, you can enter multiple packages and see some comparison info, checkout the table below including "last updated" and suggested searches e.g. this link compares different react drag'n'drop libraries https://npmtrends.com/@dnd-kit/core-vs-react-beautiful-dnd-vs-react-dnd-vs-react-drag-and-drop-vs-react-draggable-vs-react-file-drop

Ye lowly ole' checkbox Often when developing with frameworks like React we use html elements like checkbox (input type="checkbox") as "connected" controls and don't depend on or avail of the default html behavior  (by connected, I mean using useState to track the checked/unchecked state of the checkbox). Also worth noting we often use custom components which wrap the html element. But react-router v6.4 and above requires you (using the standard flow of Form to action function handler) to depend on the default/native html element behavior because react-router follows standard web patterns for form handling and submission (which is a good thing). For checkbox that  native html element behavior  is: use the name attribute to give it a name and if it's checked the name will be submitted in  the form data  by default if the checkbox is checked when submitted, then the form submitted will contain: <name>=on "on" is just the default html checkbo...

css grids are cool, very powerful and can be used in so many places rather than margins, think gaps...it will change how you think about layout and what css to write example responsive grid codepen

Keynote Github universe keynote by Thomas Dohmke, CEO Big emphasis on copilot. "Github founded on git. Github refounded on Copilot" 55% faster developers 37k orgs using it starting point is copilot, vision is Copilot X,  The keynote Copilot chat demo was impressive. The inline chat and diff view was very cool. I've been using the company Instance of chatgpt and I like the conversational style Bringing Copilot chat to android and ios github mobile and also other ides such as jetbrains Upgraded to GPT-4 Copilot integrate to github.com and showed how integrates with PRs.  new icon in PR showed generate tests for PR and added to PR secret scanner Next presenter talked about "fine tuning" copilot in your github codebase and partner integrations then Accenture cto talked about their use of copilot CEO of MSFT joins live onstage "we are a platform company" he's an impressive guy, CEO of msft, done amazing for msft turns out MSFT buying github was a genius...

For Opentables 2023 October Hackathon I proposed integrating with openAI api to get feedback on github PRs .  I'd already used the chatGPT interface to get feedback on code or write tests and it's good. I know there are github Actions out there which do similar but I wanted to hack a solution for our companys setup and also to learn. Another engineer thought it was a fun idea and joined me in this hack.  My initial idea was to:  create a github Action which triggers off PRs and  call github to get the PR code call the openAI chat api and passes it the code call github to add a comment to the PR One challenge with this was that would be running externally and would not have access private data needed to access things. So we pivoted to running the steps inside our CI build system instead. This gave us github triggers such as PR opened and also secure access. To get access to the PR number we had to enable a feature in the CI, but I did and it worked! We used bash scrip...

This topic is a hot one and has resulted in a long thread: https://github.com/remix-run/remix/discussions/1959 and remix discord questions lik: "how can i use useFetcher to submit a big nested JSON object to an action (via POST without a backing <fetcher.Form> component)? it seems like fetcher.submit only accepts Record<string, string>." Answer: "You can JSON.stringify the data and JSON.parse it on the action" Support to submit json data was added to react-router DataRouter, but only un-nested json e.g. { name: "jane", hair: "purple" } But not nested: { name: "jane", hair: "purple", address: { street: " 1 Main St."} } Which is the key missing piece. So you can now do this     fetcher.submit(       { action: 'save', name: "jane", hair: "purple"  },       { method: 'post', encType: "application/json", action: "/" }     );  and in the action function g...

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

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 🤣