Как подключить шрифт в CSS локально из папки проекта? 🔤

👉 Для этого:
➖ опционально создаём папку для шрифтов внутри проекта
➖ добавляем в нее файл шрифта
➖ в файле index.css добавляем CSS-правило @font-face
➖ добавляем в него свойство font-family с указанием шрифта
➖ добавляем свойство src, в котором указываем путь к шрифту

Подробнее в видео 👁‍🗨

Код из видео:

@font-face {
  font-family: "Название_шрифта";
  src: url("./fonts/Название_шрифта.ttf") format("truetype");
}

body {
  font-family: "Название_шрифта", sans-serif;
}

Для проведения одинаковых операций с каждым элементом массива в JavaScript, допустим для умножения каждого элемента массива на 2, может очень пригодится метод массива map (в данном случае идет речь именно о методе массива, а не о структуре данных Map) 🗺

Достаточно прописать небольшую конструкцию в скобках. В случае с кодом со скрина мы указали, что каждое число массива должно быть умножено на 2 👁‍🗨

Код со скрина:

// умножение каждого элемента массива на 2
let numbers = [3, 10, 7];
let doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);

Props – это короткое название для свойств от слова "properties", которые передаются компонентам из родительских в дочерние. Они позволяют компонентам взаимодействовать и обмениваться данными, делая React-проекты более гибкими ⚛

На скрине грубый и не совсем целесообразный, но наглядный пример обмена пропсом data между родительским компонентом ParentComponent и дочерним компонентом ChildComponent, который "хранит" переменную text 📬

Родительский компонент передает пропс data дочернему компоненту, который использует переменную text от пропса в своем синтаксисе в указанном месте ({props.data}). А синтаксис дочернего компонента, в свою очередь, отображается в родительском компоненте 👁‍🗨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Что такое анонимная функция в JavaScript?

Анонимная функция – это функция без имени. Она часто используется там, где нет необходимости вызывать её повторно. Такие функции удобно передавать в качестве аргументов или использовать в качестве колбэков 🥷

Анонимными могут быть как стандартные функции, так и стрелочные функции. Пример анонимной функции и стрелочной анонимной функции на скрине 👁‍🗨

Методом Math.random можно сгенерировать случайное нецелое число в JavaScript 🎰

Но как сгенерировать случайное целое число? – Это можно сделать благодаря связке из методов Math.floor и Math.random 🎱

На скрине представлены способы генерации нецелого и целого числа 🎲

Чтобы сгенерировать случайное целое число – передаем методу Math.floor аргумент-выражение: Math.random помноженное на верхнюю границу + 1 👁‍🗨

👉 Math.random генерирует случайное нецелое число от 0 до 1
👉 Math.floor округляет числа до наименьшего целого

Как быстро равномерно распределить блоки по ширине пространства? 🟦

👉 При помощи свойства display со значением flex и свойства justify-content со значением:
➖ space-around и ширина пространства будет разделена на количество секций равное количеству блоков, каждый блок станет по центру секции
➖ space-between и блоки будут распределены по ширине пространства равномерно, но блоки уже не будут центрированы по секциям и также не будут добавлены отступы по бокам пространства

То есть со вторым значением space-between будут созданы одинаковые отступы между блоками, распределенными по ширине пространства 👁‍🗨

React компонент – это один из основных элементов, из которых состоят приложения или сайты на React ⚛

Компонентом может быть как самостоятельная страница сайта, так и какая-нибудь встроенная в страницу сайта функция, допустим, если речь идет о сайте на React 🧩

Типов компонентов существует довольно много, по каждому из которых мы пройдемся в будущих постах 📚

👉 На скрине простой пример компонента на Реакт:
➖ в самом вверху подключаются библиотеки и заголовочные файлы
➖ после объявления компонента добавляются функции
➖ а после ключевого слова return прописывается внешний вид компонента на HTML

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

В JavaScript есть достаточное разнообразие циклов. Рассмотрим цикл do...while 🟨

do...while – это цикл, который сначала выполняет блок кода, а затем проверяет условие продолжения выполнения 🔂

Цикл гарантирует, что блок кода выполнится по крайней мере один раз, даже если условие не будет соблюдено ⚠

