Available now! Telegram Research 2025 — the year's key insights 
Frontend | Вопросы собесов
Open in Telegram
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Show more📈 Analytical overview of Telegram channel Frontend | Вопросы собесов
Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 18 272 subscribers, ranking 7 328 in the Technologies & Applications category and 36 922 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 18 272 subscribers.
According to the latest data from 18 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -130 over the last 30 days and by -5 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 9.76%. Within the first 24 hours after publication, content typically collects 5.46% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 783 views. Within the first day, a publication typically gains 997 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 9.
- Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Thanks to the high frequency of updates (latest data received on 19 June, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
18 272
Subscribers
-524 hours
-307 days
-13030 days
Posts Archive
🤔 Какой метод используется для остановки распространения события в JavaScript?
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе
Что означает слово специфичность в css ?
Спросят с вероятностью 7%
Специфичность (specificity) — это механизм, который браузеры используют для определения приоритета применяемых стилей. Специфичность определяет, какие правила CSS будут применены к элементу, когда существуют конфликтующие правила. Она рассчитывается на основе различных типов селекторов, используемых в правиле CSS.
Основные концепции
1️⃣Типы селекторов и их веса:
Специфичность определяется по типу селекторов, и каждый тип имеет свой вес. В порядке увеличения специфичности:
✅Элементы и псевдоэлементы (
div, h1, p, ::before, ::after): вес 1.
✅Классы, атрибуты и псевдоклассы (.class, [type="text"], :hover, :nth-child): вес 10.
✅Идентификаторы (#id): вес 100.
✅Инлайновые стили (стили, заданные непосредственно в элементе с атрибутом style): вес 1000.
✅Важные правила (!important): не учитывают специфичность, а просто переопределяют другие правила.
2️⃣Правила вычисления специфичности:
Специфичность CSS выражается в виде чисел (a, b, c, d), где:
✅a — количество инлайновых стилей (1 или 0).
✅b — количество идентификаторов.
✅c — количество классов, атрибутов и псевдоклассов.
✅d — количество элементов и псевдоэлементов.
Примеры расчета специфичности
1️⃣Элементы и псевдоэлементы:
div { color: red; } /* Специфичность: 0, 0, 0, 1 */
p::before { content: ''; } /* Специфичность: 0, 0, 0, 2 */
.example { color: blue; } /* Специфичность: 0, 0, 1, 0 */
[type="text"] { color: green; } /* Специфичность: 0, 0, 1, 0 */
:hover { color: yellow; } /* Специфичность: 0, 0, 1, 0 */
#unique { color: orange; } /* Специфичность: 0, 1, 0, 0 */
<div style="color: purple;"></div> <!-- Специфичность: 1, 0, 0, 0 -->
#unique .example:hover { color: pink; } /* Специфичность: 0, 1, 1, 1 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specificity Example</title>
<style>
p { color: red; } /* Специфичность: 0, 0, 0, 1 */
.text { color: green; } /* Специфичность: 0, 0, 1, 0 */
#unique { color: blue; } /* Специфичность: 0, 1, 0, 0 */
.text#unique { color: orange; } /* Специфичность: 0, 1, 1, 0 */
</style>
</head>
<body>
<p class="text" id="unique">This is a paragraph.</p>
</body>
</html>.text#unique имеет наибольшую специфичность (0, 1, 1, 0).
Использование !important
Правила с ним имеют наивысший приоритет и могут переопределить даже те стили, которые имеют более высокую специфичность. Тем не менее, злоупотребление !important может затруднить управление стилями и отладку.
p { color: red !important; } /* Перебивает все другие правила */🤔 Какое из следующих ключевых слов используется для создания модуля в ECMAScript 6?
ТОП-4 Курса по UX/UI-дизайну по версии Tutortop
Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов.
Освойте востребованную профессию с нуля за 4-5 месяцев.
Соберите портфолио из 10+ проектов.
Выйдите на заработок 100 000₽+ и работайте удаленно в гибком графике.
Выбрать
#реклама 16+
tutortop.ru
О рекламодателе
Для чего нужен promiseall ?
Спросят с вероятностью 7%
Promise.all — это метод, который позволяет обрабатывать несколько промисов одновременно и возвращает один промис, который завершается, когда все переданные промисы либо выполнены, либо один из них отклонен. Он полезен для выполнения нескольких асинхронных операций параллельно и для управления их результатами.
Основные особенности
1️⃣Параллельное выполнение промисов:
Позволяет выполнять несколько асинхронных операций параллельно. Это особенно полезно, когда результаты этих операций независимы друг от друга.
2️⃣Единый промис в ответ:
Promise.all возвращает новый промис, который:
✅Завершается успешно, когда все промисы в массиве выполнены.
✅Отклоняется, если любой из промисов в массиве отклоняется.
3️⃣Сбор результатов:
Когда все промисы успешно выполнены, результирующий промис разрешается массивом результатов всех переданных промисов.
Синтаксис
Promise.all(iterable);const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results); // ['First', 'Second', 'Third']
})
.catch((error) => {
console.error('One of the promises failed:', error);
});Promise.all отклоняет весь результат.
const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, 'Error in Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
Promise.all([promise1, promise2, promise3])
.then((results) => {
console.log(results); // This line will not be executed
})
.catch((error) => {
console.error('One of the promises failed:', error); // 'Error in Second'
});Promise.all также можно использовать с async/await для более удобной работы с асинхронным кодом.
const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Second'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, 'Third'));
async function runPromises() {
try {
const results = await Promise.all([promise1, promise2, promise3]);
console.log(results); // ['First', 'Second', 'Third']
} catch (error) {
console.error('One of the promises failed:', error);
}
}
runPromises();Promise.all используется для выполнения нескольких асинхронных операций параллельно и возвращает один промис, который разрешается массивом результатов, если все промисы выполнены успешно, или отклоняется, если любой из промисов отклоняется. Это полезно для управления несколькими асинхронными задачами одновременно.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых🤔 Какое из следующих утверждений о Local Storage в браузере неверно?
В чем разница uselayuouteffect и useeffect ?
Спросят с вероятностью 7%
useEffect и useLayoutEffect — это хуки, которые позволяют выполнять побочные эффекты в функциональных компонентах. Оба они предназначены для выполнения кода после рендеринга компонента, но их поведение различается по времени выполнения и влиянию на рендеринг.
useEffect
✅Когда выполняется:
Выполняется после того, как браузер закончил обновлять DOM. Это означает, что все изменения в DOM уже произошли, и браузер уже отрисовал интерфейс.
✅Основное использование:
Используется для выполнения побочных эффектов, которые не блокируют отрисовку, таких как сетевые запросы, подписки на события, манипуляции с DOM (не критичные к рендерингу) и регистрация таймеров.
✅Поведение:
Не блокирует рендеринг. Это означает, что пользователь может видеть обновленный интерфейс перед выполнением побочного эффекта.
Пример:
import React, { useEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('useEffect: Выполняется после рендеринга');
document.title = `Вы нажали ${count} раз`;
return () => {
console.log('useEffect: Очистка');
};
}, [count]);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>Нажми меня</button>
</div>
);
}
export default Example;useLayoutEffect, будут видны пользователю до того, как браузер нарисует обновленный интерфейс.
✅Основное использование:
Используется для выполнения побочных эффектов, которые должны произойти до отрисовки интерфейса, таких как измерение размеров DOM-элементов, выполнение синхронных изменений в DOM, которые должны произойти перед отрисовкой, или выполнение операций, которые блокируют отрисовку.
✅Поведение:
Блокирует отрисовку до тех пор, пока эффект не будет выполнен. Это может привести к задержке в отображении интерфейса, если эффект выполняется долго.
Пример:
import React, { useLayoutEffect, useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
useLayoutEffect(() => {
console.log('useLayoutEffect: Выполняется после рендеринга, но перед отрисовкой');
document.title =раз</p>
<button onCl
return () => {
console.log('useLayoutEffect: Очистка');
};
}, [count]);
return (
<div>
<p>Вы нажали {count} раз</p>
<button onClick={() => setCount(count + 1)}>Нажми меня</button>
</div>
);
}
export default Example;useEffect выполняется асинхронно после того, как браузер обновил экран.
✅useLayoutEffect выполняется синхронно перед тем, как браузер обновит экран.
2️⃣Использование:
✅useEffect лучше подходит для побочных эффектов, которые не влияют на компоновку и отрисовку интерфейса.
✅useLayoutEffect лучше подходит для побочных эффектов, которые должны быть выполнены перед отрисовкой, таких как измерение или изменения в DOM.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых
Как повысить эффективность вебинаров?
Организация продающего вебинара - не простая задача, ведь необходимо предусмотреть множество деталей: удобную дату, вовлекающий контент, методы продвижения и взаимодействия с участниками.
Вебинары от МТС Линк помогают привлекать новых клиентов и увеличивать конверсию из участника в лид. В сервисе доступен анализ поведения пользователей во время вебинара, синхронный перевод, автовебинары и интерактивные инструменты для вовлечения участников.
Делимся методичкой с кейсами, чек-листами и инструкциями для маркетологов, PR и event-менеджеров, чтобы сделать вебинары эффективным инструментом для лидогенерации.
Получите методичку бесплатно на сайте.
Скачать
#реклама 16+
mts-link.ru
О рекламодателе
🤔 Какой метод JavaScript используется для создания глубоких копий объектов?
Для чего нужны map, set ?
Спросят с вероятностью 7%
Map и Set — это структуры данных, введенные в ECMAScript 6 (ES6), которые предоставляют дополнительные возможности и более гибкую работу с коллекциями данных по сравнению с традиционными объектами и массивами. Вот основные особенности и случаи их использования:
Map
Это структура данных, которая позволяет хранить пары ключ-значение и поддерживает любые типы данных в качестве ключей.
Основные особенности:
1️⃣Любые типы ключей:
В ней ключами могут быть любые значения, включая объекты, функции и примитивы. Это отличает Map от объектов, где ключи могут быть только строками или символами.
const map = new Map();
map.set('a', 1);
map.set(1, 'one');
map.set({}, 'object');
map.set(function() {}, 'function');
console.log(map);
map.keys(), map.values(), и map.entries(), что упрощает работу с коллекцией данных.
4️⃣Методы и свойства:
✅set(key, value): Добавляет новую пару ключ-значение в Map.
✅get(key): Возвращает значение, соответствующее ключу.
✅has(key): Возвращает true, если ключ присутствует в Map.
✅delete(key): Удаляет пару ключ-значение по ключу.
✅clear(): Очищает Map.
✅size: Возвращает количество элементов в Map.
Пример:
const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.get('name')); // Alice
console.log(map.has('age')); // true
console.log(map.size); // 2
for (const [key, value] of map) {
console.log(key, value);
}
// name Alice
// age 25Set каждое значение может присутствовать только один раз.
Основные особенности:
1️⃣Только уникальные значения:
Set автоматически удаляет дубликаты значений, что позволяет легко создавать коллекции уникальных элементов.
2️⃣Итерируемость:
Set поддерживает итерацию и имеет встроенные методы для работы с коллекцией данных.
3️⃣Методы и свойства:
✅add(value): Добавляет новое значение в Set.
✅has(value): Возвращает true, если значение присутствует в Set.
✅delete(value): Удаляет значение из Set.
✅clear(): Очищает Set.
✅size: Возвращает количество элементов в Set.
Пример:
const set = new Set();
set.add(1);
set.add(2);
set.add(2); // Дубликат не добавится
set.add(3);
console.log(set.has(2)); // true
console.log(set.size); // 3
for (const value of set) {
console.log(value);
}
// 1
// 2
// 3Map предоставляет более гибкую работу с парами ключ-значение, поддерживая любые типы данных в качестве ключей и сохраняя порядок вставки.
✅Set предоставляет коллекцию уникальных значений и автоматически удаляет дубликаты.
🔥 ТОП ВОПРОСОВ С СОБЕСОВ
🔒 База собесов | 🔒 База тестовых
Пикник для ИТ-специалистов в Коломенском
Отдохните в кругу опытных ИТ-специалистов. Будут лекции, музыка, мастер-классы, интерактив — и все это в один день. Ждем вас 17.08.
Зарегистрироваться
#реклама
it-picnic.ru
О рекламодателе
🤔 Какое свойство CSS используется для управления порядком наложения flex-элементов?
Подписывайтесь на канал с мемами для айтишников👇🏻
https://t.me/+zT1A6VPbNoAyMzQy
Что такое ts ?
Спросят с вероятностью 7%
TypeScript (TS) — это язык с открытым исходным кодом, разработанный и поддерживаемый Microsoft. Является строгой надстройкой над JavaScript, которая добавляет статическую типизацию и другие возможности, упрощая разработку больших и сложных приложений.
Основные особенности
1️⃣Статическая типизация:
Позволяет указывать типы переменных, параметров функций и возвращаемых значений. Это помогает выявлять ошибки на этапе компиляции, а не во время выполнения, что делает код более надежным и упрощает отладку
let age: number = 25;
let name: string = "Alice";
function greet(name: string): string {
return `Hello, ${name}`;
}
class Person {
private name: string;
constructor(name: string) {
this.name = name;
}
public greet(): void {
console.log(`Hello, my name is ${this.name}`);
}
}
const alice = new Person("Alice");
alice.greet(); // Hello, my name is Alice
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com"
};
// TypeScript
let message: string = "Hello, TypeScript";
// Компилированный JavaScript
var message = "Hello, TypeScript";
npm install -g typescript
tsc --init
tsconfig.json, в котором можно настроить параметры компиляции TypeScript.
3️⃣Создание TypeScript-файла:
// src/index.ts
const greet = (name: string): string => {
return Hello, ${name};
};
console.log(greet("TypeScript"));
tsc
index.js в папке dist или другой указанной папке.
5️⃣Запуск скомпилированного JavaScript-кода:
node dist/index.js
В SAP было удобно? А в ERP лучше, докажем!
Переводим с SAP, Navision, OeBS
на ERP за 3 месяца⚡⚡⚡
Опер. и фин. контуры по SCRUM:
*** Радикальное снижение «незавершенки» по проекту
*** Ориентация на добавление ценности
*** Wiki-документация
*** Кросс-функциональная команда
*** WIP-лимиты
*** Ежедневная обратная связь
*** Самоорганизация команды
*** Раннее обнаружение и ликвидация дефектов
Узнать больше
#реклама
nfp2b.ru
О рекламодателе
В чем отличие map от обычного объекта ?
Спросят с вероятностью 7%
Объекты и Map используются для хранения пар ключ-значение. Однако, у них есть различия, которые могут сделать
Map более подходящим для определенных задач по сравнению с обычными объектами. Вот основные отличия:
1️⃣Типы ключей
✅Объекты: Ключами могут быть только строки или символы. Другие типы, такие как числа или объекты, автоматически преобразуются в строки.
const obj = {};
obj[1] = 'one'; // Ключ преобразуется в строку '1'
console.log(obj['1']); // 'one'
const a = { key: 'a' };
const b = { key: 'b' };
obj[a] = 'value'; // Ключ преобразуется в '[object Object]'
console.log(obj['[object Object]']); // 'value'
const map = new Map();
map.set(1, 'one');
console.log(map.get(1)); // 'one'
const a = { key: 'a' };
const b = { key: 'b' };
map.set(a, 'valueA');
map.set(b, 'valueB');
console.log(map.get(a)); // 'valueA'
console.log(map.get(b)); // 'valueB'
for...in или методов Object.keys(), Object.values() и Object.entries().
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key, obj[key]);
}
Object.keys(obj).forEach(key => console.log(key, obj[key]));
map.keys(), map.values() и map.entries(). Эти методы возвращают итерируемые объекты.
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => console.log(key, value));
Map оптимизирован для частого добавления и удаления ключей и значений.
5️⃣Методы и свойства
✅Объекты: Не имеют встроенных методов для работы с коллекцией ключей и значений.
✅Map: Предоставляет множество встроенных методов, таких как set, get, has, delete, и свойства, такие как size.
const map = new Map();
map.set('key', 'value');
console.log(map.has('key')); // true
console.log(map.get('key')); // 'value'
map.delete('key');
console.log(map.size); // 0
const obj = { a: 1 };
console.log(obj.toString); // [Function: toString] - свойство унаследовано от Object.prototype
Map нет такой проблемы, так как он не использует цепочку прототипов для хранения данных.
const map = new Map();
map.set('a', 1);
console.log(map.toString); // [Function: toString] - метод самого Map, а не его данных
❓Если вам интересно
- Почему батчевые update могут вызывать дедлоки
- Что делать, если одни и те же данные нужны в нескольких сервисах
- Как эффективно осуществлять пагинацию, когда записей очень много
✅ То подписывайтесь на канал Senior Backend разработчика с авторскими статьями про проектирование, архитектуру, базы данных
