You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: React_Development/react-development-notes.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ There's some things I have learned via getting contributions to my React applica
12
12
13
13
React is typically used in conjunction or with other things called a stack or a tech stack.
14
14
15
-
A typical tech stack, whether full stack or not, consists of various components that work together to build an application. For a web application, a tech stack usually includes both frontend and backend technologies. Some common components of a tech stack are:
15
+
A typical tech stack, whether `full stack` or not, consists of various components that work together to build an application. For a web application, a tech stack usually includes both frontend and backend technologies. Some common components of a tech stack are:
Copy file name to clipboardExpand all lines: WebDevelopment/css.md
+29-41
Original file line number
Diff line number
Diff line change
@@ -112,30 +112,26 @@ There are various types of selectors in CSS that are used to target HTML element
112
112
113
113
And in your HTML document:
114
114
115
-
```html
116
-
<pclass="highlight">This is a highlighted paragraph.</p>
117
-
<divclass="highlight">This is a highlighted div.</div>
118
-
```
115
+
```html
116
+
<p class="highlight">This is a highlighted paragraph.</p>
117
+
<div class="highlight">This is a highlighted div.</div>
118
+
```
119
119
120
120
This will apply the specified styles to all elements with the "highlight" class. Class selectors allow you to apply unique style properties to groups of HTML elements to achieve your desired web page appearance
121
121
122
122
- ID selectors: Select a single element based on its ID attribute (e.g., #header for an element with id "header").
123
123
124
124
A CSS ID selector is used to select a specific HTML element based on the value of its id attribute, which must be unique within a page. To use an ID selector in CSS, you write a hash (#) followed by the ID of the element, and then define the style properties you want to apply to the element in curly brackets. Here's an example of how to use an ID selector:
125
125
126
-
```css
127
-
#idname {
128
-
/* Define properties here */
129
-
}
130
-
```
126
+
#idname {
127
+
Define properties here
128
+
}
131
129
132
130
The IDs are used to identify a single element, and they have a higher specificity than classes, making them useful for applying specific styles to individual elements. In contrast, a class selector is used to select elements with a specific class attribute, and it can be applied to multiple elements. Here's an example of a class selector:
133
131
134
-
```css
135
-
.class-name {
136
-
/* Define properties here */
137
-
}
138
-
```
132
+
.class-name {
133
+
/* Define properties here */
134
+
}
139
135
140
136
In general, it's a best practice to use IDs for unique elements and classes for multiple elements, and to avoid using IDs for styling purposes in order to keep the styling separate from the content
141
137
@@ -155,27 +151,23 @@ Attribute selectors provide a powerful way to target and style elements based on
155
151
156
152
CSS rules should not be empty and your editor or IDE might even warn you about that:
157
153
158
-
```css
159
-
body {
160
-
/* Not a great idea to leave this part empty */
161
-
};
162
-
```
154
+
body {
155
+
/* Not a great idea to leave this part empty */
156
+
};
163
157
164
158
## CSS Variables
165
159
166
160
CSS variables, also known as custom properties, are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property syntax (e.g., --primary-color: blue;). Custom properties are accessed using the CSS var() function (e.g., color: var(--primary-color);). They allow a value to be defined in one place and then referenced in multiple other places, making it easier to work with and improving readability and semantics. CSS variables can have global or local scope, and they can be changed with JavaScript and based on media queries. They are useful for managing websites with numerous similar values, reducing the friction associated with refactoring or updating code
167
161
168
162
To declare a CSS variable, you use the following syntax:
169
163
170
-
```css
171
-
:root {
172
-
--primary-color: blue;
173
-
}
164
+
:root {
165
+
--primary-color: blue;
166
+
}
174
167
175
-
.element {
176
-
color: var(--primary-color);
177
-
}
178
-
```
168
+
.element {
169
+
color: var(--primary-color);
170
+
}
179
171
180
172
In this example, --primary-color is the variable name, and blue is the value. The variable is then accessed using the var() function, as shown in the color property of the .element selector
181
173
@@ -185,13 +177,11 @@ CSS variables provide a more efficient way to write and manage CSS code, making
185
177
186
178
The universal selector in CSS is denoted by an asterisk (*) and is used to select all elements on an HTML page. It matches elements of any type and can be used to apply styles globally. Here's a brief overview of how to use the universal selector:
187
179
188
-
```css
189
-
* {
190
-
margin: 0;
191
-
padding: 0;
192
-
/*Add more global styles here*/
193
-
}
194
-
```
180
+
* {
181
+
margin: 0;
182
+
padding: 0;
183
+
/*Add more global styles here*/
184
+
}
195
185
196
186
The universal selector selects all elements and can also be used to select all elements inside another element. It is a powerful tool for applying styles globally, but it's important to use it judiciously as it can affect the performance of the page if overused.
197
187
@@ -217,13 +207,11 @@ These @ rules provide additional functionality and flexibility to CSS, allowing
217
207
218
208
To use the :root pseudo-class in CSS, you can define global CSS variables and apply styles to the root element of the document. Here's a brief overview of how to use it:
219
209
220
-
```css
221
-
:root {
222
-
--main-color: hotpink;
223
-
--pane-padding: 5px42px;
224
-
/* Add more global variables and styles here */
225
-
}
226
-
```
210
+
:root {
211
+
--main-color: hotpink;
212
+
--pane-padding: 5px 42px;
213
+
/* Add more global variables and styles here */
214
+
}
227
215
228
216
The :root pseudo-class matches the root element of a document, which is typically the `<html>` element in HTML. It is similar to the html selector but has higher specificity, making it useful for declaring global CSS variables that can be accessed throughout the document
Copy file name to clipboardExpand all lines: about-yaml.md
+38-2
Original file line number
Diff line number
Diff line change
@@ -13,10 +13,46 @@ YAML is a human-readable data serialization language that is commonly used for c
13
13
- It is used mainly in the DevOps domain, where it is widely used with well-known tools such as Kubernetes, Ansible, Terraform, and many others
14
14
- YAML is also used by the Ansible automation tool to create automation processes, in the form of Ansible Playbooks
15
15
- YAML is a powerful language that can be used for a variety of purposes. If you're interested in learning more about YAML and its applications, there are many resources available online, including tutorials, documentation, and blog post
16
-
17
-
- YAML has features that come from Perl, C, XML, HTML, and other programming languages4
16
+
- YAML has features that come from Perl, C, XML, HTML, and other programming languages
18
17
- YAML also contains scalars, which are arbitrary data (encoded in Unicode) that can be used as values such as strings, integers, dates, numbers
19
18
- YAML files are structured using indentation and whitespace, and are often used for configuration files and in applications where data is being stored or transmitted
20
19
- YAML files are made up of key/value pairs, which are commonly called a “hash” or a “dictionary”
21
20
- Sequences in YAML are represented by using the hyphen (-) and space, and are ordered and can be embedded inside a map using indentation4
22
21
- YAML also supports comments, which begin with the (#) character and must be separated from other tokens by whitespaces
22
+
23
+
Here are the basic syntax rules and elements for YAML
24
+
25
+
So, YAML is a human-readable data serialization language that is often used for configuration files, and it supports various data types, such as strings, numbers, and boolean values. The basic syntax of YAML involves key-value pairs in the format key: value and using spaces to indicate nesting.
26
+
27
+
- Key-value pairs: YAML uses key-value pairs to store data in a hierarchical structure. The key is the first line of a newline, and the value follows it, also on a newline.
28
+
29
+
- Spaces and indentation: Spaces are used to indicate nesting in YAML. Indentation is not used for indentation in YAML files.
30
+
Comments: Comments in YAML begin with the # character and must be separated from other tokens by whitespaces.
31
+
32
+
- Lists and arrays: List members are denoted by a leading hyphen - and enclosed in square brackets. Associative arrays are represented using : in the format of key-value pairs and enclosed in curly braces {}.
33
+
34
+
- Scalar types: YAML supports various scalar types, such as strings, numbers, and boolean values. Scalar values can span multiple lines, and YAML processes the first value as ending with a carriage return and linefeed.
35
+
36
+
- Folding: Folded text converts newlines to spaces and removes leading whitespace.
37
+
38
+
- Tags: Tags can be used to explicitly specify a type for a value. For example, !!str indicates a string value, !!int indicates an integer value, and !!bool indicates a boolean value.
39
+
40
+
- Anchors and aliases: YAML allows the use of anchors and aliases to reuse values in the document. Anchors can be used to define a value once and then reference it elsewhere in the document using its anchor name.
41
+
42
+
YAML is a human-readable data serialization language that is often used for writing configuration files, and it is recommended over JSON in many cases due to its better readability and user-friendliness. Some good use cases for YAML include:
43
+
44
+
- Configuration files: YAML is commonly used to create configuration files for applications and services, as it is easier to read and understand than JSON.
45
+
46
+
- Cross-language data sharing: YAML is language-independent, meaning it can be used across various programming languages, making it suitable for data sharing between different languages.
47
+
48
+
- Log files: YAML can be used to store log files, as it can easily represent complex data structures and is human-readable.
49
+
50
+
- Debugging complex data structures: YAML is useful for debugging and managing complex data structures, as it provides a clear and concise way to represent and understand the data.
51
+
52
+
- Interprocess messaging: YAML can be used for interprocess messaging, as it can represent complex data structures and is easy to read.
53
+
54
+
- Object persistence: YAML can be used for object persistence, as it can store and manage data in a flexible and human-readable format.
55
+
56
+
- Automation processes: YAML is used by Ansible® to create automation processes, in the form of Ansible Playbooks, which are easy to read and understand.
57
+
58
+
YAML is often preferred over other data serialization languages like JSON or XML due to its focus on data rather than documents, and its flexibility and accessibility.
0 commit comments