⚡️⚡️ ТОП СПОСОБЫ АНИМАЦИИ ⚡️⚡️

➡️ Позволяют создавать красивые и интерактивные визуальные эффекты на веб-страницах без использования JavaScript или других скриптов.

➡️ Вот несколько простых примеров:

1️⃣ Анимация изменения цвета:

css
.color-change {
  background-color: #3498db;
  transition: background-color 0.5s;
}
.color-change:hover {
  background-color: #e74c3c;
}

2️⃣ Анимация перемещения:

css
.move {
  position: relative;
  animation: moveAnimation 2s infinite;
}
@keyframes moveAnimation {
  0% { left: 0; }
  50% { left: 50%; }
  100% { left: 0; }
}

3️⃣ Анимация изменения размера:

css
.resize {
  transform: scale(1);
  transition: transform 0.5s;
}
.resize:hover {
  transform: scale(1.2);
}

4️⃣ Анимация вращения:

css
.rotate {
  transform: rotate(0);
  transition: transform 1s;
}
.rotate:hover {
  transform: rotate(360deg);
}

5️⃣ Анимация мерцания:

css
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.blink {
  animation: blink 1s infinite;
}

➡️ Для создания CSS анимаций можно использовать свойство @keyframes, которое определяет последовательность стилей во времени, а также свойства transition и animation, которые управляют переходами и анимациями.

➡️ Комбинируйте эти свойства и ключевые кадры (@keyframes) для создания разнообразных эффектов на вашем веб-сайте.

Для тех, кто интересуется анимацией, нашел для вас крутой курс.
Вот ССЫЛКА НА КУРС (ID: 020)

CodeBase | Frontend

⚡️ TYPEDARRAY.JS ⚡️

🟢 Упорядоченный набор данных, содержащих байты, в котором элементы имеют строго определенный тип данных. TypedArray кажется похожим на обычный массив, однако на практике это специальный объект, предоставляющий доступ к двоичным данным в буфере - области памяти, где хранятся бинарные данные, обычно размещенные в оперативной памяти (RAM).

🟢 TypedArray упрощает обработку тяжеловесных данных, таких как видео, аудио и анимации, и часто используется с различными API, такими как WebGL, Canvas 2D, XMLHttpRequest2 и другими.

🟢 Кроме того, TypedArray состоит из буферов, где хранятся данные, и их представлений, которые обеспечивают доступ к данным в буфере и представляют их в виде массива с жестко заданным типом данных. Для создания TypedArray сначала создается буфер с использованием объекта ArrayBuffer или SharedArrayBuffer, а затем создается представление буфера с помощью объектов TypedArray или DataView.

🟢 В JavaScript существуют различные типы TypedArray, такие как Int8Array, Uint8Array, Float64Array, Uint8ClampedArray, и для каждого указывается размер данных, количество элементов и их позиция в буфере. Кроме того, для одного и того же буфера можно создать несколько представлений TypedArray. TypedArray относится к проиндексированным коллекциям данных в JavaScript.

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

CodeBase | Frontend

⚡️ Макет сайта: IT Trader Soft ⚡️

Данный макет прокачает ваши навыки до небес!

⭐️ Технологии: Html, CSS, JS

⭐️ Страницы: Многостраничный

🔗 Ссылка

CodeBase | Frontend

🟡 ПРЕОБРАЗОВАНИЕ ТИПОВ 🟡

🗣Очень часто при программировании возникает потребность в изменении типов данных. Это непременно пригодится вам на практике, так что не думайте обратно.

⚡️ Преобразование в строку

Допустим, у нас есть переменная возраста, которая имеет тип Number (число), и мы хотим преобразовать её в новую переменную типа String.

Вот несколько вариантов:

let ageNumber = 19;
let ageString = ageNumber + '';
let ageString = `${ageNumber}`;
let ageString = String(ageNumber);

Это просто и понятно. Используя любой из этих способов, вы почти на 100% уверены, что значение будет преобразовано в строку. Однако, это сработает только для примитивных данных типов: Number, String, Boolean, null и undefined, но не для объектов.

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

⚡️ Преобразование в число

Преобразование в числовой тип чуть сложнее и может привести к интересным результатам.

Например, у нас есть строковая переменная с возрастом '19'. Если мы хотим превратить ее в число, мы можем это сделать так:

let ageString = '19';
let ageNumber = Number(ageString); // (1)
let ageNumber = +ageString; // (2)
let ageNumber = ageString / 1; // (3)
let ageNumber = ageString * 1; // (4)

Варианты преобразования типов

Первый вариант – это явное преобразование, функция Number попробует преобразовать строку в число.

Второй вариант удобен тем, что оператор + может заменить функцию Number.

📌 Некоторые особенности при преобразовании типов:

- Number(undefined) даст NaN
- Number(null) даст 0
- Number(true) даст 1
- Number(false) даст 0

⚡️ Преобразование в булевый тип

