Adding more documentation and helpful notes

Author: gbowne1

Apache/configure-apache2.md

@@ -0,0 +1,50 @@
+In Apache2, you need to have an apache2.conf in /etc/apache2 
+
+Apache2 generally requires the use of systemd, which is quite sad.
+
+If you use SysVinit, in order to check status, restart, etc. you need to issue
+
+sudo /etc/init.d/apache2 restart
+sudo /etc/init.d/apache2 status
+
+Apache2 logs go into /var/log/apache2
+
+The /var/log/apache2 needs to have the right owner and permissions.  
+
+check to see if it is
+
+`ls -ld /var/log/apache2/`
+
+drwxrwxr-x 2 www-data www-data 4096 Apr 16 14:27 /var/log/apache2/
+
+if it is not, just issue this command
+
+`sudo chown www-data:www-data /var/log/apache2/`
+
+also change the perms using 
+
+`sudo chmod g+rw /var/log/apache2/`
+
+Logs may not work if you tail them with 
+
+`sudo tail /var/log/apache2/error_log`
+
+if that  does not work you can
+
+`sudo cat /var/log/apache2/error.log`
+
+The logs it should  create are:
+
+access.log
+error.log
+other_vhosts_access.log
+
+site code goes in:
+
+/var/www/html
+/var/www
+/public_html
+/usr/share (for WebApps)
+
+navigate your favorite browser to localhost: and you should see the Apache2 template page
+

Databases/connect-to-psql.md

@@ -1,3 +1,4 @@
+# Connecting to PostgreSQL.
 
 To connect to PostgreSQL, the command in the console/terminal/shell is `psql -U postgres`
 
@@ -23,8 +24,35 @@ The PostgreSQL port is 5432
 
 `sudo -u postgres createuser --interactive --pwprompt` will use the interative prompts to create a user.
 
-The PostgreSQL has several configuration files:
+The PostgreSQL has a couple configuration files:
 
 - pg_hba.conf
 - postgresql.conf
--
+
+The config files live in /var/lib/postgresql
+
+This path is usually followed by the version number.  Look in the following /data directory for the *two .conf files.
+
+Client configs locally may probably be stored in ~/.psqlrc
+
+## configuration files
+
+- postgresql.conf
+
+There are some parameters that this file uses:
+
+  - listen_addresses:
+  - port:
+  - shared_buffers:
+  - max-connections:
+  - authentication_methods:
+  - pg_hba_conf
+  - log_level
+  - log_line_prefix
+  - log_destination
+
+There are others.  Refer to the official configuration documents.
+
+- pg_hba.conf
+
+This file is mainly used for securing PostgreSQL. It's essentially a list who & what can access the database

Docker/dockerfiles.md

@@ -1,4 +1,15 @@
-# Creating a `Dockerfile`
+# About Docker
+
+## Configuring Docker
+
+In order to configure Docker, there are several files that will be needed, depending how you want to use Docker.
+
+docker-compose.yml
+.dockerignore
+Dockerfile
+devcontainer.json
+
+## Creating a `Dockerfile`
 
 A `Dockerfile` is a text file that contains a set of instructions for building a Docker image. It is used to automate the process of creating a Docker image by specifying the base image, adding files, installing packages, and configuring the environment
 

Node_JavaScript_Programming/debugging-nodejs.md

@@ -0,0 +1,17 @@
+# Debugging NodeJS
+
+For VSCode you can start here for documentation:
+
+<https://code.visualstudio.com/docs/nodejs/nodejs-debugging>
+
+We typically use console.log for debugging in Node.JS.
+
+`node debug script.js`
+
+The official NodeJS debugging is here<https://nodejs.org/en/learn/getting-started/debugging>
+
+you can also
+
+`node --inspect your_script.js`
+
+This starts your application (your_script.js) with debugging enabled on the default port (usually 9229).

Node_JavaScript_Programming/nodejs-server.md

@@ -0,0 +1,4 @@
+# Debugging Python
+
+Here are some tips for debugging Python.
+

Python/debugging-python.md

