👁‍🗨 CODORUM

Нужен продаваемый дизайн? – обращайтесь к Воркфорду 🖌 Это именно тот человек, который создал абсолютно весь дизайн связанный с нашими телеграм и ютуб каналами, тикток и инстаграм профилями! ❤️‍🔥 Все видео тоже были смонтированы ним! 🔥 Сейчас ему необходимо наполнить своё портфолио под псевдонимом Workford, поэтому он готов бесплатно создать превью для видео ютуб, рекламный баннер/креатив любой стилистики и на любую тему всем желающим ⚜️ Единственное условие: оставить честный отзыв после выполнения заказа 💬 👉🏻 Телеграм канал Воркфорда 🪐

Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤 ➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁‍🗨 Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥

Как поменять цвет выделения текста в CSS? 🖌 Для этого нужно изменить 2 свойства в псевдоэлементе ::selection 💠 По умолчанию цвет выделения синий, а цвет текста при выделении белый 👁‍🗨 👉 Чтобы поменять цвета: ➖ в свойстве background-color задаем цвет фона выделения ➖ в свойстве color задаем цвет текста при выделении Код из гифки:

::selection {

  /* цвет выделения */
  background-color: #b685ff;

  /* цвет текста на фоне
  выделения */
  color: #f7f4ff;

}

🍾 С наступающим или наступившим 2025 годом! 🎄 Желаем всем, чтоб 2025 год стал для вас годом, в котором вы побьете свои собственные рекорды в вашей профессиональной деятельности, добьетесь новых высот в ваших увлечениях, начинаниях и любых жизненных аспектах 📈 Новичкам, только приступившим к изучению программирования желаем легкого старта! 🏁 🎊 Спасибо за то что читаете, желаем отлично встретить Новый 2025 год! 🎉

componentDidMount – это метод жизненного цикла в компонентах React, срабатывающий сразу после добавления какого-либо компонента (в который был добавлен метод) на страницу (или в DOM) ⚛️ То есть код внутри метода не срабатывает при полном запуске и работе React проекта, а только после встраивания компонента на страницу, в следствие выполнения какого-то действия пользователем, например 🏌️‍♂️ В примере на скрине: когда выбирается категория "Одежда", компонент Clothes добавляется на страницу, и вызывается componentDidMount 👁‍🗨 👉 На практике метод используется для: ➖ загрузки данных с сервера ➖ настройки подписок или таймеров ➖ выполнения действий, требующих доступа к DOM

Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿 Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹 Рассмотрим аспект – жизненный цикл ⏱️ Все переменные в коде существует определенное время. Жизненный цикл локальных переменных, например, короче чем глобальных переменных. Всё потому, что глобальные переменные существуют в течении всего времени работы программы, а локальные только во время работы функций, например. Жизненный цикл блочных переменных обычно ещё короче 👁‍🗨

Создаём прокручиваемый контейнер как в каруселях Инстаграм 📷 Для его реализации понадобятся 2 ключевых свойства: scroll-snap-type и scroll-snap-align 🟦 Применив эти свойства при прокрутке контейнера пользователи будут попадать на ширину или высоту кратную ширине или высоте контейнера ↕️ К примеру если высота контейнера 300 пикселей - значит при прокручивании пользователь сможет останавливаться на высоте в 300, 600, 900 пикселей и так далее (в видео разобрали детальнее) 👁‍🗨 Код из видео:

// index.html

<div className="container">
  <div className="block" style={{ background: "black" }}>
    1 блок
  </div>
  <div className="block" style={{ background: "#9966ff" }}>
    2 блок 
  </div>
</div>


/* index.css */

