kandztuts

[kandztuts]

CSS 💻 1 - 58 Full

New Post has been published on https://tuts.kandz.me/css-%f0%9f%92%bb-1-58-full/

CSS 💻 1 - 58 Full

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Balance Sheet 🌐 4,5,6

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-balance-sheet-%f0%9f%8c%90-456/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Balance Sheet 🌐 4,5,6

FreeCodeCamp - Responsive Web Design Balance Sheet Step 4 Step 5 Step 6

[kandztuts]

Linux CLI 62 🐧 loops in shell scripts

New Post has been published on https://tuts.kandz.me/linux-cli-62-%f0%9f%90%a7-loops-in-shell-scripts/

Linux CLI 62 🐧 loops in shell scripts

a - while loop in shell scripts while loop executes its block of commands as long as the given condition remains true syntax while [ condition ]; do Commands to execute done [ condition ] is evaluated before each iteration. If the condition evaluates to true, the commands inside the loop are executed. Once the commands finish executing, the condition is re-evaluated. This process continues until the condition becomes false. while [ $count -le 5 ] → The loop continues to execute as long as the condition $count is less than or equal to 5 evaluates to true. you can use the break command to exit the loop prematurely if a certain condition is met. continue command can be used to skip the rest of the current iteration and move directly to the next iteration. b - until loop in shell scripts until loop is a control flow statement that repeatedly executes a block of code as long as a specified condition evaluates to false. Once the condition becomes true, the loop terminates. syntax until [condition]; do Commands to execute done [condition]: The condition that must become true for the loop to exit. until [ "$user_input" == "exit" ]; do → loop will continue executing as long as the condition is false while vs until loop Condition Evaluation: while: Executes as long as the condition is true. until: Executes until the condition becomes true. Typical Use Cases: while: When you know in advance how many times to loop (e.g., iterating over a range). until: When you want to keep looping until a specific condition is met (e.g., waiting for an event).

[kandztuts]

JavaScript 15 🧬 Arrow functions

New Post has been published on https://tuts.kandz.me/javascript-15-%f0%9f%a7%ac-arrow-functions/

JavaScript 15 🧬 Arrow functions

a - arrow functions introduction Arrow functions in JavaScript provide a concise syntax for writing functions They are part of the ECMAScript 2015 (ES6) specification. They offer several advantages such as more compact syntax, lexical this binding, and no need for the function keyword. They don't have their own bindings to this, arguments, or super, and should not be used as methods. They cannot be used as constructors and cannot use yield. They cannot be created as generator functions syntax: const functionName = (parameters) = // function body ; The parantheses around parameters can only be omitted if there is a single parameter const squareRoot = a = return a*a ; Curly braces can only be omitted if the function returns an expression const squareRoot = a = return a*a b - Arrow function examples Example 1 → concise syntax, omit parentheses Example 2 → concise syntax, omit curly braces Example 3 → Basic syntax Example 4 → with multiple statements Example 5 → `this` correctly refers to the person object Example 6 → arrow function in array method Example 7 → Arrow functions cannot be used as constructors. TypeError: Foo is not a constructor

[kandztuts]

JavaScript 11 🧬 Control flow and Conditional execution

New Post has been published on https://tuts.kandz.me/javascript-11-%f0%9f%a7%ac-control-flow-and-conditional-execution/

JavaScript 11 🧬 Control flow and Conditional execution

a - control flow Control flow in JavaScript refers to the order in which the code is executed... and how the execution path can be altered based on certain conditions or statements Here are some fundamental control structures in JavaScript: Sequential Execution → Code executes line by line, from top to bottom. Conditional Statements → Used to execute different blocks of code based on conditions. Looping Statements → Used to execute a block of code repeatedly. Break and Continue Statements and return statement b - conditional execution conditional execution statements are used to execute different blocks of code based on specific conditions. These statements help you control the flow of your program based on whether a certain condition is true or false. The primary conditional execution statements in JavaScript include: if, else, else if and switch statements if Statement → Executes code if a condition is true. else Statement → Provides an alternative block of code when the if condition is false. else if Statement → Tests multiple conditions sequentially until one evaluates to true. switch Statement → Evaluates an expression and executes code blocks based on its value. c - if, else and else if statements The if statement executes a block of code if a specified condition is true. The else statement provides an alternative block of code to execute if the condition in the if statement is false. The else if statement allows for multiple conditional checks. It tests several conditions... and executes the block of code associated with the first condition that evaluates to true. if (age = 18) → checks if age variable is equal or greater than 18 else → alternative execution if previous if statement is false else if (score = 80) → an alternative check to score variable if is equal or grater than 80

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Balance Sheet 🌐 1,2,3

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-balance-sheet-%f0%9f%8c%90-123/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Balance Sheet 🌐 1,2,3