@@ -53,11 +53,11 @@ Typical CSS files that are used to contain global styles are `index.css` and `ap
 
 In CSS, there are special characters:
 
-- ";" is used to separate individual declarations in a style rule.
+- ";" is used to separate individual declarations in a style rule. They are required.
 
 - "$" is not a valid character in CSS and is typically used in preprocessors like Sass for variables.
 
-- "#" is used to denote an ID selector in CSS.
+- "#" is used to denote an ID selector in CSS.  It targets the id="" in the line of html tag.
 
 - "~" is used in CSS to select sibling elements that are preceded by a specified element.
 
@@ -73,11 +73,11 @@ In CSS, there are special characters:
 
 - "!" is used in CSS to denote the important flag, which gives a declaration higher priority.
 
-- "{" and "}" are used to enclose the declarations within a style rule.
+- "{" and "}" are used to enclose the declarations within a style rule. This is required.
 
 - ":" are used for pseudo-classes, which are used to define the special state of an element. For example, ":hover" is a pseudo-class that
 matches when the user designates an element (with some pointing device), but does not activate it. Another example is ":visited", which
-matches links that have been visited by the user.
+matches links that have been visited by the user.  This is required.
 
 - "::" are used for pseudo-elements, which are used to style specified parts of an element. For example, "::first-line" is a pseudo-element that matches the first formatted line of a paragraph.
 
@@ -90,6 +90,8 @@ matches links that have been visited by the user.
 
 - "*" is used as the universal selector in CSS to select any element.
 
+- "--" double hyphen is used in CSS variables for custom declarations of variable names inside a var().
+
 There are various types of selectors in CSS that are used to target HTML elements for styling. Some of the key types of selectors include
 
 - Type selectors: Select elements based on their element type (e.g., p for paragraphs, h1 for headings).

WebDevelopment/css.md

@@ -12,4 +12,35 @@ These are some of the things I have learned doing web development and creating .
 
 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 
+First of all, we will need to
+
+## HTML 5 symantic tags
+
+`<nav>`
+`<aside>`
+`<header>`
+`<section>`
+`<article>`
+`<footer>`
+`<main>`
+
+## HTML 5 content elements
+
+`<h1>` to `<h6>`: Define headings of varying levels, with `<h1>` being the most important and `<h6>` the least.Use these tags to structure your content hierarchically.  For good SEO, I would not recommend using any thing more than `<h1>` to `<h3>`.
+`<p>`: Represents a paragraph of text within your content.
+`<pre>`: Formats preformatted text, preserving whitespace and line breaks. Often used for code snippets or poems.
+`<ul>`: Defines an unordered list of items.
+`<ol>`: Defines an ordered list of items, typically numbered.
+`<table>`: Creates a table for presenting data in a structured format with rows and columns.
+`<caption>`: Provides a caption for a table, summarizing its content.
+`<figure>`: Groups an image or other visual content with an optional caption `<figcaption>` to provide context.
+`<blockquote>`: Represents a long excerpt from another source, typically indented and with quotation marks.
+
+## HTML 4 form elements
+
+`<form>`: Defines a section of a webpage that allows users to submit data to the server.
+`<label>`: Associates a label with a form element (like an input field) to explain its purpose.
+`<input>`: Represents a single-line input field for various user interactions (text, password, checkbox, etc.).
+`<textarea>`: Defines a multi-line text input area for users to enter larger amounts of text.
+`<button>`: Creates a clickable button that can trigger actions when clicked.
+`<fieldset>`: Groups related form elements visually, often with a common legend `<legend>` explaining the purpose of the group

WebDevelopment/html.md

@@ -33,24 +33,24 @@ At a minimum, a manifest file should contain the following manifest members: "na
 
 An example manifest.json,
 
-    ```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"
-		}
+	{
+	"src": "icon-192.png",
+	"sizes": "192x192",
+	"type": "image/png"
+	},
+	{
+	"src": "icon-512.png",
+	"sizes": "512x512",
+	"type": "image/png"
+	}
 	],
 	"lang": "en-US",
 	"orientation": "portrait",
@@ -60,19 +60,19 @@ An example manifest.json,
 	"manifest_version": 2,
 	"type": "web_app",
 	"meta": {
-		"author": "John Doe",
-		"description": "A simple web app",
-		"version": "1.0.0"
+	"author": "John Doe",
+	"description": "A simple web app",
+	"version": "1.0.0"
 	},
 	"dependencies": {
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2"
+	"react": "^17.0.2",
+	"react-dom": "^17.0.2"
 	},
 	"defaultWidth": 800,
 	"defaultHeight": 600,
 	"resizeX": true
-    }
-    ```
+	}
+	```
 
 The manifest.json file is used in web development to define the properties and behavior of web applications and extensions. It is written in JSON (JavaScript Object Notation) format and contains various metadata and configuration settings that help browsers and platforms understand and interact with the application or extension. This file typically includes information such as the application or extension name, version number, description, icons, permissions, and background scripts
 

