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

🤔

Какие основные вещи присущи HTML?

HTML задаёт структуру документа: заголовки, параграфы, списки, изображения, формы. В HTML важны семантика, вложенность, правильное использование тегов и атрибутов. Он обеспечивает основу, на которую накладываются стили и поведение.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11🔥2

3.47K views16:10

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

🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент?

В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла.

🚩

Пример в Vue 2

Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

Компонент (MyComponent.vue)

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Вывод в консоль при создании компонента

Миксин: created
Компонент: created

Vue 3: хуки вызываются так же
Если использовать setup(), он выполнится после хуков миксина

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Вывод в консоль

Миксин: mounted
setup()
Компонент: mounted

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5

3.14K views09:10

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

Forwarded from easyoffer

Офигеть, вот это поддержка! 🔥

Скажу честно: когда я планировал запуск краудфандинговой кампании, в голове были разные варианты развития событий. Думал — ну, наверное, получится собрать 300 тысяч. В самом идеальном сценарии — может быть, миллион.

Но больше всего я боялся, что запущу кампанию, и не получится собрать даже 300 т. Это был бы провал. Так много усилий, времени и денег вложено в проект… и если бы всё закончилось ничем — это бы сильно демотивировало.

Но, ребята, мы превысили изначальную цель в 10 раз —
3 031 040 рублей! 🤯

Вся эта кампания — это одна большая проверка бизнес-модели на прочность. И я супер рад, что запустил всё публично. Люди видят, что EasyOffer реально нужен. Теперь нет сомнений — проект актуален, он будет прибыльным и будет развиваться.

Мне приходит огромное количество сообщений в личку: кто-то когда-то давно пользовался сайтом, он помог с трудоустройством, и сейчас они уже не ищут работу — но всё равно поддержали.
Это прям очень круто и трогательно.

Никак не могу отделаться от мысли, что easyoffer — это ведь мой первый сайт. Учебный, пет-проект, просто для портфолио. И вот что из него вышло. Просто офигеть.

Я не зря ушёл с работы, чтобы заниматься только им.
Я поверил в этот проект — и сейчас вижу, что вы тоже в него верите. Для меня это очень многое значит.

Огромное спасибо за вашу поддержку! ❤️

🔥12

2.66K views09:40

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

🤔 В чём отличие хранения данных в local storage от куки?

localStorage хранит данные на стороне клиента и позволяет сохранять информацию в виде ключ-значение без ограничения по времени, пока пользователь явно не удалит данные. Куки же могут передаваться на сервер при каждом запросе, имеют ограниченный объём (до 4KB) и срок действия. localStorage более удобен для долгосрочного хранения данных, которые не должны передаваться на сервер, тогда как куки полезны для передачи информации, такой как аутентификационные токены. localStorage работает только на клиентской стороне, куки же могут быть доступны и на стороне сервера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14🔥9

3.3K views16:10

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

🤔 Для чего необходим viewport?

Viewport – это область видимой части веб-страницы в браузере пользователя.

🟠

`meta viewport` – ключ для адаптивного дизайна
Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠

Проблема без `meta viewport` (почему он нужен?)
Без viewport (по умолчанию)
На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить.

🟠

Дополнительные параметры `meta viewport`
Управление масштабом

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Отключение адаптации iOS Safari

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14

3.47K views09:10

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

Forwarded from easyoffer

⏳ Осталось 3 дня!

Финальный отсчёт пошёл — осталось всего 3 дня до окончания краудфандинга easyoffer 2.0

Сейчас можно получить максимум пользы за минимальные деньги. После окончания кампании цены вырастут и вознаграждения станут недоступны.

👉 Поддержи easyoffer 2.0 и получи:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

Поддержи проект сейчас, чтобы не забыть!

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

👍2

3K views11:05

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

🤔 Какие есть подходы к адаптивности?

- Media queries.
- Flexbox / Grid.
- Mobile-first дизайн.
- rem, %, vw/vh вместо px.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍13🔥5💊2

3.35K views16:10

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

🤔 Как методы будут у 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

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥13👍6💊1

3.35K views09:10

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

Forwarded from easyoffer

Завтра последний день!

Краудфандинг заканчивается уже завтра, и второй попытки не будет.

👉 Поддержи easyoffer 2.0 и получи:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

3.09K views11:05

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

🤔

Для чего нужен UTC?

- Универсальное время — база для сравнения.
- Избегаем проблем с часовыми поясами.
- В БД храним в UTC, отображаем в локали.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥6

3.41K views16:10

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

Forwarded from easyoffer

🚨 Последний шанс!

Сегодня — последний день краудфандинга.
Через несколько часов всё закроется, и больше невозможно будет поучаствовать.

Если ты хотел, но откладывал — СЕЙЧАС самое время. Займёт 2 минуты, но изменит твой подход к собеседованиям надолго.

Поддержи easyoffer 2.0 и получи:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

PRO подписка к easyoffer 2.0:

✅ Доступ к списку вопросов, которые задаются на собеседованиях + вероятность встречи этих вопросов + их фильтрация по грейдам, типам интервью, компаниям

✅ Доступ к лучшим ответам на вопросы

✅ Список самых частых задач, которые задаются на собеседовании + их фильтрация по грейдам и компаниям

✅ Доступ к лучшим ответам на задачи

