medusa/the_information_nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

structure updates

Browse Source
This commit is contained in:
Jason Davis
2023-11-11 11:48:10 -07:00
parent 9fea7f6764
commit 59dbccc06b
79 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
docs/tech_docs/Python Cheat Sheet.md Normal file
View File

@@ -0,0 +1,151 @@
# Python Cheat Sheet
## 1. Variables, Data Types, and Basic Operations
Python has several fundamental data types, including integers (int), floating point numbers (float), and strings (str). Python is a dynamically typed language, which means you don't need to declare the data type of a variable when you define it.
```python
a = 10 # Integer
b = 3.14 # Float
c = "Hello, World!" # String
```
Operators allow you to perform operations on variables. Arithmetic, comparison, assignment, logical, and identity operators are some of the main types in Python.
```python
a = 10
b = 20
sum = a + b # Addition
difference = a - b # Subtraction
#... remaining code ...
```
## 2. Control Structures (Conditionals and Loops)
Python uses `if`, `elif`, and `else` for conditional statements. Loops in Python can be programmed using a `for` or `while` loop.
```python
# If-else statement
if a > b:
print("a is greater than b")
else:
print("a is not greater than b")
# For loop
for i in range(5):
print(i)
```
## 3. Functions
Functions in Python are defined using the `def` keyword. They are used to encapsulate a piece of code that performs a specific task.
```python
def greet(name):
print("Hello, " + name)
greet("Alice")
```
## 4. Lists, Tuples, Sets, and Dictionaries
Python has several types of compound data structures that can hold multiple values, including lists, tuples, sets, and dictionaries.
```python
# Lists
my_list = [1, 2, 3, 4, 5]
# Dictionaries
my_dict = {"apple": 1, "banana": 2, "cherry": 3}
```
## 5. File Handling
Python has built-in functions for reading and writing files. `open()` function is used to open a file. It returns a file object and is most commonly used with two arguments: `open(filename, mode)`.
```python
# Reading a file
file = open('file.txt', 'r')
content = file.read()
file.close()
# Writing to a file
file = open('file.txt', 'w')
file.write("Hello, World!")
file.close()
```
## 6. Exception Handling
Python uses `try` and `except` blocks to catch and handle exceptions. Python executes code following the `try` statement as a "normal" part of the program. The code that follows the `except` statement is the program's response to any exceptions in the preceding try clause.
```python
try:
# Code that may raise an exception
x = 1 / 0
except ZeroDivisionError:
print("You can't divide by zero!")
```
## 7. Classes and Objects
Python is an object-oriented programming language. You define classes to create your own types.
```python
class MyClass:
x = 5
p1 = MyClass() # Create an object of MyClass
print(p1.x) # Access the properties of MyClass using the object
```
## 8. Modules and Packages
Modules in Python are simply Python files with a .py extension, which implement a set of functions. A package is a way of organizing related modules into a single directory hierarchy.
```python
# Importing a module
import math
print(math.sqrt(16)) # Use a function from the math module
# Importing
ChatGPT
a package
import os.path
print(os.path.join('/a', 'b', 'c')) # Use a function from the os.path package
```
## 9. Working with JSON
Python has a built-in package called `json`, which can be used to work with JSON data.
```python
import json
# Some JSON:
x = '{"name": "John", "age": 30, "city": "New York"}'
# Parse x:
y = json.loads(x)
# The result is a Python dictionary:
print(y["age"])
```
## 10. Making HTTP requests
The `requests` library is the de facto standard for making HTTP requests in Python. It abstracts the complexities of making requests behind a beautiful, simple API so that you can focus on interacting with services and consuming data in your application.
```python
import requests
response = requests.get('https://www.example.com')
# Print the status code
print(response.status_code)
# Print the content
print(response.text)
```
These are the basics to get you started with Python! Each of these topics has more depth to explore as you become more comfortable with the language.

100
docs/tech_docs/RFCs.md Normal file
View File

