✅ Адаптивное меню с анимацией "бургер"

Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к меню сайта?

Для таких случаев используют анимацию бургер, она сворачивает все меню в 1 значок, который при нажатии разворачивает его вертикально

В меню так же реализовано изменение цвета при наведении

😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github

📱 Как работает map.entries() ?

Функция Map.entries() возвращает новый итератор, который содержит массивы [ключ, значение] для каждой пары элементов в объекте map, в порядке их добавления в объект.

Этот метод может быть полезен, когда нужно пройтись по всем элементам объекта Map и выполнить какое-либо действие с каждой парой.

Map.entries() возвращает итератор, а не массив, для массива в результате стоит использовать другие методы

➡️ @code_ready | #функция #js

👨‍💻 Captcha generator

Автоматическая генерация рандомной капчи, присутствует проверка на правильность ввода кода.

Готовый код: Ссылочка

➡️ @code_ready | #кодпен

✅ Исправление орфографических ошибок

Code Spell Checker — это расширение для VSCode.
Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки, далее исправить их.

➡️ @code_ready | #плагин

👩‍💻 Вопрос с собеседования

Как реализованы принципы ООП в JavaScript, приведите примеры

Ответ:

1. Инкапсуляция — сокрытие деталей реализации объекта от внешнего мира. В JS инкапсуляция достигается с помощью замыканий и модулей.

function Counter() {
  let count = 0;
  this.increment = function() {
    count++;
  };
  this.getCount = function() {
    return count;
  };
}
const counter = new Counter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined

2. Наследование — возможность создавать новые классы на основе существующих. В JS наследование реализуется с помощью прототипов. Объект может наследовать свойства и методы от другого объекта, который называется его прототипом.

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};
function Cat(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
const cat = new Cat('Tom');
cat.sayName(); // My name is Tom

3. Полиморфизм — возможность использовать один и тот же интерфейс для разных типов данных. В JS полиморфизм реализуется с помощью переопределения методов и динамического типирования.

function drawShape(shape) {
  if (shape.type === 'circle') {
    console.log('Drawing a circle');
  } else if (shape.type === 'square') {
    console.log('Drawing a square');
  }
}
const circle = { type: 'circle' };
const square = { type: 'square' };
drawShape(circle); // Рисуем круг
drawShape(square); // Рисуем квадрат

4. Абстракция — способность скрывать детали реализации и предоставлять только необходимый интерфейс. В JS абстракция достигается с помощью интерфейсов и абстрактных классов.

function createAnimal(name, sound) {
  return {
    name: name,
    makeSound: function() {
      console.log(sound);
    }
  };
}
const cat = createAnimal('Cat', 'Meow');
const dog = createAnimal('Dog', 'Woof');
cat.makeSound(); // Meow
dog.makeSound(); // Woof

➡️ @code_ready | #техсобес

👩‍💻 Свойство mix-blend-mode

С помощью свойства mix-blend-mode, можно изменять способ смешивания цветов элемента с его фоновым изображением или цветом.

Принимает следующие значения:

• normal - элемент не смешивается с фоном (по умолчанию)
• multiply - умножение цвета элемента на цвет фона
• screen - инвертирование умножения инверсии цвета элемента на инверсию цвета фона
• overlay - смешивание multiply и screen, в зависимости от прозрачности элемента
• darken - использует более темный цвет из элемента или фона
• lighten - использует более светлый цвет из элемента или фона
• color-dodge - уменьшает насыщенность цвета фона в соответствии с цветом элемента
• color-burn - увеличивает насыщенность цвета фона в соответствии с цветом элемента

Остальные принимаемые значения оставлю в комментариях

➡️ @code_ready | #свойство #css

🖥 Как работает Object.create()?

Метод Object.create cоздает новый объект с указанным прототипом и свойствами.

Он принимает два аргумента: первый — объект, который будет прототипом для нового объекта.
Второй — необязательный, объект, содержащий свойства и их дескрипторы, которые будут добавлены в новый объект.

Если первый аргумент не передан или равен null, то новый объект будет создан с Object.prototype в качестве прототипа.

➡️ @code_ready | #функция #js

✅ Интерфейс выбора файлов

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

😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub

➡️ @code_ready | #github

📄 Примитивы в JavaScript - это миф?

В данной статье разберем как в JavaScript реализованы примитивные типы данных.

На примерах с графиками сравним выделения памяти для них и придем к неочевидному выводу

⛓ Ссылочка: https://habr.com/ru/articles/824614/

➡️ @code_ready | #статья

Doka — это полезный сайт для веб-разработчиков, предоставляющий исчерпывающие руководства и справочники по HTML, CSS и JavaScript.

⛓ Ссылочка: https://doka.guide/

➡️ @code_ready | #ресурсы

👩‍💻 Вопрос с собеседования

Как реализовать асинхронное программирование в JavaScript?

Ответ:

1. Использование колбэков: асинхронный код может быть реализован с помощью колбэков, которые выполняются после завершения асинхронной операции.

// Функция с колбэком
function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}
fetchData(data => {
  console.log(data); // Data received
});

2. Использование промисов: представляют результат асинхронной операции и могут находиться в одном из трёх состояний: ожидание, выполнено, отклонено.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}
fetchData().then(data => {
  console.log(data); // Data received
});

3. Использование async/await: предоставляет синтаксический сахар для работы с промисами, делая асинхронный код более читаемым.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
}
// Асинхронная функция с await
async function getData() {
  const data = await fetchData();
  console.log(data); // Data received
}
getData();

➡️ @code_ready | #техсобес

✅ Как работает Array,map() в JS?

Функция Array,map: Создает новый массив путем вызова указанной функции для каждого элемента исходного массива и собирает результаты в новый массив.

Она принимает один обязательный аргумент — это функция обратного вызова (callback), которая будет применена к каждому элементу исходного массива.

Callback может принимать до трёх аргументов:
• currentValue — екущий обрабатываемый элемент массива.
• index — Индекс текущего обрабатываемого элемента в массиве.
• array — Массив, по которому осуществляется проход.
• Также есть необязательный аргумент thisArg — значение, используемое в качестве this при вызове функции callback

Пример кода:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

➡️ @code_ready | #функция #js

✅ Создание списка дел

Приложение To-Do List позволяет создавать и управлять списком задач. Пользователь может добавить новую задачу, а также удалить уже существующую.

😸 Ссылочка на репозиторий:

https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/To%20Do%20List

➡️ @code_ready | #github

✅ Создание CSS-шаблона для html

eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.

➡️ @code_ready | #плагин

✅ Дополнительные фильтры для картинок

Мы уже рассмотрели многие фильтры для картинок свойства filter. Но остались ещё некоторые:

• Атрибут invert() инвертирует образцы во входном изображении. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью инвертирует).

• Атрибут saturate() насыщает изображение. Принимает от 0% (ненасыщенно) до 100% (оставляет входные данные неизменными). Но также он может принимать значения свыше 100%, обеспечивая сверхнасыщенные результаты.

➡️ @code_ready | #свойство #css