🔥 Event Loop 🔥

⚡️ Event Loop (Цикл событий) - это важный аспект асинхронного программирования, который позволяет выполнение JavaScript кода в однопоточном режиме, не блокируя другие операции. Event Loop проверяет наличие задач для выполнения и обрабатывает их поочередно.

🟢 JavaScript работает в одном потоке, что означает выполнение одной операции за раз. Однако благодаря Event Loop, JavaScript способен обрабатывать асинхронные задачи, такие как запросы к серверу или обработка событий интерфейса, не блокируя основной поток выполнения.

➡️ Механизм работы Event Loop:

😊 Стек вызовов (Call Stack): Хранит текущее выполнение функций. Функция добавляется в стек при вызове и удаляется после завершения выполнения.

😊 Очередь обратных вызовов (Callback Queue): Когда асинхронная операция завершена, ее обратный вызов помещается в очередь.

😊 Цикл событий (Event Loop): Проверяет стек вызовов на наличие функций для выполнения. Если стек пуст, Event Loop выбирает обратный вызов из очереди и добавляет его в стек для выполнения.

🟢 Это позволяет JavaScript выполнять долгосрочные операции, такие как загрузка данных, не блокируя основной поток выполнения и обеспечивая отзывчивость приложения.

➡️ Пример кода:

console.log('Первое сообщение');
setTimeout(() => {
console.log('Сообщение из setTimeout');
}, 0);
console.log('Второе сообщение');

➡️ В этом примере, несмотря на нулевую задержку в setTimeout, сообщения будут выведены в порядке:

Первое сообщение
Второе сообщение
Сообщение из setTimeout

🟢 Это происходит потому, что обратный вызов setTimeout помещается в очередь и будет выполнен после завершения текущего кода в стеке вызовов. Event Loop позволяет выполнять асинхронные операции, сохраняя отзывчивость и эффективность веб-приложений.

Если понравился пост, обязательно добавь 🔥🔥🔥

CodeBase | Frontend

✅ Card Hover Interaction - элегантные карты с анимированным показом информации при наведении курсора.

🟢 Реализованы с использованием CSS.

🔗 Ссылка

CodeBase | Frontend

👩‍💻 Node.js против Django 👩‍💻

⚡️ Прежде всего, хочу подчеркнуть, что наша цель здесь - не выбирать победителя.

✅Django и Node.js оба отлично подходят для создания сложных веб-приложений.

🟡 Django - лучший выбор для поклонников Python, предоставляя инструменты для разработки бэкенда.

🟡 Node.js, в свою очередь, представляет инструмент для запуска JavaScript на сервере, обеспечивая удобство использования одного языка программирования для фронтенда и бэкенда.

🟢 Оба инструмента обладают своими преимуществами и особенностями, которые стоит рассмотреть.

🟡 Django - универсальный и обладает широкими функциями, в то время как Node.js основан на событийной архитектуре, идеальной для реального времени.

✅ Какой выбрать - зависит от ваших целей и требований проекта. ✅

🔗 Django Documentation

🔗 Node.js Documentation

Если понравился такой формат, добавь 🔥🔥🔥

CodeBase | Frontend

⚡️ Циклы JS ⚡️

❗️ Циклы в JavaScript могут помочь вам повторять один и тот же код без необходимости писать его многократно.

🟢 Например, если вы хотите напечатать числа от 1 до 10, циклы могут справиться с этим без лишнего повторения кода.

👀 Существует три основных типа циклов в JavaScript: for, while и do-while.

1️⃣ Цикл for включает начальное выражение, условие и обновление переменной на каждой итерации.

🔵 Пример использования цикла for:

for (let i = 0; i < 5; i++) { 
  console.log(i); 
}

2️⃣ Цикл while проверяет условие до выполнения кода внутри цикла.

🟣 Пример использования цикла while:

let i = 1; 
while (i <= 5) { 
    console.log(i); 
    i++; 
}

3️⃣ Цикл do-while выполняет блок кода хотя бы один раз, а затем проверяет условие.

🔴 Пример использования цикла do-while:

let i = 1; 
do { 
    console.log(i); 
    i++; 
} while(i >= 5);

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend

⚡️ GitHub: первые шаги ⚡️

🔥 Git - это система управления версиями, которая работает в распределенном режиме.

🟣 Разработчики обмениваются кодом через один центральный сервер.

🟣 Каждый разработчик клонирует проект на свою локальную машину, вносит изменения и сохраняет их на сервере.

🟣 Другие разработчики в свою очередь могут получить эти изменения.

🟣 История и копия проекта хранятся локально, что позволяет работать независимо от интернета.

🟣 Если компьютер разработчика сломается, проект сохранится на сервере.

🟣 GitHub представляет собой крупнейший веб-сервис, где можно совместно разрабатывать проекты с использованием Git и хранить изменения на серверах GitHub.

🔗 Ссылка

Еще больше информации по работе с Git, жди в новых постах!)🔥🔥🔥

CodeBase | Frontend

⚡️ GitHub: Терминология ⚡️

Пора обогатить ваш словарь Git перед тем, как мы сделаем первый запрос на слияние (Pull Request).

🟣 Хранилище (repository) — это каталог проекта, который контролируется Git. Внутри этого каталога содержится проект, история изменений и метаинформация проекта (хранится в скрытом каталоге .git).

🟣 Индекс — это место, где записаны имена файлов и их изменения, которые должны быть включены в следующий коммит. С точки зрения фактического хранения, индекс представляет собой просто файл. Файлы не попадают автоматически в индекс, их нужно добавлять явно с помощью команды git add.

