major updates

This commit is contained in:
2023-11-11 12:32:35 -07:00
parent 6566454d27
commit 6d22eee90c
70 changed files with 30 additions and 2129 deletions

View File

@@ -0,0 +1,162 @@
# JavaScript Cheat Sheet for Web Development
## 1. Variables and Data Types
```javascript
let myVariable = 5; // Variable
const myConstant = 10; // Constant
let string = "This is a string";
let number = 42;
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let objectValue = { a: 1, b: 2 };
let arrayValue = [1, 2, 3];
let symbol = Symbol("symbol");
```
## 2. Operators and Conditionals
```javascript
let a = 10,
b = 20;
let sum = a + b;
let difference = a - b;
let product = a * b;
let quotient = a / b;
let remainder = a % b;
if (a > b) {
console.log("a is greater than b");
} else if (a < b) {
console.log("a is less than b");
} else {
console.log("a is equal to b");
}
```
## 3. Strings, Template Literals and Arrays
```javascript
let hello = "Hello,";
let world = "World!";
let greeting = hello + " " + world; // 'Hello, World!'
let world = "World!";
let greeting = `Hello, ${world}`; // 'Hello, World!'
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // 'Apple'
fruits.push("Durian"); // Adding to the end
fruits.unshift("Elderberry"); // Adding to the start
let firstFruit = fruits.shift(); // Removing from the start
let lastFruit = fruits.pop(); // Removing from the end
```
## 4. Functions and Objects
```javascript
function add(a, b) {
return a + b;
}
let subtract = function (a, b) {
return a - b;
};
let multiply = (a, b) => a * b;
let car = {
make: "Tesla",
model: "Model 3",
year: 2022,
start: function () {
console.log("Starting the car...");
},
};
console.log(car.make); // 'Tesla'
car.start(); // 'Starting the car...'
```
## 5. DOM Manipulation
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document and enables a way to manipulate its content and visual presentation by treating it as a tree structure where each node is an object representing a part of the document. The methods under this section help in accessing and changing the DOM.
```javascript
let element = document.getElementById("myId"); // Get element by ID
let elements = document.getElementsByClassName("myClass"); // Get elements by class name
let elements = document.getElementsByTagName("myTag"); // Get elements by tag name
let element = document.querySelector("#myId"); // Get first element matching selector
let elements = document.querySelectorAll(".myClass"); // Get all elements matching selector
element.innerHTML = "New Content"; // Change HTML content
element.style.color = "red"; // Change CSS styles
let attr = element.getAttribute("myAttr"); // Get attribute value
element.setAttribute("myAttr", "New Value"); // Set attribute value
```
## 6. Event Handling
JavaScript in the browser uses an event-driven programming model. Everything starts by following an event like a user clicking a button, submitting a form, moving the mouse, etc. The addEventListener method sets up a function that will be called whenever the specified event is delivered to the target.
```javascript
element.addEventListener("click", function () {
// Code to execute when element is clicked
});
```
## 7. Form Handling
In web development, forms are essential for interactions between the website and the user. The provided code here prevents the default form submission behavior and provides a skeleton where one can define what should be done when the form is submitted.
```javascript
let form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
event.preventDefault(); // Prevent form submission
// Handle form data here
});
```
## 8. AJAX Calls
AJAX, stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the fetch API (or XMLHttpRequest object) to communicate with servers from JavaScript. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAXs most appealing characteristic is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This allows you to update parts of a web page, without reloading the whole page.
```javascript
// Using Fetch API
fetch("https://api.mywebsite.com/data", {
method: "GET", // or 'POST'
headers: {
"Content-Type": "application/json",
},
// body: JSON.stringify(data) // Include this if you're doing a POST request
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error("Error:", error));
// Using Async/Await
async function fetchData() {
try {
let response = await fetch("https://api.mywebsite.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error("Error:", error);
}
}
fetchData();
```
## 9. Manipulating LocalStorage
The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. This can be
```javascript
localStorage.setItem("myKey", "myValue"); // Store data
let data = localStorage.getItem("myKey"); // Retrieve data
localStorage.removeItem("myKey"); // Remove data
localStorage.clear(); // Clear all data
```
## 10. Manipulating Cookies
Cookies are data, stored in small text files, on your computer. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. Cookies were invented to solve the problem of "how to remember information about the user": When a user visits a web page, his/her name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his/her name.
```javascript
document.cookie = "username=John Doe"; // Create cookie
let allCookies = document.cookie; // Read all cookies
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // Delete cookie
```

View File

@@ -0,0 +1,26 @@
my-eleventy-project/
├── _includes/
│ ├── layouts/
│ │ └── base.njk
│ └── partials/
│ ├── header.njk
│ └── footer.njk
├── media/
│ ├── images/
│ └── videos/
├── css/
│ └── style.css
├── js/
│ └── script.js
├── pages/ (or just place *.md files here)
│ ├── about.md
│ ├── projects.md
│ └── contact.md
├── .eleventy.js
└── package.json

