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

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

🤔 Зачем нам разбивать приложение отдельно на 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

Ответ от Backend

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

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

Летняя школа разработки интерфейсов Яндекса открывает прием заявок Прокачать скиллы фронтенд-разработки и поработать над реальными бизнес-задачами можно в Летней школе Яндекса. Это топовая возможность разобраться в тонкостях создания удобных и надёжных интерфейсов. Школа пройдет в два этапа: — со 2 июня по 27 июля участников ждут лекции и практические задания в онлайне — с 28 июля по 24 августа участники объединятся в полноценные фулстек-команды, чтобы поработать над реальными продуктами и фичами. Каждую группу будет сопровождать опытный наставник компании. Участие бесплатное, а лучшие смогут попасть на стажировку в Яндекс или даже получить офер. Не откладывайте, успевайте решить тестовое задание – прием заявок открыт до 27 апреля!

Я смотрю на эту цифру и до сих пор не верю. Когда я запускал этот проект, мне реально было страшно. Страшно, что ничего не получится. Что я и мой проект никому не нужен. Страшно, что все увидят, как я публично обосрался. Я ставил планку в 300т рублей. В самом позитивном сценарии 1млн. Но про 5 миллионов… даже мысли не было. Уже в первые часы стало понятно, что кампания идет не по плану. Сайт краудфандинга не выдержал нашей нагрузки и лег 😁 Особенно в последние три дня — просто какой-то разрыв! Я ощущал, как будто ловлю попутный ветер. В последний час не хватало 50к до 5 млн, и я уже думал сам их докинуть, чтобы красиво закрыть 😁 Но финальная сумма это не так важно. Самое главное это как мы её собрали. Это не инвестиции, не чьи-то деньги под условия и контроль, не кредит. Это вы поверили и поддержали меня напрямую. Вы дали мне возможность оставить за собой полный контроль над easyoffer. Я чувствую огромную ответственность и нервничаю из-за высоких ожиданий. А вдруг что-то пойдёт не так? А вдруг на релизе кому-то что-то не понравится? Именно поэтому я рад, что могу честно выйти на новый этап и без давления от левых инвесторов. В такие моменты вспоминаю, с чего всё начиналось. Как 2 года назад я писал свои первые посты на 500 человек о том, как учу программирование. Как записывал первое видео на YouTube про поиск работы. Как пилил первую версию easyoffer, вообще без понимания, что из этого выйдет. И сейчас я думаю — может, эта история вдохновит кого-то из вас. Может, кто-то запустит свой айтишный проект, найдёт поддержку и соберёт бабки на развитие. Было бы круто Спасибо за невероятную и колосальную поддержку ❤️ О такой аудитории как вы я не мог мечтать

Поддержка и доработка корпоративных сайтов ✅ Работаем с любыми CMS и фреймворками 👌 Наводим порядок в коде, следим за безопасностью ⚡ Быстро реагируем на обращения и качественно выполняем задачи ❤️ Гарантия на выполненные работы — 12 мес. Узнать больше #реклама njsoft.dev О рекламодателе

🚨 60 минут до финала Через час мы закроем краудфандинг easyoffer 2.0 Это последний шанс вписаться в самые выгодные условия. 👉 https://planeta.ru/campaigns/easyoffer

Финальный отсчёт: 3 часа до конца краудфандинга easyoffer 2.0! Это не просто скидка. Это шанс поддержать проект, который поможет и вам и тысячам айтишников готовиться к собеседованиям быстрее, эффективнее и увереннее. За последние недели: 💥 Нас поддержали уже больше 1450 человек; 🔥 Вместе собрали больше 4,5 млн. рублей на запуск проекта; Но сейчас важнее другое. ⏳ Через 3 часа всё закончится. – Больше не будет подписки за 3 200 руб. на целый год! – Не будет шанса первыми воспользоваться EasyOffer 2.0 на бета-тестировании Если вы: + Планируете менять работу в этом или следующем году; + Хотите иметь под рукой 40,000+ вопросов собеседований с разборами, видео-ответами и тренажёрами; + Хотите зафиксировать лучшую цену на целый год… (потом будет в 12 раз дороже) 👉 Тогда просто переходите и поддержите нас сейчас: https://planeta.ru/campaigns/easyoffer 📢 Три часа — и всё. Не откладывайте на потом. Спасибо всем, кто уже с нами! 💙

🤔 Какие есть операторы в JS? - Арифметические: +, -, *, /, % - Логические: &&, ||, ! - Сравнения: ==, ===, !=, <, > - Присваивания: =, +=, -= и др. - Тернарный: условие ? если true : если false - Побитовые, typeof, instanceof, in, delete Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⏳ Такого больше не будет! Всего пара часов и больше не будет возможности получить: 🚀 PRO подписку к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование 👉 Поддержать: https://planeta.ru/campaigns/easyoffer

