🤔 В чём отличия HTTP/1 от HTTP/2?

- HTTP/2 использует одно соединение вместо нескольких;
- Поддерживает мультиплексирование — отправку нескольких запросов одновременно;
- Бинарный протокол вместо текстового;
- Улучшенная производительность за счёт header compression и server push.

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

🤔 Как взаимодействовать с vuex js?

Vuex — это централизованное хранилище для управления состоянием в приложениях Vue.js. Оно используется, когда несколько компонентов нуждаются в доступе к общему состоянию.

🟠Подключение Vuex в проект
Сначала установим Vuex, если он ещё не установлен:

npm install vuex

Теперь создадим хранилище (store)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

Затем подключаем это хранилище в main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store, // Подключаем Vuex-хранилище
  render: h => h(App)
}).$mount('#app');

🟠Доступ к данным из Vuex (state)
Чтобы получить данные из хранилища (state), можно использовать this.$store.state или mapState.

<template>
  <div>
    <p>Счетчик: {{ $store.state.count }}</p>
  </div>
</template>

С использованием mapState

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  }
};
</script>

🟠Изменение состояния (mutations)
В Vuex нельзя изменять state напрямую, для этого используются mutations.

<template>
  <button @click="$store.commit('increment')">Увеличить</button>
</template>

Или с помощью mapMutations

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<template>
  <button @click="increment">Увеличить</button>
</template>

🟠Асинхронные действия (actions)
Мутации не поддерживают асинхронные операции, поэтому для этого используются actions.

<template>
  <button @click="$store.dispatch('incrementAsync')">Увеличить через 1 сек</button>
</template>

Или с mapActions

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
};
</script>

<template>
  <button @click="incrementAsync">Увеличить через 1 сек</button>
</template>

🟠Использование геттеров (getters)
Геттеры работают как вычисляемые свойства (computed), позволяют получать обработанные данные из state.

<template>
  <p>Удвоенный счетчик: {{ $store.getters.doubleCount }}</p>
</template>

Или с mapGetters

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  }
};
</script>

<template>
  <p>Удвоенный счетчик: {{ doubleCount }}</p>
</template>

🟠Модули Vuex (для больших проектов)
Если приложение большое, можно разделить Vuex-хранилище на модули:

const counterModule = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
};

export default new Vuex.Store({
  modules: {
    counter: counterModule
  }
});

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

🤔 Как настраивать собственную кастомизацию форм?

Можно использовать стили для стандартных элементов формы, применять псевдоэлементы, использовать кастомные компоненты на основе div и JavaScript. Также часто подключают библиотеки или UI-фреймворки.

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

🤔 Когда используются теги div и span?

<div> и <span> — это самые универсальные HTML-теги, но у них разные роли:
<div> — блочный контейнер (для структуры).
<span> — строчный контейнер (для оформления текста).

🚩Примеры использования `<div>`

Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`?

<span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку.

🚩Примеры использования `<span>`

Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

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

Используют директивы:
• v-if — компонент вообще не создаётся, если условие ложное.
• v-show — компонент всегда в DOM, но просто скрывается через CSS (display: none).
• Можно также использовать тернарный оператор прямо в шаблоне (v-bind:is, component, slot и т.п.).

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

🤔 Расскажи про операторы сравнения

Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах.

🚩Разница между `==` и `===`

🟠`==` (нестрогое сравнение)
При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение)
При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении

JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи

- null == undefined → true (они считаются "похожими").
- null === undefined → false (разные типы).
- null >= 0 → true (null превращается в 0).
- null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

🤔 Отличие <i> от <em> и <strong> от <b>?

- <i> и <b> — визуальные теги (курсив, жирный), не несут смысловой нагрузки;
- <em> и <strong> — семантические, используются для логического акцента (эмоции, важность).

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

🤔 Что делает omit?

omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей.

В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce().

Реализация omit с Object.fromEntries() (современный способ)

function omit(obj, keys) {
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => !keys.includes(key))
    );
}

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]); 

console.log(safeUser); // { name: "Alice", age: 25 }

Реализация omit с reduce() (альтернативный способ)

function omit(obj, keys) {
    return Object.keys(obj).reduce((acc, key) => {
        if (!keys.includes(key)) acc[key] = obj[key];
        return acc;
    }, {});
}

const data = { a: 1, b: 2, c: 3 };
console.log(omit(data, ["b"])); // { a: 1, c: 3 }

Если используете Lodash, можно просто вызвать

import { omit } from "lodash";

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]);

console.log(safeUser); // { name: "Alice", age: 25 }

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

🤔 Что такое и зачем нужен iframe?

iframe — элемент, который позволяет встраивать один HTML-документ в другой. Используется для интеграции внешнего контента (видео, карты, сторонние приложения).

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