about-manifest-json.md

@@ -20,7 +20,7 @@ For example, you can use a .eslintrc.js file to export an object containing your
  .eslintrc.json file to define the configuration structure.
 
 ESLint is primarily designed for linting JavaScript. However, it can also be configured to support other
-languages through parser options. By default, ESLint expects ECMAScript 5 syntax, but you can override 
+languages through parser options. By default, ESLint expects ECMAScript 5 syntax, but you can override
 this setting to enable support for other ECMAScript versions and JSX using parser options
 
 Besides the .eslintrc file, ESLint also recognizes the following files as configuration files:
@@ -39,8 +39,8 @@ The priority order is as follows: .eslintrc.js, .eslintrc.cjs, .eslintrc.yaml, .
 
 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 
+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.
 
@@ -60,7 +60,11 @@ module.exports = {
   "rules": {
     "indent": ["error", 2],
     "quotes": ["error", "single"],
-    "semi": ["error", "always"]
+    "semi": ["error", "always"],
+  },
+  "root": true,
+  "parserOptions": {
+
   }
 };
 ```
@@ -93,6 +97,30 @@ The docs for configuration are: [Config]<https://eslint.org/docs/latest/use/conf
 
 "workspaces" - This configuration is used in a monorepo setup to specify the workspaces to apply the ESLint configuration to.
 
+"ecmaFeatures" - This is an object. This specifies support for ECMAScript (JavaScript) features like jsx and classes.
+
+"ecmaVersion" - number value: A number representing the ECMAScript version to parse the code against (e.g., 2023)
+
+"codeFrame" - This is a boolean value, true to include code frames, false to omit them
+
+"settings" - Provides settings for ESLint to interpret code in specific contexts.
+
+"react" - An object or a boolean, depending on where used in the configuration, enables ESLint's built-in rules for React applications.
+
+"version" - This is a string and an optional property that can be used to specify an ESLint shareable config version.
+
+"jest"- An object or a boolean, depending on where used in the configuration, enables rules specific to Jest testing environments.
+
+"browser" - A boolean value, this enables rules for code running in a browser environment
+
+"commonjs" - A boolean value, this nables rules for code using the CommonJS module system
+
+"amd" -  Enables rules for code using the Asynchronous Module Definition (AMD) format.
+
+"es6" - An object or boolean, Enables or configures rules for ECMAScript 6 (ES6) features.
+
+"allowImportExportEverywhere" - This is a boolean value to allow imports and exports anywhere, false to restrict them to module top-level.
+
 ## Configurations
 
 Common configurations in "rules" are, and they should be:
@@ -109,8 +137,8 @@ There are more configurations in "rules" that you can set.  Tailor these to your
 
 ## ESLint Plugins
 
-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 
+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 and there
@@ -149,13 +177,17 @@ As for config.. install these packages:
 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.  I would suggest only installing eslint-plugin-prettier, eslint-plugin-react, eslint-config-react and eslint-config-prettier when you are first starting out as a beginner.  You can add more.  The others may not be helpful to you, but you should be aware of them.
 
+## Ignoring files
+
+You can tell ESLint to ignore file parsing of any file you do not want ESLint to parse by using .eslintignore which has a format similar to a .gitignore file.
+It has been suggested that you should ignore parsing of node_modules.
+
 ## Disabling ESLint rules
 
 You can inline disable ESLint's rules when necessary.
 
-use the // eslint-disable-rulename or /* eslint-disable-rulename */
+use the // eslint-disable-rulename or /*eslint-disable-rulename*/
 
 ## ESLint in the Command Line
 
 To run ESLint in the command line, two things can happen but most of the time all you will need to do is run `eslint --fix .` in whatever directory you are in.
-

configure-eslint.md

@@ -36,6 +36,7 @@ Here is an example `.prettierrc` which you can code in JSON or YAML..
       "semi": false,
       "endOfLine": "auto",
       "bracketSpacing": false,
+      "bracketSameLine": true,
       "jsxSingleQuote": true,
       "quoteProps": "as-needed",
       "htmlWhitespaceSensitivity": "css",
@@ -57,7 +58,8 @@ Here is an example `.prettierrc` which you can code in JSON or YAML..
           }
         }
       ],
-      "plugins": ["prettier-plugin-foo"]
+      "plugins": ["prettier-plugin-foo"],
+      "react/jsx-max-props-per-line": [1, { "when": "always" }]
     }
 
 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