👩‍💻 JetBrains Mono

🟢 Шрифт придуман в первую очередь для разработчиков.

🟢 Имеет открытый исходный код.

🟢 Символы одинаковые по ширине, но строчные буквы сделаны выше.

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

🔗 Шрифт

CodeBase | Frontend

⚡️ Auto rename tag ⚡️

➡️ Автоматически переименовывает парные теги в HTML и JSX.

➡️ Меняете открывающий тег — меняется и закрывающий.

🔗 Плагин

CodeBase | Frontend

💎 Interactive particles text

➡️ Фантастически красивая анимация текста для твоего проекта с интерактивными частицами на JS

🔗 Ссылка

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

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

➡️ Позволяют создавать красивые и интерактивные визуальные эффекты на веб-страницах без использования 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

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

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

⭐️ Технологии: Html, CSS, 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

⚡️ 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

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

🔵 Содержит более 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

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

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

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

CodeBase | Frontend