Generate range of integers

Реализуйте функцию generateRange, которая принимает три аргумента (start, stop, step) и возвращает диапазон целых чисел от start до stop(включительно) с шагом step

start < stop
step > 0

Пример:

(1, 10, 1)  //  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
(-10, 1, 1)  //  [-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1]
(1, 15, 20)  //  [1]

👉 @frontendInterview

​Что такое hoisting?

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

Hoisting переменных
Для переменных, объявленных с использованием var, только само объявление поднимается, а присвоение значения остается на своем месте. Это может привести к неожиданным результатам.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

Интерпретируется как:

var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5

Переменные, объявленные с помощью let и const, также поднимаются, но находятся в так называемой "временной мертвой зоне" (temporal dead zone, TDZ) до тех пор, пока выполнение кода не дойдет до строки их объявления. Попытка доступа к таким переменным до их объявления вызывает ошибку.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
console.log(b); // 10

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 15;
console.log(c); // 15

Hoisting функций
Функции, объявленные с помощью function declaration, полностью поднимаются — как объявление, так и их определение. Это позволяет вызывать функции до их объявления в коде.

hoistedFunction(); // "This function is hoisted"

function hoistedFunction() {
  console.log("This function is hoisted");
}

Функции, объявленные как function expression, ведут себя иначе. Только объявление переменной поднимается, но не ее присвоение. Это значит, что вы не можете вызвать такую функцию до ее фактического объявления.

hoistedFunctionExpression(); // TypeError: hoistedFunctionExpression is not a function

var hoistedFunctionExpression = function() {
  console.log("This function is not hoisted");
};

Важные моменты
- Переменные, объявленные с помощью var, поднимаются, но их значение становится undefined до присвоения.
- Переменные, объявленные с помощью let и const поднимаются, но остаются недоступными до фактического объявления в коде, что вызывает ошибку при доступе.
- Функции, объявленные как function declaration, полностью поднимаются и могут быть вызваны до своего объявления.
- Функции, объявленные как function expression, поднимаются только как переменные, а присвоение происходит на месте, что делает их недоступными до присвоения.

👉 @frontendInterview

👉 @frontendInterview

scroll-snap-stop

Свойство scroll-snap-stop определяет, должен ли скролл обязательно останавливаться в каждой точке привязки при прокрутке.

Пример

.element {
  scroll-snap-stop: always;
}

Возможные значения scroll-snap-stop:
- normal — прокрутка может проскочить несколько элементов, значение по умолчанию;
- always — прокрутка должна остановиться на каждом элементе.

Попробуйте прокрутить каждый из контейнеров в демо с небольшим ускорением. Эффект от свойства можно увидеть на тач-экранах или устройствах с тачпадом.

👉 @frontendInterview

React и графики: 8 библиотек для визуализации данных

Сегодня хочу поговорить о визуализации данных в React: какую библиотеку выбрать, чтобы было красиво и без проблем? Recharts, Visx, Nivo, ECharts или, может, что-то еще? Давайте разбираться! В посте оценим восемь разных библиотек: возможности, плюсы и минусы. Поехали!

👉 @frontendInterview

Жиза

👉 @frontendInterview

​Что такое DNS?

DNS (Domain Name System) — это система, которая переводит доменные имена, понятные человеку, в IP-адреса, понятные компьютерам и сетевым устройствам. Основная задача DNS — облегчить доступ к ресурсам в Интернете, позволяя использовать легко запоминаемые доменные имена вместо сложных числовых IP-адресов.

Основные функции
- Основная функция DNS заключается в преобразовании доменных имен (например, www.example.com) в соответствующие им IP-адреса (например, 93.184.216.34), чтобы веб-браузеры и другие интернет-клиенты могли находить и обращаться к нужным ресурсам.

- Обратное разрешение (Reverse DNS) — это процесс преобразования IP-адресов обратно в доменные имена. Это используется для проверки подлинности или при проведении сетевой диагностики.

Как он работает
Процесс разрешения доменного имени включает несколько этапов и компонентов:

1. Введение DNS-кэша: Браузер и операционная система сначала проверяют свои локальные кэши на наличие записи о недавно разрешенном доменном имени. Если запись найдена и не истекла, используется закэшированный IP-адрес.

2. Запрос к DNS-серверу: Если локальный кэш не содержит нужной записи, запрос отправляется к DNS-серверу вашего интернет-провайдера (ISP) или другого конфигурируемого DNS-сервера (например, Google Public DNS).

3. Рекурсивный запрос:
- DNS-сервер провайдера может выполнять рекурсивный запрос, запрашивая информацию у других DNS-серверов, если он сам не знает ответа. Этот процесс включает несколько шагов:
- Запрос к корневому DNS-серверу.
- Корневой сервер направляет к DNS-серверу верхнего уровня домена (TLD, например, .com, .org).
- Сервер верхнего уровня направляет к авторитетному DNS-серверу конкретного домена.

4. Авторитетные DNS-серверы:
Авторитетный DNS-сервер для домена (например, example.com) содержит окончательную информацию об IP-адресе для запрашиваемого доменного имени и возвращает её DNS-серверу провайдера.

5. Ответ клиенту:
DNS-сервер провайдера кэширует полученный IP-адрес и отправляет его обратно клиенту (вашему браузеру или операционной системе).

6. Доступ к ресурсу:
Клиент использует полученный IP-адрес для установления соединения с нужным сервером и получения запрашиваемых данных.