@@ -0,0 +1,100 @@
# Comprehensive Study Guide for "TCP/IP Illustrated, Volume 1"
## Introductory Context for Web Development and Security
### Chapter 1 - Introduction
- **Key Concepts**:
- **Internet Layering Model** `(1.3)`: Essential for understanding the interaction of APIs with the network.
- **Internet Addresses and DNS** `(1.4, 1.5)`: Core concepts for configuring WAFs and understanding API endpoint resolution.
- **Encapsulation and Demultiplexing** `(1.6, 1.7)`: Fundamental for grasping how data is packaged and directed through proxies and WAFs.
- **Practical Application**:
- Set up a domain with DNS records to practice how web requests are routed and how changes affect website accessibility.
## Deepening Protocol Knowledge
### Chapter 5 - IP: Internet Protocol
- **Key Concepts**:
- **Subnetting and Masking** `(3.5)`: Important for creating secure network segments, often used in WAF configurations.
- **IP Routing** `(3.3)`: Understanding routing is key for network traffic management and security rule implementation in WAFs.
- **Practical Application**:
- Use subnetting exercises to simulate network segmentation and configure a mock WAF to manage traffic between segments.
### Network Functionality and Diagnostics
### Chapter 6 - ICMP: Internet Control Message Protocol
- **Key Concepts**:
- **ICMP Types and Error Messages** `(6.2)`: Learn how these messages can inform about network health or be indicative of security issues.
- **Practical Application**:
- Simulate network issues using ICMP to become familiar with the typical ICMP traffic that WAFs might need to inspect.
### UDP and DNS: Critical Components for Web Applications
### Chapter 11 - UDP: User Datagram Protocol
- **Key Concepts**:
- **UDP's Role in DNS** `(11.2)`: Since UDP is essential for DNS operations, understanding its headers and operation is critical.
- **Practical Application**:
- Analyze UDP DNS traffic to see how DNS queries and responses are structured and to understand their importance in web communications.
### Chapter 14 - DNS: The Domain Name System
- **Key Concepts**:
- **DNS Resolution Process** `(14.2)`: Crucial for API endpoint discovery and the initial step in any web request.
- **Practical Application**:
- Configure a DNS server and practice setting up various record types. Explore DNSSEC to understand its role in securing DNS communications.
### Ensuring Reliable Communication
### Chapter 17 - TCP: Transmission Control Protocol
- **Key Concepts**:
- **TCP Reliability Mechanisms** `(17.2)`: The backbone of HTTP/S, crucial for data integrity in API communications.
- **Practical Application**:
- Establish a TCP connection to understand handshakes and data transfer, which are important when configuring SSL/TLS offloading on proxies.
### Chapter 18 - TCP Connection Establishment and Termination
- **Key Concepts**:
- **Three-way Handshake** `(18.2)`: Essential for starting a secure communication session, especially for HTTPS connections through a WAF.
- **Practical Application**:
- Create a simple application that initiates and terminates TCP connections to visualize the process and understand the states involved.
### Optimizing Web Traffic
### Chapters 19 and 20 - TCP Interactive and Bulk Data Flow
- **Key Concepts**:
- **Flow Control and Window Management** `(19.5, 20.3)`: Important for managing how data is transmitted, which impacts API performance.
- **Practical Application**:
- Observe window sizes and their impact on throughput in various network conditions to understand how WAFs can affect API performance.
### Network Performance and Security
### Chapter 21 - TCP Timeout and Retransmission
- **Key Concepts**:
- **Congestion Control** `(21.7)`: Understanding this is important for API availability and efficiency, as well as WAF throughput under load.
- **Practical Application**:
- Experiment with artificially introduced network congestion to see how TCP responds, which is valuable for WAF performance tuning.
### Chapter 24 - TCP Futures and Performance
- **Key Concepts**:
- **Path MTU Discovery** `(24.2)`: An understanding of MTU is crucial for optimizing API data packets and understanding their impact on WAF processing.
- **Practical Application**:
- Adjust MTU settings and observe the effects on data transfer to simulate a WAF's effect on traffic flow and its potential to cause fragmentation.
## Conclusion and Forward Path
The knowledge gained from these chapters provides a solid foundation for understanding the network interactions that APIs, WAFs, and proxies are built upon. As you progress, practice configuring and using WAFs and proxies to protect web applications, and build simple APIs to get firsthand experience with the concepts covered in this guide.
## Additional Resources for Ongoing Learning
- **OWASP**: Dive into specific web application security practices and how they relate to networking principles.
- **ModSecurity**: Get hands-on experience with an open-source WAF to apply your theoretical knowledge.
- **Postman**: Use this tool to interact with APIs, understanding how they use the network protocols you’ve learned about.
By following this guide, you'll be well-equipped to transition from networking into the specialized field of web development and security, with a particular emphasis on API interaction and protection mechanisms.

430
docs/tech_docs/advanced_html.md Normal file
View File

