Moar fixes

gbowne1 · gbowne1 · commit 56f56583ab78 · 2023-12-12T01:14:11.000-08:00
diff --git a/Node_JavaScript_Programming/javascript-programming.md b/Node_JavaScript_Programming/javascript-programming.md
@@ -355,9 +355,10 @@ To remove elements from an array in JavaScript, you can use the pop(), shift(),
     Using filter(): It creates a new array with elements that pass the test implemented by the provided function.
 
 Looping Through an Array in JavaScript
+
 You can loop through an array in JavaScript using various methods such as for loop, forEach(), for...of loop, and map() method. Here's a brief overview of each method:
 
-Using for loop:
+Using `for` loop:
 
     ```js
     for (let i = 0; i < array.length; i++) {
@@ -568,4 +569,57 @@ You can also remove duplicates from an array of objects in JavaScript using the
     // Output: [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}]
     ```
 
-This code uses the filter() method in combination with the findIndex() method to create a new array containing only the first occurrence of each unique object. The Set object and the filter() method provide effective ways to remove duplicates from an array of objects in JavaScript, each with its own advantages and considerations
+This code uses the filter() method in combination with the findIndex() method to create a new array containing only the first occurrence of each unique object. The Set object and the filter() method provide effective ways to remove duplicates from an array of objects in JavaScript, each with its own advantages and considerations
+
+## Using Async and Await
+
+To use async and await in JavaScript, you can follow these steps:
+
+    Declare an Async Function: Use the async keyword before a function to declare it as an async function. This means the function always returns a promise. For example:
+
+    async function myFunction() {
+      return "Hello";
+    }
+
+Use the Await Keyword: Inside an async function, you can use the await keyword before a call to a function that returns a promise. This makes the code wait until the promise is resolved before continuing. For example:
+
+    let result = await myPromise;
+
+Error Handling: You can use try...catch blocks to handle errors when using async and await.
+
+To handle errors when using async and await in JavaScript, you can use the try...catch block. Here's how you can do it:
+
+    async function myFunction() {
+      try {
+        let result = await someAsyncTask();
+        // Code to handle the result
+      } catch (error) {
+        // Code to handle the error
+      }
+    }
+
+This allows you to catch and handle any errors that occur during the execution of the await-ed promise. As for the second part of your question, yes, async and await can be used with promises in JavaScript. The await keyword is used to wait for a promise to resolve, and it can only be used inside an async function. When used together, they provide a more readable and maintainable way to work with promises.
+
+## Other different types of JavaScript files
+
+- `.cjs` file extension
+
+  This is for CommonJS. CommonJS is a project that aims to standardize the module ecosystem for JavaScript outside of web browsers, such as on web servers or native desktop applications. It provides a specification for how modules should work and is widely used for server-side JavaScript with Node.js. CommonJS can be recognized by the use of the require() function and module.exports, while ES modules use import and export statements for similar functionality. The .cjs file extension is associated with CommonJS code, which is intended to allow JavaScript to be used in environments beyond a frontend web browser. It also allows JavaScript to be used in environments beyond a frontend web browser
+  CommonJS is a module system for JavaScript used in server-side environments like Node.js.
+
+- ``.mjs` file extension
+
+  The .mjs file extension is used to indicate that a JavaScript file uses the ECMAScript module format, providing a standardized way to organize and share JavaScript code across multiple files and projects. ES6 modules, which are denoted by the .mjs extension, offer several advantages over traditional .js files, including native support for ES6 modules, a clear distinction between modules and regular scripts, and improved compatibility with bundlers and build tools
+
+  The .mjs file extension is commonly used in Node.js for ECMAScript modules, providing a standardized way to organize and share JavaScript code across multiple files and projects. Some common use cases for .mjs files in Node.js include:
+
+  Native Support for ES6 Modules: The .mjs file extension leverages the native support for ES6 modules in modern JavaScript runtimes, allowing the use of the import and export keywords to define and use modules without the need for additional tools or transpilation
+
+  Clear Distinction Between Modules and Scripts: The use of .mjs file extension helps differentiate between modules and regular scripts, enabling developers to quickly identify and work with modules in their projects
+
+  Improved Compatibility with Bundlers and Build Tools: As the new module system gains popularity, bundlers and build tools have started to adopt native ES6 module support. Using the .mjs file extension ensures better compatibility with these tools, allowing for seamless integration into existing development workflows
+
+- `.ejs` file extension
+
+  EJS, or Embedded JavaScript, is a simple templating language that allows the generation of HTML markup with plain JavaScript. It is commonly used as a template engine in Node.js to create HTML templates with minimal code and to inject data into an HTML template on the client side, producing the final HTML. EJS enables the embedding of JavaScript into HTML pages, and it is often used with Express, a web application framework for Node.js. EJS files typically use the .ejs file extension. To use EJS in a Node.js project, the EJS package can be installed via npm, and the templating engine can be set up with Express. EJS is known for its ease of use, as it allows the direct use of JavaScript to generate the desired HTML output. It also provides features such as partials and the ability to pass variables to views, making it a powerful tool for building web applications
+  
diff --git a/Node_JavaScript_Programming/make-an-nodemon-json-file.md b/Node_JavaScript_Programming/make-an-nodemon-json-file.md
@@ -44,3 +44,6 @@ Here is the `nodemon.json` File Structure:
 ```
 
 This is all the information I could find out about the file.
