👁‍🗨 CODORUM

Рассмотрим тип объекта Array в JavaScript ⚜️ Array – это тип объекта, который служит для работы со списками значений 📒 Каждый элемент массива может представлять собой любой тип данных, включая числа, строки, объекты, другие массивы, функции и прочее 👁‍🗨 👉 Некоторые тонкости типа объектов Array: ➖ у всех элементов массива есть свой индекс начиная с нуля ➖ массивы имеют различные встроенные методы для манипулирования и обработки данных ➖ для работы с массивами есть такие операторы как Spread и Rest Код со скрина:

let ArrayNum = [1, 2, 3];
let ArrayStr = ['JS', 'Code'];
let ArrayObj = [{type: 'лимон', amount: 7},
                {type: 'манго', amount: 4},
                {type: 'груша', amount: 9}]

let ArrInd = ['at', 'on', 'in'];
//  индекс     0     1     2

//  Spread оператор - "..."
let Arr1 = [1, 2];
let Arr2 = [...Arr1, 3, 4];
console.log(Arr2)

Как можно добавить тень от элемента по контуру в CSS? 🔵🕳 Если использовать стандартное свойство для тени box-shadow будет добавлена тень от блока/контейнера/зоны элемента, но благодаря свойству filter со значением drop-shadow можно добиться тени именно по контуру объекта, будь-то неквадратное изображение или текст 🧩 Применяется свойство filter со значением drop-shadow почти так же как и свойство box-shadow, а разница очевидна (пример применения обоих свойств на скрине) 👁‍🗨 Код cо скрина:

.image {
  box-shadow: 0px 25px 25px #4824ff90;
}

.text {
  box-shadow: 0px 15px 15px #4824ff90;
}