Преобразование в логический тип – самая простая операция по сравнению с предыдущими.

Примеры:

Boolean(1) // true
Boolean('строка') // true
Boolean(0) // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(NaN) // false
Boolean('') // false

В общем, после преобразования все значения, кроме false, будут true.

Понравился пост? Порадуй админа!) 🔥🔥🔥

CodeBase | Frontend

🖥 NUMBER 🖥

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

➡️ Числовой тип включает в себя целые и числа с плавающей точкой. В отличие от других языков программирования, где они разделены на целые и с плавающей точкой, JavaScript объединяет их в один тип.

🟢 Примеры числовых переменных включают:

let a = 1;
let b = 1.5;

➡️ Кроме обычных чисел, JavaScript также использует специальные числовые значения, такие как NaN, Infinity и -Infinity.

➡️ NaN (Not-A-Number) - числовое значение, которое обозначает ошибку вычислений, например, при попытке умножить строку на число.

🟢 Пример:
let a = "John" * 20; // вернет NaN

➡️ Infinity - значение, получаемое при делении на ноль.

🟢 JavaScript обрабатывает его как бесконечность, ведя себя при вычислениях похоже на физическую величину скорости света. Например, сумма Infinity и любого числа останется Infinity.

📌 Важно помнить, что при математических операциях скрипт не "упадет", просто значения могут быть Infinity или NaN, поэтому важно корректно обрабатывать числа, особенно если они поступают от пользователя.

CodeBase | Frontend

⚡️ WEB-СЕРВЕР: СОЗДАНИЕ ⚡️

➡️ Давайте создадим простой веб-сервер на Node.js.

➡️ Для разработки приложений вы можете использовать стандартные конструкции языка JavaScript.

‼️ Поскольку ваше приложение будет выполняться на сервере, а не в браузере, DOM и объекты, такие как window или document, будут недоступны.

➡️ Сначала создадим каталог для приложения на жестком диске.

➡️ Допустим, у нас есть каталог /projects/node-app, и в нем у нас будет файл app.js:

javascript
const http = require("http");

http.createServer(function(request, response) {
    response.end("Hello Node.js!");
}).listen(3000, "127.0.0.1", function() {
    console.log("Сервер начал прослушивание запросов на порту 3000");
});

✔️ Итоги:

1️⃣ Мы подключили модуль http, который необходим для создания сервера, используя функцию require().

2️⃣ С помощью метода createServer() создали новый сервер для обработки входящих запросов. В этом методе мы передали функцию с двумя параметрами: request с информацией о запросе и response для отправки ответа.

3️⃣ Метод http.createServer() лишь создает сервер. Чтобы начать прослушивание подключений, мы использовали метод listen(), указав номер порта и функцию обратного вызова для отображения сообщения о начале прослушивания.

➡️ Чтобы запустить сервер, вам необходимо выполнить команду node app.js в директории с проектом.

➡️ После запуска сервера, откройте браузер и перейдите по адресу http://localhost:3000, чтобы увидеть сообщение "Hello Node.js!".

CodeBase | Frontend

💎 ТОП-3 ЗАДАЧИ ДЛЯ ПРОКАЧКИ JS 💎

1️⃣ Напишите однострочное решение, которое вычисляет сумму квадратных корней для всех чётных чисел целочисленного массива.

2️⃣ Яблоко стоит 1.15, апельсин стоит 2.30. Сколько они стоят вместе – чему равна сумма 1.15 + 2.30 с точки зрения JavaScript?

3️⃣ Чему равен typeof null в режиме use strict?

CodeBase | Frontend

⚡️ ТОП-3 СЕРВИСА ДЛЯ REACT.JS ⚡️

Подготовил для Вас небольшой перечень годных ресурсов. Пользуйтесь)

🔵 React-vis - набор компонентов React, предназначенных для отображения данных в React-приложениях с использованием визуализации.
🔵 React-Toastify - персонализируемая библиотека React, которая добавляет уведомления в ваше приложение.
🔵 React Select - библиотека React, позволяющая создать интерактивные и легко настраиваемые выпадающие списки.

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

CodeBase | Frontend

⚡️ Макет сайта - SEO ⚡️

🟢 Тематика: Реклама и маркетинг
🟢 Формат сайта: Одностраничный
🟢 Технологии: HTML/CSS, JS

🔗 Ссылка

Понравился макет? Сохрани, чтоб не потерять!)

CodeBase | Frontend

⚡️ ТОПовая библиотека иконок ⚡️

🔵 Содержит более 27 000 привлекательных иконок.
🔵 Более 3800 иконок доступны бесплатно для коммерческого использования.
🔵 Предоставляются в форматах SVG, React, React Native, npm, CDN и других.

🔗 Ссылка

CodeBase | Frontend

⚡️ Крутое CSS решение ⚡️

➡️ Реализовано с помощью HTML/CSS.

🔗 Ссылка

CodeBase | Frontend

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

❓ Какие различия существуют между 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