2a:null 2b:["$","title",null,{"children":"Exercises: Command Line and npm | Steve Oney | Observable"}] 30:[{"id":"9596862b3afbf60c5c42e3bb7dbf8176d7b1c62e4ffc1d6110aed54c3f09f3f71afffde1f349e3146c8253dd9ed2b0b102076db3427f0f8a1328fd07d8cad623","href":"https://static.observableusercontent.com/files/9596862b3afbf60c5c42e3bb7dbf8176d7b1c62e4ffc1d6110aed54c3f09f3f71afffde1f349e3146c8253dd9ed2b0b102076db3427f0f8a1328fd07d8cad623","name":"photo6174583605255318504.jpg","type":"image/jpeg","lastModified":1614117905309.307,"size":107079}] 2e:{"id":"d0964344d7265967","slug":"si-579-lecture-11","title":"Exercises: Command Line and npm","thumbnail":"86a0f9a2688f68a26a55beeb8c29c0e530ceb52189edf2ac7378bdae73913364","access_level":"public","create_time":"$D2021-02-23T21:11:05.574Z","update_time":"$D2023-10-02T17:50:39.153Z","view_time":null,"first_public_time":"$D2021-02-23T21:11:06.964Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":29,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercises: Command Line and npm","cells":[{"id":0,"value":"md`# Exercises: Command Line and npm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`## Tip of the Day: Code Formatting\n\n

\n\n### Code Formatting on VS Code\n- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- On Windows: Shift + Alt + F\n- On Mac: Shift + Option + F\n- On Linux: Ctrl + Shift + I\n\n### Colorizing Matching Brackets\n- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md`## [Command Line Basics](https://observablehq.com/@soney/si-579-command-line-basics)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`## [Introduction to Package Management](https://observablehq.com/@soney/introduction-to-package-management?collection=@soney/si-579)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## ✏️ Exercise:\n1. Install [NPM](https://nodejs.org/en/download/)\n 1. In your terminal, run \\`npm --version\\` to check if you have npm installed \n2. Reconstruct the \"[todo-list](https://umich.instructure.com/courses/445374/files/folder/Lecture%20Files/Lecture%2011)\" example by using NPM. \n 1. Go to the canvas page and download the two files. \n 2. \\`npm init\\` (For best practice)\n 2. \\`npm install moment --save\\`\n 3. Include it in the script tag \n\\`\\`. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`## [Introduction to Webpack](https://observablehq.com/@soney/introduction-to-webpack?collection=@soney/si-579)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`## ✏️ Exercise:\n\n1. Globally install Webpack\n 1. Run command \\`npm install webpack webpack-cli\\` according to the [Introduction to Webpack](https://observablehq.com/@soney/introduction-to-webpack?collection=@soney/si-579)\n 2. Check your webpack version with \\`npx webpack --version\\`\n2. Reconstruct the \"[todo-list](https://umich.instructure.com/courses/445374/files/folder/Lecture%20Files/Lecture%2011)\" example by using webpack.\n 1. download the two files again in a new project (don't use your previous excercise one.\n 2. Do \\`npm init \\` first\n 3. \\`npm install moment --save\\`\n3. Organize your projects in the order from exmple [Introduction to Webpack](https://observablehq.com/@soney/introduction-to-webpack?collection=@soney/si-579)\n4. Using webpack to compile everything into a \\`main.js\\` file\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"