How to mark an npm project as for Node.js or for browser or for both?

One issue I have often run into when using npm packages is not supporting the browser.
It is common for even a simple utility package to have a dependency on an npm package and so only work in Node.js. It would be nice if this could be detected quickly, especially automatically.
I asked this question to Bard AI, and got a useful response. The response doesn’t solve the issue for all packages as it requires certain optional properties to be set, but if they are set, then it can be decided what environment support exists.

Is there a common or official way to mark an npm project as for usage of Node.js(not browser), vice-versa, and both?

Yes, there are two ways to mark an npm project as for usage of Node.js (not browser), vice-versa, and both.

  • Using the engines field in the package.json file. This is the official way to specify the runtime environment that a package requires. The engines field is a list of objects, each of which specifies a minimum version of a particular runtime environment. For example, to specify that a package requires Node.js 16 or later, you would add the following to the engines field:
"engines": {
  "node": ">=16"
}
  • Using the browserslist field in the package.json file. This field specifies the browsers that a package supports. If you want to specify that a package is only for Node.js, you would set the browserslist field to an empty array. For example:
"browserslist": []

If you want to specify that a package is for both Node.js and the browser, you would set the browserslist field to a list of browsers that the package supports. For example:

"browserslist": ["last 2 versions", "not ie <= 11"]

The browserslist field is used by the npm command to determine which packages to install when you run npm install. For example, if you have a package that is only for Node.js, and you run npm install, the npm command will only install the packages that are listed in the engines field.

I hope this helps! Let me know if you have any other questions.

How to customize the new tab page in Chrome

How to customize the new tab page

During attempts to find ways to best utilize the Home Page start page web application, I found it more difficult than expected to add a website to the new tab page.

This article is for aggregating and detailing ways to and issues with customizing the new tab page in Chrome. Some of these methods will also work in other Chromium browsers that support Chrome extensions. If you would like to see something added, please feel free to get “contact” us with any feedback / requests.

Customized URL in new tab

New Tab Redirect Chrome Extension offers a “Redirect URL” setting.
It is easily set up by entering the URL and clicking save.
There is an issue with the cursor focusing on the address bar and then the cursor focusing on the document once the page starts loading.
This is very inconvenient for fast use of the omnibox or on-page input/search box.
If using the address bar / omnibox is desired, this can be easily fixed by enabling the setting below on the “New Tab Redirect Options” page.
“Always update tab, not redirect. (Enable for the cursor in the address bar)”
It is still possible to TAB out of the address bar into the document for quick in-page typing.
In Chrome at the time of writing, one TAB is enough to go to the document, so is still sufficiently fast for power users.
The benefit of this setup is that a URL can be set up as the new tab page, and regardless of how fast it loads, typing in the address bar can be done immediately.
This means that all the benefits of a default setup using the address bar can be kept while adding the functionality of the page to be loaded.

New Tab Redirect
New Tab Redirect
New Tab Redirect
New Tab Redirect

Alternatives:
Change New Tab Chrome Extension
Custom New Tab URL Chrome Extension

Blank tab

Some browsers offer a blank tab, such as about:blank.
The major benefit of such a page is that it loads nothing, so reduces both network and computer load.
This feature seems to be less common now that network speeds and computer performance are much higher.
Because searching and referencing URLs is such a common action, any loss in execution speed can accumulate.
If this accumulated loss of execution speed is a concern, or if your device/network is not high-performing, setting up a blank tab as the new tab page could be appropriate.
Either set the new tab page in your browser in the settings or new tab page extension settings, OR use an extension that provides blank page functionality:
Blank New Tab Page Chrome Extension

Start page

Start pages are pages that offer a gateway to easily accessing websites, especially any specific to you.
Common functionality includes having popular defaults and the ability to set custom URLs.
Browsers typically add their own start pages by default.
These default start pages usually offer adequate functionality.
However, they can have the following disadvantages:

  • Limited customizability
  • Search restricted to approved website(s) – This is common due to companies making affiliate revenue.
  • Tracking

Alternative start pages can be used by adding the URL as the new tab page URL.

https://theopenweb.info/app/home-page/

Home Page Web App
Home Page Web App

Or, by downloading an extension:

Humble New Tab Page Chrome Extension

Humble New Tab Chrome Extension
Humble New Tab Chrome Extension