@@ -0,0 +1,430 @@
## Getting Started with Web Development: From Basics to Advanced HTML, CSS, and Sass Topics
Welcome to this comprehensive guide on web development. Whether you're a beginner aspiring to become a skilled web developer or looking to enhance your skills, this guide will walk you through essential and advanced concepts in HTML, CSS, and Sass. Let's dive in!
### **Commonly Used Items**
#### **HTML**
- **Basic HTML Syntax and Structure**: Understanding the fundamental syntax and structuring principles.
- **Document Structure**: Skeleton, headings, and layout essentials.
- **HTML Tags and Elements**: Differentiating between block and inline elements and familiarizing with common tags.
- **Semantic Elements**: Learn about common elements like `header`, `footer`, `nav`, etc., and their roles in web development.
- **Forms and Input Types**: Grasping the essential forms and various input types to facilitate user interaction on a webpage.
## Semantic HTML
Semantic HTML is the practice of using HTML elements to describe the meaning of their content, rather than just their appearance. This makes your code more readable and maintainable, and it also helps search engines to understand your content better.
Here are some examples of semantic HTML elements:
- `<header>`: Used to mark the header of a document
- `<footer>`: Used to mark the footer of a document
- `<nav>`: Used to mark the navigation section of a document
- `<main>`: Used to mark the main content of a document
- `<article>`: Used to mark a self-contained piece of content, such as a blog post or news article
#### **CSS**
- **Basic CSS**: Understanding syntax, selectors, and basic properties.
- **Box Model**: Learning about the CSS box model which includes margins, borders, and padding.
- **Colors, Fonts, and Units**: Getting familiar with color schemes, typography, and measurement units in CSS.
- **Flexbox and Grid Layout**: A deep dive into creating responsive designs using flexbox and grid systems.
- **Media Queries**: Learning to design responsive websites that adapt to different device characteristics.
#### **Sass**
- **Basic Sass Syntax**: Understanding the foundational syntax of Sass.
- **Variables**: Learning to store reusable values using variables.
- **Nesting**: Grasping the nesting principles to maintain a cleaner and more readable Sass code.
---
### **Occasionally Used Items**
#### **HTML**
- **Multimedia Elements**: Enhancing web pages with audio and video elements.
- **Graphics**: Incorporating SVG and Canvas to enrich web graphical content.
- **HTML5 Features**: Deep diving into APIs and understanding deprecated elements to stay updated.
#### **CSS**
- **Transitions and Animations**: Creating dynamic and visually appealing web pages.
- **Pseudo-classes and Pseudo-elements**: Utilizing these to style elements based on their state and position.
- **Advanced CSS3 Features**: Learning 2D and 3D transformations to create depth and motion effects on web pages.
- **CSS At-rules**: Understanding various at-rules and their applications in CSS:
- **@font-face**
- **@import**
- **@keyframes**
- **@media**
- **@namespace**
- **@page**
- **@supports**
#### **Sass**
- **Mixins**: Learning to create reusable blocks of code in Sass.
- **Functions**: Understanding and creating custom functions to facilitate various operations in Sass.
---
### **Accessibility**
Understanding and implementing the principles of accessibility to create websites usable by all individuals, including those with disabilities. Key considerations include:
- **Perceivable Information and User Interface**
- **Operable UI Components**
- **Understandable Information and UI**
- **Robust Content and Reliable Interpretation**
### **Security**
Implementing strategies to maintain a secure website. Some tips include:
- **Strong Passwords**
- **HTTPS**
- **Regular Software Updates**
---
### **Used Only When Necessary**
#### **HTML**
- **Advanced HTML5 Features**: Leveraging web storage, geolocation, and other APIs for enhanced functionality.
- **Complex Forms and Intricate Input Types**: Crafting advanced forms to gather a variety of user inputs.
### **Semantic HTML**
Semantic HTML is the practice of using HTML elements to describe the meaning of their content, rather than just their appearance. This makes your code more readable and maintainable, and it also helps search engines to understand your content better.
Here are some examples of semantic HTML elements:
- `<header>`: Used to mark the header of a document
- `<footer>`: Used to mark the footer of a document
- `<nav>`: Used to mark the navigation section of a document
- `<main>`: Used to mark the main content of a document
- `<article>`: Used to mark a self-contained piece of content, such as a blog post or news article
### **HTML5 Features**
HTML5 is the latest version of the HTML standard. It introduces a number of new features, such as:
- `<audio>` and `<video>` elements for embedding audio and video content
- `<canvas>` element for drawing graphics
- `<svg>` element for embedding SVG graphics
- `localStorage` and `sessionStorage` APIs for storing data on the client side
- `geolocation` API for getting the user's current location
#### **CSS**
- **CSS Variables**: Learning to use variables in CSS for more dynamic styling.
- **Complex CSS Grid Layouts**: Creating intricate layouts using advanced grid techniques.
## Responsive Design
Responsive design is a web design approach that ensures that a website looks and functions well on all devices, regardless of screen size or orientation. This is important because more and more people are using mobile devices to access the internet.
To create a responsive website, you need to use CSS to create flexible layouts that can adapt to different screen sizes. You can also use media queries to target specific devices or screen sizes.
Here are some tips for creating responsive websites:
- Use fluid layouts instead of fixed layouts. Fluid layouts use relative units of measurement, such as percentages and viewport units, so that they can expand and contract to fit different screen sizes.
- Use media queries to target specific devices or screen sizes. Media queries allow you to apply different CSS rules to different devices or screen sizes.
- Use responsive images. Responsive images are images that can be resized to fit different screen sizes.
## **CSS Variables and Complex CSS Grid Layouts**
#### **CSS Variables**
CSS variables are a powerful tool for creating more dynamic and maintainable CSS code. They allow you to store values in variables and then use those variables throughout your CSS code. This can make your code more reusable and easier to maintain.
For example, you can use a CSS variable to store the primary color of your website. Then, you can use that variable in your CSS code to style different elements, such as the background color of your header and the text color of your navigation links.
Here is an example of how to use CSS variables:
```sass
/* Define a CSS variable */
:root {
--primary-color: blue;
}
/* Use the CSS variable to style elements */
header {
background-color: var(--primary-color);
}
nav a {
color: var(--primary-color);
}
```
#### **Complex CSS Grid Layouts**
CSS Grid is a powerful layout system that allows you to create complex layouts that can adapt to different screen sizes and devices. CSS Grid layouts are made up of rows and columns, and you can place elements within the grid using grid areas.
Complex CSS Grid layouts can be used to create a variety of layouts, such as:
- Multi-column layouts with different column widths
- Layouts with nested grids
- Layouts with sticky headers and footers
- Layouts with flexible spacing
Here is an example of a complex CSS Grid layout:
```sass
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
/* Place elements within the grid */
.header {
grid-area: 1 / 1 / 2 / 4;
}
.sidebar {
grid-area: 2 / 1 / 3 / 2;
}
.content {
grid-area: 2 / 2 / 3 / 4;
}
}
```
#### **Sass**
- **Control Directives**: Understanding control directives such as `if`, `for`, `each`, and `while` for advanced Sass functionalities.
- **Advanced Sass Functionalities**: Creating custom functions and understanding other advanced functionalities in Sass.
## Sass
### **Mixins**
Mixins are reusable blocks of Sass code. They can be used to save time and effort, and to keep your code DRY (Don't Repeat Yourself).
To create a mixin, you use the `@mixin` directive. For example, the following mixin creates a button with a specific style:
```sass
@mixin button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 4px;
}
```
## **Sass Control Directives and Advanced Sass Functionalities**
#### **Sass Control Directives**
Sass control directives allow you to add conditional logic and loops to your Sass code. This can make your code more reusable and efficient.
For example, you can use the @if directive to conditionally apply CSS rules. You can also use the @for loop to iterate over a list of values and apply CSS rules to each item in the list.
Here is an example of how to use Sass control directives:
```sass
/* Use the @if directive to conditionally apply CSS rules */
@if ($is-mobile) {
body {
font-size: 16px;
}
}
/* Use the @for loop to iterate over a list of values and apply CSS rules to each item in the list */
@for $i from 1 to 3 {
.item-#{$i} {
margin: 10px;
}
}
```
#### **Advanced Sass Functionalities**
Advanced Sass functionalities include custom functions, mixins, and importers.
- Custom functions allow you to create your own functions that can be used in your Sass code.
- Mixins allow you to create reusable blocks of Sass code.
- Importers allow you to import Sass code from other files.
Here is an example of how to use a custom Sass function:
```sass
/* Define a custom Sass function */
@function px-to-rem($px) {
$rem: $px / 16;
return $rem + "rem";
}
/* Use the custom Sass function to convert pixels to rems */
body {
font-size: px-to-rem(16);
}
```
## SEO
SEO stands for search engine optimization. It is the process of optimizing a website so that it ranks higher in search engine results pages (SERPs). This is important because it can help to drive more traffic to your website.
There are many different factors that affect SEO, including the content of your website, the structure of your website, and the links to your website from other websites.
Here are some tips for improving your website's SEO:
- Write high-quality content that is relevant to your target audience.
- Optimize your website's title tags and meta descriptions.
- Use relevant keywords throughout your website content.
- Build backlinks to your website from other high-quality websites.
#### **Project-Based Learning**
- **Sass Project Structure**: Understanding and working with a structured Sass project.
- **Compiling Sass to CSS**: Learning the process to compile Sass files into CSS.
- **Utilizing Source Maps**: Grasping the use of source maps in Sass development.
- **Version Control**: Getting acquainted with version control systems like Git for collaborative and controlled project development.
---
## **Conclusion**
You have now been introduced to a wide spectrum of concepts and elements vital in web development, encompassing the basics to advanced topics in HTML, CSS, and Sass. The learning doesn't stop here. Make sure to practice and experiment with what you have learned. Consider engaging in project-based learning to further solidify your understanding and to gain hands-on experience.
## **Resources**
As you venture into web development, here are some recommended resources for further learning:
- **Online Platforms**: FreeCodeCamp, Codecademy, W3Schools
- **Books**: "HTML & CSS: Design and Build Web Sites" by Jon Duckett, "Sass for Web Designers" by Dan Cederholm
- **Courses**: Coursera, Udemy, Pluralsight
Remember, the best way to learn is by doing. Start building your web projects today!
---
## **Web Development Glossary**
To aid in your learning process, we have compiled a glossary of common terms and concepts used in web development and in this guide.
### **HTML**
(Here, maintain the definitions as they were in your original glossary, adding definitions for "Responsive Design" and "SEO" in appropriate sections)
---
### **Self-closing HTML tags**
Self-closing HTML tags, also known as void elements, do not have a closing tag as they cannot have any content within them. Here is a list of self-closing tags:
- `<area>`
- `<base>`
- `<br>`
- `<col>`
- `<embed>`
- `<hr>`
- `<img>`
- `<input>`
- `<link>`
- `<meta>`
- `<param>`
- `<source>`
---
### **Feedback and Questions**
We welcome your feedback and questions on this guide. Feel free to reach out with any doubts or suggestions as you navigate through the exciting path of web development. Happy learning!
## Web Development Glossary
This glossary provides definitions for common terms and concepts used in web development and in this guide. Understanding these terms will aid in grasping the various topics covered in the main guide.
### **Mid to Expert Level Webdev Terms**
#### **API**
Application Programming Interface: A set of definitions and protocols that act as an intermediary between two software programs. APIs enable different software applications to communicate with one another and exchange data.
#### **Authentication**
The process of verifying the identity of a user. This can be done through methods such as usernames and passwords, two-factor authentication, or OAuth.
#### **Authorization**
The process of granting users access to specific resources or functionality. This is typically done based on the user's role or permissions.
#### **Caching**
The process of storing frequently accessed data in a temporary location so that it can be retrieved quickly and efficiently. Caching can be used to improve the performance of web applications and reduce bandwidth consumption.
#### **Cloud Computing**
The delivery of computing services—including servers, storage, databases, networking, software, analytics, intelligence, and the Internet of Things (IoT)—over the internet ("the cloud") to offer faster innovation, flexible resources, and economies of scale.
#### **Continuous Integration/Continuous Delivery (CI/CD)**
A set of practices that automates the building, testing, and deployment of software. CI/CD allows for faster and more reliable software releases.
#### **Content Delivery Network (CDN)**
A network of servers distributed around the world that deliver content to users based on their geographic location. CDNs can be used to improve the performance and reliability of web applications by serving content from the server that is closest to the user.
#### **Database**
A structured collection of data that is organized and stored in a way that makes it easy to retrieve and manage. Databases are used to power a wide variety of web applications, from social networks to e-commerce websites.
#### **Deployment**
The process of making a web application available to users. This typically involves uploading the application files to a web server and configuring the server to serve the application.
#### **Domain Name System (DNS)**
The system that translates domain names (e.g., google.com) into IP addresses (e.g., 172.217.9.110). DNS is essential for the operation of the web.
#### **Frontend Development**
The development of the user-facing part of a web application. This includes the HTML, CSS, and JavaScript code that is used to create the web pages and interact with the user.
#### **Backend Development**
The development of the server-side part of a web application. This includes the code that is responsible for handling user requests, processing data, and generating responses.
#### **Framework**
A collection of pre-written code and libraries that provide a foundation for building web applications. Frameworks can help to simplify and streamline the development process.
#### **JavaScript**
A programming language that is used to add interactivity and dynamic behavior to web pages. JavaScript is one of the core technologies of the web, and it is used in a wide variety of web applications.
#### **JSON**
JavaScript Object Notation: A lightweight data-interchange format that is commonly used to exchange data between web applications and servers.
#### **Node.js**
A JavaScript runtime environment that allows JavaScript to be used outside of the browser. Node.js is commonly used to develop backend web applications.
#### **Performance Optimization**
The process of improving the performance of a web application by reducing its load time and memory usage. Performance optimization is important for ensuring that web applications are responsive and provide a good user experience.
#### **REST**
Representational State Transfer: A software architectural style that specifies how to design web services. RESTful web services are easy to understand and use, and they are widely supported by a variety of programming languages and frameworks.
#### **Scalability**
The ability of a web application to handle increased traffic and workload without sacrificing performance or reliability. Scalability is important for web applications that need to be able to handle large numbers of users.
#### **Security**
The practice of protecting web applications from unauthorized access, use, disclosure, disruption, modification, or destruction. Security is essential for protecting the privacy and security of users' data.
### **Conclusion**
This glossary provides a starting point for learning about the common terms and concepts used in web development. As you continue to learn and grow as a web developer, you will encounter many other terms and concepts. It is important to stay up-to-date on the latest technologies and trends in web development.

194
docs/tech_docs/html_css_standards.md Normal file
View File

@@ -0,0 +1,194 @@
# Coding Standards Documentation
## Introduction
This document outlines the common HTML class naming conventions and structure to ensure consistent, readable, and maintainable code in our web projects.
## Buttons
- `.btn`:
- **Description**: Used to style generic buttons.
- **Example**: `<button class="btn">Click Me</button>`
- `.btn--large`:
- **Description**: Styles large buttons.
- **Example**: `<button class="btn btn--large">Large Button</button>`
- `.btn--small`:
- **Description**: Styles small buttons.
- **Example**: `<button class="btn btn--small">Small Button</button>`
## Layout
- `.container`:
- **Description**: Wraps the main content of a web page, centering the content and limiting its width.
- **Example**: `<div class="container">...</div>`
- `.row`:
- **Description**: Creates horizontal rows of elements.
- **Example**: `<div class="row">...</div>`
- `.col`:
- **Description**: Divides a `.row` into vertical columns. Width is often defined by additional classes or styles.
- **Example**: `<div class="col">...</div>`
## Sections
- `.header`:
- **Description**: Styles the top section of a web page, including the navigation bar and logo.
- **Example**: `<header class="header">...</header>`
- `.main`:
- **Description**: Styles the main content area of a web page.
- **Example**: `<main class="main">...</main>`
- `.footer`:
- **Description**: Styles the footer of a web page.
- **Example**: `<footer class="footer">...</footer>`
## Forms
- `.form`:
- **Description**: Styles the entirety of forms.
- **Example**: `<form class="form">...</form>`
- `.input`:
- **Description**: Can style multiple form elements. Specific classes should be used for distinct input types.
- **Example**: `<input type="text" class="input">`
- `.text`, `.password`, `.checkbox`, `.radio`:
- **Description**: Styles individual types of inputs.
- **Examples**:
- Text: `<input type="text" class="text">`
- Password: `<input type="password" class="password">`
- Checkbox: `<input type="checkbox" class="checkbox">`
- Radio: `<input type="radio" class="radio">`
## Tables
- `.table`:
- **Description**: Used to style tables of data.
- **Example**: `<table class="table">...</table>`
## Images
- `.image`:
- **Description**: Styles generic images.
# Usage of Inline and Block Elements
Understanding the difference between inline and block elements is pivotal for structuring and styling web content effectively.
## Inline Elements
Inline elements do not start on a new line and take up as much width as necessary. They're like words in a sentence — they flow with the content.
Examples include:
- **Links (`<a>`):** Hyperlinks to another resource.
- **Usage**: `<a href="https://example.com">Visit Example</a>`
- **Images (`<img>`):** Embeds an image.
- **Usage**: `<img src="path/to/image.jpg" alt="Description">`
- **Strong Emphasis (`<strong>`):** Denotes strong importance, typically displayed as bold.
- **Usage**: `<strong>Important text.</strong>`
- **Emphasis (`<em>`):** Gives emphasized text, usually rendered as italic.
- **Usage**: `<em>Emphasized text.</em>`
- **Code (`<code>`):** Designates a single line of code.
- **Usage**: `<code>let x = 10;</code>`
- **Span (`<span>`):** Generic inline container for phrasing content. Doesn't convey any meaning on its own.
- **Usage**: `<span class="highlight">Highlighted text</span>`
- **Abbreviations (`<abbr>`):** Represents an abbreviation or acronym.
- **Usage**: `<abbr title="HyperText Markup Language">HTML</abbr>`
- **Inline Quotation (`<q>`):** Denotes a short inline quotation.
- **Usage**: `<q>Cogito, ergo sum</q>`
## Block Elements
Block elements start on a new line and typically take up the full width of their parent container.
Examples include:
- **Paragraphs (`<p>`):** Denotes a block of text.
- **Usage**: `<p>This is a paragraph.</p>`
- **Headings (`<h1>` to `<h6>`):** Mark section headings, with `<h1>` being the most prominent and `<h6>` the least.
- **Usage**:
- `<h1>Main Title</h1>`
- `<h2>Subheading</h2>`
- ...
- `<h6>Smallest Subheading</h6>`
- **Lists:**
- **Unordered (`<ul>`):** List without a specific order.
- **Usage**:
```html
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
```
- **Ordered (`<ol>`):** Numbered list.
- **Usage**:
```html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```
- **Description (`<dl>`):** List of terms with their descriptions.
- **Usage**:
```html
<dl>
<dt>Browser</dt>
<dd>A software used to access the web.</dd>
</dl>
```
- **Divisions (`<div>`):** Generic container that groups content.
- **Usage**: `<div class="section">...</div>`
- **Block Quotation (`<blockquote>`):** Represents a section quoted from another source.
- **Usage**:
```html
<blockquote cite="sourceURL">
This is a block quote from another source.
</blockquote>
```
- **Tables (`<table>`):** Represents tabular data.
- **Usage**:
```html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
```
- **Forms (`<form>`):** Represents an interactive form.
- **Usage**:
```html
<form action="/submit">
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
```
- **Preformatted Text (`<pre>`):** Displays text with whitespace preserved, often used with `<code>`.
- **Usage**:
```html
<pre>
function hello() {
console.log("Hello, world!");
}
</pre>
```
- **Figures (`<figure>` and `<figcaption>`):** Used to mark up a photo or graphic with an optional caption.
- **Usage**:
```html
<figure>
<img src="path/to/image.jpg" alt="Description">
<figcaption>Caption for the image.</figcaption>
</figure>
```
## Conclusion
Choosing the correct element—whether inline or block—enhances the semantic value of the content, improves accessibility, and makes styling more straightforward.
- **Example**: `<img src="path/to/image.jpg" class="image" alt="Description">`
- `.img-responsive`:
- **Description**: Ensures images are responsive and adjust to their container's width.
- **Example**: `<img src="path/to/image.jpg" class="img-responsive" alt="Description">`
## Conclusion
By adhering to these naming conventions and standards, we ensure that our code remains consistent across projects, making it easier for developers to collaborate, maintain, and extend the codebase.

92
docs/tech_docs/pseudocode.md Normal file
View File

@@ -0,0 +1,92 @@
## Pseudocode Cheat Sheet
**Pseudocode** is a simple way of expressing programming logic in plain language. It's a valuable tool to outline algorithms, aiding in understanding and problem-solving without using specific programming language syntax.
**Why Use Pseudocode?**
Pseudocode can be employed in various situations, especially when planning and brainstorming programming solutions. Its uses extend to:
- **Problem Understanding:** It simplifies problem comprehension by breaking it down into manageable steps.
- **Solution Design:** It aids in creating efficient solutions by enabling more precise visualization of the logical flow.
- **Coding:** It provides a high-level overview of the code to be written, simplifying the coding process.
- **Debugging:** It helps identify logic errors before actual code is written, simplifying debugging.
- **Collaboration:** It aids in explaining the logic to others, especially those unfamiliar with specific programming languages.
- **Maintainability:** It serves as a blueprint of the logic for future reference, enhancing code maintainability.
**Guidelines for Writing Pseudocode**
- **Natural Language:** Use plain English or your preferred natural language. If a part of the pseudocode is complex, consider adding comments for better clarity.
- **Avoid Specific Syntax:** Avoid language-specific syntax to keep the pseudocode universally understandable.
- **Logic Emphasis:** Center your focus on the algorithm's logic.
- **Flow of Control:** Clearly illustrate the flow of control using sequences (steps following each other), selections (decisions based on conditions), and iterations (loops).
- **Consistency:** Ensure the terminology is consistent and clear to enhance understandability.
**Pseudocode: A Step-by-step Approach**
1. **Understand the Problem:** Clearly define what the problem is asking for.
2. **Plan Your Approach:** Brainstorm possible ways to solve the problem.
3. **Write the Pseudocode:** Describe the steps to solve the problem in plain language.
4. **Utilize Control Structures:** Incorporate sequences, selections, and iterations to control the flow of the pseudocode.
5. **Indent for Clarity:** Use indentation to show hierarchy and structure in your pseudocode.
6. **Avoid Language-Specific Syntax:** Ensure your pseudocode is language-agnostic.
7. **Review and Refine:** Go through your pseudocode, making sure it makes sense and is complete. Revise as necessary.
8. **Translate to Code:** Convert your pseudocode into the chosen programming language.
9. **Test and Revise:** Ensure your program behaves as expected by testing the code. If problems arise, revising the pseudocode may be necessary.
**Key Words and Phrases in Pseudocode**
| Category | Keywords |
| --------------------- | -------------------------------------------------------------------- |
| Sequence | First, Second, Then, After, Next, Finally |
| Selection | If, Else, Then, Otherwise, Choose, Depending on |
| Iteration | While, For, Do Until, Repeat Until, Loop, Repeat, Until, Each, Times |
| Input/Output | Read, Print, Display, Input, Output, Get, Show |
| Arithmetic Operations | Add, Subtract, Multiply, Divide, Calculate, Compute |
| Comparisons | Equals, Greater than, Less than, Not equal to |
| Data Manipulation | Set, Reset, Increment, Update, Append, Remove |
**Remember to adjust these according to the conventions used in your team or organization.**
**Examples of Pseudocode**
**Tip Calculator**
```pseudocode
# Print instructions to user
Print "Enter the total bill:"
Read totalBill
Print "Enter the desired tip percentage:"
Read tipPercentage
# Calculate the tip amount
Set tipAmount to (totalBill \* (tipPercentage / 100))
# Calculate the total with tip
Set totalWithTip to totalBill + tipAmount
# Round the total down to the nearest whole dollar
Set finalTotal to Floor(totalWithTip)
# Print the final total to the user
Print "The total bill including tip is", finalTotal
```
**Currency Converter**
```pseudocode
# Print instructions to user
Print "Enter the amount in your source currency:"
Read sourceAmount
Print "Enter the conversion rate to the target currency:"
Read conversionRate
# Calculate the equivalent amount in the target currency
Set targetAmount to sourceAmount \* conversionRate
# Print the amount in the target currency to the user
Print "The amount in the target currency is", targetAmount
```
**Conclusion**
Pseudocode is a valuable tool that can help you to write more efficient, maintainable, and bug-free code. By following the guidelines and best practices outlined in this cheat sheet, you can improve your pseudocode writing skills and become a better programmer.

168
docs/tech_docs/webdev_training.md Normal file
View File

@@ -0,0 +1,168 @@
## Feedback on Plans for Learning
Your plans for learning are detailed and purposefully directed towards achieving your goal of becoming a web developer. Here are some refined suggestions for enhancing your strategy:
- **Daily Practice:** Dedicate a minimum of 30 minutes daily to learn and practice. Consistent effort accumulates over time.
- **Community Engagement:** Seek help and share your progress in online communities such as [Stack Overflow](https://stackoverflow.com/) and [Reddit's r/webdev](https://www.reddit.com/r/webdev/) to foster learning through collaboration.
- **Patience:** Web development is intricate and may sometimes be frustrating. Remember, every expert was once a beginner. Persist with your efforts.
## SMART Goals for Training Plan
Refine your SMART goals as follows:
- **Specific:** Craft a basic webpage using HTML and CSS, incorporating at least one CSS framework by the end of the sixth week.
- **Measurable:** Complete all assignments in your ongoing [mention the specific course name] web development course.
- **Achievable:** Allocate a fixed 30 minutes daily for web development learning.
- **Relevant:** Stay focused on acquiring skills pivotal to web development, keeping abreast with the latest industry trends.
- **Time-bound:** Finish your web development course within a span of six months, setting a steady pace for learning.
## Weekly Training Schedule (Week 1)
Below is a more structured weekly schedule with practical tasks:
### Day 1
- **Objective:** Grasp the role and fundamental features of HTML in web development.
- **Resources:**
- [HTML Tutorial](https://www.w3schools.com/html/)
- [HTML Crash Course](https://www.theodinproject.com/lessons/foundations-introduction-to-html-and-css)
### Day 2
- **Objective:** Learn about the structural elements of an HTML document, focusing on <!DOCTYPE>, <html>, <head>, and <body>.
- **Resources:**
- [HTML Document Structure](https://www.w3.org/TR/html401/struct/global.html)
- [HTML Document Structure Tutorial](https://www.reddit.com/r/webdev/comments/q9f82u/i_made_a_detailed_walkthrough_of_the_odin/)
### Day 3
- **Objective:** Acquaint yourself with common HTML tags used to format a webpage.
- **Resources:**
- [HTML Tags](https://www.w3schools.com/tags/tag_html.asp)
- [HTML Tags Tutorial](https://www.theodinproject.com/lessons/foundations-elements-and-tags)
### Days 4-5
- **Practice:** Create a simplistic HTML webpage utilizing the tags learned. Share it with friends or online communities for feedback.
- **Resources:**
- [HTML Tutorial](https://www.w3schools.com/html/)
- [HTML Crash Course](https://www.theodinproject.com/lessons/foundations-introduction-to-html-and-css)
## Tips for a Fruitful Training Plan
Here are some actionable tips to augment your learning journey:
- **Prioritize Tasks:** Utilize the Eisenhower Matrix or ABCDE method to focus on high-priority tasks, optimizing your learning path.
- **Breaks:** Regular short breaks can prevent burnout and enhance focus. Ensure to take breaks during your learning sessions.
- **Mentorship:** Seek a mentor through platforms such as [LinkedIn](https://www.linkedin.com/) or local web development communities. A mentor can provide constructive feedback and guidance.
Remember to track your progress regularly to identify strengths and areas needing improvement. Wishing you the best in your web development learning journey!
and the following training plan:
## 24-Week Training Plan
### Step 1: Divide your training into smaller, manageable sections.
Break down your 24-week training plan into smaller, more manageable sections. For example, you could divide it into three 8-week phases, or four 6-week phases.
### Step 2: Assign specific weekly topics and objectives.
Once you have divided your training plan into sections, assign specific weekly topics and objectives. For example, in Week 1, you might focus on learning the basics of HTML and CSS. In Week 2, you might focus on building a simple webpage.
### Step 3: Create a Google Calendar for your training plan.
Create a new Google Calendar specifically for your 24-Week Training Plan. Set up all-day events for each week, and include reminders at the beginning of the week to help you stay focused.
### Step 4: Use Todoist to break down weekly objectives into daily tasks.
Use Todoist to break down your weekly objectives into daily tasks. Create a new project called "24-Week Training Plan" and set up sections for each week.
### Step 5: Allocate time for learning, practicing, and reviewing your progress.
Allocate time for learning new concepts, practicing, and reviewing your progress. Use time blocking or the Pomodoro Technique to allocate focused time to tasks and avoid multitasking.
### Step 6: Prioritize tasks based on importance and urgency.
Prioritize your tasks based on importance and urgency using the Eisenhower Matrix or ABCDE method. Focus on high-impact tasks first and address lower-priority tasks when time permits.
### Step 7: Set up a Trello board for your training plan.
Set up a Trello board for your 24-week training plan. Create lists for workflow stages (e.g., To Do, In Progress, Review, Completed), and add cards for tasks and objectives. Move cards between lists as you progress.
### Step 8: Organize your learning materials in Google Drive.
Organize your learning materials in Google Drive by creating folders for each week and adding documents, resources, and project files as needed.
### Step 9: Use automation tools to automate repetitive tasks or sync data.
Use automation tools like Zapier or Integromat to automate repetitive tasks or sync data between Google Calendar, Todoist, Trello, and Google Drive.
### Step 10: Use browser extensions to quickly add tasks or cards.
Use browser extensions like Todoist for Chrome or Trello for Chrome to quickly add tasks or cards without leaving your current webpage.
### Step 11: Set SMART goals and track your progress.
Set SMART goals for your training plan and track your progress regularly. Use tools like RescueTime or Clockify to monitor your time spent on tasks and identify areas for improvement.
### Step 12: Schedule regular breaks and leisure activities.
Schedule regular breaks and leisure activities to maintain a healthy work-life balance and prevent burnout.
### Step 13: Collaborate with others and seek feedback.
If you are working with others, use tools like Slack or Microsoft Teams to streamline communication and collaborate effectively. Schedule regular check-ins or meetings to discuss progress and share feedback.
### Step 14: Periodically review and adjust your workflow.
Periodically review your workflow and make adjustments based on your experiences, new tools, or changing priorities. Seek feedback from others who have successfully completed similar training programs or have expertise in the field.
**Additional tips:**
- Find a learning method that works best for you. Some people learn best by reading, while others learn best by watching or doing.
- Don't be afraid to ask for help. If you are struggling with a particular concept or task, reach out to a mentor, friend, or online community for assistance.
- Celebrate your successes. As you progress through your training plan, take the time to celebrate your accomplishments. This will help you stay motivated and on track.
## 24-Week Training Plan
**Week 1-4:**
- Introduction to web development history and terminology
- HTML fundamentals
- CSS fundamentals
- Web design principles
**Week 5-10:**
- CSS frameworks (e.g., Bootstrap, Tailwind CSS)
- JavaScript fundamentals
- DOM manipulation
- Asynchronous JavaScript
- Web accessibility and performance
**Week 11-14:**
- Svelte framework fundamentals
- State management and routing in Svelte
- Building small projects with Svelte
- Website project planning and collaboration
**Throughout the plan:**
- Allocate adequate time for practice and project work
- Schedule regular breaks and leisure activities
**Additional suggestions:**
- Use a learning management system (LMS)
- Join a study group or online community
- Seek out mentors or coaches
**Tips for success:**
- Be dedicated and hardworking
- Focus on learning the core concepts
- Practice regularly
- Build projects to apply your skills
- Get feedback from others