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

Как реализовать асинхронное программирование в 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

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

Какая разница между function declaration и function expression в JS?

Ответ:

Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.

➡️ @code_ready | #собеседование

OverAPI — это удобный сайт для программистов, предоставляющий коллекцию шпаргалок и документации по различным языкам программирования и технологиям.

⛓ Ссылочка: https://overapi.com/

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

👨‍💻 Аккордеон (FAQ)

Реализовано на HTML, CSS и JS

⛓ Ссылочка: https://codepen.io/Frontend-Portal/pen/LYvoxge

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

✅ Эффект свечения

Для его создания долго объяснять ничего не придется, главное понимать как работает Css свойство text-shadow, весь остальной код максимально простой.

В примере на картинке, мы используем этот код:

text-shadow: 0px 0px 14px rgba(255,255,255,0.7);

• Первые 2 параметра (0px, 0px) отвечают за то, на сколько тень будет смещаться по горизонтали и по вертикале.

• Третий параметр (14px) это радиус размытия тени.

• И последний это цвет тени (255,255,255), в нашем случае он белый. Последние цифры в rgba (0.7) это значение альфа-канала, которое определяет прозрачность цвета (значение от 0 до 1).

➡️ @code_ready | #css

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

Как организовать обработку ошибок в JavaScript?

Ответ:

1. Использование try...catch: Позволяет ловить и обрабатывать ошибки в блоке кода.

try {
  throw new Error('Что-то пошло не так');
} catch (error) {
  console.log(error.message); // Что-то пошло не так
}

2. Обработка ошибок в промисах: С помощью метода catch.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Обработка ошибки
fetchData().catch(error => {
  console.log(error.message); // Ошибка при получении данных
});

3. Обработка ошибок в async/await: Используется try...catch внутри асинхронных функций.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Асинхронная функция с await
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error.message); // Ошибка при получении данных
  }
}
getData();

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

✅ Готовый макет 2rism

Оставляю уже готовый макет с кодом:
Github (без адаптива) 😸

• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет

Ссылка на макет — Figma 👩‍💻

➡️ @code_ready | #github

html-css-javascript-projects — это репозиторий представляет собой сборник более 100 проектов для веб-разработки, включая готовые коды для создания лендингов, пользовательских интерфейсов и веб-приложений.

⛓ Ссылочка: https://github.com/solygambas/html-css-javascript-projects?tab=readme-ov-file

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

✅ Интерактивный конвертор валют

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

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

https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/Currency%20Converter

➡️ @code_ready | #github

👨‍💻 Форма с капчей

Реализовано на HTML, CSS и JS

⛓ Ссылочка: https://codepen.io/Frontend-Portal/pen/oNRbjXG

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