FreeCodeCamp - Responsive Web Design Balance Sheet Step 1 Step 2 Step 3

[kandztuts]

CSS 58 💻 Cheatsheet

New Post has been published on https://tuts.kandz.me/css-58-%f0%9f%92%bb-cheatsheet/

CSS 58 💻 Cheatsheet

Basic Selectors Element Selector: Targets elements by tag name. `p color: blue; ` Class Selector: Targets elements with a specific class. ` .highlight background-color: yellow; ` ID Selector: Targets an element with a specific ID (unique). ` #main-title font-size: 36px; ` Universal Selector: Applies to all elements. ` * margin: 0; padding: 0; ` Attribute Selector: Targets elements with specific attributes or attribute values. `[type="text"] border: 1px solid black; ` Combinators Descendant Combinator (Space): Selects elements that are descendants of another element. ` div p color: red; ` Child Combinator ( ): Selects direct children of an element. ` ul li font-weight: bold; ` Adjacent Sibling Combinator (+): Selects the element immediately following another element. ` h1 + p margin-top: 20px; ` General Sibling Combinator (~): Selects all siblings that follow another element. ` h2 ~ p font-style: italic; ` Box Model Margin: The space outside the border. ``` margin: 10px; margin-top: 20px; margin-left: 30px; margin-right: 40px; margin-bottom: 50px; ``` Padding: The space inside the border. ``` padding: 10px; padding-top: 20px; padding-left: 30px; padding-right: 40px; padding-bottom: 50px; ``` Border: The line around an element. ``` border: 1px solid black; border-width: 2px; border-style: dashed; border-color: red; ``` Width/Height: Sets the width and height of an element. ``` width: 300px; height: 200px; ``` Typography Font Family: Specifies the font family for text. `font-family: Arial, sans-serif;` Font Size: Sets the size of the font. `font-size: 16px;` Font Weight: Controls the boldness of the font. ` font-weight: bold;` Text Align: Aligns text within an element. ` text-align: center;` Background Background Color: Sets the background color of an element. `background-color: #f0f0f0;` Background Image: Sets a background image for an element. `background-image: url('image.jpg');` Background Repeat: Controls how the background image is repeated. `background-repeat: no-repeat;` Background Position: Positions the background image within an element. ` background-position: center;` Display Display Block: Makes an element take up the full width available and start on a new line. ` display: block;` Display Inline: Allows elements to sit next to each other horizontally. ` display: inline;` Display Inline-Block: Combines both inline and block properties. ` display: inline-block;` Display Flex: Creates a flex container for child elements. `display: flex;` Display Grid: Creates a grid container for child elements. ` display: grid;` Positioning Position Static: Default value. Elements are positioned according to the normal flow of the document. ` position: static;` Position Relative: Moves an element relative to its normal position. ``` position: relative; top: 20px; left: 30px; ``` Position Absolute: Positions an element relative to the nearest positioned ancestor (not static). ``` position: absolute; top: 50px; right: 100px; ``` Position Fixed: Keeps an element in a fixed position even when scrolling. ``` position: fixed; bottom: 20px; left: 30px; ``` Flexbox Flex Direction: Defines the direction of the main axis (row or column). ``` flex-direction: row; /* Default */ flex-direction: column; ``` Justify Content: Aligns items along the main axis. ``` justify-content: flex-start; /* Default */ justify-content: center; justify-content: flex-end; justify-content: space-between; justify-content: space-around; ``` Align Items: Aligns items along the cross axis. ``` align-items: stretch; /* Default */ align-items: flex-start; align-items: center; align-items: flex-end; ``` Grid Grid Template Columns: Defines the number and size of columns in a grid container. ` grid-template-columns: repeat(3, 1fr);` Grid Template Rows: Defines the number and size of rows in a grid container. ` grid-template-rows: auto;` Justify Items: Aligns items along the row axis within their grid area. ``` justify-items: start; /* Default */ justify-items: center; justify-items: end; justify-items: stretch; ``` Align Items: Aligns items along the column axis within their grid area. ``` align-items: start; /* Default */ align-items: center; align-items: end; align-items: stretch; ``` Other Useful Properties Color: Sets the color of text. ` color: #333333;` Opacity: Sets the opacity level of an element. ` opacity: 0.5;` Margin/Padding: Controls the space around or inside an element. ``` margin: 10px; padding: 20px; ``` Box Shadow: Adds a shadow effect to an element. ` box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);` Transform: Applies 2D or 3D transformations to an element. ` transform: rotate(90deg);`

