CodeBase | Frontend

⚡️ Крутое CSS решение ⚡️ ➡️ Реализовано с помощью HTML/CSS. 🔗 Ссылка CodeBase | Frontend

Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно. Подписывайся: @frontend

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

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

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

CodeBase | Frontend

⚡️ ТОП-3 СЕРВИСА ДЛЯ REACT.JS ⚡️ Подготовил для Вас небольшой перечень годных ресурсов. Пользуйтесь) 🔵 React-vis - набор компонентов React, предназначенных для отображения данных в React-приложениях с использованием визуализации. 🔵 React-Toastify - персонализируемая библиотека React, которая добавляет уведомления в ваше приложение. 🔵 React Select - библиотека React, позволяющая создать интерактивные и легко настраиваемые выпадающие списки.

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

CodeBase | Frontend

💎 ТОП-3 ЗАДАЧИ ДЛЯ ПРОКАЧКИ JS 💎 1️⃣ Напишите однострочное решение, которое вычисляет сумму квадратных корней для всех чётных чисел целочисленного массива. 2️⃣ Яблоко стоит 1.15, апельсин стоит 2.30. Сколько они стоят вместе – чему равна сумма 1.15 + 2.30 с точки зрения JavaScript? 3️⃣ Чему равен typeof null в режиме use strict? 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

🖥 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

🟡 ПРЕОБРАЗОВАНИЕ ТИПОВ 🟡 🗣Очень часто при программировании возникает потребность в изменении типов данных. Это непременно пригодится вам на практике, так что не думайте обратно. ⚡️ Преобразование в строку Допустим, у нас есть переменная возраста, которая имеет тип 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

⚡️ Макет сайта: IT Trader Soft ⚡️ Данный макет прокачает ваши навыки до небес! ⭐️ Технологии: Html, CSS, JS ⭐️ Страницы: Многостраничный 🔗 Ссылка 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

⚡️⚡️ ТОП СПОСОБЫ АНИМАЦИИ ⚡️⚡️ ➡️ Позволяют создавать красивые и интерактивные визуальные эффекты на веб-страницах без использования 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

1️⃣ Разница между let, var и const: ➡️ let, var и const - ключевые слова в JavaScript для объявления переменных. var обладает функциональной областью видимости и может изменяться внутри функции. ➡️ Новые let и const из ES6 имеют блочную область видимости: let можно изменять, в то время как const - нет. 2️⃣ Различия между cookie, sessionStorage и localStorage: ➡️ Cookie - данные, отправляемые сервером и хранящиеся в браузере на определенный срок. ➡️ sessionStorage хранит данные в течение сессии, а localStorage - на неопределенный период после закрытия браузера. 3️⃣ Какая технология наиболее популярна сейчас и точно будет популярна ещё несколько лет? ➡️ JavaScript и его фреймворки, а также технологии искусственного интеллекта, машинного обучения и визуализации данных. ➡️ Популярны React, Angular, Vue.js и библиотеки визуализации данных, такие как D3.js и Chart.js. 4️⃣ Напишите простую функцию, чтобы проверить, является ли число целым: Здесь всё просто:

function isInteger(num) {
  return num % 1 === 0;
}

➡️ Эта функция принимает число в качестве аргумента и возвращает true, если число является целым, и false, если число имеет дробную часть. Например:

console.log(isInteger(4)); // true
console.log(isInteger(4.2)); // false
console.log(isInteger(-3)); // true

5️⃣ Что такое прогрессивная отрисовка? 🟢Метод веб-разработки, который поэтапно отображает содержимое страницы по мере загрузки, улучшая пользовательский опыт и оптимизируя производительность. 🟢Позволяет пользователю начать взаимодействие с сайтом до полной загрузки. CodeBase | Frontend

💎 Interactive particles text ➡️ Фантастически красивая анимация текста для твоего проекта с интерактивными частицами на JS 🔗 Ссылка CodeBase | Frontend

⚡️ Auto rename tag ⚡️ ➡️ Автоматически переименовывает парные теги в HTML и JSX. ➡️ Меняете открывающий тег — меняется и закрывающий. 🔗 Плагин CodeBase | Frontend

👩‍💻 JetBrains Mono 🟢 Шрифт придуман в первую очередь для разработчиков. 🟢 Имеет открытый исходный код. 🟢 Символы одинаковые по ширине, но строчные буквы сделаны выше. 🟢 Такой подход сохраняет строки кода той длины, которую ожидают разработчики, и помогает улучшить визуализацию, поскольку каждая буква занимает больше пикселей. 🔗 Шрифт CodeBase | Frontend

⚡️ Svelte - новый фреймворк JavaScript с уникальным подходом к созданию пользовательских интерфейсов, широко используемый крупными компаниями как 1Password, Avast и The New York Times. ➡️ Благодаря компиляции компонентов в легкий и высокооптимизированный JavaScript код, Svelte обеспечивает быструю и эффективную работу веб-приложений, в отличие от более традиционных фреймворков. ➡️ Реактивная система Svelte позволяет эффективно обновлять только измененные части интерфейса, создавая более гладкие и отзывчивые пользовательские впечатления. ➡️ Удобный для новичков, с простым синтаксисом, Svelte помогает разработчикам интуитивно выражать пользовательский интерфейс и поведение компонентов в одном файле. ➡️ Вместе с управлением состоянием и возможностями анимации, Svelte способствует созданию сложных приложений, хотя его экосистема может быть менее развита из-за относительной новизны. 🔗 Документация

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

CodeBase | Frontend

⭐️Анимация: Сердце ⭐️ ⚡️Технологии: CSS, JavaScript 🔗 CodePen CodeBase | Frontend

⚡️ Storyset — бесплатная библиотека настраиваемых иллюстраций для вашего проекта. ➡️ Готовые иллюстрации можно скачать в SVG или PNG формате. 🔗 Ссылка

Сохрани, чтоб не потерять ✔️

CodeBase | Frontend