Заработайте 3000Р за рекомендацию счёта для бизнеса Участвуйте в реферальной программе СберБизнеса и получите промокод на 3000 ₽ в Купер. Как это работает: ✅ Вы делитесь ссылкой на открытие счёта для бизнеса; ✅ Друг открывает счёт и пользуется им; ✅ Через 2 месяца вы получаете промокод на 3000 ₽ в Купер, а друг – 3000 ₽ на открытый счёт. Присоединяйтесь к реферальной программе СберБизнеса и зарабатывайте. Участвовать можно неограниченное количество раз. Узнать больше Финансовые услуги оказывает: ПАО Сбербанк. #реклама sberbank.com О рекламодателе

🤔 Как браузер понимает что ресурс нужно закешировать? Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить. 🚩Как браузер решает, кешировать ресурс или нет? Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.

HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"

🚩Как работают заголовки кэширования? 🟠`Cache-Control` – главный заголовок Определяет, как долго ресурс должен храниться в кэше.

Cache-Control: max-age=86400, public

🟠`Expires` – устаревший, но ещё используется Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.

Expires: Wed, 26 Feb 2025 12:00:00 GMT

🟠`ETag` – проверка обновлений ресурса Позволяет браузеру узнать, изменился ли файл на сервере.

ETag: "abc123"

Если браузер снова запрашивает ресурс, он отправляет заголовок

If-None-Match: "abc123"

🟠`Last-Modified` – альтернатива `ETag` Дата последнего изменения ресурса.

Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT

Браузер может отправить запрос с

If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT

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

⚡️ Дождались! Ребята сделали крутейший канал про Frontend Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами Подписывайтесь: @FrontendPortal

🚨 Последний шанс! Сегодня — последний день краудфандинга. Через несколько часов всё закроется, и больше невозможно будет поучаствовать. Если ты хотел, но откладывал — СЕЙЧАС самое время. Займёт 2 минуты, но изменит твой подход к собеседованиям надолго. Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование PRO подписка к easyoffer 2.0: ✅ Доступ к списку вопросов, которые задаются на собеседованиях + вероятность встречи этих вопросов + их фильтрация по грейдам, типам интервью, компаниям ✅ Доступ к лучшим ответам на вопросы ✅ Список самых частых задач, которые задаются на собеседовании + их фильтрация по грейдам и компаниям ✅ Доступ к лучшим ответам на задачи ✅ Список тестовых заданий компаний + лучшее решение ✅ Доступ к тренажеру "Проработка вопросов", который позволит очень быстро подготовиться к самым частым вопросам ✅ Доступ к тренажеру "Реальное собеседование", который позволит тренироваться проходить собеседование в конкретную компанию До конца кампании — остались часы. Поддержать: https://planeta.ru/campaigns/easyoffer 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

10 сервисов для команд в подписке VK WorkSpace - 159 ₽ Представьте: утро начинается не с поиска нужного файла по всем мессенджерам и почтовым ящикам, а с одного окна, в котором собраны все рабочие чаты, почта и календарь, видеоконференции и другие сервисы для работы. VK WorkSpace делает это реальностью для сотен российских компаний. Наша платформа объединяет самые необходимые инструменты для командной работы, адаптируясь под потребности как крупных корпораций, так и небольших команд: - Почта на домене; - Календарь; - Задачи; - Доска; - Диск; - Редактор документов; - Мессенджер; - Видеоконференции; - Заметки; - Опросы. Подключитесь сегодня, протестируйте целый месяц и откройте новые возможности для роста! Зарегистрироваться #реклама 16+ biz.mail.ru О рекламодателе

🤔 Для чего нужен UTC? - Универсальное время — база для сравнения. - Избегаем проблем с часовыми поясами. - В БД храним в UTC, отображаем в локали. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Завтра последний день! Краудфандинг заканчивается уже завтра, и второй попытки не будет. 👉 Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). 🚩Примеры использования 🟠`GET` – Получение данных Запрашиваем список пользователей:

GET /users HTTP/1.1
Host: api.example.com

Ответ (JSON)

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

🟠`POST` – Создание нового ресурса Отправляем данные нового пользователя:

POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}

Ответ (201 Created)

{
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}

🟠`PUT` – Полное обновление ресурса Заменяем пользователя с ID 1:

PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}

🟠`PATCH` – Частичное обновление ресурса Меняем только имя пользователя 1, не трогая email:

PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}

🟠`DELETE` – Удаление ресурса Удаляем пользователя с ID 2:

DELETE /users/2 HTTP/1.1
Host: api.example.com

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

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Какие есть подходы к адаптивности? - Media queries. - Flexbox / Grid. - Mobile-first дизайн. - rem, %, vw/vh вместо px. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⏳ Осталось 3 дня! Финальный отсчёт пошёл — осталось всего 3 дня до окончания краудфандинга easyoffer 2.0 Сейчас можно получить максимум пользы за минимальные деньги. После окончания кампании цены вырастут и вознаграждения станут недоступны. 👉 Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование Поддержи проект сейчас, чтобы не забыть! 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