
🌸 Майская распродажа
Скидки до 70% в каталоге + дополнительно 3,5% по промокоду HAPPYMAY
В каталог
19.9

Frontend Interview - собеседования по Javascript / Html / Css
5.0
28
Интернет технологии
690
19
Поделиться
В избранное
Купить рекламу в этом канале
Формат:
keyboard_arrow_down
- 1/24
- 2/48
- 3/72
- 7 дней
1 час в топе / 24 часа в ленте
Количество:
keyboard_arrow_down
- 1
- 2
- 3
- 4
- 5
- 8
- 10
- 15
Стоимость публикации:
local_activity
3 356.64₽3 356.64₽local_mall
0.0%
Осталось по этой цене:0
Последние посты канала
Что такое z-index?
Это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (перпендикулярно экрану пользователя). Элементы с таким более высоким значением будут располагаться поверх элементов с более низким значением этого свойства, что позволяет управлять тем, как элементы перекрывают друг друга на странице.
Ключевые аспекты:
1. Работает только для элементов, у которых свойство
2.
3. Каждый элемент с установленным
4. Значение по умолчанию для него —
В этом примере элемент с классом
Важно помнить:
- Элементы с более высоким
- Безумное использование высоких значений
- Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их
👉 @frontendInterview
Это свойство, которое определяет порядок наложения элементов на веб-странице по оси Z (перпендикулярно экрану пользователя). Элементы с таким более высоким значением будут располагаться поверх элементов с более низким значением этого свойства, что позволяет управлять тем, как элементы перекрывают друг друга на странице.
Ключевые аспекты:
1. Работает только для элементов, у которых свойство
position
установлено как relative
, absolute
, fixed
, или sticky
. Для элементов с position: static
(значение по умолчанию) z-index
не применяется.2.
z-index
может принимать целые числа (включая отрицательные), где элементы с более высоким значением будут находиться выше элементов с более низким значением.3. Каждый элемент с установленным
z-index
создаёт новый контекст наложения для своих дочерних элементов. Это означает, что индекс дочерних элементов будет работать относительно их ближайшего родителя с позиционированием, а не всей страницы в целом.4. Значение по умолчанию для него —
auto
. Это означает, что элемент наследует порядок наложения своего родителя и не создаёт новый контекст наложения..background {
position: absolute;
z-index: 1; /* Задний фон /
}
.foreground {
position: absolute;
z-index: 2; / Передний план */
}
В этом примере элемент с классом
.foreground
будет отображаться поверх элемента с классом .background
из-за более высокого значения z-index
.Важно помнить:
- Элементы с более высоким
z-index
иногда могут блокировать доступ к элементам с более низким z-index
, например, при попытке взаимодействия с формой или кнопками.- Безумное использование высоких значений
z-index
(например, z-index: 99999
) может привести к сложностям с поддержкой и отладкой кода. Лучше использовать умеренные значения и хорошо продуманную структуру наложения.- Порядок элементов в HTML также влияет на их наложение. По умолчанию, элементы, которые идут позже в коде, будут располагаться поверх элементов, расположенных ранее, если их
z-index
не изменён.👉 @frontendInterview
693
09:02
12.05.2025
imageИзображение не доступно для предпросмотра
Проверка объединенных строк
На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.
Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.
Пример:
👉 @frontendInterview
На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.
Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.
Пример:
'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false
👉 @frontendInterview
769
16:07
11.05.2025
imageИзображение не доступно для предпросмотра
Не заставляйте меня думать. Веб-юзабилити и здравый смысл
Книга посвящена юзабилити веб-сайтов и мобильных приложений. Автор популярно, с примерами и иллюстрациями, объясняет, как сделать сайт или мобильное приложение, которым будет удобно пользоваться всем.
👉 @frontendInterview
Книга посвящена юзабилити веб-сайтов и мобильных приложений. Автор популярно, с примерами и иллюстрациями, объясняет, как сделать сайт или мобильное приложение, которым будет удобно пользоваться всем.
👉 @frontendInterview
825
10:03
11.05.2025
Можно ли перезапустить остановленный promise?
Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов.
Почему нельзя перезапустить Promise?
- Промис, как только выполняется, становится иммутабельным. После выполнения (
- Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.
Что делать, если нужно "перезапустить" асинхронную операцию?
Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.
Как это сделать с использованием `async/await`?
Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.
Повторная попытка выполнения промиса (ретрай)
Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.
👉 @frontendInterview
Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов.
Почему нельзя перезапустить Promise?
- Промис, как только выполняется, становится иммутабельным. После выполнения (
resolve
) или отклонения (reject
), он остаётся в этом состоянии навсегда.- Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.
const myPromise = new Promise((resolve, reject) => {
resolve('Done!');
});
myPromise.then((result) => console.log(result)); // "Done!"
// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)
Что делать, если нужно "перезапустить" асинхронную операцию?
Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.
function createPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Я новый промис!'), 1000);
});
}
// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"
// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)
Как это сделать с использованием `async/await`?
Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve('Данные загружены!'), 1000);
});
}
async function main() {
const data1 = await fetchData();
console.log(data1); // "Данные загружены!"
const data2 = await fetchData(); // "Перезапуск" fetchData
console.log(data2); // "Данные загружены!"
}
main();
Повторная попытка выполнения промиса (ретрай)
Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.
function fetchDataWithRetry(retries) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.7) { // 70% шансов на ошибку
resolve('Данные успешно загружены!');
} else {
reject('Ошибка загрузки данных');
}
}, 1000);
}).catch((error) => {
if (retries > 0) {
console.log(`Повторная попытка... Осталось: ${retries}`);
return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
} else {
throw error; // Если попытки исчерпаны, выбрасываем ошибку
}
});
}
fetchDataWithRetry(3)
.then((data) => console.log(data))
.catch((error) => console.error(error));
👉 @frontendInterview
972
16:04
10.05.2025
play_circleВидео недоступно для предпросмотра
1000
09:06
10.05.2025
imageИзображение не доступно для предпросмотра
Что делать, если устал быть фрилансером, а в найм не берут?
«Я мечтал быть свободным, а стал уставшим неврастеником» — такую фразу мне сказал Сергей на консультации. За его плечами — 4 года успешного фриланса в digital-сфере. В его кейсах — известные бренды, хорошие деньги и полная свобода. А ещё — отсутствие выходных, тревога, скачки дохода и выгорание. Он захотел «назад в офис», но получал вежливые отказы или полный игнор.
К сожалению, это довольно частая история. Фриланс — крутая ступень развития, но далеко не всегда конечная точка. Многие рано или поздно хотят вернуться в найм, и сталкиваются с рядом проблем. Давайте разберёмся, почему так происходит, и что с этим делать.
Почему люди вообще устают от фриланса? Причин на то несколько.
👉 @frontendInterview
«Я мечтал быть свободным, а стал уставшим неврастеником» — такую фразу мне сказал Сергей на консультации. За его плечами — 4 года успешного фриланса в digital-сфере. В его кейсах — известные бренды, хорошие деньги и полная свобода. А ещё — отсутствие выходных, тревога, скачки дохода и выгорание. Он захотел «назад в офис», но получал вежливые отказы или полный игнор.
К сожалению, это довольно частая история. Фриланс — крутая ступень развития, но далеко не всегда конечная точка. Многие рано или поздно хотят вернуться в найм, и сталкиваются с рядом проблем. Давайте разберёмся, почему так происходит, и что с этим делать.
Почему люди вообще устают от фриланса? Причин на то несколько.
👉 @frontendInterview
1100
16:06
08.05.2025
Как работает CSS will-change?
Свойство will-change позволяет заранее сообщить браузеру об изменениях (анимация, перемещение и т.д), которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений до того, как они произойдут. Это повышает скорость работы сайта.
will-change необходимо включить до изменения состояния элемента. Если применить это свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта.
Такой код не сработает:
Если изменение элемента происходит при клике на него, will-change можно включать при наведении курсора на элемент. Это даёт браузеру время подготовиться до того, как произойдёт изменение .
Если изменение происходит при наведении курсора на элемент, то можно включать will-change при наведении на родительский элемент:
🛠 Рекомендуется отключать will-change сразу после того, как закончится изменение элемента. Поэтому лучше назначать это свойство через JavaScript. Если назначить его через CSS, его невозможно будет убрать после выполнения изменения и оно будет продолжать расходовать ресурсы.
Иногда will-change допускается назначать через CSS. Это относится к часто используемым элементам (например, анимация кнопки или сайдбара) и к изменениям, которые происходят на странице постоянно (например, анимация, которая происходит при движении курсора мышки).
👉 @frontendInterview
Свойство will-change позволяет заранее сообщить браузеру об изменениях (анимация, перемещение и т.д), которые могут произойти с элементом. Так браузер успеет оптимизировать выполнение этих изменений до того, как они произойдут. Это повышает скорость работы сайта.
will-change необходимо включить до изменения состояния элемента. Если применить это свойство в процессе изменения состояния, оно не успеет сработать и не даст никакого эффекта.
Такой код не сработает:
/* Изменение элемента происхожит при наведении курсора */
.element:hover {
/* нужно подготовиться к изменению, которое уже происходит, код не сработает */
will-change: transform;
transition: transform 2s;
transform: rotate(30deg) scale(1.5);
}
Если изменение элемента происходит при клике на него, will-change можно включать при наведении курсора на элемент. Это даёт браузеру время подготовиться до того, как произойдёт изменение .
.element {
/* правила */
transition: transform 1s ease-out;
}
.element:hover {
/* браузер начинает готовиться к изменению состояния */
will-change: transform;
}
.element:active {
/* происходит изменение состояния */
transform: rotateY(180deg);
}
Если изменение происходит при наведении курсора на элемент, то можно включать will-change при наведении на родительский элемент:
.element {
transition: opacity 0.3s linear;
}
/* включаем will-change для элемента, когда мышка наводится на его родительский элемент */
.parent:hover .element {
will-change: opacity;
}
/* применение изменения, когда мышка наведена на элемент */
.element:hover {
opacity: 0.5;
}
🛠 Рекомендуется отключать will-change сразу после того, как закончится изменение элемента. Поэтому лучше назначать это свойство через JavaScript. Если назначить его через CSS, его невозможно будет убрать после выполнения изменения и оно будет продолжать расходовать ресурсы.
Иногда will-change допускается назначать через CSS. Это относится к часто используемым элементам (например, анимация кнопки или сайдбара) и к изменениям, которые происходят на странице постоянно (например, анимация, которая происходит при движении курсора мышки).
👉 @frontendInterview
1100
09:05
07.05.2025
Как уничтожить объект web worker?
В JavaScript, чтобы уничтожить объект
Зачем уничтожать Web Worker?
Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Как использовать `terminate()`?
Вы вызываете метод
Важно помнить
- После вызова
- Если есть обработчики событий, привязанные к worker (например,
- Доступ к worker после вызова
Когда еще уничтожается worker?
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
👉 @frontendInterview
В JavaScript, чтобы уничтожить объект
Web Worker
, необходимо использовать метод terminate()
. Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate()
объект worker больше не может быть использован.Зачем уничтожать Web Worker?
Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.
Как использовать `terminate()`?
Вы вызываете метод
terminate()
на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
Важно помнить
- После вызова
terminate()
worker полностью уничтожается и больше не может отправлять или получать сообщения.- Если есть обработчики событий, привязанные к worker (например,
onmessage
), они автоматически удаляются.- Доступ к worker после вызова
terminate()
не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен
Когда еще уничтожается worker?
Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
👉 @frontendInterview
1200
08:00
05.05.2025
Рост численности населения
В небольшом городе население в начале года составляет p0 = 1000 человек. Население регулярно увеличивается на 2 процента в год, и кроме того, в город приезжает 50 новых жителей в год. Сколько лет нужно городу, чтобы его население стало больше или равно p = 1200 жителей?
Более общие заданные параметры:
Функция nb_year должна возвращать n количество полных лет, необходимых для получения численности населения, большей или равной p.
aug - целое число, percent - положительное или нулевое плавающее число, p0 и p - положительные целые числа (> 0)
👉 @frontendInterview
В небольшом городе население в начале года составляет p0 = 1000 человек. Население регулярно увеличивается на 2 процента в год, и кроме того, в город приезжает 50 новых жителей в год. Сколько лет нужно городу, чтобы его население стало больше или равно p = 1200 жителей?
At the end of the first year there will be:
1000 + 1000 * 0.02 + 50 => 1070 inhabitants
At the end of the 2nd year there will be:
1070 + 1070 * 0.02 + 50 => 1141 inhabitants (** number of inhabitants is an integer **)
At the end of the 3rd year there will be:
1141 + 1141 * 0.02 + 50 => 1213
It will need 3 entire years.
Более общие заданные параметры:
p0, percent, aug (inhabitants coming or leaving each year), p (population to equal or surpass)
Функция nb_year должна возвращать n количество полных лет, необходимых для получения численности населения, большей или равной p.
aug - целое число, percent - положительное или нулевое плавающее число, p0 и p - положительные целые числа (> 0)
Примеры:
nb_year(1500, 5, 100, 5000) -> 15
nb_year(1500000, 2.5, 10000, 2000000) -> 10
👉 @frontendInterview
1100
16:06
04.05.2025
close
С этим каналом часто покупают
Отзывы канала
keyboard_arrow_down
- Добавлен: Сначала новые
- Добавлен: Сначала старые
- Оценка: По убыванию
- Оценка: По возрастанию
5.0
0 отзыва за 6 мес.
k
**ylov.v4d@*****.com
на сервисе с мая 2024
05.08.202412:31
5
Вежливый администратор, четкое соблюдение ТЗ
Показать еще
Новинки в тематике
Лучшие в тематике
Статистика канала
Рейтинг
19.9
Оценка отзывов
5.0
Выполнено заявок
62
Подписчики:
12.3K
Просмотры на пост:
lock_outline
ER:
5.3%
Публикаций в день:
2.0
CPV
lock_outlineВыбрано
0
каналов на сумму:0.00₽
Подписчики:
0
Просмотры:
lock_outline
Перейти в корзинуКупить за:0.00₽
Комментарий