.container {
  width: 200px;
  height: 250px; 
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

.block {
  width: 200px;
  height: 250px;
  scroll-snap-align: center;
  color: white;
  text-align: center;
  align-content: center;
}

С помощью метода clearTimeout можно отменить выполнение отложенной функции, которая должна была выполниться через некоторое время 🧹 На скрине условный пример загрузки страницы сайта ⭕️ Если по истечению 15 секунд с момента открытия страницы медиафайлы не загрузятся (предположим у пользователя слабый интернет) - пользователь увидит сплывающее окно с сообщением про слабый интернет 📡 Если медиафайлы загрузились в течение 15 секунд - после момента их загрузки отложенная функция сплывающего окна удалится методом clearTimeout 👁‍🗨

JavaScript – универсальный язык, используемый как на клиентской (frontend), так и на серверной (backend) части. Однако подход к использованию языка значительно отличается 🟨 Фронтенд — это о взаимодействии с пользователем и работе с браузером 🖥 Бэкенд — об управлении логикой, обработке данных и работе с серверными ресурсами. Но синтаксис языка остается схожим 🗄 JavaScript – мост между двумя мирами, и именно это делает его таким популярным ⭐️

Как сделать градиентный текст в CSS? 🍡 👉 Благодаря комбинации трёх свойств: ➖ background-image со значением в виде градиента ➖ background-clip со значением text (чтобы градиент обрёл форму текста, к которому применяется класс, вместо формы контейнера элемента текста) ➖ color со значением transparent (градиент применяется к фону контейнера элемента, то есть контейнера текста. Благодаря тому что мы сделаем текст прозрачным за ним будет виден фон контейнера - градиент в форме текста) Код со скрина:

.gradient-text {
  background-image: linear-gradient(90deg, #d815ff, cyan, #414aff);
  background-clip: text;
  color: transparent;
}

Что такое конструктор в JavaScript? 🏗 Конструктор – это специальная функция, которая используется для создания и инициализации разных объектов. Основная идея конструкторов заключается в возможности создавать много объектов с одинаковыми свойствами и методами по определенному шаблону 🃏 На скрине пример создания объекта Homer с помощью конструктора Person 🍩 👉 Теперь у объекта есть: ➖ два свойства/параметра: age и hometown ➖ метод speak Но на практике удобнее пользоваться классами, использование которых в разы проще 👁‍🗨 Код со скрина:

// ✦ объявление конструктора
function Person(age, hometown) {
  this.age = age;
  this.hometown = hometown;
  this.speak = function() {
    console.log(`Hi, I'm ${this.age} years old, my hometown is ${this.hometown}`)
  };
}

// ✦ создание объекта с помощью конструктора
let Homer = new Person(40, 'Springfield')

Homer.speak();

Приняли решение поменять дизайн фона вертикальных видео, которые публикуем в соц. сетях 🔮 Хотим узнать ваше мнение, помогите определиться какое дизайнерское решение выглядит более лаконично и презентабельно стилистически 🪁 🔹 Решение №1: текущий дизайн, который определенно хотим поменять 🔹 Решение №2: пространственный фон с мягким объёмным блоком кода 🔹 Решение №3: стильное ребристое стекло, легкий непринуждённый фон Проголосуйте в следующем посте 👇

useState – это React хук, который используется для контролирования какого-либо локального состояния в компоненте и предоставления обновления этого состояния ⚛️ На гифке пример использования хука useState: есть компонент с надписью и кнопкой ⏏️ ➖ "const [count, setCount] = useState(0)" – это состояние, сохраняющее значение переменной count ➖ setCount – функция, обновляющая состояние ➖ значение возле хука "(0)" – это значение переменной count по умолчанию Также кнопке присвоена функция, увеличивающая значение переменной count на единицу – "onClick={() => setCount(count + 1)}" Код из гифки:

import React from 'react';
import { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
  <div>
      <p>Счетчик: {count}</p>

      <button onClick={() => setCount(count + 1)}>
        добавить
      </button>
  </div>
  );
};

export default MyComponent;

Делимся лаконичной светлой CSS-стилистикой для блоков, которую можно назвать трендовой, так как подобная стилистика сейчас часто встречается в UI/UX-дизайне 🎨 Стилизовав контейнеры таким подходом можно добавить пространственности за счёт теней, ненавязчиво намекнуть на наличие блока, внутри которого находится контент, при этом не перегрузив интерфейс деталями 🟦 Как можно заметить, основная реализация такой стилистики заключается в комбинации светлой тени, уходящей в левый верхний угол и несильной тёмной тени, уходящей в правый нижний угол 👁‍🗨 Код со скрина:

.laconic-style {
  background: #fff;
  border-radius: 16px;

  filter:
  drop-shadow(-5px  -5px   5px  #ffffff)
  drop-shadow(-10px -10px  15px #d387f850)
  drop-shadow( 15px  15px  15px #00000010);

  width: 100px;
  height: 70px;
  margin: 20px;
  outline: 2px solid #faf2ff20;
  outline-offset: -1px;
}

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Где на практике часто используют методы setTimeout и setInterval? ⏲️ setTimeout можно использовать для: ➖ задержки выполнения действий ➖ последовательного выполнения действий ➖ задержки ввода в поле поиска ⏳ setInterval можно использовать для: ➖ регулярного обновления интерфейса ➖ повторного запроса на сервер В видео рассмотрели эти примеры в виде кодов 👁‍🗨

Рассмотрим тип объекта RegExp в JavaScript ⚜️ RegExp – это тип объекта, который используется для работы с регулярными выражениями, позволяющими выполнять расширенные операции со строками, такие как: поиск, замена и извлечение определенных паттернов 🔖 Объект RegExp можно создать с помощью литерала регулярного выражения или конструктора 🏗 На скрине продемонстрированы 2 метода: test и search. Но объект RegExp предоставляет и другие различные методы выполнения операций со строками, такие как: exec, match, replace и другие 👁‍🗨 Код со скрина:

const pattern1 = new RegExp('Codorum');
const pattern2 = new RegExp('JavaScript');

const text = 'Codorum - пишу на JavaScript';

// проверка наличия паттерна в тексте "text"
console.log(pattern1.test(text));

// поиск позиции слова "JavaScript" в тексте "text"
const position = text.search(pattern2);
console.log(`Позиция слова "JavaScript": ${position}`);

С помощью метода indexOf можно узнать индекс элемента в массиве 🟨 Для этого прописываем название массива, далее метод и в скобках указываем элемент из массива, индекс которого хотим узнать 🔮 Но есть нюанс: все элементы массива должны быть разными. Если в массиве больше двух одинаковых элементов, то хоть и есть еще один метод lastIndexOf, который находит индекс последнего такого же элемента, не обойтись без итераций. Если в массиве, допустим, 3 одинаковых элемента (подробнее на скрине) 👁‍🗨 Код со скрина:

let arr = ["White", "Fring", "Goodman", "Pinkman"];
  
console.log("Индекс личности", "Fring -", arr.indexOf("Fring"));



let arr2 = ["BTC", "BTC", "BTC"];
  
console.log("\nИндекс первого", "BTC -", arr2.indexOf("BTC"));
console.log("Индекс последнего", "BTC -", arr2.lastIndexOf("BTC"));