[kandztuts]

Linux CLI 61 🐧 modern test version and in (( )) shell scripts

New Post has been published on https://tuts.kandz.me/linux-cli-61-%f0%9f%90%a7-modern-test-version-and-in-shell-scripts/

Linux CLI 61 🐧 modern test version and in (( )) shell scripts

a - extended test command in shell scripts Unlike the traditional [ ] (or test) which requires spaces around operators, [[ ]] does not have this requirement. It's generally recommended to use [[ ]] over [ ] for most modern shell scripting needs due to its enhanced functionality and error prevention. Unlike [ ], [[ ]] does not split words or do pathname expansion unless explicitly told to with *. Using [[ ]] can lead to more robust and error-free scripts compared to the older [ ], especially in complex conditions involving strings, patterns, or file tests. String Comparison Without Quotes: [ $var1 = test ]: Without quotes, if var1 is empty or contains spaces, it will cause a syntax error. Using quotes ([ "$var1" = "test" ]) avoids this issue. [[ $var1 = test ]]: With [[ ]], you don't need to quote variables unless they contain special characters or are empty. This makes the code cleaner and less error-prone. Pattern Matching: [ $var2 = test* ]: Using pattern matching without quotes can lead to unexpected results due to word splitting and pathname expansion. [[ $var2 =~ test.* ]]: With [[ ]], you can use the =~ operator for regex matching, which is more flexible and powerful. Numeric Comparisons: Both [ ] and [[ ]] support numeric comparisons similarly (-eq, -ne, etc.), but [[ ]] allows for easier chaining of conditions due to its lack of word splitting issues. b - (( )) in shell scripts (()) is used for arithmetic evaluation. It allows you to perform mathematical operations and handle integer arithmetic directly within your scripts syntax: result=$((expression)) expression: This can include any valid arithmetic operation involving integers, such as addition (+), subtraction (-), multiplication (*), division (/), modulus (%), and exponentiation (using ** in some shells). Key Points 1. Integer Arithmetic Only: (()) supports only integer arithmetic. If you need floating-point calculations, you would typically use tools like bc or awk. 2. Expression Evaluation: The entire expression within (()) is evaluated to a single integer value. 3. Precedence and Associativity: (()) follows the standard mathematical precedence rules (multiplication and division before addition and subtraction). Parentheses can be used to alter the order of operations. example 1 → Simple Arithmetic Operations example 2 → Using Variables and Expressions example 3 → Incrementing and Decrementing Variables example 4 → Using Exponentiation

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 1-67 full

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-quiz-1-67-full/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 1-67 full

FreeCodeCamp – Responsive Web Design Quiz

1-67 full

[kandztuts]

JavaScript 14 🧬 loops part 2

New Post has been published on https://tuts.kandz.me/javascript-14-%f0%9f%a7%ac-loops-part-2/

JavaScript 14 🧬 loops part 2

