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

Что такое конструктор в 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"));

Интересная идея кнопки, по нажатию на которую появляется текст на чистом html и CSS, без добавления функции на JavaScript 🟨 Всё что необходимо это прописать саму кнопку, текст в файле index.html и три стиля в файле index.css 📁 С кнопкой связан скрытый checkbox. При нажатии на кнопку ставится галочка в checkbox. Подробнее в видео 👁‍🗨 Код с видео:

// ✦ index.html
<label for="btn" class="btn">Кнопка</label>
<input type="checkbox" id="btn"></input>
<div class="text">привет</div>


// ✦ index.css
.text, input[type="checkbox"] {
  opacity: 0;
  margin-top: -10px;
  transition: opacity 400ms, margin-top 500ms;
  display: block;
}

input[type="checkbox"]:checked ~ .text {
  opacity: 1;
  margin-top: 10px;
}

.btn {
  padding: 6px 18px;
  background-color: #485dff;
  color: #eceeff;
  cursor: pointer;
  border-radius: 8px;
}

Недавно я опубликовал последнюю часть по разработке сайта-визитки на ReactJS (все части в плейлисте на моём ютуб каналe). Это серия роликов, где я поэтапно показываю как разрабатываю одностраничный сайт-портфолио используя NodeJS и библиотеку React ⚛️ Если вы еще не смотрели ни одной части — предлагаю посмотреть на то, что у нас получилось по итогу в ролике обзор финального результата 👈 жми, чтобы посмотреть 🔴 В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании некоторых CSS анимаций 🟦 Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬

Где чаще всего используют JavaScript? 🟨 Хочу показать интересные данные, основанные на результатах исследования Developer Ecosystem Survey, которое ежегодно проводит JetBrains 📊 JavaScript остается основным инструментом для фронтенд-разработки. 86% респондентов работают с фронтендом, включающим создание веб-сайтов, веб-приложений и пользовательских интерфейсов 🖥 Хотя JavaScript менее популярен в бэкенде, его все же широко используют через платформу Node.js. Примерно 34% разработчиков используют JavaScript для бэкенд-разработки, что делает его важнейшим инструментом для создания серверных частей приложений 🟩

Загрузил финальную 19 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация блока гарантий и подвала 👈 жми, чтобы посмотреть 🔴 В которой мы адаптировали 6-й и 7-й блоки для моб. устройств, чем закончили адаптацию страницы и сайт-визитку в целом. Из нового: рассмотрели новую конструкцию, подобную конструкции с долларом, применяющую разные классы, в зависимости от значений двух переменных, для кнопки, переносящей нас в начало страницы ⚛️ Буду благодарен, если поддержите видео лайком 👍

У нас новый диктор! 🎙 Просим сравнить качество звука и подачу предыдущего диктора и нового диктора в следующем посте 👇

Рассмотрим тип объекта Date в JavaScript ⚜️ Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰ Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️ Стоит учесть, что отсчет месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее 👁‍🗨 Код со скрина:

const TimeNow = new Date();

// методы для получения компонентов времени объекта TimeNow
let year = TimeNow.getFullYear();
let month = TimeNow.getMonth();
let day = TimeNow.getDate();
let hours = TimeNow.getHours();
let min = TimeNow.getMinutes();
let sec = TimeNow.getSeconds();

console.log(`Сегодня ${day}.${month + 1}, ${year} год`);


// пример метода по установке времени для объекта TimeNow (час, минута)
TimeNow.setHours(14, 30);

Опубликовал 18 часть по разработке сайта-визитки на ReactJS на ютуб каналe — адаптация блока отзывов 👈 жми, чтобы посмотреть 🔴 В этой части мы адаптировали 5-й блок под мобильные устройства. Прописали дополнительные классы для элементов блока моб. версии и подкорректировать шаблон отзывов, изменили концепцию контейнера с отзывами. Показал лайфхак для плашек (выделения слов в тексте) - как сделать плашки неразрывными/неуязвимыми для переносов текста 🟧 Буду благодарен, если поддержите видео лайком 👍

17 часть по разработке сайта-визитки на ReactJS уже на ютуб канал — адаптация блока портфолио 👈 жми, чтобы посмотреть 🔴 В ней мы настроили отображение 4-го блока для мобильных устройств, при этом сохранив основные функции без необходимости их редактирования. Адаптировали блок в главном компоненте Main и компоненты имеющие отношение к блоку. Немного изменили идею стилизации и отображения элементов блока и компонентов для мобильных устройств 📱 Буду благодарен, если поддержите видео лайком 👍

Как сделать отступы между элементами div контейнера компактно? 🔳 Вместо привычного CSS свойства для отступа margin можно использовать лишь одно свойство gap, которое задаст одинаковый отступ со всех сторон элемента и тем самым сэкономит много места 🟦 Единственное, свойство gap лучше задавать в классе контейнера с элементами, а не в самих классах элементов, при условии, что у самого класса контейнера нет свойств размера, тем самым размер контейнера будет регулироваться элементами (пример на гифке) 👁‍🗨

Загрузил 16 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация блока услуг 👈 жми, чтобы посмотреть 🔴 В которой мы адаптировали 3 блок для мобильных устройств. Разобрали применение разных комбинаций классов для html элементов отталкиваясь от значений нескольких переменных, благодаря использованию конструкции со знаком доллара, ну и еще пару неочевидных моментов CSS стилизации 🟦 Буду благодарен, если поддержите видео лайком 👍

Опубликовал 15 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация модального окна 👈 жми, чтобы посмотреть 🔴 В этой части мы перенесли функцию по определению соотношения ширины и высоты экрана устройства пользователей посещающих наш сайт, и определение переменной isPortrait в отдельный компонент (теперь можем подключать этот компонент с функцией ресайза в компоненты, где нужна адаптация под моб. устройства подобно кастомному хуку). И адаптировали модальное окно ⚛️ Буду благодарен, если поддержите видео лайком 👍