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

🤔 Какие типы данных существуют? Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🚩Примитивные типы: 🟠Number представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. 🟠String представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". 🟠Boolean имеет два значения, true и false, и используется для работы с логическими операциями. 🟠Undefined переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. 🟠Null специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. 🟠Symbol уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. 🟠BigInt тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🚩Объекты могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Ставь 👍 и забирай 📚 Базу знаний

Такого ещё не было - Битрикс24 со скидкой 30% на год - Плюс бонус 100 000 рублей на ИИ-помощника ✨Автоматизируйте задачи, не теряйте клиентов и экономьте деньги. Выгодно? — Да. Надо брать? — Однозначно. 🏃‍♂️Успей Акция действует до 30 апреля при покупке лицензии Битрикс24 на 12 месяцев, AI-помощник предоставляется за 1 ₽. Правила акции на сайте по ссылке: Узнать больше #реклама 16+ ai-sale.bitrix24.ru О рекламодателе

🎉 Easyoffer 2.0 — самый успешный краудфандинг в истории рунета в категории "Технологии"! Мы это сделали! За считанные часы после старта, благодаря вашей поддержке, проект не просто стартовал — он взлетел. 💸 Собрано: 2 276 840 рублей Это не просто цифра — это ваше доверие, ваша вера в идею, и ваша инвестиция в будущее карьеры сотен (а скоро — тысяч) специалистов. 💼 Благодаря этой сумме мы уже: — Наняли ещё пару разработчиков и аналитиков — Запустили активный сбор и разметку новых данных — Ускорили разработку и подняли планку качества Спасибо каждому, кто поверил в нас на старте! Дальше — только масштабирование и развитие. Мы строим сервис, который станет must-have для всех, кто ищет работу в IT. 👉 Присоединяйтесь сейчас — это только начало.

🤔 Что такое JSX? JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript, упрощая создание React-компонентов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🚀 Ваше IT-резюме — билет на собеседование. Оно точно работает? Рекрутеры пролистывают сотни резюме в день. Если ваше не зацепило за 10 секунд — его просто закроют. Как понять, что хотят видеть рекрутеры? Как попасть в топ кандидатов и обхитрить алгоритмы? Все ответы тут. Что вы получите: ✅ Раскрытие опыта так, чтобы было видно вашу реальную ценность ✅ Оптимизация резюме под поиск и ATS-фильтры, чтобы вас находили ✅ Правильная подача достижений и технологии, чтобы заинтересовать работодателя 🎯 Ваш опыт — это сильная сторона, важно уметь его показать! 👉 Отправьте резюме и получите БЕСПЛАТНЫЙ разбор!

Как топ-менеджер превратил GPT в "пояснительную бригаду" Александр — топ-менеджер в компании по разработке IT-решений. Иногда ему приходится лично включаться в конфликтные ситуации между клиентом и командой. Но прежде чем принимать решение, нужно разобраться: что вообще произошло? А это — десятки страниц переписок в почте, в чате, в таск-трекере. Чтение занимало часы. Теперь — 15 минут, максимум. На курсе GPT for Managers Александр научился использовать ChatGPT как "пояснительную бригаду". Он даёт модели историю общения — и получает краткое, понятное резюме: — В чём суть конфликта — Кто и что уже сделал — На каком этапе сейчас Это не магия. Это просто грамотная постановка задачи. Если вы тоже тонете в потоке информации — вас научат, как выйти сухим из воды. ⚡ Курс стартует скоро. Места ещё есть. Записаться онлайн #реклама 16+ gptmasters.ru О рекламодателе

🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. 🟠Ввод URL и начало запроса Пользователь вводит URL в адресную строку браузера. Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 🟠DNS-разрешение Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 🟠Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: Браузер отправляет SYN-пакет серверу. Сервер отвечает SYN-ACK пакетом. Браузер отправляет ACK-пакет, подтверждая установление соединения. 🟠HTTPS и SSL/TLS Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 🟠Отправка HTTP-запроса Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 🟠Получение и обработка HTTP-ответа Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 🟠Выполнение JavaScript После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. Ставь 👍 и забирай 📚 Базу знаний

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Чем можно создать контекст позиционирования? Контекст создают: - свойство position с отличным от static значением; - свойства transform, filter, perspective, will-change; - z-index (если задан на позиционированном элементе). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Крупнейший университет искусственного интеллекта Учим использовать ChatGPT в профессиональных целях, создавать нейро-сотрудников и зарабатывать на искусственном интеллекте. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя в наших рядах! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

Многофункциональные модули ввода / вывода ELHART Alpha X Нужно расширить ПЛК дополнительными входами/выходами? Ищете надежные модули RS-485 с Modbus RTU? Линейка ELHART Alpha-X – это: - Более 10 модификаций дискретных, аналоговых и комбинированных модулей; - Единая карта регистров для всех модулей; - Компактный корпус, ширина 18мм; - Питание и интерфейс RS-485 по шине; - Возможность настройки с помощью интерактивного конфигуратора; - До 31 модуля на одной шине; ⚡ Настройка адреса и скорости dip-переключателями; ⚡ Встроенные счётчики и частотомеры до 4 кГц; ⚡ Гальваническая изоляция интерфейса, входов и выходов от питания; ⚡ Точность измерения для унифицированных сигналов 0,1%, для датчиков температуры 0,25%; ⚡ Разработка и производство в РФ; Для тех, кто ценит функциональность и качество. Полная техническая поддержка. Узнать больше #реклама kipservis.ru О рекламодателе

🤔 Какие бывают state managers в React? В React существует несколько способов управления состоянием: - Локальное состояние: useState, useReducer — работают внутри одного компонента. - Context API — позволяет делиться данными между компонентами без пропсов. - Redux — централизованное хранилище с actions и reducers, подходит для крупных приложений. - Zustand — минималистичный менеджер, позволяет создавать глобальное состояние с простым API. - Recoil — атомарная модель состояния, поддерживает асинхронность. - MobX — реактивный подход с автообновлениями при изменении данных. - Jotai, XState, React Query — решают разные задачи: управление атомами, конечными автоматами, загрузкой данных. Выбор зависит от масштаба проекта и предпочтений команды. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⏳ Осталось всего 14 дней до завершения краудфандинга Сейчас самое подходящее время подключиться, если вы ждали или откладывали: Все, кто поддержат проект сейчас, до релиза, получат: 🚀 PRO-доступ на 1 год по цене месячной подписки ➕ Бета-доступ к EasyOffer 2.0 (конец мая) 👉 Поддержать: https://planeta.ru/campaigns/easyoffer

Обучение на Data Protection Officer (DPO) ⚡Обучение по защите персональных данных от практиков из Comply, ALUMNI Partners, Ozon, VK и др ✨ На курсе вы узнаете: » Узнаете все про работу с персональными данными » 152-ФЗ и трансграничную передачу данных 🎓Программа: » Управление рисками » Проверка регулятора » Составление документов Скидка до конца недели! Оставьте заявку сейчас и станьте ближе к успешной карьере юриста! ❤️ Узнать больше #реклама 16+ mosdigitals.ru О рекламодателе

🤔 Как оптимизировать страницы для печати? Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати. 🟠Использование `@media print` Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации) Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

🤔 С помощью каких методов мы можем мутировать объект? Мутировать объект можно: - Через прямое присваивание (добавление, изменение, удаление свойств). - С помощью методов: - Object.assign() — копирование свойств. - delete — удаление свойств. - Прямое обращение к свойствам — для изменения значений. - Добавление через obj[key] = value. Также можно использовать Object.defineProperty() для более точного управления свойствами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах. 🚩Progressive Enhancement (Прогрессивное улучшение) Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах. 🚩Graceful Degradation (Постепенное упрощение) Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров. Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox Приложение на React, но показываем простой HTML, если JavaScript отключён. Ставь 👍 и забирай 📚 Базу знаний