👁‍🗨 CODORUM

Nullish coalescing (оператор нулевого слияния) – оператор в JavaScript, использующийся для задания значения по умолчанию, если переменная равна null или undefined 🟨 👉 Он чем-то напоминает тернарный оператор "?" и логический оператор "||" (ИЛИ), но: ➖ тернарный оператор "?" имеет 3 части (condition ? expr1 : expr2) и больше используется для более детальных задач ➖ логический оператор "||" (ИЛИ) срабатывает на любое falsy-значение (0, '', false, NaN) Оператор нулевого слияния же просто проверяет равна ли переменная null или undefined, если нет - присваивает заданное значение по-умолчанию 👁‍🗨

Условный рендеринг (conditional rendering) – это отображение компонентов или контента в зависимости от определенных условий или состояний 💎 👉 Реализовать это отображение можно с помощью различных способов, таких как: ➖ применение оператора "if/else" ➖ использование тернарного оператора "? :" ➖ использование метода render в классовых компонентах ➖ использование метода return в функциональных компонентах В видео пример отображения разного текста в зависимости от значения состояния isLoggedIn, которое регулируется кнопкой 👁‍🗨 Код из видео:

import { useState } from 'react';

const Component = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(prevState => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? 'Вы успешно авторизованы' : 'Пожалуйста, авторизуйтесь'}</h1>
      <button onClick={handleLoginClick}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
};

export default Component;

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Что такое Webpack в веб-разработке? Webpack – это сборщик модулей (module bundler), объединяющий все файлы проекта (js/jsx, css, изображения и т.д.) в один или несколько оптимизированных файлов для браузера ✅ 📦 Что он делает: ➖ объединяет файлы (bundle) ➖ оптимизирует код (минимизация, удаление лишнего) ➖ поддерживает современный JS через транспайлеры (например, Babel) ➖ работает с CSS, изображениями и другими ресурсами ➖ позволяет использовать модули (import/export) Он помогает сайту загружаться быстрее и удобно структурировать код 👁‍🗨

Заменит ли Искусственный интеллект Человека? 🤖 Полностью - наверняка нет. Не всех. Во-первых, очевидно, что работодатели не смогут и не будут управлять всем сами. Какой-то минимальный управляющий штат будет необходим. Для управления теми же ИИ-агентами, подстраивания LLM-систем под нужные процессы 🔧 Во-вторых, благодаря/вопреки развитию ИИ происходит не только сокращение, но и рост количества стартапов, а следовательно и рост рабочих мест 📈 В-третьих, ИИ не сможет создавать в точности как человек. Да, человек создает что-то также вдохновляясь чем-то, перенимая чей-то опыт, компилируя уже имеющуюся информацию, как и ИИ на какой-то базе данных. Но есть ключевое отличие в создании (компиляции если хотите) чего-то Искусственным интеллектом и Человеком, про которое подробнее представлено мнение в видео на нашем Ютуб канале 👁 ИИ - конкурент, но пока явно не замена и не полноценная альтернатива Человеку 👨‍💻 Видео на украинском, для украинской части аудитории 🇺🇦 👉 Ссылка на видео ▶

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

Что такое наследование классов в 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();

Как сделать анимацию движения линии по кнопке при hover наведении в CSS? 🟦 👉 Для этого нужно: 1⃣ стилизовать кнопку в отдельном классе, в который стоит добавить свойство overflow со значением hidden, чтобы линия не выходила за границы кнопки 2⃣ прописать псевдоэлемент :before, в котором стилизуется линия и тут ключевыми свойствами будут position и transform с указанием положения линии до hover наведения. 3⃣ прописать конструкцию :hover:before, в которой прописать положение линии при наведении на кнопку Код из гифки:

css
.button {
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #b685ff;
  border-radius: 8px;
  width: 300px;
  height: 100px;
  color: white;
}

.button:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffde;
  transition: 1s;
  transform: rotate(-20deg) translateX(-200px);
}

.button:hover:before {
  transform: rotate(-20deg) translateX(200px);
}

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

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨 Проголосуйте в следующем посте 👇

Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода 🧿 Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹 Сегодня о аспекте – поднятие (Hoisting) ⬆️ Перед выполнением кода JS сканирует его и создает все переменные и функции в области видимости (Scope). Интерпретатор ведет себя так, будто объявления подняты вверх, включая переменные объявленные после их применения в функциях. То есть JS видит объявление var msg (в случае с кодом на скрине) ещё до выполнения кода console.log(msg). Но стоит учесть, что поднимается только объявление, а не значение 🔬 Hoisting – это особенность JS, позволяющая вызывать функции до их объявления. Но современный JS почти не использует это. Из-за hoisting с var, игнорирующего блочный Scope возникало много багов, поэтому появились let и const. Сейчас переменные объявляют перед их использованием, Поднятие фактически используется только для function declaration 👁‍🗨

Чем отличается метод parseInt от Math.round в JavaScript? ⏺ 🫤 Оба метода предназначены для округления десятичных чисел в целые числа, но округляют они по-разному: 👉 parseInt округляет число, отсекая все цифры после точки 👉 Math.round округляет число к ближайшему целому

С Международным Женским днём, драгоценные девушки! 💐 Спасибо за вашу заботу и поддержку! За то что вносите яркие краски в нашу жизнь, наполняете её своей красотой! 🦋 Пусть сбываются все ваши планы, от самых простых до самых смелых в любых сферах жизни! Чаще улыбайтесь, этим Вы делаете мир прекраснее! 🏆 Мы вас ценим и любим! 💜 © Изображение создано нашим дизайнером Workford ✨

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

useRef – это React хук, использующийся для создания ref-объектов, которые сохраняют переменные, остающиеся неизменными между компонентами рендеров ⚛ Хук useRef особенно полезен для доступа к DOM-элементам или хранения любых значений, которые могут изменяться в ходе жизненного цикла компонента, но не приводят к его перерендерированию 🔗 👉 В коде из гифки пример применения хука useRef для смещения фокуса на DOM-элемент: ➖ есть ref-объект inputRef с пустым значением ➖ функция focus с методом focus() для DOM-элемента ➖ ref-объект был привязал к одному из полей ввода и в итоге при нажатии на кнопку вызывается функция focus, которая смещает фокус на это поле ввода

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

Якорь – это ссылка на страницу или элемент страницы, который создаётся тегом <a> в HTML ⚓️ Он может иметь атрибуты, такие как href, указывающий адрес ссылки либо id элемента текущей страницы/компонента для перехода к нему ↕️ В видео мы рассмотрели как можно стилизовать якорь в CSS под себя 👁‍🗨 А также как сделать плавный скролл. Для этого достаточно задать значение smooth в свойстве scroll-behavior корневого элемента html 🔸 Код из видео:

// index.html
<div class="main">
  <div class="btn">
    <a href="#lastBlock">В конец</a>
  </div>
  <div class="card">
    <p>блок 1</p>
  </div>
  <div class="card">
    <p>блок 2</p>
  </div>
  <div id="lastBlock" class="card">
    <p>блок 3</p>
  </div>
</div>

/* index.css */
html {
  scroll-behavior: smooth;
}

A {
  text-decoration: none;
}

A:visited {
  color: #f7f4ff;
}

Пост для новичков канала 🖖 Рекомендуем посмотреть серию роликов Как написать сайт-визитку на ReactJS. Кому интересно — приятного просмотра ⚛️ Плейлист с частями доступен на нашем Ютуб канале Codorum 🪪 В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦 Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть. На финальный результат можно взглянуть в 20-й части 👈