Forwarded from Frontend | Вопросы собесов
Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.
Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
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);Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3🆒2⚡1
🤔 Что такое прототипы в JavaScript
- Прототипы позволяют объектам в JavaScript наследовать свойства и методы друг от друга.
- Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
- Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥4🆒2💯1
🤔 Для чего нуден key при работе со списками?
В React при рендере списков (например, через
🚩Почему `key` важен?
React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без
Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.
🚩Как использовать `key` правильно?
🚩Что будет без `key`?
Если не указать
Кроме того, при изменении списка возможны проблемы с перерисовкой
Ставь 👍 и забирай 📚 Базу знаний
В React при рендере списков (например, через
.map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. 🚩Почему `key` важен?
React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим.
Без
key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру.
🚩Как использовать `key` правильно?
const users = ["Alice", "Bob", "Charlie"];
function UserList() {
return (
<ul>
{users.map((user, index) => (
<li key={user}>{user}</li> // Хорошо, если `user` уникален
))}
</ul>
);
}
🚩Что будет без `key`?
Если не указать
key, React выдаст предупреждение: Warning: Each child in a list should have a unique "key" prop.
Кроме того, при изменении списка возможны проблемы с перерисовкой
{users.map((user, index) => (
<input key={index} defaultValue={user} />
))}Ставь 👍 и забирай 📚 Базу знаний
💯3🔥2
🤔 Как бы повернул блок на 45 градусов?
Чтобы повернуть блок на 45 градусов, используется свойство CSS
🚩Пример использования
🚩Объяснение
Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).
🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
🚩Пояснение
🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция
🚩Использование в реальных проектах
🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (
Ставь 👍 и забирай 📚 Базу знаний
Чтобы повернуть блок на 45 градусов, используется свойство CSS
transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.🚩Пример использования
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}🚩Объяснение
Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).
transform: rotate(угол);
🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.
<!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>
🚩Пояснение
🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция
rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.🚩Использование в реальных проектах
🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (
@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.Ставь 👍 и забирай 📚 Базу знаний
🔥4💯2⚡1🆒1
🛑Какие есть способы автоматизации в React?
- Сборка через Create React App, Vite или Next.js.
- Тестирование через Jest, React Testing Library, Cypress.
- Линтинг и форматирование через ESLint, Prettier.
- Документирование через Storybook.
- CI/CD через GitHub Actions, GitLab CI и др.
Ставь 👍
Забирай 📚 Базу знаний
- Сборка через Create React App, Vite или Next.js.
- Тестирование через Jest, React Testing Library, Cypress.
- Линтинг и форматирование через ESLint, Prettier.
- Документирование через Storybook.
- CI/CD через GitHub Actions, GitLab CI и др.
Ставь 👍
Забирай 📚 Базу знаний
Telegram
Frontend | Вопросы собесов
👾 1429 вопросов собесов на Frontend Developer
🔒 База реальных собесов
🔒 База тестовых заданий
👾 Список менторов
🖥 Frontend
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Тестировщик
├ Вопросы собесов
├ Вакансии
└ Тесты
🖥 Python
├ Вопросы собесов
├ Вакансии…
🔒 База реальных собесов
🔒 База тестовых заданий
👾 Список менторов
🖥 Frontend
├ Вакансии
├ LeetCode ответы
└ Тесты
🖥 Тестировщик
├ Вопросы собесов
├ Вакансии
└ Тесты
🖥 Python
├ Вопросы собесов
├ Вакансии…
🔥3💯2🆒2
🛑Чем заменить ES Modules / require?
- import() — динамический импорт.
- Сборщики: Webpack, Vite, Rollup.
- Системы типа AMD, UMD, IIFE (устаревшие, но рабочие).
- import() — динамический импорт.
- Сборщики: Webpack, Vite, Rollup.
- Системы типа AMD, UMD, IIFE (устаревшие, но рабочие).
🔥4🆒3
💯 Как происходит tostring?
Метод
🛑
Числа, строки, булевы значения,
Для примитивных типов
Но
Поэтому для них лучше использовать
🛑
Для массивов
🛑`toString()` у объектов
По умолчанию метод
Если нужно другое поведение, можно переопределить
🛑`toString()` у классов
Можно переопределять метод
🛑`toString()` у функций
Функции тоже имеют метод
Для стрелочных функций
🛑Использование
Метод
.toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🛑
toString() у примитивов Числа, строки, булевы значения,
null, undefinedДля примитивных типов
toString() работает просто — возвращает строковое представление значения:console.log((123).toString()); // "123"
console.log(true.toString()); // "true"
console.log(false.toString()); // "false"
console.log((3.14).toString()); // "3.14"
Но
null и undefined не имеют метода toString() и вызов приведёт к ошибкеconsole.log(null.toString()); // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка
Поэтому для них лучше использовать
String()console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
🛑
toString() у массивов Для массивов
toString() преобразует их в строку, разделяя элементы запятойconsole.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)
🛑`toString()` у объектов
По умолчанию метод
toString() у объекта возвращает строку вида [object Object]const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"Если нужно другое поведение, можно переопределить
toString() в объектеconst user = {
name: "Иван",
age: 30,
toString() {
return `Имя: ${this.name}, Возраст: ${this.age}`;
}
};
console.log(user.toString()); // "Имя: Иван, Возраст: 30"🛑`toString()` у классов
Можно переопределять метод
toString() в классахclass Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return ${this.name} (${this.age} лет);
}
}
const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"
🛑`toString()` у функций
Функции тоже имеют метод
toString(), но он возвращает их исходный кодfunction hello() {
return "Привет!";
}
console.log(hello.toString());
// "function hello() { return 'Привет!'; }"Для стрелочных функций
const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"
🛑Использование
// "123"вместо происходит tosЛучше использовать
String(значение), потому что toString() не работает на null и undefinedconsole.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42)); // "42"
console.log(String({ a: 1 })); // "[object Object]"
🔥5⚡3💯2🆒1
🛑Как Autoprefixer понимает, где поставить префиксы?
Он ориентируется на базу данных Can I Use и список браузеров, указанный в конфигурации проекта. На основе этих данных он определяет, какие свойства и где требуют префиксов.
Он ориентируется на базу данных Can I Use и список браузеров, указанный в конфигурации проекта. На основе этих данных он определяет, какие свойства и где требуют префиксов.
🔥7💯2⚡1
🛑 Как происходит процесс утечки?
Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него.
Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него.
🔥7⚡2💯1🆒1
🛑Что делает и для чего нужна функция Function.prototype.bind?
Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст.
Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст.
🔥6💯2⚡1🆒1
🛑Что происходит в момент запроса в браузере?
Браузер выполняет преобразование URL в IP через DNS, устанавливает соединение с сервером, отправляет HTTP-запрос и получает ответ, после чего обрабатывает данные и рендерит страницу.
🔥6💯3🆒1
🎓Hi, I'm a React ,NodeJS ,NextJS
developer.
🛑I've worked on real projects, I have 3 years of experience.
🫡For questions @Whults_14
developer.
🛑I've worked on real projects, I have 3 years of experience.
🫡For questions @Whults_14
🔥5🆒5💯2⚡1
Software developer 🧑💻 pinned «"Hi, I’m Bakhromov Abror — welcome to my portfolio. Built with HTML, Tailwind, JavaScript, React, and Redux to showcase my projects and skills." newww https://bakhromovvrez.onrender.com»
🧐Как общаться между iframe и самой страницой?
Общение между
Метода
Доступа к
Передачи данных через
🛑'postMessage` – безопасный способ для разных доменов
Метод
🛑Передача данных из `iframe` в родительскую страницу
*Код в
Код в родительской странице (index.html)
🛑Передача данных из родителя в
Код в родительской странице (index.html)
Код в
🛑Доступ кокнами (
Если
Родительская страница →
🛑`localStorage` или
Можно сохранять данные в
Запись в
Чтение
Общение между
iframe и родительской страницей может происходить с помощью: Метода
postMessage (лучший способ) Доступа к
window.frames или window.parent (если тот же домен) Передачи данных через
localStorage или cookies 🛑'postMessage` – безопасный способ для разных доменов
Метод
window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.🛑Передача данных из `iframe` в родительскую страницу
*Код в
iframe (child.html) // Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");
Код в родительской странице (index.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от iframe:", event.data);
});* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например: window.parent.postMessage({ type: "hello" }, "https://example.com");🛑Передача данных из родителя в
ame (child Код в родительской странице (index.html)
const iframe = document.getElementById("myIframe");
// Ждём, когда iframe загрузится
iframe.onload = () => {
iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};Код в
iframe (child.html) window.addEventListener("message", (event) => {
console.log("Получено сообщение от родителя:", event.data);
});🛑Доступ кокнами (
iframe, pи�Как общаться меж(только если тот же домен!) Если
iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.Родительская страница →
iframe const iframe = document.getElementById("myIframe");
// Получаем объект window внутриобщаться м
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";
iframe → Родительская страница console.log(window.parent.document.title); // Доступ к заголовку страницы
🛑`localStorage` или
cookies (если оба окна на одном домене) Можно сохранять данные в
localStorage или cookies, а другая сторона будет их читать. Запись в
localStorage из iframe localStorage.setItem("message", "Привет от iframe!");Чтение
localStorage в родительской странице console.log(localStorage.getItem("message")); // "Привет от iframe!"💯3🔥2
Forwarded from Frontend | Вопросы собесов
Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
💩 Frontend 🐍 Python
🐧 Linux 👩💻 С/С++
👩💻 C# 🤔 Хакинг & ИБ
📱 GitHub 🖥 SQL
👩💻 Сисадмин 🤟 DevOps
⚙️ Backend 🖥 Data Science
🧑💻 Java 🐞 Тестирование
🖥 PM / PdM 👩💻 GameDev
🧑💻 Golang 🤵♂️ IT-Митапы
🧑💻 PHP 💻 WebDev
🖥 Моб. Dev 🖥 Анали.(SA&BA)
👩💻 Дизайн 🖥 Нейросети
💛 1C 🤓 Книги IT
➡️ Сохраняйте в закладки
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7💯2
🧐Как можно гибко изменять размеры flex-элементов?
С помощью:
- flex-grow — распределение свободного пространства;
- flex-shrink — сжатие при нехватке места;
- flex-basis — базовая ширина перед распределением;
- или flex — сокращённой записи всех трёх параметров.
С помощью:
- flex-grow — распределение свободного пространства;
- flex-shrink — сжатие при нехватке места;
- flex-basis — базовая ширина перед распределением;
- или flex — сокращённой записи всех трёх параметров.
🔥4⚡2💯1🆒1
🧐В чём разница между системами, приближёнными к реальному времени, и системами реального времени на производстве?
- Системы реального времени (hard real-time) — критично соблюдают сроки отклика, любое опоздание недопустимо (например, в авиации, медицине, автоматике).
- Приближённые к реальному времени (soft real-time) — желательно быстрое выполнение, но небольшие задержки допустимы (например, стриминг видео, веб-приложения).
- Системы реального времени (hard real-time) — критично соблюдают сроки отклика, любое опоздание недопустимо (например, в авиации, медицине, автоматике).
- Приближённые к реальному времени (soft real-time) — желательно быстрое выполнение, но небольшие задержки допустимы (например, стриминг видео, веб-приложения).
🔥5💯2🆒1
🧐 Что такое хук?
Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect).
💯5🔥3⚡1🆒1
Forwarded from Frontend | Вопросы собесов
Вот отсортированная база с тонной материала (постепенно пополняется):
(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++/C#
(343 видео, 87 книги) — Java/QA
(176 видео, 32 книги) — Git/Linux
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP/1С
(227 видео, 83 книги) — SQL/БД
(114 видео, 77 книги) — Сисадмин
(107 видео, 43 книги) — BA/SA
(181 видео, 32 книги) — Go/Rust
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — Дизайн
(136 видео, 33 книги) — PM/HR
Скачивать ничего не нужно — все выложили в Telegram
Please open Telegram to view this post
VIEW IN TELEGRAM
💯6🆒4⚡1🔥1