🤔 Что такое inline стили, и какой они имеют приоритет?

Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

🚩Приоритетность inline стилей

Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены.

🚩Порядок приоритетов CSS

Inline стили (наивысший приоритет)
ID селекторы
Классы, псевдоклассы и атрибуты
Элементы и псевдоэлементы (наименьший приоритет)
Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей.

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

🤔 Что такое блочная модель?

Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов:
- content → padding → border → margin.

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

🤔 Что можешь рассказать об version?

version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API.
Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими.

🟠Семантическое версионирование (SemVer)
Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API
При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git
В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

🤔 Что такое нечистая функция?

Нечистая функция — функция, которая:
- Имеет побочные эффекты (запросы, изменения внешнего состояния).
- Может возвращать разные результаты при одних и тех же входных данных.

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

🤔 Как мы будем через js анимировать что либо?

В JavaScript есть три основных способа создания анимаций:

CSS-анимации (transition, @keyframes) + изменение классов через JS
Метод requestAnimationFrame()
Использование библиотек (GSAP, Anime.js, Velocity.js)

🟠CSS-анимации + управление через JS
Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.

<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 0.5s ease-in-out;
  }
  .move {
    transform: translateX(200px);
  }
</style>

<script>
  function toggleBox() {
    document.getElementById("box").classList.toggle("move");
  }
</script>

🟠`requestAnimationFrame()` — лучший способ в чистом JS
Если нужно более гибкое управление анимацией, используем requestAnimationFrame().

<button onclick="startAnimation()">Старт</button>
<div id="box"></div>

<style>
  #box {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
  }
</style>

<script>
  let position = 0;
  let animationId;

  function animate() {
    position += 5; // Двигаем на 5px за кадр
    document.getElementById("box").style.transform = `translateX(${position}px)`;

    if (position < 300) { // Останавливаем, когда достигнет 300px
      animationId = requestAnimationFrame(animate);
    }
  }

  function startAnimation() {
    cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
    position = 0;
    animate();
  }
</script>

🟠Библиотеки (GSAP, Anime.js, Velocity.js)
Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.

<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
  function animateBox() {
    gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
  }
</script>

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

🤔 Какие достоинства у инкрементального DOM против виртуального?

Инкрементальный DOM (например, в Svelte):
- Менее абстрактен — ближе к реальному DOM.
- Быстрее монтируется — нет необходимости в полной виртуальной копии.
- Меньше памяти и меньше промежуточных структур.
В отличие от виртуального DOM:
- он не сравнивает деревья, а прямо вставляет нужные изменения.

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

🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку?

При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов.

🟠Разделение ответственности (Separation of Concerns)
Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в:
Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX).
Использовании компонентов в React/Vue или шаблонов в Angular.
Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components).
Вместо того, чтобы писать всю логику и разметку в одном файле:

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Я разделяю бизнес-логику и представление

// CounterLogic.js
export function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

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

// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// Counter.js (использует Button)
function Counter() {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}

🟠Чистый код и читаемость
Код должен быть понятным не только мне, но и другим разработчикам.
Понятные имена переменных и функций. Вместо x → userAge, вместо doSmth() → calculateTotalPrice().
Меньше вложенности. Вместо кучи if и else, лучше использовать early return.
Разбиение кода на модули. Один файл = одна зона ответственности.

function getDiscountedPrice(price, discount) {
  if (discount <= 0) return price;
  return price - price * (discount / 100);
}

🟠Состояние приложения: локальное vs глобальное
В зависимости от сложности приложения нужно правильно управлять состоянием:
Локальное состояние – useState (React), ref (Vue) для простых данных внутри компонента.
Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам.
Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать.

🟠Следование принципам SOLID и DRY
DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты.
SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.