.image {
  filter: drop-shadow(0px 25px 25px #4824ff90);
}

.text {
  filter: drop-shadow(0px 15px 15px #4824ff90);
}

С помощью метода padStart можно заполнить промежуток в начале строки заданной частью текста ✏️ 1-й параметр в скобках для метода padStart это число устанавливающее длину строки, а 2-й параметр это часть текста, которым будет заполнен промежуток длины строки. Этот промежуток можно определить отняв от длины строки (которую мы указали в качестве 1-го параметра) первоначальную длину строки 🧮 Есть, допустим, строка str длиной в 3 символа "rum" и если в параметрах метода padStart задать: ➖ (7, "Codo") - новым значением строки будет "Codorum". ➖ (6, "Codo") - новым значением строки будет "Codrum". Часть строки "rum" была не тронута, а "Codo" не полностью поместилось в промежуток длины строки. ➖ (11, "Codo") - новым значением строки будет "CodoCodorum". Часть текста "Codo" 2 раза поместилась в промежуток длины строки длиной в 8 симв. (11-3).

Cross-Origin Resource Sharing (CORS) — это механизм безопасности, позволяющий веб-странице из одного домена запрашивать ресурсы, размещенные на другом домене. CORS позволяет веб-приложениям безопасно взаимодействовать с ресурсами в других доменах, если сервер настроен соответствующим образом 🛡 В стандартной настройке браузер блокирует такие запросы с помощью политики одного источника (same-origin policy), чтобы предотвратить атаки типа XSS (cross-site scripting). CORS позволяет обойти эти ограничения, если сервер, к которому следует запрос, позволяет это 🔐 Основные понятия и механизмы CORS включают: HTTP-заголовки и Preflight-запрос 👁‍🗨

Одно из важных отличий var от let в JavaScript – это область видимости Scope 🧿 Переменные, объявленные с помощью var видны не только на уровне блочного скоупа, а и на уровне локального или же функционального скоупа, вне зависимости от места где они были объявлены. А переменные, объявленные с помощью let видны только внутри блока кода, где были объявлены 🔦 На скрине есть функция с блоком if. Соответственно мы имеем 2 скоуп уровня: локальный скоуп функции и блочный скоуп блока if. Внутри блока if объявлены 2 переменные: одна через var, другая через let ℹ️ Запустив функцию переменная var будет выведена в консоль, значит она видна на уровне всего локального скоупа, а переменная let не будет определена ❗️ Но на практике уже мало кто использует var для объявления переменных в JavaScript 👁‍🗨

Как, при необходимости, проигнорировать отступы заданные в глобальном классе body чтобы полноценно стилизовать новый контейнер? 🟦 Мы можем поступить следующим образом: задать аналогичные margin отступы в классе нового контейнера, но со знаком минус, благодаря чему мы компенсируем отступы. Затем стилизовать контейнер и заново добавить отступы, но уже через свойство padding ⏹ В видео я показал как стилизовал новый блок html страницы проигнорировав margin отступы заданные в глобальном классе страницы body 👁‍🗨 Код из видео:

body {
  margin-left: 75px;
  margin-right: 75px;
}

.service-block {
  margin-left: -75px;
  margin-right: -75px;
  background: #4824ff;
  padding: 0 75px;
}

Ранее делал пост про метод pop, благодаря которому можно удалить последний элемент массива 🔫 Есть аналогичный методу pop – метод shift но удаляющий первый элемент массива ℹ️ Точно так же как и в случае с методом pop если мы объявим новую переменную, которая будет равна применению метода shift к массиву с элементами мы можем присвоить удаленный элемент этой новой переменной 💾 В то же время метод будет применен для массива с элементами. То есть первый элемент будет удален с массива, но одновременно он будет присвоен новой переменной 👁‍🗨 Код со скрина:

// ✦ Удаление первого элемента массива
let array = ['green', 'blue', 'red'];

array.shift();
console.log("Массив array после применения метода shift:", array)


// ✦ Присвоение первого элемента массива в переменную
let numbers = [1, 2, 3];

let deleted_num = numbers.shift();
console.log("numbers =", numbers)
console.log("deleted_num =", deleted_num)

render – это единственный обязательный метод жизненного цикла в классовых компонентах React ⚛️ Каждый раз, когда состояние или пропсы компонента изменяются, метод render вызывается снова для обновления интерфейса 🔄 👉 Что можно использовать и возвращать в render: ➖ использовать условные операторы для отображения разного контента в зависимости от состояния или пропсов ➖ возвращать JSX, описывающий структуру UI ➖ возвращать массивы или React.Fragment, чтобы отобразить несколько элементов

Рассмотрим тип объекта Object в JavaScript ⚜️ Объекты с типом Object используется для хранения свойств, методов и других вложенных объектов 🗄 На примере кода со скрина есть объект типа Object под названием person 👤 👉 У объекта person есть: ➖ свойства name и age ➖ вложенный объект address ➖ метод speak, который выводит текст в консоль 👉 Что можно делать с объектом person: ➖ обращаться к свойствам (используя название объекта и название свойства "person.name") ➖ вызывать методы (используя название объекта и название метода "person.speak()") Код со скрина:

let person = {
   name: 'Jesse',
   age: 24,
   address: {
      city: 'Albuquerque',
      state: 'New Mexico'
   },
 
   speak: function() {
      console.log(`${this.name} said: What's up, b*tch?`);
   }
};

console.log(person.name)
person.speak()

Делюсь интересной анимацией смены и выделения текста, которая добавит немного динамичности на ваш сайт 🖌 Для её реализации нужно добавить два заголовка в div контейнер, в одном из которых прописать варианты текста в span элементы, которые будут меняться и выделяться 🔄 В @keyframes нужно будет создать две анимации: для смены текста, для выделения текста ❇️ Детальнее про реализацию анимации рассказал в видео 👁‍🗨 CSS стили из видео:

h2 span {
  position: relative;
  animation: displayText 9s infinite;
}

@keyframes displayText {
  0% { display: inline-block }
  33.33%, 100% { display: none }
}

h2 span:before {
  content: attr(data-text);
  position: absolute;
  color: #878bf8;
  border-right: 1px solid #878bf8;
  animation: printing 3s linear infinite;
  overflow: hidden;
  background-color: #878bf840;
}

@keyframes printing {
  0%, 10%, 100% { width: 0 }
  70%, 90% { width: 100% }
}

С помощью метода slice можно вырезать часть элементов из массива или часть текста со строки 🔪 Для применения метода необходимо объявить новую переменную, через знак равно указать массив или строку, метод и в скобках промежуток элементов или символов, которые нужно вырезать 🔠 Метод вырежет промежуток учитывая элемент, индекс которого был указан первым в скобках, но не учитывая элемент, индекс которого был указан вторым в скобках ℹ️ Переменная будет равна тем элементам или символам, которые мы в последствии вырезали 👁‍🗨

Мутабельность (от лат. mutabilis – изменяемый) и иммутабельность (от лат. immutabilis – неизменяемый) – два ключевых понятия в программировании, которые описывают возможность изменения данных после их создания ✏️ Мутабельные данные можно изменять после создания. Это означает, что вы можете менять значения, добавлять или удалять элементы, модифицировать структуру данных. Пример мутабельных типов данных: массивы и объекты 🔓 Иммутабельные данные, напротив, не могут быть изменены после создания. Любое изменение таких данных приводит к созданию новой копии с изменениями, оставляя оригинал нетронутым. Пример иммутабельных типов данных: числа, строки, булевые значения 🔒

Что такое наследование классов в JavaScript? 👯‍♀️ Наследование классов – это когда новый класс наследует свойства и методы с другого класса 🤝 Например, класс Programmer наследует класс Writer на примере со скрина 🎆 Это означает что теперь в классе Programmer есть такой же конструктор и методы как в классе Writer 👏 Соответственно теперь мы можем присвоить новый класс Programmer объекту и использовать метод, аналогичный методу класса Writer 👁‍🗨 Код со скрина:

class Writer {
    constructor(name) {
      this.name = name;
    }

    think() {
      console.log(`${this.name} думает`);
    }
}

// класс Programmer наследует свойства и методы класса Writer
class Programmer extends Writer {}

const Codorum = new Programmer('Codorum');

Codorum.think();

Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью CSS? 🟦 Для этого нужно определить блок в котором будет происходить анимация и прописать для него псевдокласс :before, в котором стилизовать линию 📏 Последнее что понадобится создать анимацию в @keyframes ▶️ Код из видео:

// index.js

<div class="block">
  <div class="ava"/>
  <div style={{ display: "block" }}>
    <div class="name"/>
    <div class="description"/>
  </div>
</div>


/* index.css */

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffdd;
  filter: blur(4px);
  transform: rotate(-20deg) translateX(-200px);
  animation: line 1s linear infinite;
}

@keyframes line {
  25% {
    transform: rotate(-20deg) translateX(300px); ;
  }
  100% {
    transform: rotate(-20deg) translateX(300px); ;
  }
}

Зачем нужны классы в JavaScript? Классы – это способ определения объектов, их свойств и методов. Благодаря классам можно создавать объекты определенного стандарта ✴️ На примере кода со скрина есть класс programmer с конструктором, в котором есть свойство name и метод write 🧑‍💻 Ниже был создан новый объект Codorum, которому был присвоен класс programmer. Теперь мы можем вызвать метод write класса programmer от имени объекта Codorum 👁‍🗨 Код со скрина:

class programmer {
    constructor(name) {  // конструктор класса 
      this.name = name;  // свойства класса
  }

    write() {            // метод класса 
      console.log(`${this.name} пишет код`);
  }
}
    
const Codorum = new programmer('Codorum');

Codorum.write(); // запуск метода объектом

Сегодня рассмотрим важный аспект веб-разработки – взаимодействие клиента с сервером с помощью JavaScript 🟨 Запрос от клиента 📨 Когда пользователь нажимает кнопку или выполняет какое-либо действие на веб-странице, браузер (клиент) отправляет запрос на сервер. Это может быть HTTP-запрос, например GET или POST. Обработка на сервере ⚙️ Сервер получает запрос и выполняет необходимые действия: может обратиться в базу данных, обработать данные или выполнить другие операции. После этого сервер формирует ответ. Ответ от сервера 📥 Сервер отправляет ответ к клиенту. Это может быть HTML-страница, JSON-данные или другой тип данных. Обработка ответа в клиенте 🔄 Клиент получает ответ и с помощью JavaScript может обновить пользовательский интерфейс. К примеру, отобразить новые данные без перезагрузки страницы. В видео мы рассмотрели пример запроса с помощью Fetch API 👁‍🗨

reverse – метод, позволяющий поменять порядок элементов в массиве 🔁 Это метод массива и с его помощью нельзя поменять порядок свойств в объекте, но мы можем поменять порядок ключей свойств объекта 🔑 То есть с помощью дополнительного метода Object.keys получаем массив ключей свойств объекта, меняем их порядок методом reverse и объявляем новый объект, добавляя в него те же свойства и ключи, но уже в другом порядке 👁‍🗨 Код из видео:

let array = [1, 2, 3];
array.reverse();
console.log(array);


let object = { name: "Codorum", language: "JS" }
let keys = Object.keys(object);
keys.reverse();

let NewObject = {};
keys.forEach(key => {
    NewObject[key] = object[key];
});

console.log(NewObject)

С помощью свойства transform-style со значением preserve-3d и свойства transform со значениями rotateX и translateZ мы можем создать интересный 3д эффект переворачивания кнопки при hover наведении 📦 Нам потребуется стилизовать кнопку в виде коробки и две её стороны. В видео я детальнее показал как работают эти свойства в нашем случае 👁‍🗨 CSS стили из видео:

.block {
  perspective: 800px;
  display: flex;
  justify-content: center;
}

.box {
  --height: 50px;
  height: var(--height);
  width: 150px;
  transform-style: preserve-3d;
  transition: 1s ease;
}

.box:hover {
  transform: rotateX(90deg);
}

.btn {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #141117;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.upside {
  background-color: #b685ff;
  transform: rotateX(-90deg) translateZ(calc(var(--height)/2));
}

.front {
  transform: translateZ(calc(var(--height)/2));
}

Scope – это область видимости для переменных и функций 🔳 Есть три типа Scope: глобальный Scope, локальный (функциональный) и блочный ℹ️ Переменные объявленные на уровень выше будут видны также в скоупе на уровень ниже. То есть, например, переменная "a" с кода на гиф изображении выше будет доступна в локальном скоупе (области видимости функции Local), но переменная "b", которая объявлена внутри скоупа функции не будет видна на глобальном скоуп уровне 👁‍🗨 Границы скоуп уровней определяются фигурными скобками. И, обычно, в редакторах кода можно увидеть характерную вертикальную линию, которая подсказывает границы внутренних Scope уровней ☑️

use strict – это директива JavaScript, которая активирует строгий режим для скрипта или отдельной функции 👮‍♂️ Строгий режим делает несколько изменений в поведении языка для повышения безопасности и производительности кода 🔌 Особенности и изменения, которые внедряет строгий режим: ➖ запрет использования необъявленных переменных ➖ запрет удаления объектов и функций ➖ запрет дубликатов параметров в функциях ➖ глобальный объект неявно не привязывается ➖ дополнительные ограничения для зарезервированных слов В видео подробнее раскрыта каждая из особенностей 👁‍🗨 Использование строгого режима use strict часто рекомендуется, поскольку он помогает выявлять потенциальные ошибки и делает код более предсказуемым и безопасным 🧷