More stuff added

Author: gbowne1

C_and_Cpp_Programming/create-a-makefile.md

@@ -9,7 +9,9 @@ A Makefile typically includes the following:
 - Rules for building object files and the executable
 - Dependencies between the source files and the object files
 
-Makefiles are used to simplify the build process and automate the compilation of large projects. They help to avoid the need to manually compile each source file and link them together. Instead, the make utility reads the Makefile and determines which files need to be recompiled based on the dependencies and the timestamps of the files. Makefiles are commonly used in Unix-based systems, but they can also be used in other operating systems. They are especially useful for large projects with many source files and dependencies. To use a Makefile, you need to run the make utility from the command line. The make utility reads the Makefile and determines which files need to be recompiled based on the dependencies and the timestamps of the files. It then executes the necessary commands to build the executable. Overall, Makefiles are an important tool for managing and building C or C++ projects, especially for large projects with many source files and dependencies.
+Makefiles are used to simplify the build process and automate the compilation of large projects. They help to avoid the need to manually compile each source file and link them together. Instead, the make utility reads the Makefile and determines which files need to be recompiled based on the dependencies and the timestamps of the files. Makefiles are commonly used in Unix-based systems, but they can also be used in other operating systems. They are especially useful for large projects with many source files and dependencies.
+
+To use a Makefile, you need to run the make utility from the command line. The make utility reads the Makefile and determines which files need to be recompiled based on the dependencies and the timestamps of the files. It then executes the necessary commands to build the executable. Overall, Makefiles are an important tool for managing and building C or C++ projects, especially for large projects with many source files and dependencies.
 
 Here is a sample Makefile for a C++ project
 

Docker/dockerfiles.md

@@ -11,7 +11,7 @@ Here are the most common types of instructions:
 - **FROM**: Defines a base for your image.
 - **RUN**: Executes any commands in a new layer on top of the current image and commits the result. RUN also has a shell form for running commands.
 - **WORKDIR**: Sets the working directory for any RUN, CMD, ENTRYPOINT, COPY, and ADD instructions that follow it in the Dockerfile.
-- **COPY**: Copies new files or directories from <src> and adds them to the filesystem of the container at the path <dest>.
+- **COPY**: Copies new files or directories from `<src>` and adds them to the filesystem of the container at the path `<dest>`.
 - `CMD`: Lets you define the default program that is run once you start the container based on this image.
 
 In addition to the `Dockerfile`, there are other files used in the Docker ecosystem, such as the `docker-compose.yml file`, which is used to define and run multi-container Docker applications

Node_JavaScript_Programming/babel-and-webpack.md

@@ -1,6 +1,6 @@
 # Webpack and Babel.js
 
-There are a few things that you should know about
+There are a few things that you should know about when it comes to Babel.js and Webpack
 
 ## Babel.js
 
@@ -22,6 +22,8 @@ The Babel toolchain includes various tools such as @babel/cli, @babel/core, and
 
 Babel is particularly useful for ensuring that modern JavaScript code can run on older browsers and environments, making it an essential tool for web developers who need to support a wide range of platforms
 
+You can find more about Babel.js here: <https://babeljs.io/>
+
 ## Webpack
 
 Webpack is a highly extensible and configurable static module bundler for JavaScript applications. It goes through your application from a root entry point, builds a dependency graph, and produces optimized bundles of the combined modules.
@@ -39,3 +41,32 @@ The configuration file is a JavaScript object that configures one of Webpack's o
 It is commonly defined in a top-level webpack.config.js file, but it can also be passed as a parameter to Webpack's Node.js API
 
 If you need to create a configuration for production in a separate file, you can do so by specifying the config file to use