function sendEmailAndSaveToDB(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

Лучше разделить логику

function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

🟠Использование TypeScript
TypeScript помогает избежать ошибок и делать код предсказуемым.

type User = {
  id: number;
  name: string;
};

function getUserName(user: User): string {
  return user.name;
}

🟠Документация и кодстайл
ESLint + Prettier → автоформатирование и проверка стиля.
JSDoc/TypeScript → документация функций и типов данных.
Storybook → для документирования UI-компонентов.

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

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

Пожизненный easyoffer PRO по цене одного года. Покупаешь один раз – пользуешься всю жизнь.

Что входит в PRO:
– Вопросы и задачи с реальных собеседований в конкретных компаниях
– Лучшие ответы и видео-примеры от middle/senior специалистов
– Записи реальных собеседований
– Обход фильтров ATS с топ-30 ключевых слов в резюме
– Автоотклики на hh
– Тренажёры и симуляторы для идеальной подготовки к интервью

⏳ Акция действует только до 2 сентября 23:59 по МСК

👉 Забрать PRO со скидкой 70%: https://easyoffer.ru/pro

🤔 Что такое useContext?

Это хук для доступа к данным из контекста. Он позволяет передавать данные между компонентами без необходимости проброса через пропсы. Это упрощает управление глобальным состоянием.

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

Пожизненный PRO — по цене одного года.

Покупаешь один раз — пользуешься всю жизнь:
👉 https://easyoffer.ru/pro

🚀 PRO-доступ закроет 99% проблем на пути к офферу:

1. 1100+ записей реальных собеседований (включая топы: Сбер, Авито, Яндекс, WB, OZON, МТС). Видите всё изнутри: как спрашивают, как отвечают сильные кандидаты и на каких ошибках проваливаются 80%.

2. База live-coding задач и вопросов с реальных собесов — с уникальной системой вероятности их встречи. Готовитесь не вслепую, а точечно по темам, которые спрашивают чаще всего.

3. Эталонные ответы от Senior-разработчиков. Никакой воды и догадок — только чёткие структурированные решения, за которые дают «зелёный свет» к офферу.

4. Полный доступ ко всем грейдам и профессиям. Junior вы или Senior, тестировщик, разработчик или проджект — вы получаете ВСЕ материалы easyoffer без ограничений. Безлимитно, Все, Навсегда.

5. База 400+ тестовых заданий. Прокачивайте навыки на реальных задачах — тех самых, что дают перед собесом.

6. Автоотклики на hh.ru — пока вы спите, резюме уходит рекрутерам автоматически. Экономия сотен часов ручного кликанья.

7. Аналитика ТОП-требований из вакансий. Парсим рынок и показываем, какие скиллы сейчас в цене. Апгрейдите резюме точечно и проходите ATS-фильтры (они отсеивают до 75% резюме ещё до рекрутера).

8. Генератор резюме и CV под каждую вакансию. Забудьте про «универсальное» резюме — нейросеть адаптирует ваш опыт под конкретную позицию за минуту и повышает шансы на приглашение в разы.

9. Тренажёры подготовки к собеседованию:
«Реальное собеседование» — сценарий вопросов из настоящих интервью. «Проработка вопросов» — флеш-карточки по методике интервальных повторений (как Anki)

10. 🔥 Самое важное: все будущие фичи
Вы платите один раз, а продукт растёт всю жизнь. Каждое обновление, каждый новый инструмент, каждая фича, которая появится за все годы проекта, автоматически падает вам в подписку без доплат. Вы фиксируете цену года, а получаете продукт, который через пару лет будет стоить в разы дороже

⭐️ Это уникальная акция пока сайт в режиме Beta.
Успей ей воспользоваться⏳ Завтра последний день.

👉 https://easyoffer.ru/pro

🤔 Для чего в js нужна асинхронность?

JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет.

🟠Проблема синхронного кода
Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему
Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS?

Callbacks (обратные вызовы) – старый способ.
Promises (fetch(), then/catch) – современный вариант.
async/await – удобный синтаксис для асинхронного кода.
async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность?

Запросы к серверу
Чтение файлов
Таймеры
Работа с базами данных
Взаимодействие с пользователем (ожидание ввода)

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