👁‍🗨 CODORUM — пишу на JavaScript

Заменит ли Искусственный интеллект Человека? 🤖 Полностью - наверняка нет. Не всех. Во-первых, очевидно, что работодатели не смогут и не будут управлять всем сами. Какой-то минимальный управляющий штат будет необходим. Для управления теми же ИИ-агентами, подстраивания 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-й части 👈

В JavaScript есть метод Number, который конвертирует данные разного типа в числа 🔢 По примеру со скрина у нас были 2 переменные с boolean значениями: a ("true"), b ("false") 🚥 В следствии применения метода boolean значения переменных конвертировались в числовые значения: a ("1"), b ("0") 🔢 Казалось бы, применение метода на этом ограничивается, ведь если конвертировать строковое значение методом Number мы получим NaN, но методом Number мы также можем конвертировать данные связанные с датами в числа или даже объекты в числа 👁‍🗨

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

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

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

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