👩‍💻 Веб-скрейпинг с Crawlee 👩‍💻

- npm install crawlee playwright

⚡️ Crawlee - это библиотека для веб-скрейпинга и автоматизации браузеров для Node.js, которая позволяет создавать надежных веб-пауков.

🟠 Она написана на JavaScript и TypeScript. Crawlee обеспечивает извлечение данных для AI, LLM, RAG или GPT и также может загружать HTML, PDF, JPG, PNG и другие файлы с веб-сайтов.

🟠 Работает с Puppeteer, Playwright, Cheerio, JSDOM и чистым HTTP. Предоставляет возможность работы в режимах headful и headless.

CodeBase | Frontend

🔥 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

🔥 Chart.js 🔥

⚡️ Chart.js представляет собой интуитивно понятную и легко настраиваемую библиотеку для создания графиков на современных веб-сайтах.

🟣 Эта гибкая библиотека позволяет быстро и эффективно визуализировать данные и аналитику, делая информацию более доступной и понятной для пользователей.

🔗 Документация

CodeBase | Frontend

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

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

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

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

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

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

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

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

🔗 Django Documentation

🔗 Node.js Documentation

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

CodeBase | Frontend

👩‍💻 Плагин для VS Code: eCSStractor 👩‍💻

🔹 eCSStractor — позволяет автоматически выделять участки HTML-кода с определенными классами и вставлять соответствующие селекторы в CSS.

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

🔗 Ссылка

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

✅ Макет сайта: High Pro ✅

☄️ Крутой макет личного кабинета.

👀 Технологии: HTML/CSS, JS

🔗 Ссылка

CodeBase | Frontend

⚡️ React Range Sliders ⚡️

🔵 Коллекция стильных слайдеров для React

🔗 Ссылка

CodeBase | Frontend

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

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

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

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

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

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

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

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

CodeBase | Frontend

⚡️ Макет сайта: 𝗚𝗥𝗘𝗘𝗡 𝗘𝗡𝗘𝗥𝗚𝗬 ⚡️

Чудесный макет сайта "зеленая" энергия. Прокачает ваши навыки!

🟢 Сложность: ⭐️⭐️⭐️⭐️⭐️

🟢 Технологии: HTML/CSS, JS и др.

🔗 Ссылка

CodeBase | Frontend

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

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

CodeBase | Frontend

⚡️ Крутой концепт прелоадера страницы ⚡️

➡️ Технологии: CSS

🟢 Геометрические фигуры в стиле тетриса непрерывно формируются в правильной последовательности — представляет собой оригинальное решение.

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

🔗 Ссылка

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

⚡️ Перебор массива элементов ⚡️

1️⃣ Рекомендуется использовать цикл forEach:

const elements = document.querySelectorAll('.my-element');

elements.forEach((el) => {
  console.log(el);
  // Выполнение действий...
});

2️⃣ То же самое, но с использованием spread-оператора:

[...elements].forEach((el) => {
  // Выполнение действий...
});

3️⃣ Использование метода массива для NodeList:

Array.from(elements).forEach((el) => {
  // Выполнение действий...
});

// Или

[].forEach.call(elements, (el) => {
  // Выполнение действий...
});

// Или

[].slice.call(elements, 0).forEach((el) => {
  // Выполнение действий...
});

Здесь метод массива .forEach передается псевдомассиву NodeList (который ранее не имел метода forEach) с помощью метода call.

4️⃣ Использование более быстрого цикла for:

```javascript
for (let i = 0; i < elements.length; i++) {
  // Выполнение действий с elements[i]
}

Если понравился формат, жду 🔥🔥🔥

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