+
+## Starting Nodemon
+
diff --git a/README.md b/README.md
@@ -1,3 +1,9 @@
 # ProgrammerNotes
 
-This is a collection of Markdown notes written in Obsidian for programming and it includes notes on C, C++, using and configuring VSCode and many other things programming related. Anyone is welcome to contribute to this Markdown repository and make corrections.
+This is a collection of Markdown notes written in Obsidian for programming, coding, software engineering, software development and it includes notes on C, C++, using and configuring VSCode and many other things programming related. Anyone is welcome to contribute to this Markdown repository and make corrections.
+
+Keep in mind these notes are Open Source.  If I get it wrong, correct it in a PR or a issue or open a discussion.
+
+Also, keep in mind these things are written just as I understand them, so they might be wrong.  They have been copied from either hand written or typed notes I have written to help me in case I forgot how to do something in programming.  If you use these things, Please verify that they work.
+
+You don't have to use Obsidian to read this collection of notes, but it might help.
diff --git a/React_Development/react-development-notes.md b/React_Development/react-development-notes.md
@@ -39,3 +39,5 @@ Other components:
 These components can be combined in different ways to form various tech stacks, such as the MEAN stack (MongoDB, Express, Angular, Node.js) or the LAMP stack (Linux, Apache, MySQL, PHP)
 
 The choice of tech stack depends on the specific requirements of the project and the skills of the development team.
+
+In the latest versions of React, and you are using JavaScript with React instead of TypeScript, you should be focused on using at least ES6 or ES2015 so that you have access to `import` and `export`
diff --git a/VSCode/create-a-tasks-json-file.md b/VSCode/create-a-tasks-json-file.md
@@ -12,23 +12,23 @@ Here is the file structure:
 
 ```json
 {
- // See https://go.microsoft.com/fwlink/?LinkId=733558
- // for the documentation about the tasks.json format
- "version": "2.0.0",
-    "tasks": [
-    {
-     "type": "",
-     "label": "",
-     "command": "",
-     "args": "",
-     "options": "",
-     "problemMatcher": "",
-     "group": "",
-     "presentation": "",
-     "dependsOn": "",
-     "isBackground": "",
-     }
-  ],
+	// See https://go.microsoft.com/fwlink/?LinkId=733558
+	// for the documentation about the tasks.json format
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "process",
+			"label": "",
+			"command": "",
+			"args": [],
+			"options": {},
+			"problemMatcher": "",
+			"group": "",
+			"presentation": {},
+			"dependsOn": "",
+			"isBackground": true,
+		}
+	],
 }
 ```
 
diff --git a/WebDevelopment/beginning-webdev.md b/WebDevelopment/beginning-webdev.md
@@ -1,3 +1,28 @@
 # Web Development
 
