Rewrite understanding client-side tools section

[Josh-Cena]

• Fix [Tools] The option -r of rmdir not supported on Windows/mac #31712
• Fix [Tools] Parcel example should use v2 #17278
• Fix [Tools] Content about Parcel is deprecated and troublesome #28080
• Fix [Tools] fails to build; problem with postcss-preset-env versions #12495
• Fix [Tools] using npx does not guarantee correct version or library #18616
• Fix [Tools] Deprecated packages and links, issue about parcel auto installation, wrong path in /src/index.css #28100
• Remove Parcel because I don't think anyone here is familiar with it and it does a lot of magic around dependency management which is bad for education purposes
• Self-host the example repo
• Other modernizations around references to toolings

[github-actions]

Preview URLs (6 pages)

• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line
• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment
• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain
• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview
• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management
• /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools

External URLs (49)

URL: /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management
Title: Package management basics

• https://docs.npmjs.com/cli/run-script/ (1 time) (Note! This may be a new URL 👀)
• https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/ (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/guide/ (1 time) (Note! This may be a new URL 👀)
• https://www.npmjs.com/ (3 times) (Note! This may be a new URL 👀)
• https://www.npmjs.com/package/plotly.js (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview
Title: Client-side tooling overview

• https://bun.sh/ (1 time) (Note! This may be a new URL 👀)
• https://nodejs.org/ (1 time) (Note! This may be a new URL 👀)
• https://pages.github.com/ (1 time) (Note! This may be a new URL 👀)
• https://pnpm.io/ (1 time) (Note! This may be a new URL 👀)
• https://stylelint.io (1 time) (Note! This may be a new URL 👀)
• https://vercel.com/ (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/ (1 time) (Note! This may be a new URL 👀)
• https://webpack.js.org/ (2 times) (Note! This may be a new URL 👀)
• https://www.netlify.com/ (1 time) (Note! This may be a new URL 👀)
• https://www.npmjs.com/ (2 times) (Note! This may be a new URL 👀)
• https://www.typescriptlang.org/ (2 times) (Note! This may be a new URL 👀)
• https://yarnpkg.com/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment
Title: Deploying our app

• https://docs.github.com/en/actions (1 time) (Note! This may be a new URL 👀)
• https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Functional_testing (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/client-toolchain-example (2 times) (Note! This may be a new URL 👀)
• https://pages.github.com/ (1 time) (Note! This may be a new URL 👀)
• https://vitest.dev/guide/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain
Title: Introducing a complete toolchain

• https://about.gitlab.com/ (1 time) (Note! This may be a new URL 👀)
• https://docs.github.com/en/rest/metrics/community (1 time) (Note! This may be a new URL 👀)
• https://eslint.org/ (2 times) (Note! This may be a new URL 👀)
• https://eslint.org/docs/rules/ (1 time) (Note! This may be a new URL 👀)
• https://git-scm.com/ (1 time) (Note! This may be a new URL 👀)
• https://git-scm.com/downloads (1 time) (Note! This may be a new URL 👀)
• https://git-scm.com/downloads/guis (1 time) (Note! This may be a new URL 👀)
• https://github.com/ (2 times) (Note! This may be a new URL 👀)
• https://github.com/css-modules/css-modules (1 time) (Note! This may be a new URL 👀)
• eslint-plugin-react-hooks & "Flat Config" (ESLint 9) facebook/react#28313 (1 time) (Note! This may be a new URL 👀)
• ESLint v9 contains breaking API changes jsx-eslint/eslint-plugin-react#3699 (1 time) (Note! This may be a new URL 👀)
• https://github.com/postcss/postcss (1 time) (Note! This may be a new URL 👀)
• https://postcss.org/ (2 times) (Note! This may be a new URL 👀)
• https://preset-env.cssdb.org/features/ (1 time) (Note! This may be a new URL 👀)
• https://prettier.io/ (1 time) (Note! This may be a new URL 👀)
• https://prettier.io/docs/en/configuration.html (2 times) (Note! This may be a new URL 👀)
• https://sass-lang.com/ (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/ (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/guide/ (1 time) (Note! This may be a new URL 👀)
• https://vitejs.dev/guide/features.html (2 times) (Note! This may be a new URL 👀)
• https://www.atlassian.com/software/bitbucket (1 time) (Note! This may be a new URL 👀)
• https://www.npmjs.com/search?q=keywords:eslintconfig (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line
Title: Command line crash course

• https://prettier.io/ (1 time) (Note! This may be a new URL 👀)
• https://prettier.io/docs/en/ (1 time) (Note! This may be a new URL 👀)
• https://prettier.io/docs/en/install.html (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-06-11 15:35:22)

[Josh-Cena]

Content is mostly ready, pending the part of GitHub Pages deployment because I need @bsmth's help

[bsmth]

We mention in L66:

Note: npm is not the only package manager available. A successful and popular alternative package manager is Yarn. Yarn resolves the dependencies using a different algorithm that can mean a faster user experience. There are also a number of other emerging clients, such as pnpm.

I'm not sure this is true anymore in recent years. Are there still benefits to Yarn over npm? We should still mention it because readers are very likely to encounter it in projects.

Also later in the initialize phase, we're running npm and yarn commands sequentially without explaining that you shouldn't mix these in projects, and it's either-or.

[Josh-Cena]

I'm not sure this is true anymore in recent years. Are there still benefits to Yarn over npm? We should still mention it because readers are very likely to encounter it in projects.

There are many ways in which Yarn is faster than npm.

• In a monorepo, Yarn offers the best experience with precise hoisting.
• Yarn PnP wraps its own Node runtime that is faster than node_modules resolution.
• Zero-installs allows you to commit node_modules (basically, but compressed of course) and others won't even need to ever install
• Yarn and pnpm both have faster disk operations than npm.

I'm not sure if we should describe in such detail. We just picked tools that work, not saying there's anything worse about other tools.

Also later in the initialize phase, we're running npm and yarn commands sequentially without explaining that you shouldn't mix these in projects, and it's either-or.

Good idea 👍

[bsmth]

Super, thanks for the info!

I'm not sure if we should describe in such detail.

No that's fine, thanks.

[bsmth]

I think we're all good to go. In general, I'm trying to avoid adding screenshots because of the maintenance cost, if you think we can go without them using links instead, that would be great. Otherwise, leaving a +1 on this. Well done 👍🏻

[Josh-Cena]

Great! Yeah I think the remaining screenshots are necessary.