a - for...in loop for...in loop is used to iterate over the enumerable properties of an object. It's particularly useful when you want to access all keys or property names of an object. syntax for (let key in object) // some code key is a variable that will take on each enumerable property name as the loop runs. object is the object you're iterating over. The loop only iterates over enumerable properties. This means it won't include non-enumerable properties for...in loops iterate in a specific order: first numeric keys in ascending order, then string keys in the order they were added, followed by symbol keys. it's generally better to use for loops or array methods like .forEach() for (let key in person) → key variable takes on the name of the current property (firstName, lastName, or age). for (let key in arr) → iterates over both the array indices and the manually added property. b - for...of loop for...of loop is used to iterate directly over iterable objects such as arrays, strings, maps, sets etc This loop provides a more concise and readable way to traverse these collections. syntax for (let element of iterable) // code block executed for each element element → A variable that will take on the value of each item in the iterable. iterable → An object that can be iterated over using an iterator, such as arrays, strings, maps, sets, etc. for (let fruit of fruits) → The variable fruit takes on the value of each element in turn. for (let char of greeting) → The variable char takes on the value of each character in turn. for (let [key, value] of map) → The for...of loop iterates over each entry in the map. for (let item of set) → The variable item takes on the value of each element in turn. c - for...in vs for...of for...in is designed to iterate over the properties of an object, making it suitable for objects themselves or arrays when you need access to index keys. for...of focuses on iterating over iterable objects where the values are more meaningful than their indices. for...in includes all enumerable properties, including those from the object's prototype chain. This can lead to unexpected results if not handled carefully. for...of only iterates over the object's own iterable values and does not traverse up the prototype chain. Using for...in for arrays can make your code less clear because it implies a focus on indices rather than values. for...of clearly conveys that you intend to iterate over the values of an iterable collection, enhancing readability. Use for...in: When iterating over object properties (including their keys). If you need both keys and values from objects or arrays (though this is less common with arrays). Use for...of: When iterating over arrays, strings, maps, sets, or other iterable collections where the actual values are of primary interest. For cleaner, more predictable code when working with iterables.

[kandztuts]

CSS 57 💻 animation properties part 2

New Post has been published on https://tuts.kandz.me/css-57-%f0%9f%92%bb-animation-properties-part-2/

CSS 57 💻 animation properties part 2

a - animation-fill-mode and animation-play-state animation-fill-mode is used to define the styles applied to an element before and after the animation plays. values: none → No styles are applied before or after the animation. forwards → computed values are kept by the element after the animation ends. backwards → computed values are applied to the element as soon as the animation starts, and before the animation actually begins playing. both → Combines both forwards and backwards animation-fill-mode: forwards; → the box will remain at its final position (translated 200px right) and in its final color (red) after the animation ends. animation-play-state allows you to control whether an animation is running or paused values: running → The animation is currently playing. paused → The animation has been paused, and it will not continue until it is resumed. animation-play-state: paused; → stops the animation b - animation-timeline and animation-composition animation-timeline allows you to specify a timeline that controls the timing of animations instead of using the default document timeline values: none → no association with a timeline scroll() → Binds the animation to the scroll timeline. view() → Creates an animation timeline that is based on the visibility of an element within the viewport. animation-timeline: scroll() → ensures that the animation progresses in sync with the scrolling position. animation-composition controls how multiple animations that target the same properties on a single element combine their effects. values: replace → (default) New animations will overwrite previous ones. add → New animations will add to the effect of existing animations. accumulate → Similar to add, but with additional rules for handling keyframes and timing functions. animation-composition: add; → adds to the effects of other animations without replacing them.

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 64,65,66,67

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-quiz-%f0%9f%8c%90-64656667/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 64,65,66,67

Quiz Step 64 Step 65 Step 66 Step 67

[kandztuts]

Linux CLI 60 🐧 test command in shell scripts

New Post has been published on https://tuts.kandz.me/linux-cli-60-%f0%9f%90%a7-test-command-in-shell-scripts/

Linux CLI 60 🐧 test command in shell scripts

a - test command part 1 test command is used to evaluate conditional expressions it returns an exit status based on whether the expression evaluates to true or false. It can be used in if statements, loops, and case statements. test command has a wide range of expressions: file, string and integer expressions Common uses: Numeric comparisons: -eq, -ne, -lt, -le, -gt, -ge String comparisons: = (equal), != (not equal) b - test command part 2 File tests: -e: True if the file exists. -f: True if the file is a regular file. -d: True if the directory exists. -r: True if the file is readable. -w: True if the file is writable. -x: True if the file is executable. Logical Operators: -a: Logical AND (deprecated, use && instead). -o: Logical OR (deprecated, use || instead). !: Logical NOT. String Length:-z: True if the string is null (zero length). -n: True if the string is not null. The square brackets [ ] are often used as a more readable alternative to the test command.

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 61, 62,63

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-quiz-%f0%9f%8c%90-61-6263/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 61, 62,63