✅ Список тестовых заданий компаний + лучшее решение

✅ Доступ к тренажеру "Проработка вопросов", который позволит очень быстро подготовиться к самым частым вопросам

✅ Доступ к тренажеру "Реальное собеседование", который позволит тренироваться проходить собеседование в конкретную компанию

До конца кампании — остались часы.
Поддержать: https://planeta.ru/campaigns/easyoffer

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

💊1

2.6K views06:32

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

🤔 Как браузер понимает что ресурс нужно закешировать?

Браузер использует 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

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16🔥1

2.9K views09:10

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

Forwarded from easyoffer

⏳ Такого больше не будет!

Всего пара часов и больше не будет возможности получить:

🚀 PRO подписку к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование

👉 Поддержать: https://planeta.ru/campaigns/easyoffer

2.76K views15:05

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

🤔

Какие есть операторы в JS?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

👍21🔥2💊2

3.06K views16:10

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

Forwarded from easyoffer

Финальный отсчёт:
3 часа до конца краудфандинга easyoffer 2.0!

Это не просто скидка. Это шанс поддержать проект, который поможет и вам и тысячам айтишников готовиться к собеседованиям быстрее, эффективнее и увереннее.

За последние недели:
💥 Нас поддержали уже больше 1450 человек;
🔥 Вместе собрали больше 4,5 млн. рублей на запуск проекта;

Но сейчас важнее другое.

⏳ Через 3 часа всё закончится.
– Больше не будет подписки за 3 200 руб. на целый год!
– Не будет шанса первыми воспользоваться EasyOffer 2.0 на бета-тестировании

Если вы:

+ Планируете менять работу в этом или следующем году;
+ Хотите иметь под рукой 40,000+ вопросов собеседований с разборами, видео-ответами и тренажёрами;
+ Хотите зафиксировать лучшую цену на целый год… (потом будет в 12 раз дороже)

👉 Тогда просто переходите и поддержите нас сейчас:
https://planeta.ru/campaigns/easyoffer

📢 Три часа — и всё.
Не откладывайте на потом.

Спасибо всем, кто уже с нами! 💙

💊2

2.59K views18:00

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

Forwarded from easyoffer

🚨

60 минут до финала

Через час мы закроем краудфандинг easyoffer 2.0
Это последний шанс вписаться в самые выгодные условия.

👉 https://planeta.ru/campaigns/easyoffer

Please open Telegram to view this post

VIEW IN TELEGRAM

2.51K views20:00

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

Forwarded from Идущий к IT

Я смотрю на эту цифру и до сих пор не верю.

Когда я запускал этот проект, мне реально было страшно. Страшно, что ничего не получится. Что я и мой проект никому не нужен. Страшно, что все увидят, как я публично обосрался.

Я ставил планку в 300т рублей. В самом позитивном сценарии 1млн. Но про 5 миллионов… даже мысли не было. Уже в первые часы стало понятно, что кампания идет не по плану. Сайт краудфандинга не выдержал нашей нагрузки и лег 😁

Особенно в последние три дня — просто какой-то разрыв! Я ощущал, как будто ловлю попутный ветер. В последний час не хватало 50к до 5 млн, и я уже думал сам их докинуть, чтобы красиво закрыть 😁

Но финальная сумма это не так важно. Самое главное это как мы её собрали. Это не инвестиции, не чьи-то деньги под условия и контроль, не кредит. Это вы поверили и поддержали меня напрямую. Вы дали мне возможность оставить за собой полный контроль над easyoffer.

Я чувствую огромную ответственность и нервничаю из-за высоких ожиданий. А вдруг что-то пойдёт не так? А вдруг на релизе кому-то что-то не понравится? Именно поэтому я рад, что могу честно выйти на новый этап и без давления от левых инвесторов.

В такие моменты вспоминаю, с чего всё начиналось. Как 2 года назад я писал свои первые посты на 500 человек о том, как учу программирование. Как записывал первое видео на YouTube про поиск работы. Как пилил первую версию easyoffer, вообще без понимания, что из этого выйдет.

И сейчас я думаю — может, эта история вдохновит кого-то из вас. Может, кто-то запустит свой айтишный проект, найдёт поддержку и соберёт бабки на развитие. Было бы круто

Спасибо за невероятную и колосальную поддержку ❤️
О такой аудитории как вы я не мог мечтать

👍8

2.79K views06:35

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

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

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18

3.54K views09:10

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

🤔 Разным ролям нужно по-разному предоставить dataset. Как бы это сделал?

- Через разграничение прав (RBAC) — фильтровать данные на сервере в зависимости от роли пользователя.
- Использовать view-модели или DTO, в которых отфильтровано содержимое.
- Настроить фильтрацию SQL-запросов (например, WHERE role = ?).
- В UI можно скрывать/показывать поля, но не полагаться только на фронт.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍1

3.6K views16:10

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

🤔 Как добавить слушатель события?

Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

🚩

Почему это нужно?

Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.

🚩

Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

🟠

Чистый JavaScript
Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠

React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠

jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩

Почему это удобно и важно

🟠

Интерактивность
Позволяет создавать динамичные и отзывчивые интерфейсы.

🟠

Гибкость
Возможность реагировать на различные действия пользователей.

🟠

Удобство
В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍12

3.95K views09:10

About

Blog

Apps

Platform