🟣 Фиксация (commit) — это сохранение изменений в истории проекта (изменения, внесенные в индекс). Фиксация содержит измененные файлы, имя автора фиксации и время ее создания. Каждая фиксация обладает уникальным идентификатором, который позволяет в любое время вернуться к этой точке. Коммит можно рассматривать как точку сохранения.

🟣 Ветка (branch) — это последовательность фиксаций. По сути, это ссылка на последнюю фиксацию в данной ветке. Ветки не зависят друг от друга — изменения в одной ветке не затрагивают другую (если вы явно этого не попросите). Обычно вы начинаете работу с одной ветки — main, об этом чуть позже.

🟣 Форк (Fork) — это ваше собственное ответвление другого проекта. Это означает, что GitHub создает копию проекта в вашем пространстве имён, и вы можете легко вносить изменения, отправляя их (push) обратно.

🟣 Запрос на слияние (Pull Request) — предложение внести изменения в чужой репозиторий. Например, если вы скопировали чей-то репозиторий, сделали изменения и хотите, чтобы они были включены в оригинальный репозиторий, то вы создаете запрос на слияние с просьбой добавить ваши изменения.

CodeBase | Frontend

⚡️ Использование свойства white-space с параметром nowrap ⚡️

🟢 Свойство white-space с параметром nowrap предотвращает автоматический перенос текста на новую строку внутри элемента, даже если текст не помещается в доступной ширине контейнера.

CodeBase | Frontend

🖼️ React: Инструменты 🖼️

➡️ По умолчанию в производственной сборке (когда process.env.NODE_ENV === 'production') инструменты разработчика не включены.

➡️ Существует два способа добавления инструментов в приложение: плавающий (floating) и встроенный (inline).

🔵 Плавающий режим:

import { ReactQueryDevtools } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

Настройки:

🟢 initialIsOpen - при установке в значение true, панель инструментов по умолчанию будет открыта.
🟢 panelProps - применяется для добавления свойств к панели, таких как className, style и другие.
🟢 closeButtonProps - служит для добавления свойств к кнопке закрытия панели.
🟢 toggleButtonProps - используется для добавления свойств к кнопке переключения.
🟢 position: "top-left" | "top-right" | "bottom-left" | "bottom-right" - указывает положение логотипа React Query для открытия/закрытия панели.

🔵 Встроенный режим:

import { ReactQueryDevtoolsPanel } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend

👩‍💻 Хук useState в React

useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Это проще, чем управлять состоянием в классовых компонентах, и делает код более чистым и понятным.

⚙️ Как использовать useState?

Для начала нужно импортировать хук из библиотеки React:

import React, { useState } from 'react';

Затем можно объявить состояние внутри вашего компонента:

function Counter() {
  // Инициализация состояния с начальным значением 0
  const [count, setCount] = useState(0);

  // Функция для увеличения счётчика
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={increment}>Нажми меня</button>
    </div>
  );
}

💬 Что здесь происходит?

🟢 Инициализация состояния: useState(0) возвращает массив из двух элементов: текущего значения состояния (count) и функции для его обновления (setCount).

🟢 Обновление состояния: setCount(count + 1) устанавливает новое значение для count, и компонент перерисовывается с обновленным состоянием.

Состояний может быть несколько. Вы можете использовать несколько хуков useState в одном компоненте для управления различными состояниями.

Если пост вам понравился и хотите больше подобного контента с примерами, оставляйте ваши реакции 🔥

CodeBase | Frontend

⚡️Анимация перехода от дня к ночи ⚡️

Крутое решение для вашего проекта. Красиво, удобно, лаконично. Пользуйтесь на здоровье!)

🔵Технологии: SVG, SCSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend

⚡️ Маскирование в CSS при помощи свойства mask ⚡️

🔘 Это метод, который позволяет установить изображение в качестве маски для элемента.

➡️ Для этого свойства можно указать параметры, например:

mask: url("../shape.png"); 
mask-repeat: no-repeat; 
mask-size: cover; 
mask-position: center; 

➡️ или записать все в одну строку:

mask: url("../img/shape.png") center/cover no-repeat;

CodeBase | Frontend

⚡️ Знакомство с DOM ⚡️

🟢Браузер рассматривает все теги в HTML-документе как объекты, где одни теги могут содержать другие теги, что делает их дочерними. Проще говоря, HTML-документ представляет собой древовидную структуру с разветвленными элементами тегов, что и составляет DOM (Document Object Model).

Итак, самая простая страница:

<html>
<head>
    <title>Page title</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>
</body>
</html>

➡️ Этот пример представляет собой минимальную HTML-страницу. Убедитесь, что вы сохраняете эту разметку в формате .html, чтобы браузер мог ее корректно отобразить.

➡️ Если внимательно посмотреть на приведенные в примере теги, то можно заметить, что внутри одних тегов мы чётко видим другие.

🟢 Внутри тега <html> лежат все остальные теги: <head>, <body>. Внутри же этих тегов, например, <head> лежит тег <title>.

🟢 Все, что существует внутри HTML-документа, является частью DOM-дерева.

🟢 Если честно, то различных аспектов с DOM достаточно много, но не хочется на них заострять большое внимание, потому как это будет больше теории, нежели практики.

➡️ Давайте подытожим, DOM позволяет нам крутить и вертеть всеми элементами нашего HTML-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно.

CodeBase | Frontend