FreeCodeCamp - Responsive Web Design Quiz Step 61 Step 62 Step 63

[kandztuts]

JavaScript 13 🧬 loops part 1

New Post has been published on https://tuts.kandz.me/javascript-13-%f0%9f%a7%ac-loops-part-1/

JavaScript 13 🧬 loops part 1

a - loops introduction Loops are used to execute a block of code repeatedly under certain conditions. They allow you to perform tasks multiple times without writing the same code over and over again manually. Here are some common uses and benefits: 1. Iterating Over Collections 2. Repeating Actions 3. Controlling Program Flow JavaScript provides several types of loops to execute a block of code repeatedly under certain conditions. those are: for, while, do...while, for...in and for...of loops b - for loop for loop is used when you know exactly how many times you want to run the loop. syntax for (initialization; condition; final-expression) // code block to be executed It has three optional expressions: initialization, condition, and final expression. Initialization: is executed only once before the loop starts, typically used to declare and initialize a loop counter variable. Condition: is evaluated at the beginning of each iteration of the loop. If true, the code block inside the loop will be executed. If false, the loop will terminate. Final-expression: is executed after each iteration of the loop, Ioften used to increment or decrement the loop counter variable. example 1: will print numbers from 0 to 4 example 2: will print each fruit in the array example 3: nested loop, will print the coordinates of a 3x3 grid break statement can be used to terminate a loop prematurely when a specific condition is met. continue statement is used within loops (like for, while, or do...while) to skip the current iteration of the loop c - while and do...while loop while loop allows you to repeatedly execute a block of code as long as a specified condition evaluates to true. syntax: while (condition) // Code block to be executed while the condition is true example 1: will print numbers from 0 to 4 example 2: simple countdown timer do...while loop is similar to while loop but with one key difference it guarantees that the code block will execute at least once before checking the condition. syntax: do // Code block to be executed while (condition); example: ensures user input at least once

[kandztuts]

CSS 56 💻 animation properties part 1

New Post has been published on https://tuts.kandz.me/css-56-%f0%9f%92%bb-animation-properties-part-1/

CSS 56 💻 animation properties part 1

a – animation-delay and duration

animation-name property specifies the name of the @keyframes rule that defines the animation sequence

you can specify multiple rule names separated with a ‘,’

animation-name: slideIn; → specifies the rule name

animation-duration specifies the length of time it takes for an animation to comple one cycle

values: auto → for time-based animations, fills the entire timeline

or value specifies in either s or ms

animation-duration: 2s; →sets the animation duration to 2 seconds

b – animation-timing-function and delay

animation-timing-function controls how an animation progresses through its duration

It defines the speed curve of the animation, making it possible for animations to accelerate, decelerate…

or maintain a constant speed.

animation-timing-function: ease-in-out; → sets the animation to slow start and slow end

animation-delay specifies the amount of time that should elapse before an animation starts playing

This can be specifies in s and ms

You can specify a negative value. -2s it will start the animation immediately but 2 secs in the animation

animation-delay: 1s; → 1 sec animation delay

c – animation-iteration-count and direction

animation-iteration-count specifies the number of times an animation should repeated

values: infinite → will repeat for ever

number → you can speficy an integer and a non-integer number. 0.5 will play half animation

animation-iteration-count: 3; → will repeat the animation 3 times

animation-direction swhether the animation should play forwards, backwards, or alternate between both directions.

values: normal, reverse, alternate, alternate-reverse

animation-direction: alternate-reverse; → Moves backward on odd iterations and forward on even iterations.

[kandztuts]

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 58,59,60

New Post has been published on https://tuts.kandz.me/freecodecamp-%f0%9f%8c%90-responsive-web-design-%f0%9f%8c%90-quiz-%f0%9f%8c%90-585960/

FreeCodeCamp 🌐 Responsive Web Design 🌐 Quiz 🌐 58,59,60

FreeCodeCamp - Responsive Web Design Quiz Step 58 Step 59 Step 60