-Web Development or WebDev.
+Web Development or WebDev as it is sometimes called, has a wide variety of subjects.
+
+There is a LOT to learn and cover.  I will do my best to cover a great deal of the basics. This is not intended to
+be an all encompassing guide or tutorial.
+
+You should at this point start learn HTML, CSS and JavaScript programming if you haven't already. This is the base
+of Web Development. From there you can learn more advanced topics. There are lots of great resources to learn how
+to program in these.
+
+You should become familiar with whatever web browsers yourself or your project will be displayed using, especially
+any devices you or your project may encounter.
+
+## Choosing a editor or IDE for Web Development
+
+This is a slightly controversial topic.  But, just about any editor or IDE will be able to support languages used
+in web development.  There are a few exceptions.  There are a number of them that will work across different platforms
+like Linux, Windows and Mac. There are quite a few options, depending on whether you want to use the
+command line/shell/terminal/console to use your editor or use the GUI or user interface.  A number of developers
+feel strongly about the editor or IDE they use.  You should use the one that gets the job done for you.
+
+This should go without saying, but you should try a few out before you settle on one and do not rely on what
+someone told you their editor or IDE is.  You might or might not like the first editor or IDE you choose.
+
+## Projects and what to make
+
+## Mobile Web Development
diff --git a/about-manifest-json.md b/about-manifest-json.md
@@ -34,43 +34,43 @@ At a minimum, a manifest file should contain the following manifest members: "na
 An example manifest.json,
 
     ```json
-     {
-     "name": "My Web App",
-     "displayName": "My Web App",
-     "background_color": "#ffffff",
-     "dir": "ltr",
-     "display": "standalone",
-     "icons": [
-      {
-      "src": "icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-      },
-      {
-      "src": "icon-512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-      }
-      ],
-     "lang": "en-US",
-     "orientation": "portrait",
-     "start_url": "/",
-     "id": "com.example.mywebapp",
-     "scope": "/",
-     "manifest_version": 2,
-     "type": "web_app",
-     "meta": {
-     "author": "John Doe",
-     "description": "A simple web app",
-     "version": "1.0.0"
-     },
-     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
-    },
-    "defaultWidth": 800,
-    "defaultHeight": 600,
-    "resizeX": true
+    {
+	"name": "My Web App",
+	"displayName": "My Web App",
+	"background_color": "#ffffff",
+	"dir": "ltr",
+	"display": "standalone",
+	"icons": [
+		{
+			"src": "icon-192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "icon-512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"lang": "en-US",
+	"orientation": "portrait",
+	"start_url": "/",
+	"id": "com.example.mywebapp",
+	"scope": "/",
+	"manifest_version": 2,
+	"type": "web_app",
+	"meta": {
+		"author": "John Doe",
+		"description": "A simple web app",
+		"version": "1.0.0"
+	},
+	"dependencies": {
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	},
+	"defaultWidth": 800,
+	"defaultHeight": 600,
+	"resizeX": true
     }
     ```
 
@@ -86,6 +86,9 @@ The file typically includes information such as the application or extension nam
 
 The manifest.json file affects web app performance by providing important metadata and configuration settings that help browsers and platforms understand and interact with the application, and by enabling the app to behave like a native app when installed on the user's device, which can improve user engagement and performance
 
-Having a manifest.json file available to browsers on your website or web page, even if it's not an app or a Progressive Web App (PWA), can have an impact on SEO and performance. Search engines consider PWAs and websites with manifest.json files more favorably, which can lead to improved SEO. Additionally, using a manifest.json file can enhance user experience by allowing the website to be installed as a PWA, providing an immersive and engaging experience for users. It can also lead to increased user engagement and improved performance, as PWAs can cache website data and work offline, reducing the need to download data from the server repeatedly
+Having a `manifest.json` file available to browsers on your website or web page, even if it's not an app or a Progressive Web App (PWA), can have an impact on SEO and performance. Search engines consider PWAs and websites with `manifest.json` files more favorably, which can lead to improved SEO. Additionally, using a `manifest.json` file can enhance user experience by allowing the website to be installed as a PWA, providing an immersive and engaging experience for users. It can also lead to increased user engagement and improved performance, as PWAs can cache website data and work offline, reducing the need to download data from the server repeatedly
 