View File

@@ -0,0 +1,51 @@
# Linux Email Tracking Tools Overview
## Open Source Email Tracking Tools
### 1. Postal
- **Purpose**: Tailored for outgoing emails.
- **Features**:
- Real-time delivery information.
- Click and open tracking.
- **URL**: [Postal](https://postalserver.io)
### 2. mailcow
- **Purpose**: Mailbox management and web server.
- **Features**:
- Easy management and updates.
- Affordable paid support.
- **URL**: [mailcow](https://mailcow.email)
### 3. Cuttlefish
- **Purpose**: Transactional email server.
- **Features**:
- Simple web UI for email stats.
- **URL**: [Cuttlefish](https://cuttlefish.io)
### 4. Apache James
- **Purpose**: SMTP relay or IMAP server for enterprises.
- **Features**:
- Reliable service.
- Distributed server.
- **URL**: [Apache James](https://james.apache.org)
### 5. Haraka
- **Purpose**: Performance-oriented SMTP server.
- **Features**:
- Modular plugin system.
- Scalable outbound mail delivery.
- **URL**: [Haraka](https://haraka.github.io)
## Common Email Tracking Features
- **Unique Identifiers**: Attach unique IDs to emails to track specific actions taken by recipients.
- **Pixel Tracking**: Use a 1x1 pixel image to record when an email is opened.
- **Link Wrapping**: Wrap links in emails with special tracking URLs to log clicks.
- **Analytics Integration**: Aggregate and analyze data for insights on email campaign performance.
- **List Management**: Segment email lists based on subscriber behavior for targeted campaigns.
- **Automated Compliance**: Manage bounces and unsubscribe requests to adhere to email regulations.
- **Web Analytics Integration**: Connect email metrics with web analytics for comprehensive insight into user behavior.
## Conclusion
When selecting an email tracking tool, consider the type of emails you send, required analytics depth, and control level over email servers and tracking. The right tool should align with your privacy policy, offer the necessary features, and integrate well with your existing systems for a seamless workflow.

View File

@@ -0,0 +1,68 @@
## Guide: Structuring Directories, Managing Files, and Using Git & Gitea for Version Control and Backup
### Directory and File Structure
Organize your files, directories, and projects in a clear, logical, hierarchical structure to facilitate collaboration and efficient project management. Here are some suggestions:
- `~/Projects`: Each project should reside in its own subdirectory (e.g., `~/Projects/Python/MyProject`). Break down larger projects further, segregating documentation and code into different folders.
- `~/Scripts`: Arrange scripts by function or language, with the possibility of subcategories based on function.
- `~/Apps`: Place manually installed or built applications here.
- `~/Backups`: Store backups of important files or directories, organized by date or content. Establish a regular backup routine, possibly with a script for automatic backups.
- `~/Work`: Segregate work-related files and projects from personal ones.
Use the `mkdir -p` command to create directories, facilitating the creation of parent directories as needed.
### Introduction to Git and Gitea
**Git** is a distributed version control system, enabling multiple people to work on a project simultaneously without overwriting each other's changes. **Gitea** is a self-hosted Git service offering a user-friendly web interface for managing Git repositories.
Refer to the [official Gitea documentation](https://docs.gitea.com/) for installation and configuration details. Beginners can explore resources for learning Git and Gitea functionalities.
### Git Repositories
Initialize Git repositories using `git init` to track file changes over time. Dive deeper into Git functionalities such as Git hooks to automate various tasks in your Git workflow.
### Gitea Repositories
For each local Git repository, establish a counterpart on your Gitea server. Link a local repository to a Gitea repository using `git remote add origin YOUR_GITEA_REPO_URL`.
### Committing Changes
Commit changes regularly with descriptive messages to create a project history. Adopt "atomic" commits to make it easier to identify and revert changes without affecting other project aspects.
### Git Ignore
Leverage `.gitignore` files to exclude irrelevant files from Git tracking. Utilize template `.gitignore` files available for various project types as a starting point.
### Using Branches in Git
Work on new features or changes in separate Git branches to avoid disrupting the main code. Learn and implement popular branch strategies like Git Flow to manage branches effectively.
### Pushing and Pulling Changes
Push changes to your Gitea server using `git push origin main`, allowing access from any location. Understand the roles of `git fetch` and `git pull`, and their appropriate use cases to maintain your repositories effectively.
### Neovim and Git
Enhance your workflow using Neovim, a configurable text editor with Git integration capabilities. Explore other editor alternatives like VSCode for Git integration.
Learn how to install Neovim plugins with this [guide](https://www.baeldung.com/linux/vim-install-neovim-plugins).
### Additional Considerations
- **README Files:** Create README files to provide an overview of the project, explaining its structure and usage.
- **Documentation:** Maintain detailed documentation to explain complex project components and setup instructions.
- **Consistent Structure and Naming:** Ensure a uniform directory structure and file naming convention.
- **Code Reviews:** Promote code quality through code reviews facilitated via Gitea.
- **Merge Conflicts:** Equip yourself with strategies to handle merge conflicts efficiently.
- **Changelog:** Keep a changelog to document significant changes over time in a project.
- **Testing:** Encourage testing in your development workflow to maintain code quality.
- **Licenses:** Opt for appropriate licenses for open-source projects to dictate how they can be used and contribute to by others.
### Conclusion
By adhering to an organized directory structure and leveraging Git and Gitea for version control, you can streamline your workflow, foster collaboration, and safeguard your projects progress. Remember to explore visual aids, like flow charts and diagrams, to represent concepts visually and enhance understanding.
Feel free to explore real-life examples or case studies to understand the application of the strategies discussed in this guide better. Incorporate consistent backup strategies, including automatic backup scripts, to secure your data effectively.
Remember, the path to mastery involves continuous learning and adaptation to new strategies and tools as they evolve. Happy coding!

32
docs/tech_docs/git.md Normal file
View File

@@ -0,0 +1,32 @@
The following are the most important files in the .git directory:
config: This file contains the Git configuration for the repository. This includes things like the default branch, the remote repositories, and the user's name and email address.
HEAD: This file contains the SHA-1 hash of the current HEAD of the repository. The HEAD is a pointer to the current commit.
info/index: This file contains the staging area, which is a list of all of the files that are currently scheduled to be committed.
objects: This directory contains all of the Git objects in the repository, such as commits, trees, and blobs.
Highlights:
The .git directory contains all of the Git repository data, so it is very important to keep it safe and backed up.
The config file is the main configuration file for the repository, so it is important to be familiar with its contents.
The HEAD file contains a pointer to the current commit, so it is important to know how to use it.
The info/index file contains the staging area, which is a list of all of the files that are currently scheduled to be committed.
The objects directory contains all of the Git objects in the repository, which are the building blocks of Git commits.
If you are serious about using Git, it is important to understand the contents of the .git directory and how to use them. There are many resources available online and in books that can help you learn more about Git.
To look at your current Git configuration, you can use the following command:
git config --list
This will list all of the Git configuration settings, both global and local.
Here are some common Git troubleshooting procedures:
If you are having problems with Git, the first thing you should do is check the output of the git status command. This will show you the current state of the repository and any errors that Git has detected.
If you are having problems pushing or pulling changes, you can try running the git fetch and git push or git pull commands again. You can also try restarting your computer.
If you are having problems with a specific commit, you can try using the git reset command to undo the commit. You can also try using the git reflog command to find the commit that is causing the problem and then using the git checkout command to revert to that commit.
Here are some other important items to be aware of when using Git:
Git is a distributed version control system, which means that each clone of the repository is a complete copy of the repository. This makes it easy to collaborate with others on the same project.
Git uses branches to allow you to work on different versions of the code at the same time. You can create a new branch for each feature or bug fix that you are working on.
Git uses commits to record changes to the repository. Each commit contains a snapshot of the repository at a specific point in time.
Git uses tags to mark specific commits as important. Tags can be used to mark releases of software or to mark important milestones in a project.
If you are new to Git, I recommend checking out the Git documentation: https://git-scm.com/doc. It is a great resource for learning more about Git and how to use it.

View File

@@ -0,0 +1,119 @@
# Markdown Cheat Sheet
Thanks for visiting [The Markdown Guide](https://www.markdownguide.org)!
This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements. It cant cover every edge case, so if you need more information about any of these elements, refer to the reference guides for [basic syntax](https://www.markdownguide.org/basic-syntax) and [extended syntax](https://www.markdownguide.org/extended-syntax).
## Basic Syntax
These are the elements outlined in John Grubers original design document. All Markdown applications support these elements.
### Heading
# H1
## H2
### H3
### Bold
**bold text**
### Italic
*italicized text*
### Blockquote
> blockquote
### Ordered List
1. First item
2. Second item
3. Third item
### Unordered List
- First item
- Second item
- Third item
### Code
`code`
### Horizontal Rule
---
### Link
[Markdown Guide](https://www.markdownguide.org)
### Image
![alt text](https://www.markdownguide.org/assets/images/tux.png)
## Extended Syntax
These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.
### Table
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
### Fenced Code Block
```
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}
```
### Footnote
Here's a sentence with a footnote. [^1]
[^1]: This is the footnote.
### Heading ID
### My Great Heading {#custom-id}
### Definition List
term
: definition
### Strikethrough
~~The world is flat.~~
### Task List
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
### Emoji
That is so funny! :joy:
(See also [Copying and Pasting Emoji](https://www.markdownguide.org/extended-syntax/#copying-and-pasting-emoji))
### Highlight
I need to highlight these ==very important words==.
### Subscript
H~2~O
### Superscript
X^2^