🤔 Как строить сетку сайта?

Сетку можно строить несколькими способами:
1. CSS Flexbox — для одномерной разметки (по строке или колонке).
2. display: flex;
3. flex-direction: row;
4. justify-content: space-between;
5. CSS Grid — для двумерных сеток (и строки, и колонки).
6. display: grid;
7. grid-template-columns: repeat(3, 1fr);
8. gap: 20px;
9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.).
10. Media Queries — адаптивные сетки с изменением структуры под разные экраны.
Сетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля.

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

🤔 Для чего нужна методология в html?

Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.

🚩Зачем это нужно

🟠Понятность кода
Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.

🟠Снижение ошибок
Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.

🟠Упрощение масштабирования
В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.

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

🚩Примеры популярных методологий
🟠БЭМ (Блок, Элемент, Модификатор)
Одна из самых популярных методологий для HTML и CSS.
- Она предлагает структурировать классы так:
- Блок: независимый компонент (например, menu).
- Элемент: часть блока (например, menu__item).
- Модификатор: вариант блока или элемента (например, menu__item--active).
Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

🟠Atomic Design
Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта).
Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

🟠SMACSS (Scalable and Modular Architecture for CSS)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.

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

🤔 Что такое ES-модули?

ES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволяют экспортировать и импортировать переменные, функции, классы между файлами с помощью export и import. Они поддерживаются нативно в современных браузерах и Node.js.

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

🤔 Опасности использования `innerHTML` в JavaScript

innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий
Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

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

🤔 В чём заключается отличие классов в JS от классов в других языках?

Классы в JS не компилируются в строгие структуры, а интерпретируются в цепочки прототипов. У них нет доступа к модификаторам (private/protected в классическом понимании), они не компилируются строго, и наследование можно изменять во время выполнения.

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

🤔 Когда использовать uselayuouteffect, а когда useeffect?

Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере.
useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере.

То есть useLayoutEffect блокирует рендер, а useEffect — нет.

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

useEffect выполняется асинхронно, после того как браузер отрисовал страницу.
Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

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

useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения.
Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (getBoundingClientRect).
- Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

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

🤔 В чём разница между HTML и XHTML?

- HTML — более свободный в синтаксисе, не требует строгости.
- XHTML — расширение HTML, основанное на XML, требует строгого соответствия правилам (например, закрывающиеся теги, правильные атрибуты). XHTML строже, но хуже поддерживается и более чувствителен к ошибкам.

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

🤔 Какие значения будут являться falsy значениями?

В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений:

🟠`false`
Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0`
Число ноль.

console.log(Boolean(0)); // false    

🟠`-0`
Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n`
Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка)
Строка без символов.

console.log(Boolean("")); // false    

🟠`null`
Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN`
Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

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

🟠Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах
Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

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

🤔 Почему повсеместно нужен HTTPS?

- Безопасность: шифрует данные между клиентом и сервером;
- Конфиденциальность: защита от перехвата и MITM-атак;
- SEO: Google поощряет HTTPS;
- Обязателен для API, авторизации, платежей.

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

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

Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).

🟠Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width

.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

Использование Flexbox

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

Использование CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🟠Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

🟠Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

🟠Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.

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

🟠CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

Tailwind CSS

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

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

🤔 Что такое Git-flow?

Git-flow — это модель ветвления в Git для управления разработкой, предложенная Винсентом Дриссеном. Она включает основные ветки (main, develop) и временные ветки (feature, release, hotfix) для разработки, тестирования и исправления ошибок. Git-flow делает процесс разработки структурированным, но может быть избыточным для небольших или быстрых проектов.

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

🤔 Зачем создавались библиотеки react и другие?

Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки:

🟠Повышение эффективности разработки
Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным.
React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение.

🟠Улучшение производительности
Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким.
React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились.

🟠Облегчение работы с состоянием приложения
Управление состоянием больших и сложных приложений может стать хаотичным.
React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой.

🟠Улучшение масштабируемости и поддерживаемости кода
По мере роста приложения, код может стать сложным для понимания и изменения.
Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода.

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

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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