Допустим, вы вводите в браузере www.example.com:
- Браузер проверяет локальный DNS-кэш.
- Если записи нет, браузер отправляет запрос на DNS-сервер провайдера.
- DNS-сервер провайдера выполняет рекурсивный запрос:
- Запрашивает корневой DNS-сервер.
- Корневой сервер направляет к серверу TLD .com.
- Сервер TLD направляет к авторитетному DNS-серверу example.com.
- Авторитетный DNS-сервер example.com возвращает IP-адрес, например, 93.184.216.34.
- DNS-сервер провайдера кэширует этот IP-адрес и возвращает его браузеру.
- Браузер устанавливает соединение с сервером по IP-адресу 93.184.216.34 и загружает страницу.

👉 @frontendInterview

Многопоточный javascript

Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.

👉 @frontendInterview

Sum of two lowest positive integers

Создайте функцию, которая возвращает сумму двух наименьших положительных чисел, заданную массивом из минимум 4 положительных целых чисел. Никаких плавающих или неположительных целых чисел передаваться не будет. Например, при передаче массива [19, 5, 42, 2, 77] на выходе должно получиться 7.

При передаче массива [10, 343445353, 3453445, 3453545353453] должно быть возвращено 3453455.

👉 @frontendInterview

​Чем синхронный код отличается от асинхронного ?

Синхронный и асинхронный код отличаются тем, как они выполняются и управляют операциями ввода-вывода, временем ожидания и выполнением задач. Давайте рассмотрим их различия подробно.

Синхронный код
Выполняется последовательно, строка за строкой. Это означает, что каждая операция должна завершиться, прежде чем начнется следующая. Если одна операция занимает много времени (например, запрос к серверу или чтение файла), выполнение всей программы будет приостановлено, пока эта операция не завершится.

Пример синхронного кода:

function syncTask() {
  console.log('Начало');
  for (let i = 0; i < 1000000000; i++) { /* Длительная операция */}
  console.log('Конец');
}

syncTask();
console.log('Это будет выполнено после syncTask');

В этом примере, пока длительная операция (цикл) не завершится, программа не продолжит выполнение и следующий console.log не будет вызван.

Асинхронный код
Позволяет выполнять другие операции, не дожидаясь завершения текущих долгих операций. Это особенно полезно для задач ввода-вывода, работы с сетью и других операций, которые могут занять значительное время. Обычно используют коллбеки, промисы или async/await для обработки результата по завершении.

С использованием коллбеков:

console.log('Начало');

setTimeout(() => {
  console.log('Асинхронная операция');
}, 1000);

console.log('Конец');

В этом примере setTimeout ставит задачу на выполнение через 1 секунду, но код продолжает выполняться дальше, и console.log('Конец') вызывается до завершения асинхронной операции.

С использованием промисов:

console.log('Начало');

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Асинхронная операция завершена');
  }, 1000);
}).then(message => {
  console.log(message);
});

console.log('Конец');

С использованием async/await:

console.log('Начало');

async function asyncTask() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('Асинхронная операция завершена');
}

asyncTask();
console.log('Конец');

Основные отличия
- Синхронный код: Выполняется последовательно. Каждая операция должна завершиться до начала следующей.
- Асинхронный код: Позволяет выполнять другие операции, пока текущая не завершится.

- Синхронный код: Может блокировать выполнение всей программы, если операция длительная.
- Асинхронный код: Не блокирует выполнение программы. Другие операции могут выполняться параллельно.

- Синхронный код: Время ожидания одной операции может замедлить всю программу.
- Асинхронный код: Ожидание длительных операций не мешает выполнению других задач.

- Синхронный код: Проще для понимания и отладки, так как выполняется последовательно.
- Асинхронный код: Может быть сложнее для понимания из-за необходимости управления состоянием и ожиданием результатов асинхронных операций.

👉 @frontendInterview

AbortController в JavaScript

Сегодня мы рассмотрим интересный инструмент в JS. AbortController в JS — инструмент, который позволяет отменять асинхронные операции в любой момент. В этой статье разберёмся, как он работает, где пригодится и какие у него есть проблемы.

👉 @frontendInterview

Я устроился на работу в 2025 году, и вот как это вышло

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

👉 @frontendInterview

Почувствуйте всю боль удалёнщиков. Не каждый вывезет такое...

👉 @frontendInterview

​Какие существуют способы центрирования в CSS?

Центрирование элементов может быть выполнено несколькими способами, в зависимости от типа элемента (блочный или строчный), его размеров и родительского контейнера. Вот основные методы центрирования элементов по горизонтали и вертикали:

Центрирование по горизонтали

1. Использование `text-align` для строчных и встроенно-блочных элементов

.container {
  text-align: center;
}

2. Использование margin: auto для блочных элементов с фиксированной шириной

.element {
  width: 50%;
  margin: 0 auto;
}

Комбинированное центрирование (по горизонтали и вертикали)

1. Flexbox - Удобен для центрирования по обеим осям.

.container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

2. Grid Layout - Предоставляет способ центрирования по горизонтали и вертикали с использованием place-items.

.container {
  display: grid;
  place-items: center; /* Центрирование по горизонтали и вертикали */
  height: 100vh; /* Высота контейнера */
}

HTML:

<div class="container">
  <div>Центрированный элемент</div>
</div>

3. Абсолютное позиционирование - В сочетании с трансформацией.

.container {
  position: relative;
  height: 100vh; /* Высота контейнера */
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование с учетом размеров элемента */
}

HTML:

<div class="container">
  <div class="element">Центрированный элемент</div>
</div>

👉 @frontendInterview