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 296 subscribers, ranking 7 338 in the Technologies & Applications category and 36 921 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 18 296 subscribers.
According to the latest data from 11 June, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -116 over the last 30 days and by -4 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 9.58%. Within the first 24 hours after publication, content typically collects 5.76% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 754 views. Within the first day, a publication typically gains 1 054 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 12 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 296
Subscribers
-424 hours
-497 days
-11630 days
Posts Archive
🤔 Как бы повернул блок на 45 градусов?
Чтобы повернуть блок на 45 градусов, используется свойство CSS
transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.
🚩Пример использования
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}transform: rotate(угол); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html> rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.
🚩Использование в реальных проектах
🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.
Ставь 👍 и забирай 📚 Базу знаний🤔 Для чего нужны props?
Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props.
Они позволяют:
- Делать компоненты гибкими и переиспользуемыми.
- Управлять поведением дочерних компонентов.
- Разделять логику отображения и данные.
Props неизменяемы — это защита от случайных изменений внутри компонентов.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Что такое нечистая функция?
Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой.
🚩Признаки нечистой функции
Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)
🚩Примеры нечистых функций
Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;
function increment() {
count += 1;
return count;
}
console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}
let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)function changeTitle(newTitle) {
document.title = newTitle;
}
changeTitle("Новая страница");
console.log(document.title); // "Новая страница"function getRandomNumber() {
return Math.random();
}
console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)addElement() (не меняет исходный массив)
function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}
let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)
Гайд МТС Линк для HRD и HRBP по улучшению онлайн-встреч
Как HRD и HRBP сократить отток на адаптации и повысить конверсию в закрытую вакансию?
Гайд МТС Линк: 37 страниц полезных материалов, чек-листов и кейсов для ускорения найма, упрощения адаптации и снижения нагрузки на HR-команду с помощью онлайн-встреч.
✅ В гайде:
- Как упростить рекрутинг и снизить нагрузку на HR-команду;
- Как ускорить адаптацию новичков и сократить отток на испытательном сроке;
- Как экономить время на обсуждение кандидатов с помощью ИИ-расшифровки созвонов в текст;
- Как системно прокачивать сотрудников разных уровней и отделов с помощью регулярных онлайн-тренингов;
- Как снизить текучесть без лишних затрат.
Бонус внутри: 5 способов не выгореть от бесконечных синков.
✨ Скачайте гайд бесплатно по ссылке
Скачать
#реклама 16+
mts-link.ru
О рекламодателе
🤔 Что такое мутации (mutations) в Vuex?
Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Когда брать абсолютные величины а когда относительные?
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
🚩Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
🚩Когда использовать
1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}.container {
width: 80%;
height: 50%;
}.text {
font-size: 1.2em;
margin: 1em;
}body {
font-size: 16px;
}
.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}.hero {
width: 100vw;
height: 100vh;
}.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}
.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}
Виртуальный сервер в аренду в Турции или России.
Отказоустойчивый виртуальный облачный сервер на базе виртуализации VMWARE по модели подписки.
- Бесплатная миграция инфраструктуры в Турцию
- Размещайте ресурсы в Турции или России и оплачивайте в рублях, турицких лирах или евро.
- Храните резервные копии данных за рубежом для минимизации рисков
- Продолжайте использовать импортное ПО, скачивайте обновления и патчи, общайтесь с техподдержкой
- Доступность сервиса — от 99,982% SLA
- Дата центры Tier III в России и Турции
- Почасовой биллинг и постоплата
Подключите услугу сегодня со скидкой 50% на инфраструктуру.
Подать заявку
#реклама
cloud4y.ru
О рекламодателе
🤔 Если у нас есть CSS, зачем существуют теги strong, center, etc?
Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Зачем нам разбивать приложение отдельно на backend и frontend?
Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.
🚩Почему лучше разделять?
🟠Гибкость и масштабируемость
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.
🟠Повышенная безопасность
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).
🟠Уменьшение нагрузки на клиент
Логика обработки данных выполняется на сервере.
Клиент получает уже готовые данные, а не загружает огромные файлы.
🟠Легче разрабатывать и тестировать
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.
🚩Как они общаются? (REST API & GraphQL)
Разделённые приложения общаются через API:
REST API (
GET, POST, PUT, DELETE)
GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры)
GET https://api.example.com/users[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]🤔 Если рассматривать HTML5 как открытую web-платформу, на чём она строится, из каких компонентов состоит?
HTML5 включает:
- Разметку и семантику (новые теги: article, nav, section);
- API (Canvas, Geolocation, Drag-and-Drop);
- Мультимедиа (<video>, <audio>);
- Storage (LocalStorage, SessionStorage, IndexedDB);
- Сетевые возможности (WebSocket, SSE, Fetch);
- Offline (Service Workers, Cache API);
- Формы и валидация (input types, pattern, required и т.д.).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как понимают изменение состояния mobxvue?
MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set).
🚩Как MobX делает состояние реактивным?
В MobX основная функция для создания реактивного состояния —
observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.
import { observable } from "mobx";
const store = observable({
count: 0,
increment() {
this.count++;
},
});
console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилосьobserver().
import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";
export default observer(defineComponent({
setup() {
return {
store,
};
},
template: `<div>{{ store.count }}</div>`,
}));store.count, MobX **"запоминает", что он зависит от count.
Когда count изменяется, MobX перерисовывает только этот компонент.
import { computed } from "mobx";
const store = observable({
count: 1,
get doubleCount() {
return this.count * 2;
},
});
console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)true.
import { autorun } from "mobx";
const store = observable({ count: 0 });
autorun(() => {
console.log("Count изменился:", store.count);
});
store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"🤔 В чём отличие синхронного кода от асинхронного?
Синхронный код выполняется пошагово. Асинхронный — может запускаться и завершаться позже, с использованием callback, promise или async/await.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Расскажи про области видимости
В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.
🚩Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
var globalVar = 'Я глобальная переменная';
function testFunction() {
console.log(globalVar); // Доступно
}
testFunction();
console.log(globalVar); // Доступноvar внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.
function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}
testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступнаlet и const, имеют область видимости, ограниченную ближайшим блоком {}.
if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}
console.log(blockVar); // Ошибка: переменная blockVar недоступнаimport и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.
export const myVar = 'Я переменная из модуля';import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"🤔 В чём отличие атрибутов от свойств в HTML-тегах?
Атрибуты — это то, что написано в HTML (<input value="hello">). Свойства — это то, что доступно в объекте DOM (input.value). Атрибут задаёт начальное значение свойства, но при изменении свойства атрибут не меняется автоматически.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Какие преимущества у di?
Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.
🚩Почему DI полезен?
🟠Уменьшает связность кода (Loose Coupling)
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.
class UserService {
constructor() {
this.db = new Database(); // Прямо создаем зависимость
}
getUser(id) {
return this.db.findUserById(id);
}
}class UserService {
constructor(db) {
this.db = db; // DI передает зависимость извне
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔class FakeDatabase {
findUserById(id) {
return { id, name: "Тестовый пользователь" };
}
}
const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);
console.log(userService.getUser(1)); // ✅ Тест без реальной БДMySQLDatabase, но решили перейти на MongoDatabase.
class UserService {
constructor() {
this.db = new MySQLDatabase(); // Нужно менять здесь
}
}const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);InversifyJS для JavaScript/TypeScript).
import "reflect-metadata";
import { Container, injectable, inject } from "inversify";
@injectable()
class Database {
findUserById(id) {
return { id, name: "База данных" };
}
}
@injectable()
class UserService {
constructor(@inject(Database) db) {
this.db = db;
}
getUser(id) {
return this.db.findUserById(id);
}
}
// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();
// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));Repost from easyoffer
Новая фича на easyoffer – Автоотлики
Вы автоматически откликаетесь на подходящие вам вакансии. Попробуйте её бесплатно и начните получать больше предложений о работе.
🚀 Запуск занимаем всего 3 минуты, а экономит очень много времени
🛡 Это безопасно: easyoffer официально одобрен HeadHunter и прошел его модерацию.
🥷🏻 Автоотклик незаметен для рекртера. Автоотклик ничем не отличается от обычного отклика, который вы делаете вручную
Рекрутеры давно используют автоматизацию для поиска кандидатов. Так почему вы должны откликаться вручную?
💡Совет – Добавьте шаблон сопроводительного письма, чтобы откликаться на большее количество вакансий (на некоторые вакансии нельзя откликнуться без сопроводительного)
Попробовать бесплатно → https://easyoffer.ru/autoapply
🤔 Для чего необходимы HTML, CSS, JS в вебе?
- HTML — структура контента.
- CSS — внешний вид, стилизация.
- JavaScript — интерактивность, логика, обработка событий.
Все три языка образуют основу фронтенд-разработки.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Бесплатный курс по дизайну: веб, графический и UX/UI
Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma!
Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰
Этот курс для тебя, если ты:
✅ мечтаешь о новой профессии в digital, но не знаешь, с чего начать;
✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества;
✅ полный новичок и хочешь систему, а не хаос;
✅ хочешь начать зарабатывать удалённо.
Зарегистрироваться
#реклама 16+
ydaev.ru
О рекламодателе
🤔 Что такое делегирование?
Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.
🚩Как работает делегирование?
Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});
// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);
Если ты ищешь работу в IT «как все» — готовься сидеть на 50–70к и жаловаться, что рынок перегрет.
Истина простая: hh и резюме в стиле «я джун без опыта» = путь в никуда, ведь 90% новичков остаются джунами навсегда.
Меня зовут Алексей Кириллин. Я прошёл путь от ноунейма до оффера на 300к+.
И я знаю, как реально устроиться на первую работу с зарплатой от 150к.
У себя показываю:
— вакансии, куда берут без опыта (но ты о них не знаешь, ведь они не на hh)
— схема прохождения собеседований, которая ломает сценарий рекрутера
— упаковка резюме так, чтобы тебя не скипали.
В закрепе — стратегия выхода на 150к без опыта, конкретный рабочий план.
Хочешь жирный оффер — ЖМИ