-Therefore, while not strictly required for a traditional website, having a manifest.json file can still have positive effects on SEO and user experience
+Therefore, while not strictly required for a traditional website, having a manifest.json file can still have positive effects on SEO and user experience.
+
+In Firefox, once the browser loads the page, if it locates a `manifest.json` file, you can open the browser console and click on the `Application`
+tab and click on Manifest.  This section will display the properties you have set in the `manifest.json` file.
diff --git a/about-serviceworkers.md b/about-serviceworkers.md
@@ -0,0 +1,4 @@
+# Service Workers
+
+Most modern web browsers can utilize a Service Worker.
+
diff --git a/configure-eslint.md b/configure-eslint.md
@@ -29,12 +29,15 @@ Besides the .eslintrc file, ESLint also recognizes the following files as config
 - .eslintrc.yaml or .eslintrc.yml: These are YAML files to define the configuration structure.
 
 - .eslintrc.json: This is a JSON file to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.
-  package.json: You can create an eslintConfig property in your package.json file and define your configuration there. If there are multiple configuration files in the same directory, ESLint only uses one.
+
+- package.json: You can create an eslintConfig property in your package.json file and define your configuration there. If there are multiple configuration files in the same directory, ESLint only uses one.
 
 The priority order is as follows: .eslintrc.js, .eslintrc.cjs, .eslintrc.yaml, .eslintrc.yml, .eslintrc.json, package.json
 
 These files provide flexibility in how you can define and manage your ESLint configurations.
 
+As you gain familiarity with ESLint, You should build a baseline configuration and store the rather than just rely on the defaults so that you can get to work easily on your project and store it somewhere handy so that you can copy and paste it into your project.  If you work on various types of JavaScript projects and frameworks, you might even have several configurations you can rely on.
+
 ## Installing ESLint
 
 Install the ESLint package in your project using npm:
@@ -66,4 +69,4 @@ There are plugins for ESLint. An ESLint plugin is an npm module that can contain
 
 Each plugin is an npm module with a name in the format of eslint-plugin-<plugin-name>, such as eslint-plugin-react. Plugins can also provide additional environments, custom processors, and configurations
 
-You should be able to easily find a list of awesome ESLint plugins, configs, etc. on GitHub
+You should be able to easily find a list of awesome ESLint plugins, configs, etc. on GitHub
diff --git a/configure-prettier.md b/configure-prettier.md
@@ -1,9 +1,15 @@
 # Configuring Prettier
 
-Prettier is an opinionated code formatter that supports various languages. It enforces a consistent code style by parsing the code and reprinting it from scratch, taking the line length into account. It supports languages such as JavaScript (including experimental features), JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, Ember/Handlebars, JSON, GraphQL, Markdown (including GFM and MDX v1), and Y
+Prettier is an opinionated code formatter that supports various languages. It enforces a consistent code style by parsing the code and reprinting it from scratch, taking the line length into account. It supports languages such as JavaScript (including experimental features), JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, Ember/Handlebars, JSON, GraphQL, Markdown (including GFM and MDX v1).
 
-To configure Prettier, you can use a "prettier" key in your package.json file, a .prettierrc file written in JSON or YAML, a .prettierrc, .prettierrc.js or prettier.config.js file, or a .prettierrc.toml file, among other options.
+To configure Prettier, you can use a "prettier" key in your package.json file, a .prettierrc file written in JSON or YAML, prettierrc.js or prettier.config.js file, or a .prettierrc.toml file, among other options.  According to recent Prettier documentation online, the current way to configure prettier is using a prettier.config.js file, but the other formats are still supported.
 
 Prettier intentionally doesn’t support any kind of global configuration to ensure consistent behavior across different environments
 
 Prettier also supports the use of plugins to add new languages or formatting rules. Official plugins include @prettier/plugin-php, @prettier/plugin-pug, @prettier/plugin-ruby, and many more. Community plugins are also available for a wide range of languages
+
+If you're following along doing some Web Development, you will find this tool to help you format HTML, CSS, JavaScript. 
+
+## Extensions, Plugins
+
+There are some ESLint plugins and extensions for VSCode.
diff --git a/json-file-structure.md b/json-file-structure.md
@@ -1,6 +1,6 @@
 # JSON file structure
 
-JSON file structure can be a bit confisuing
+JSON code structure can be a bit confusing. This is commonly used in API's and is a great way to struture data.
 
 This is a JSON object file:
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +# Service Workers
++
 +Most modern web browsers can utilize a Service Worker.
++