Frontend | Вопросы собесов
رفتن به کانال در Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
نمایش بیشتر
📈 تحلیل کانال تلگرام Frontend | Вопросы собесов
کانال Frontend | Вопросы собесов (@easy_javascript_ru) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 17 310 مشترک است و جایگاه 7 485 را در دسته فناوری و برنامه‌ها و رتبه 37 823 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 17 310 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 07 نوامبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -292 و در ۲۴ ساعت گذشته برابر -16 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 6.40% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 4.41% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 1 107 بازدید دریافت می‌کند. در اولین روز معمولاً 764 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 4 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند ставь, браузер, html, border, flex تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 08 نوامبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامه‌ها تبدیل کرده‌اند.
17 310
مشترکین
-1624 ساعت
-907 روز
-29230 روز
آرشیو پست ها
\n\n2️⃣Именованные слоты:\n✅Позволяют вставлять содержимое в конкретные места внутри компонента.\n\n\n \n \n\n\n\n \n \n \n\n\n\n \n \n\n\n\n\n
Anonymous voting
Anonymous voting
Anonymous voting
Заголовок
\n \n \nПодвал
\n \n\n \n \n \n \n \n
\n\n\n\n\n3️⃣Слоты с областью видимости (Scoped Slots):\n✅Позволяют передавать данные из дочернего компонента в родительский через слот.\n\n{{ slotProps.message }}
\n \n\n
\n\n\n\n\nПреимущества\n\n1️⃣Гибкость:\n✅Слоты позволяют создавать более гибкие и многоразовые компоненты, которые можно адаптировать под различные контексты использования.\n\n2️⃣Повторное использование:\n✅Компоненты со слотами можно легко переиспользовать в различных частях приложения с разным содержимым.\n\n3️⃣Читаемость и структурирование кода:\n✅Использование слотов помогает лучше структурировать код, разделяя шаблоны компонентов и их содержимое.\n\n4️⃣Поддержка различных сценариев рендеринга:\n✅Слоты позволяют легко поддерживать различные сценарии рендеринга, такие как именованные и scoped слоты, что делает компоненты более мощными и универсальными.\n\nSvelte\n\nВ нем слоты также используются для вставки содержимого в компоненты.\n\nЭто вставленное содержимое!
\n
👾 1096 вопросов собесов на Frontend Developer
🔒 База реальных собесов
🔒 База тестовых заданий
👾 Список менторов
🖥 Frontend на каждый день
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
🖥 Python на каждый день
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 С/С++ на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 Kotlin на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 С# на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 Java на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 Swift на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
👩💻 PHP на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
🖥 Тестировщик на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Тесты для самопроверки
Список менторов
🖥 Data Science на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Тесты для самопроверки
Список менторов
👩💻 DevOps на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Тесты для самопроверки
Список менторов
👣 Golang на каждый день
Вопросы с собеседований
Вакансии с удалёнкой
Решение задач LeetCode
Тесты для самопроверки
Список менторов
⚙ Backend на каждый день
Вопросы с собеседований
Список менторов
Что такое ооп ?
Спросят с вероятностью 7%
Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом.
Основные концепции
1️⃣Классы и объекты
✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов.
Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
speak() {
console.log(`${this.name} издает звук.`);
}
}
const dog = new Animal('Рекс', 'Собака');
dog.speak(); // Рекс издает звук.class Person {
constructor(name, age) {
this.name = name;
let _age = age; // Приватное свойство
this.getAge = function() {
return _age;
}
this.setAge = function(newAge) {
if (newAge > 0) {
_age = newAge;
} else {
console.log('Возраст должен быть положительным числом.');
}
}
}
}
const person = new Person('Иван', 30);
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 35class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} издает звук.);
}
}
class Dog extends Animal {
speak() {
console.log(${this.name} лает.);
}
}
const dog = new Dog('Рекс');
dog.speak(); // Рекс лает.
4️⃣Полиморфизм
✅Позволяет методам выполнять разные действия в зависимости от объекта, который вызывает этот метод. Это достигается через переопределение методов в классах-наследниках.
```javascript
class Animal {
speak() {
console.log('Животное издает звук.');
}
}
class Dog extends Animal {
speak() {
console.log('Собака лает.');
}
}
class Cat extends Animal {
speak() {
console.log('Кошка мяукает.');
}
}
const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.🤔 Что такое макро и микро задачи?
Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач.
Ставь 👍 если знал ответ
🤔 Что не стоит писать в методе render?
Метод
render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.Какие методы http запросов знаешь ?
Спросят с вероятностью 7%
HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются:
1️⃣GET
Описание: Запрашивает данные с сервера.
Особенности:
✅Не изменяет состояние сервера (идемпотентный).
✅Параметры запроса передаются в URL.
✅Кэшируется.
✅Можно сохранить в закладках браузера.
GET /api/users?id=123 HTTP/1.1
Host: www.example.comPOST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "john.doe@example.com"
}PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"name": "John Doe",
"email": "john.doe@example.com"
}DELETE /api/users/123 HTTP/1.1
Host: www.example.comPATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
{
"email": "new.email@example.com"
}HEAD /api/users/123 HTTP/1.1
Host: www.example.comOPTIONS /api/users HTTP/1.1
Host: www.example.comCONNECT www.example.com:443 HTTP/1.1
Host: www.example.comTRACE /api/users HTTP/1.1
Host: www.example.comВ чем различие между строчными и блочными элементами ?
Спросят с вероятностью 7%
Различие между строчными (inline) и блочными (block) элементами заключается в их поведении на странице, а именно в том, как они занимают пространство и взаимодействуют с другими элементами.
Блочные элементы (Block Elements)
Основные характеристики:
1️⃣Занимают всю доступную ширину:
✅Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину контейнера, в котором он находится, по умолчанию.
2️⃣Можно задавать размеры:
✅Для блочных элементов можно задавать ширину (
width), высоту (height), внутренние отступы (padding), внешние отступы (margin).
3️⃣Вложенные элементы:
✅Блочные элементы могут содержать другие блочные и строчные элементы.
✅<div>
✅<p>
✅<h1>, <h2>, ..., <h6>
✅<ul>, <ol>, <li>
✅<header>, <footer>, <section>, <article>
Пример:
<div style="background-color: lightblue;">
Это блочный элемент.
</div>
<p style="background-color: lightgreen;">
Это тоже блочный элемент.
</p>padding) и внешние отступы (margin) применяются только по горизонтали, вертикальные отступы не изменяют размер строчного элемента, но могут влиять на расстояние между элементами.
3️⃣Только строчные вложенные элементы:
✅Внутрь строчных элементов можно вкладывать только другие строчные элементы.
Примеры строчных элементов:
✅<span>
✅<a>
✅<img>
✅<strong>
✅<em>
✅<input>
Пример:
<span style="background-color: lightcoral;">
Это строчный элемент.
</span>
<a href="#" style="background-color: lightgoldenrodyellow;">
Это тоже строчный элемент.
</a><div>
<h1>Заголовок</h1>
<p>Параграф текста внутри блочного элемента.</p>
</div><p>
Этот текст содержит <a href="#">ссылку</a> и <strong>жирный текст</strong>, которые являются строчными элементами.
</p>🤔 Вопрос: Какой тег HTML используется для вставки изображения?
Что такое слоты ?
Спросят с вероятностью 7%
Слоты — это механизм, используемый во фронтенд-разработке, особенно в компонентах, для предоставления гибких способов вставки содержимого в компоненты. Слоты позволяют передавать HTML-контент в компоненты и определять, где этот контент должен быть отрендерен. Они особенно полезны в библиотеке Vue.js, а также в других современных фреймворках, таких как Svelte.
Vue.js
Слоты используются для создания динамических и гибких компонентов.
1️⃣Базовый слот:
✅Позволяет вставлять произвольное содержимое в компонент.
<!-- Родительский компонент -->
<my-component>
<p>Это вставленное содержимое!</p>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script><!-- Родительский компонент -->
<my-component>
<template v-slot:header>
<h1>Заголовок</h1>
</template>
<template v-slot:footer>
<p>Подвал</p>
</template>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot> <!-- Слот по умолчанию -->
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {
name: 'MyComponent',
};
</script><!-- Родительский компонент -->
<my-component>
<template v-slot:default="slotProps">
<p>{{ slotProps.message }}</p>
</template>
</my-component>
<!-- Дочерний компонент -->
<template>
<div>
<slot :message="message"></slot>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Привет из дочернего компонента!',
};
},
};
</script><!-- Родительский компонент -->
<ChildComponent>
<p>Это вставленное содержимое!</p>
</ChildComponent>
<!-- Дочерний компонент (ChildComponent.svelte) -->
<script>
export let name;
</script>
<slot></slot>Привет! Хочешь научиться хорошо и быстро разрабатывать крутые сайты и проекты?
Тогда канал «Будни разработчика» для тебя!
Подпишись, и узнаешь:
➕ как влиться во фронтенд
➕ как организовать работу
➕ как писать хороший код
Ждём! ⬇️
🤔 Вопрос: Какой объект в JavaScript представляет окно браузера?
Большая конференция Яндекс Рекламы на ВТБ Арене
22 октября приглашаем маркетологов и специалистов по рекламе обсудить новые технологии и рекламные тренды. Ключевые участники рынка поделятся опытом и расскажут:
✅ Как развиваться специалистам в сфере рекламы
✅ Как продвигаться и продавать в интернете
✅ Какие тренды в маркетинге появляются сейчас
Вас ждут доклады на актуальные темы, конкурсы и возможности для нетворкинга.
Встречаемся 22 октября на ВТБ Арене. Будем вести прямую трансляцию — вы сможете посмотреть выступления, даже если не планируете приехать лично.
Конференция бесплатная, нужно только зарегистрироваться.
Зарегистрироваться
#реклама 16+
ya.rekonfa.ru
О рекламодателе
Что думаешь про ssr ?
Спросят с вероятностью 7%
Server-Side Rendering (SSR) — это метод рендеринга веб-страниц на сервере перед их отправкой в браузер клиента. В отличие от Client-Side Rendering (CSR), где основная работа по рендерингу выполняется на стороне клиента, SSR позволяет создать HTML-код страницы на сервере и отправить его уже готовым для отображения в браузере.
Преимущества
1️⃣Улучшение SEO:
✅Поисковые системы могут более эффективно индексировать страницы, так как они получают полностью рендеренный HTML-код.
✅SSR обеспечивает лучшую видимость для поисковых роботов, что важно для сайтов, ориентированных на SEO.
2️⃣Быстрое время до первого отрисовки (First Paint):
✅Пользователи быстрее видят начальное содержимое страницы, так как браузер получает готовый HTML.
✅Это может улучшить восприятие производительности и снизить показатель отказов.
3️⃣Социальные сети и предварительный просмотр:
✅SSR упрощает создание мета-тегов и содержимого для социальных сетей, что позволяет правильно отображать предварительный просмотр страниц при их шаринге.
4️⃣Лучший пользовательский опыт на медленных устройствах:
✅Так как большая часть вычислений выполняется на сервере, клиентские устройства с низкой производительностью быстрее отображают контент.
Недостатки
1️⃣Увеличение нагрузки на сервер:
✅Сервер должен обрабатывать и рендерить каждую страницу, что может требовать больше ресурсов по сравнению с CSR.
✅Это может потребовать более мощного серверного оборудования или масштабирования для обработки большого трафика.
2️⃣Увеличение времени отклика сервера:
✅Рендеринг страниц на сервере может занять дополнительное время, особенно для сложных страниц с большим количеством данных.
✅Это может привести к увеличению времени ответа сервера.
3️⃣Сложность настройки и поддержки:
✅Настройка SSR требует дополнительных знаний и усилий по сравнению с CSR.
✅Поддержка и отладка SSR-приложений может быть более сложной из-за необходимости управлять состоянием на сервере и клиенте.
4️⃣Гибридные решения могут быть сложными:
✅Комбинирование SSR с CSR для достижения оптимальной производительности и функциональности (например, использованием технологии Hydration) может усложнить архитектуру приложения.
Когда его использовать
1️⃣Контент, зависящий от SEO:
✅Блоги, новостные сайты, интернет-магазины и другие ресурсы, для которых важно быстрое и эффективное индексирование поисковыми системами.
2️⃣Быстрая первая отрисовка (First Paint):
✅Приложения, где важно быстрое отображение контента для улучшения пользовательского опыта и снижения показателя отказов.
3️⃣Социальные приложения:
✅Сайты, которые активно шарятся в социальных сетях и нуждаются в корректном отображении предварительных просмотров страниц.
Примеры
1️⃣Next.js для React:
✅Популярный фреймворк, который облегчает создание SSR-приложений на основе React.
✅Поддерживает гибридные приложения с SSR для начальной загрузки и CSR для последующего взаимодействия.
2️⃣Nuxt.js для Vue.js:
✅Фреймворк, предоставляющий мощные возможности для SSR с использованием Vue.js.
✅Упрощает создание универсальных приложений с возможностью переключения между SSR и CSR.
SSR рендерит страницы на сервере, улучшая SEO и скорость начальной загрузки, но увеличивает нагрузку на сервер и сложность настройки. Подходит для сайтов с критичным SEO и быстрым отображением контента, например, блоги и интернет-магазины.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Хочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend tests & tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @Frontend_tasks
🤔 Какой объект JavaScript предоставляет функциональность для работы с URL текущего документа?
Ваши товары станут заметнее в поиске Яндекса
Яндекс Товары — сервис для аналитики и роста продаж интернет-магазинов. Подробнее ⚡
Попробовать
#реклама
merchants.yandex.ru
О рекламодателе
Когда брать абсолютные величины а когда относительные ?
Спросят с вероятностью 7%
Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы.
Абсолютные величины (например, px, pt, cm, in)
Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.
Когда использовать:
1️⃣Пиксели (`px`):
✅Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
✅Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
✅Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}.container {
width: 80%;
height: 50%;
}.text {
font-size: 1.2em;
margin: 1em;
}<html>), что обеспечивает более предсказуемое масштабирование.
✅Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
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; /* Относительный внешний отступ */
}px) используются для точных размеров и фиксированных элементов. Относительные величины (%, em, rem, vw, vh) подходят для адаптивных макетов и элементов, которые должны изменяться в зависимости от размеров родителя или вьюпорта.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых🤔 Какой JavaScript метод используется для добавления элемента в начало массива?
Регистрируйтесь на главную конференцию Yandex Cloud!
Большая конференция Yandex Cloud для тех, кто создаёт цифровые продукты и решения.
Вас ждут 5 тематических треков, 31 доклад, 50 экспертов, нетворкинг и общение.
Участие бесплатное!
Зарегистрироваться
#реклама 16+
scale.yandex.cloud
О рекламодателе