+
+You can find more about Webpack here: <https://webpack.js.org/>
+
+There are files genereated by Webpack.  One of these is `dist/bundle.js` is a JavaScript file generated by Webpack, a module bundler used to bundle an app's modules and dependencies into a single browser-compatible JavaScript file. In the context of your project structure, dist/bundle.js is likely the output file created when you run Webpack. Webpack is responsible for transforming, bundling, and optimizing JavaScript files for usage in a browser. It does this by reading the entry points specified in your Webpack configuration file (usually webpack.config.js) and generating an output file in the specified output directory (usually dist). Some key aspects of Webpack and its output management include:
+
+    Entry points: These are the files that Webpack starts with when bundling your application. You can specify multiple entry points in your Webpack configuration file.
+
+    Output: The output directory, where Webpack generates the bundled JavaScript files. You can specify the output directory in your Webpack configuration file.
+
+    Plugins: Plugins are used to extend the functionality of Webpack and its configuration file. For example, the HtmlWebpackPlugin is used to generate an HTML file that includes the bundled JavaScript.
+
+    Development server: Webpack can be configured to use a development server, such as the Webpack Dev Server, which allows you to serve your application in the browser while still in development.
+
+To ensure that dist/bundle.js is generated correctly, you need to configure your Webpack configuration file properly. This includes specifying the correct entry points, output directory, and any necessary plugins or configurations.
+
+A developer might choose to use Webpack for several reasons, including:
+
+    Bundling and performance: Webpack allows you to bundle your JavaScript applications, supporting both ESM and CommonJS, and can be extended to support other assets such as images, fonts, and stylesheets. It cares about performance and load times, offering features like async chunk loading and prefetching to deliver the best possible experience for your project and your users.
+
+    Dependency management: Webpack automatically builds and infers your dependency graph based on what is required, making it easier to manage dependencies and avoid issues like missing or outdated code. This is particularly useful for complex front-end applications with many non-code static assets like CSS, images, and fonts.
+
+    Minification and optimization: Webpack provides minification, which means minimizing the code without changing its functionality, removing whitespace, line breaks, and other unnecessary characters. This results in reduced file size and faster load times.
+    Hot page reloading: Webpack allows for hot page reloading, which means that your page doesn't need to reload fully when making small changes, speeding up the development process.
+
+    True CSS management: Webpack offers better management of CSS, ensuring that styles are correctly applied and reducing the risk of errors.
+    CDN cache busting: Webpack automatically changes file names to hashes of the file contents, which can help with cache busting when using CDNs.
+    Compatibility with other tools: Webpack is compatible with various other tools and plugins, making it a versatile choice for managing your project's assets and build process.
+
+Webpack is a popular choice for developers due to its bundling and performance capabilities, dependency management, minification and optimization, hot page reloading, true CSS management, CDN cache busting, and compatibility with other tools.

Node_JavaScript_Programming/nodejs-development.md

@@ -215,8 +215,28 @@ Once you decide which package(s) you will be installing. Install the required pa
 
 Ideally, this  `node_modules` should not be commited to version control, git, etc. and should this should be added to the `.gitignore` file because it will include the path to the modules you used on your computer in the contents of this folder/directory.  However, There's no harm in committing this to version control like git.  I would suggest that from here, you do your own research on this.  My thoughts on this is that everyone who will use `yarn install` or `npm install` the requirements from the package.json file of your library, package or web application should ideally have their own unique version of the `node_modules` folder with the paths to the installation(s) of these packages on their own system.
 
+Once the user installs the packages are installed using `npm install`, it will create also a packge-lock.json file.
+
+A package-lock.json file is a lockfile generated by npm that describes the exact tree of dependencies generated during an installation operation, ensuring that subsequent installs can generate identical trees regardless of intermediate dependency updates. It is used to keep track of the exact version of every package that is installed, making a product 100% reproducible in the same way even if the package.json file is updated. The main purposes of package-lock.json are:
+
+    To store critical information about a project, such as dependencies, attributes, descriptions, and license information.
+    To lock down dependencies, ensuring that the same dependencies are used across different environments, such as development, staging, and production.
+    To improve performance by reducing the need to read package.json files and allowing for significant performance improvements.
+
+`package-lock.json` is different from `npm-shrinkwrap.json`, which also has the same format and performs similar functions but can be published and defines the shrinkwrap policy for a project.
+
+If you use Yarn, it is compatible with package.json. Yarn can consume the same package.json format as npm and can install any package from the npm registry. Yarn uses a yarn.lock file in the root of your project to manage dependencies, but you don't need to touch this file as it is owned by Yarn and will be changed when managing dependencies. When you run yarn or `yarn add <package>`, Yarn will generate a yarn.lock file within the root directory of your package. In most cases, running yarn or yarn add for the first time will just work, but there might be some cases where the information in a package.json file is not explicit enough to eliminate dependencies, and you may end up with a different set of dependencies. Yarn does not support npm shrinkwrap files, as they don't have enough information in them to power Yarn's more deterministic algorithm. To upgrade all dependency versions in package.json with Yarn, you can use the yarn upgrade command, which updates all packages to their latest versions. This command updates the yarn.lock file while preserving the package.json file.
+
+Not all packages need to be added to "dependencies" in package.json. I would suggest adding only package(s) required to run your application or library be added to "dependencies".
+
 ## Handy, useful stuff in Node.js
 
 If you use the `npm outdated` command done in bash/shell/command/terminal will list the outdated packages that are listed in your package.json file in a table.
 
 To update packages you can use the `npm update` command.
+
+## Using npx
+
+You might want to use `npx` in your Node.js environment.  `npx` stands for Node Package eXecute and is an NPM package runner. It allows developers to execute any JavaScript package available on the NPM registry without even installing it. npx is useful for testing different versions of a Node.js package or module without having to install the dependencies in your local node_modules folder.
+
+If you do `npx packagename`, and the package is not found, it will be downloaded and then run.

configure-eslint.md

@@ -40,11 +40,7 @@ As you gain familiarity with ESLint, You should build a baseline configuration a
 
 ## Installing ESLint
 
-Install the ESLint package in your project using npm:
-
-```bash
-npm install --save-dev eslint
-```
+Install the ESLint package in your project `npm install --save-dev eslint`
 
 It should be available via Yarn or other npm-like package managers
 
@@ -67,6 +63,37 @@ module.exports = {
 
 There are plugins for ESLint. An ESLint plugin is an npm module that can contain a set of ESLint rules, configurations, processors, and environments. These plugins often include custom rules and can be used to enforce a style guide and support JavaScript extensions, libraries, and frameworks such as TypeScript, React, and Angular
 
-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
+Each plugin is an npm module with a name in the format of eslint-plugin-<plugin-name>, such as eslint-plugin-react and there are a number of others. 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
+
+If you are using ESLint, especially with Prettier installed, I would suggeste that you should install these packages:
+
+eslint-plugin-prettier
+eslint-plugin-react
+eslint-plugin-jest
+eslint-plugin-jsdoc
+eslint-plugin-mocha
+eslint-plugin-cypress
+eslint-plugin-babel
+eslint-webpack-plugin
+eslint-plugin-filenames
+eslint-plugin-markdown
+eslint-plugin-jsonc
+eslint-plugin-jsx-a11y
+eslint-plugin-safe-jsx
+
+As for config.. install these packages:
+
+eslint-config-prettier (The config plugin for Prettier)
+eslint-config-airbnb-base
+eslint-config-airbnb
+eslint-config-standard (for standard JavaScript)
+eslint-config-react-app (the Create React App config)
+eslint-config-google
+eslint-config-standard-react
+eslint-config-standard-jsx
+eslint-config-react
+
+If you are doing React development, I would suggest installing both the plugin and config for React.  You can look up each one of these on
+npmjs.com and find out what they do.

configure-prettier.md

@@ -8,8 +8,80 @@ Prettier intentionally doesn’t support any kind of global configuration to ens
 
 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. 
+If you're following along doing some Web Development, you will find this tool to help you format HTML, CSS, JavaScript.
+
+## Installation
+
+Prettier is a package installed to your project.  It's available on npmjs.com and can be installed to your project using `npm install prettier`
 
 ## Extensions, Plugins
 
-There are some ESLint plugins and extensions for VSCode.
+There are some Prettier plugins and extensions for VSCode.
+
+First of all, Open the VSCode settings and search for "Editor: Default Formatter" and set it to "esbenp.prettier-vscode". You can also do this to
+your settings.json
+
+There are two handy packages that are useful when using Prettier with ESLint. They are, `eslint-config-prettier` and `eslint-plugin-prettier`.
+
+## Example configuration
+
+Here is an example `.prettierrc` which you can code in JSON or YAML..
+
+    {
+      "singleQuote": true,
+      "trailingComma": "all",
+      "arrowParens": "always",
+      "printWidth": 120,
+      "tabWidth": 2,
+      "semi": false,
+      "endOfLine": "auto",
+      "bracketSpacing": false,
+      "jsxSingleQuote": true,
+      "quoteProps": "as-needed",
+      "htmlWhitespaceSensitivity": "css",
+      "insertPragma": false,
+      "proseWrap": "always",
+      "ignorePath": ".prettierignore",
+      "useTabs": false,
+      "jsxBracketSameLine": true,
+      "requirePragma": true,
+      "vueIndentScriptAndStyle": true
+      "overrides": [
+        {
+          "files": "*.test.js",
+          "options": {
+            "printWidth": 80
+          }
+        }
+      ],
+      "plugins": ["prettier-plugin-foo"]
+    }
+
+I prefer JSON.  There could be more settings.  This covers most of them.  Most of the settings are or at least should be somewhat self-explanatory
+
+Documentation on this file is here: <https://prettier.io/docs/en/configuration.html>
+
+## Node.js configuration
+
+Configuring Prettier for Node.js is slightly different however.
+{
+  "env": {
+    "node": true,
+    "es2021": true
+  },
+  "extends": "eslint:recommended"
+}
+
+## React configuration
+
+Also, configuring Prettier for React is somewhat different from Node.js and setting up JavaScript linting.
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ]
+}

json-file-structure.md

@@ -2,6 +2,12 @@
 
 JSON code structure can be a bit confusing. This is commonly used in API's and is a great way to struture data.
 
+JSON (JavaScript Object Notation) is a text-based data exchange format derived from the JavaScript object syntax. It is a collection of key-value pairs where the key must be a string type, and the value can be a number, string, boolean, array, object, or null.
+
+The structure of JSON is similar to JavaScript object literal format, and it allows the construction of a data hierarchy using various data types. JSON is language-independent and can be used in many programming languages. It is commonly used for transmitting data in web applications and can be easily converted to and from JavaScript objects using the JSON.parse() and JSON.stringify() methods
+
+The basic structure of a JSON object is defined by key-value pairs enclosed in curly braces, while arrays are enclosed in square brackets. Each key and value must be separated by a colon, and multiple key-value pairs are separated by a comma. JSON is widely used for sending data between computers due to its simplicity and readability for both humans and machines
+
 This is a JSON object file:
 
 ```json

osdev-stuff.md

@@ -2,3 +2,4 @@
 
 Here are my notes about x86 32 bit OS development
 
+I would definitely 

working-with-tmux.md

@@ -0,0 +1,2 @@
+# tmux
+