На скрине пример использования цикла: после запуска будет проведено 5 итераций, на каждой итерации значение переменной i увеличивается на единицу, затем проверяется условие в блоке while "i < 5". Если условие выполняется - цикл будет продолжать повторять выполнение, пока i не станет больше 5 или не будет равно 5 👁‍🗨

Благодаря методу replace можно заменять слова или символы в строке 🎭

➖ первым аргументом, передаваемым методу указываем слово или символ, которое нужно заменить
➖ вторым - слово или символ, на которое нужно заменить

По умолчанию метод найдет первое совпадение и заменит его, но если нужно заменить все совпадения - можно использовать глобальный флаг /g. Также методу можно передавать аргументы в виде функций 👁‍🗨

Небольшая история разделения псевдоклассов и псевдоэлементов 📘

В CSS2 все псевдоклассы и псевдоэлементы записывались с одним двоеточием 👉 :hover, :before, :after

В CSS3 решили разделить:
👉 : — для псевдоклассов (например, :hover, :nth-child)
👉 :: — для псевдоэлементов (например, ::before, ::after)

Но некоторые псевдоклассы, такие как ::selection, хотя и имеют двойные двоеточия, не являются полноценными псевдоэлементами — это исключение из правила ⚠

в случае с ::selection – это особый случай, ::selection отвечает за "интерактивную часть элемента", а не отдельный DOM-элемент, как у настоящих псевдоэлементов 👁‍🗨

for...in и for...of — это два разных типа циклов в JavaScript, и они используются для разных целей 🟨

➖ for...in используется для перебора свойств объектов
➖ for...of используется для перебора значений объектов, которые являются итерабельными (например массивы, строки, коллекции и так далее)

Код со скрина:

const person = { name: 'John', age: 30, job: 'developer' };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

const fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit);
}

Пост для новичков канала 🖖

В сентябре мы написали сайт-визитку на ReactJS. Кому интересно — приглашаем к просмотру ⚛️

Плейлист с частями доступен на нашем ютуб канале 🪪

В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦

Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

На финальный результат можно взглянуть в 20-й части 👈

Метасимвол — это один из типов символов, которые в сумме помогают формировать более точные регулярные выражения для поиска групп символов или паттернов в строках 🔍

В видео мы рассмотрели 2 метасимвола, которые присутствуют в регулярном выражении для поиска слов, начинающихся с буквы "a" *⃣

👉 А именно:
➖ \b - метасимвол, указывающий на то, что мы ищем букву в начале слова
➖ \w+ - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком

Код со скрина:

let str = "ah sh*t, here we go again..."

// ✦ Регулярное выражение
let regexp = /\ba\w+/g;

// "/" - символ, в который оборачиваются выражения
// "\b" - метасимвол, указывающий на то, что мы ищем букву в начале слова
// "a" - первая буква слов, которые мы ищем
// "\w+" - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком
// "/g" - глобальный поиск (флаг)

console.log(str.match(regexp));

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Как проверить, является ли число конечным в JavaScript? Или оно бесконечное? ♾

В JavaScript проверить, является ли число конечным, можно с помощью встроенной функции isFinite()

isFinite() автоматически преобразует аргумент в число, если это возможно. В отличие от метода объекта Number.isFinite() 👁‍🗨

C помощью HTML-тега span можно стилизовать определенный текст или слово в предложении не задев стиль остального текста предложения 🟧

span — это HTML-тег, используемый для определения инлайнового элемента, который может содержать текст или другие встроенные элементы 🎞

👉 В CSS можно использовать селекторы для определения стилей элементов, обернутых в span-теги:
➖ на скрине у нас есть предложение внутри блока div, обернутое в тег <p></p>
➖ внутри этого предложения часть строки, которой присвоен класс accent, обёрнута в тег <span></span>
➖ теперь эту часть строки можно индивидуально стилизовать через класс accent

При помощи Spread оператора можно легко объединить массивы или объекты в JavaScript 🤝

🪵 Для того чтобы объединить массивы, достаточно объявить новую константу и в квадратных скобках перечислить массивы, которые необходимо объединить через запятую, указав перед ними многоточия. В данном случае таким многоточием обозначается Spread оператор.

🧱 Для объединения объектов рецепт точно такой же, но вместо квадратных скобок используются фигурные скобки.