Updates to JavaScript notes and NodeJS notes and added to babel notes

Author: gbowne1

GitHub/configuring-github.md

@@ -2,8 +2,18 @@
 
 This is not a note about configuring Git.  This is for configuring GitHub in a project.
 
-Create a folder/directory in your project called `.github`
+To do this, Create a folder/directory in your project called `.github`.  This will house GitHub special files.
 
 ## GitHub Actions
 
+Inside the `.github` folder create a folder called actions
+
+GitHub actions are primarily written in YAML and have the file extension .yml or .yaml
+
 ## GitHub Workflows
+
+Inside the .github folder/directory create a folder called `workflows`.
+
+GitHub workflows are also primarily written in YAML and have the file extension .yml or .yaml, the same as an action would be.
+
+Also in this folder you

Node_JavaScript_Programming/babel-and-webpack.md

@@ -1,7 +1,41 @@
-# Webpack and Babel
+# Webpack and Babel.js
 
-Using 
+There are a few things that you should know about
 
-## Babel
+## Babel.js
 
-## Webpack
+What is Babel?
+
+Babel, also known as Babel.js, is a free and open-source JavaScript transcompiler that is primarily used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript that can be run by current and older browsers or environments
+
+It allows developers to take advantage of the newest features of the language and to use new JavaScript language features by converting their source code into versions of JavaScript that a web browser can process
+
+Babel can also be used to compile TypeScript into JavaScript, but in this case you really should just write TypeScript.
+
+The toolchain can transform syntax, polyfill features missing in the target environment, perform source code transformations, and more
+
+Babel has support for the latest version of JavaScript through syntax transformers, allowing developers to use new syntax without waiting for browser support
+
+It is widely used in the industry and has a large community of contributors and sponsors
+
+The Babel toolchain includes various tools such as @babel/cli, @babel/core, and @babel/preset-env, which make it easy to use Babel for transforming and polyfilling JavaScript code
+
+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
+
+## 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.
+
+Webpack's configuration file is a JavaScript file that exports a webpack configuration, which is then processed by webpack based on its defined properties
+
+It is used to bundle JavaScript files for usage in a browser and can also transform, bundle, or package any resource or asset
+
+Some of its use cases include separate builds per page, creating a components library as a container, and dynamic dependency graphs in a multi-page application
+
+Webpack configuration files are written in JavaScript and can be split into smaller files for loaders, plugins, and other options
+
+The configuration file is a JavaScript object that configures one of Webpack's options
+
+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

Node_JavaScript_Programming/javascript-programming.md

@@ -95,3 +95,17 @@ The "version" field in the package.json file must be in the form x.x.x and follo
 ## Package Versioning
 
 In "dependencies" and "devDependencies" the version numbers should be listed in SemVer.
+
+The difference between using ^ and ~ in package versions is that ^ allows non-breaking updates, while ~ allows only for patch updates
+
+It's typically listed in the various dependencies sections of as `"package": "~0.0.0"`.
+
+## Dependencies
+
+In a package.json file, the:
+
+"dependencies": field is used to list the packages that are required for the application to run, while the devDependencies field is used to list the packages that are only required during development.
+
+"peerDependencies" field is used to specify the packages that the current package relies on in order to work
+
+"optionalDependencies" field is used to specify the packages that are not necessary for the application to run, but can be used to provide extra functionality.

Node_JavaScript_Programming/make-a-package-json-file.md

@@ -6,6 +6,7 @@ Node.js is a JavaScript runtime environment that allows the execution of JavaScr
 
 Node.js and JavaScript are related but serve different purposes. JavaScript is a scripting language
 used for writing scripts on websites and is mostly used on the client-side. On the other hand,
+
 Node.js is a JavaScript runtime environment that allows JavaScript code to run outside the browser,
 primarily on the server-side. Here are the key differences between Node.js and JavaScript:
 
@@ -36,6 +37,16 @@ Packages and libraries are usually published to NPM, Yarn or PNPM.
 
 While there are some great tutorials, it can still be a bit confusing.  Many of these were published a number of years ago.
 
