Frontend | Вопросы собесов

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

Ставь 👍 и забирай 📚 Базу знаний

⚡️Слита База из 1000+ топовых курсов и материалов для айтишников 🖥 Python: @python_baza 👩‍💻 Frontend: @frontend_baza 👩‍💻 Backend: @backend_baza 🎨 Дизайн: @design_baza 📚 Книги: @archive_baza 👩‍💻 Топ GitHub: @main_it_baza Всё лучшее про IT бесплатно — уже на Базе 🚀

Ошибки в коде — ключ для атаки на веб-приложения Всего одна ошибка — и данные ваших клиентов могут оказаться в руках мошенников. Иногда достаточно одной неверной строчки кода, чтобы хакеры получили доступ к информации о пользователях. Чтобы этого не произошло, важно позаботиться о безопасности еще на начальном этапе разработки. Как это сделать, расскажут эксперты «Солара» и AppSec Solutions на вебинаре 18 февраля. Вы узнаете: ✅какие языки программирования наиболее уязвимы — исследования от AppSec Solutions, ✅как проверить веб-приложение и ПО на безопасность без навыка разработки, ✅какие новые возможности появились в Solar appScreener 3.15.0. Регистрируйтесь! Зарегистрироваться #реклама 16+ rt-solar.ru О рекламодателе

🤔 Почему React? 1. Компонентный подход: Упрощает создание и повторное использование UI-элементов. 2. Виртуальный DOM: Повышает производительность благодаря минимизации операций с реальным DOM. 3. Большая экосистема: Множество библиотек и инструментов для разработки. 4. Универсальность: Подходит как для веб-приложений, так и для мобильных (React Native). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

🤔 Опасности использования `innerHTML` в JavaScript innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода) Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy) Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое семантика? Это использование HTML-элементов в соответствии с их смыслом. Например: - <header> для заголовков. - <article> для статей. - Семантический HTML улучшает SEO, доступность и структуру кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Квартиры в ЖК SOKOLNIKI! Рассрочка до 2,5 лет, ПВ от 10% Видовые квартиры бизнес+ класса возле парка от 28 м² от 400 000 руб./м² Первый взнос от 10% Гибкие программы рассрочки до 2,5х лет с переходом в ипотеку Квартиры от 28м² до 135м² От студий до семейных фоматов с большими гостиными Колясочные на этаже Все для удобства родителей Дизайнерские лобби Стильные входные группы Подземный паркинг Системы хранения велосипедов и самокатов Детский сад Закрытая территория Девелопер STONE 18 лет на рынке недвижимости. 27 проектов м. "Сокольники", 12 мин. от парка Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО СЗ «КВАРТАЛ СОКОЛЬНИКИ». Финансовые услуги оказывает: ПАО "Совкомбанк". #реклама stone-sokolniki.ru О рекламодателе

🤔 Основные причины отказа от классовых компонентов в react? С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему. 🟠Меньше кода → чище и понятнее Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount) В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти) Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции. Создают экземпляры this Обрабатывают setState Хранят лишние связи и контексты Не создают this Используют только нужные данные Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props) Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React React официально рекомендует использовать функциональные компоненты Dan Abramov (разработчик React) Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов Классы не работают в React Server Components Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки Ставь 👍 и забирай 📚 Базу знаний

Все новости из мира программирования на этом канале @umnyiprogrammist Подписывайтесь, чтобы не упустите ничего важного Ставь 👍 и забирай 📚 Базу знаний

Профессиональная конференция по UX/UI 22 февраля в Москве пройдёт профильная UX/UI конференция для тех, кто проектирует и создаёт интерфейсы. 20+ экспертов топовых digital-агентств и RnD. 3 потока докладов. Кейсы от ведущих агентств. Активный нетворкинг. Афтепати в завершении дня. Программа и билеты на сайте. Узнать больше #реклама uxuiconf.ru О рекламодателе

🤔 Каким образом HTML превращается в страницу? 1. Загрузка: Браузер загружает HTML-документ. 2. Парсинг: HTML разбивается на DOM (Document Object Model). 3. Стилизация: CSS применяется к элементам DOM. 4. Рендеринг: Браузер рендерит элементы на странице, создавая визуальное представление. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Когда подрядчик тележится, добавляйте его в Коллабу Битрикс24 Коллабы – платформа для эффективной работы с подрядчиками. Тут обсуждения превращаются в задачи, а видео созвон можно собрать одной кнопкой. Любой проект можно разложить по полочкам с понятным ТЗ и обозначенными сроками. Работайте в Битрикс24 и создавайте Коллабы с подрядчиками. Начать #реклама 16+ collabs.bitrix24.ru О рекламодателе

🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.

class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

С DI (гибкость)

class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);

🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub).

const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔

С DI (можно подменить зависимость)

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(); // Нужно менять здесь
  }
}

С DI (добавляем новую зависимость без изменения кода UserService)

const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);

🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, 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));

Ставь 👍 и забирай 📚 Базу знаний

