Skip to content

Commit

Permalink
Rewrite understanding client-side tools section (#34017)
Browse files Browse the repository at this point in the history
* Rewrite understanding client-side tools section

* Compress

* Last parts

* Review

* Update files/en-us/learn/tools_and_testing/understanding_client-side_tools/package_management/index.md

Co-authored-by: Brian Thomas Smith <[email protected]>

* Add note

* Add references to real action file

* Add more instructions

---------

Co-authored-by: Ubuntu <joshcena@Teacup.kpdb1sfivm5erpc3jg1vjtnejf.bx.internal.cloudapp.net>
Co-authored-by: Brian Thomas Smith <[email protected]>
  • Loading branch information
3 people authored Jun 11, 2024
1 parent 7e1cc61 commit b771ad0
Show file tree
Hide file tree
Showing 14 changed files with 468 additions and 574 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ There are a number of other basic utility commands that you'll probably end up u
Have a play with them in a test directory you've created somewhere so that you don't accidentally delete anything important, using the example commands below for guidance:

- `mkdir` — this creates a new directory inside the current directory you are in, with the name you provide after the command name. For example, `mkdir my-awesome-website` will make a new directory called `my-awesome-website`.
- `rmdir` — removes the named directory, but only if it's empty. For example, `rmdir my-awesome-website` will remove the directory we created above. If you want to remove a directory that is not empty (and also remove everything it contains), then you can use the `-r` option (recursive), but this is dangerous. Make sure there is nothing you might need inside the directory later on, as it will be gone forever.
- `rmdir` — removes the named directory, but only if it's empty. For example, `rmdir my-awesome-website` will remove the directory we created above. If you want to remove a directory that is not empty (and also remove everything it contains), then you can use `rm -r` instead (see below), but this is dangerous. Make sure there is nothing you might need inside the directory later on, as it will be gone forever.
- `touch` — creates a new empty file, inside the current directory. For example, `touch mdn-example.md` creates a new empty file called `mdn-example.md`.
- `mv` — moves a file from the first specified file location to the second specified file location, for example `mv mdn-example.md mdn-example.txt` (the locations are written as file paths). This command moves a file called `mdn-example.md` in the current directory to a file called `mdn-example.txt` in the current directory. Technically the file is being moved, but from a practical perspective, this command is actually renaming the file.
- `cp` — similar in usage to `mv`, `cp` creates a copy of the file in the first location specified, in the second location specified. For example, `cp mdn-example.txt mdn-example.txt.bak` creates a copy of `mdn-example.txt` called `mdn-example.txt.bak` (you can of course call it something else if you wish).
Expand Down Expand Up @@ -360,12 +360,12 @@ Prettier can:
- Be installed on any operating system and even as a direct part of project tooling, ensuring that colleagues and friends who work on your code use the code style you're using.
- Be configured to run upon save, as you type, or even before publishing your code (with additional tooling that we'll see later on in the module).

For this article, we will install Prettier locally, as suggested in the [Prettier installation guide](https://prettier.io/docs/en/install.html)
For this article, we will install Prettier locally, as suggested in the [Prettier installation guide](https://prettier.io/docs/en/install.html).

Once you've installed node, open up the terminal and run the following command to install Prettier:
Once you've installed node, open up the terminal and run the following command to install Prettier (we will explain what `--save-dev` does in the next article):

```bash
npm install prettier
npm install --save-dev prettier
```

You can now run the file locally using the [npx](https://docs.npmjs.com/cli/commands/npx) tool.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@ You should really learn the basics of the core [HTML](/en-US/docs/Learn/HTML), [
- [3. Package management basics](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management)
- : In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
- [4. Introducing a complete toolchain](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain)
- : In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
- : In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
- [5. Deploying our app](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment)
- : In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
- : In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub and deploy it to GitHub pages, and even show you how to add a simple test into the process.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading

0 comments on commit b771ad0

Please sign in to comment.