✅ Вопрос на собеседовании ✅

❓ Какие различия существуют между map и set в JavaScript?

Ответ:

➡️ Map и Set - это две разные структуры данных в JavaScript, предназначенные для хранения уникальных значений.

🔵 Map представляет собой коллекцию пар ключ-значение. Ключи могут быть любого типа данных, включая объекты или примитивы. Он используется для хранения пар ключ-значение, где каждый элемент имеет свой уникальный ключ.

🔵 Set представляет собой коллекцию уникальных значений, известную как «множество». Он используется для хранения уникальных значений и не разрешает наличие двух и более одинаковых элементов.

CodeBase | Frontend

🔥Макет сайта: Игровой сервис🔥

🔵 Тематика: Гейминг
🔵 Страницы: многостраничный
🔵 Адаптив: нет
🔵 Технологии: HTML/CSS, JS

🔗 Ссылка

CodeBase | Frontend

⚡️ BOOTSTRAP: ЗНАКОМСТВО ⚡️

➡️ Это популярный front-end фреймворк, который содержит набор CSS и JavaScript инструментов для разработки адаптивных и стильных веб-страниц.

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

✔️ Установка

1️⃣ CDN:

🔵 https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
🔵 https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js

2️⃣ Скачать локальные файлы Bootstrap:

🟣 Официальный сайт - скачайте последнюю версию.
🟣 Распакуйте архив и скопируйте файлы bootstrap.min.css, bootstrap.min.js, jquery.min.js и popper.min.js в ваш проект.
🟣 Подключите их к вашему HTML документу.

3️⃣ NPM и YARN

🔴npm install bootstrap@5.2.3
🔴yarn add bootstrap@5.2.3

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

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

CodeBase | Frontend

⚡️ Макет сайта: Activitar ⚡️

➡️ Activitar-это выдающийся красивый и впечатляющий дизайн сайта фитнес-клуба.

🔵 Страницы: Одностраничный
🔵 Технологии: HTML/CSS, Bootstrap, JS

CodeBase | Frontend

🔥 Quokka.js 🔥

⚡️ Quokka.js - это инструмент для JavaScript и TypeScript, который выводит результаты выполнения кода непосредственно в редакторе во время его написания. Попробуйте его сами!

➡️После установки плагина:

🔵 нажмите Ctrl/Cmd(⌘) + Shift + P, чтобы открыть палитру команд редактора,
🔵 затем введите Quokka, чтобы увидеть доступные команды плагина.

➡️ Выберите и запустите команду New JavaScript File или используйте сочетание клавиш ⌘ + K + J для создания нового файла.

➡️ Весь введенный код будет немедленно выполнен и отображен.

🔗 Ссылка

CodeBase | Frontend

⚡️ Remix.js ⚡️

➡️Remix - это фреймворк, разработанный для построения клиент-серверных веб-приложений с использованием JavaScript (React) с интегрированной поддержкой TypeScript.

🟢 Remix позволяет разрабатывать PESPA (Progressive Enhancement Single Page Apps) - одностраничные приложения с возможностями прогрессивного улучшения.

Это означает следующее:

🟢 Большая часть кода приложения размещается на сервере.
🟢 Приложение остается функциональным даже без JavaScript.
🟢 JavaScript используется исключительно для постепенного улучшения пользовательского опыта (UX).

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

CodeBase | Frontend

👩‍💻 Веб-скрейпинг с 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