+Node.js is not a framework, but a JavaScript runtime environment. It is a platform that executes code and communicates with an operating system.
+
+While Node.js can be used on its own, many developers use it with dedicated frameworks such as Express, Meteor, and Sails to speed up development and provide a set of reusable tools. These frameworks offer different types of support, such as MVC, full-stack MVC, and REST API frameworks1
+
+Therefore, Node.js can be used independently, but developers often use it with frameworks to enhance productivity and efficiency.
+
+Node.js can be used without a specific framework. Some examples of Node.js applications that do not use a stack or framework include custom server-side code for handling HTTP requests, real-time chat applications, and command-line toolsThe benefits of using Node.js without a stack or framework include the flexibility to create custom solutions tailored to specific requirements, a deeper understanding of the underlying technology, and the ability to avoid the overhead of a framework, which can be beneficial for certain types of applications
+
+When using Node.js without a stack or framework, developers may face challenges such as the need to handle low-level details, increased development time for common operations, and the absence of built-in features provided by frameworks, which can lead to the need for custom implementation of such features
+
 ## Obtaining Node.js
 
 Node.js can be downloaded from <https://nodejs.org>.  It's a fairly big ecosystem used by Web Developers.  Especially in a `full-stack` development environment.
@@ -194,4 +205,18 @@ The localhost ports typically used with Node.js are commonly in the range of 300
 
 ## Node.js environement and environement variables
 
-Using the Node.js environment especially within a web application or framework typcially requires installing the npm package `dotenv` so that you can use a `.env` or `variable.env` file to pass certain things along like ports
+Using the Node.js environment especially within a web application or framework typcially requires installing the npm package `dotenv` so that you can use a `.env` or `variable.env` file to pass certain things along like ports
+
+## Installing Node.js packages
+
+First of all, you should go the included read make-a-package-json.md file, although you can create a `package.json` file generated automatically by running `npm init` or `npm init -y` and answer the questions it gives you.  But unless you know what to answer the questions here with, it might be in your best interest to create your own `package.json` file.
+
+Once you decide which package(s) you will be installing. Install the required package(s) with whatever your package manager you are using. This will automatically create a `node_modules` folder or directory in your project.  NPM will use `npm install packagename`, replacing packagename with whatever package you are installing.  Yarn will use
+
+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.
+
+## 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.

Node_JavaScript_Programming/nodejs-development.md

@@ -0,0 +1,6 @@
+# Developing with PHP
+
+PHP gets lots of hate.  It's old, been around a while.  It's gotten way better over the years than it was initially, especially post PHP 5.
+
+I don't know a great deal about PHP development nor have I used a lot of PHP in my projects.
+

PHP/php-development.md

@@ -96,23 +96,19 @@ There are various types of selectors in CSS that are used to target HTML element
 
  A CSS type selector, also known as a tag name selector or element selector, matches elements by their node name, selecting all elements of the given type within a document. It is used to style HTML elements based on their tag names. For example, to select all <p> elements and center-align them, you can use the following CSS rule:
 
- ```css
- p {
- text-align: center;
- }
- ```
+    p {
+    text-align: center;
+    }
 
  Type selectors are not case-sensitive, and they can be combined with other selectors to target specific elements. They are one of the simplest and most frequently used selectors in CSS
 
 - Class selectors: Select elements based on their class attribute (e.g., .example for elements with class "example").
 
  For instance, A CSS class selector is used to select HTML elements with a specific class attribute. It is denoted by a period (.) followed by the class name. To use it, you can define a class in your CSS file and then apply that class to HTML elements in your document. For example, to create a class called "highlight" and apply it to certain elements, you can use the following CSS rule:
 
-```css
-.highlight {
-background-color: yellow;
-}
-```
+    .highlight {
+    background-color: yellow;
+    }
 
 And in your HTML document:
 

WebDevelopment/css.md

@@ -1,2 +1,15 @@
 # Learning HTML
 
+Learning HTML is pretty easy.  While there are many web app frameworks that will handle this, traditional web development can be still done effectively by creating `.html` files, along with a few other types of files to include in your project.
+
+Modern web development is typically done by creating a web app by using a framework.
+
+We are going to discuss learning HTML in a top down fashion.
+
+The modern HTML specification is HTML5, thus we are going to use this standard.
+
+These are some of the things I have learned doing web development and creating .html files for apps and sites.
+
+Hopefully this will help you with some baseline knowledge, that may at least help you debug some issues.
+
+First of all, we will need to 

WebDevelopment/html.md

@@ -20,7 +20,7 @@ Service workers are a powerful tool for enhancing web applications, but they req
 
 Service workers in web development have several use cases, contribute to improved website performance, and come with common challenges. Here's a summary based on the provided search results:
 
-## Use Cases for Service Workers:
+## Use Cases for Service Workers
 
     Offline-First Experience: Service workers enable the creation of an offline-first experience in web apps, improving overall user experience by caching resources required for the app to function, such as HTML pages, stylesheets, JavaScript, and images
 

about-serviceworkers.md

@@ -0,0 +1,4 @@
+# x86 32 bit Operating System Development
+
+Here are my notes about x86 32 bit OS development
+