Системный администратор Linux с нуля Бесплатный курс от Selectel Старт — 1 марта Освойте администрирование Linux на SelectOS. После курса вы сможете: - управлять инфраструктурой на базе Linux; - работать с командной строкой и основными утилитами; - управлять пользователями, файлами и правами доступа; - настраивать сети, SSH-соединения и мониторинг системы; - управлять пакетами и обновлениями программного обеспечения; - анализировать логи и устранять инциденты. Смотреть #реклама 16+ promo.selectel.ru О рекламодателе

Ищу работу пол года Практически под каждым постом в этом канале я вижу комментарии от людей, которые ищут работу по полгода. Это перерастает в обсуждение того, как нужно (или не нужно) искать работу, почему процесс найма сломан и как они откликались на фейковые вакансии. Честно говоря, искать работу полгода — это нонсенс. Очевидно, что человек делает что-то не так. Главная ошибка, которую совершают многие, — это создание иллюзии поиска работы. То есть человек вроде бы ищет работу, но делает это неэффективно, тратя время на нецелевые действия. Например: ➖ Просматривает вакансии перед откликом. ➖ Пытается понять, подходит ли он под вакансию. Если считает, что не подходит — не откликается. ➖ Пишет сопроводительные письма (иногда даже уникальные под каждую вакансию). ➖ Заполняет анкеты, проходит тесты. Все эти действия отнимают время, но не приводят к результату. Почему это не работает? HR-менеджер не может вручную отсмотреть 2000 откликов, оценить каждое резюме и прочитать сопроводительные письма. Поэтому компании используют ATS-системы (системы автоматического подбора), которые анализируют резюме и определяют процент его соответствия вакансии. Что делать, чтобы повысить шансы? 1️⃣ Добавить ключевые навыки в резюме — и в основной текст, и в теги. Возьмите их с easyoffer.ru 2️⃣ Убрать нерелевантный опыт, оставить только подходящий. 3️⃣ Оформить опыт так, чтобы он выглядел релевантным. Если у вас его нет, укажите проекты, стажировки или другой опыт, который можно представить как работу от 1 года. Если опыт слишком большой, сузьте его до 6 лет. 4️⃣ Откликаться на все вакансии без разбору. Если вы Junior, не ищите только стажер или Junior-вакансии — пробуйте везде. Не отказывайте себе сами, пусть это решит HR 5️⃣ Сделать резюме публичным, потому что HR-менеджеры часто ищут кандидатов не только среди откликов, но и в базе резюме. 6️⃣ Используйте ИИ по минимуму – ATS-системы считывают это и помечают "сгенерировано ИИ" ‼️ Главное правило: чем больше откликов — тем выше шанс получить оффер. Делайте резюме удобным для ATS-систем, и вас заметят. 1. Посмотрите видео о том как я вывел свою резюме в Топ1 на HH 2. Посмотрите видео как я нашел первую работу 3. Прочитайте этот кейс про оптимизацию резюме Если прям вообще тяжело. Создайте несколько разных резюме. Создайте 2, 3 да хоть 10 резюме. Настройте авто-отлики и ждите приглашения на собесы. Не нужно создавать иллюзию поиска работы, сделайте несколько простых и актуальных действий.

🤔 Как происходит взаимодействие с Git? 1. Инициализация репозитория: Создается локальный репозиторий с помощью git init или клонируется существующий через git clone. 2. Изменение файлов: Вносятся изменения в файлы проекта. 3. Отслеживание изменений: Добавляются изменения в индекс с помощью git add. 4. Фиксация изменений: Изменения сохраняются в истории репозитория с помощью git commit. 5. Синхронизация: Изменения передаются на удаленный сервер (git push) или загружаются (git pull). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как css спрайты реализуются на странице или сайте? CSS-спрайты – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице. 🚩Зачем нужны спрайты? Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл Ускоряют загрузку сайта → меньше сетевой нагрузки Кэшируются в браузере → реже загружаются заново 🟠Создание CSS-спрайта Допустим, у нас есть 3 иконки: icon-home.png icon-user.png icon-settings.png Мы объединяем их в один файл (sprite.png): ![sprite] 🟠Использование спрайта с CSS Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

Ставь 👍 и забирай 📚 Базу знаний

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): БАЗА (4687 видео/книг): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++ (343 видео, 87 книги) — Java (176 видео, 32 книги) — Git (293 видео, 63 книги) — C# (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP (227 видео, 83 книги) — SQL/БД (163 видео, 29 книги) — Linux (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (129 видео, 73 книги) — QA (213 видео, 63 книги) — Rust (121 видео, 24 книги) — 1С (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложено в Telegram

🤔 Какие использовать препроцессоры? - Sass/SCSS: наиболее популярный и мощный для работы с CSS, поддерживает переменные, вложенность и миксины. - Less: подходит для интеграции с JavaScript-проектами. - Stylus: гибкий и минималистичный синтаксис, удобен для небольших проектов. - Выбор зависит от требований проекта и команды. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний