🧐 В чём разница между div и span?

- div — это блочный элемент, начинается с новой строки и занимает всю ширину.
- span — строчный элемент, используется внутри текста, не разрывая поток.
Оба используются для группировки, но в разных контекстах.

Забирай 📚 Базу знаний

🤔 С какими нововведениями es6 знаком?

ECMAScript 6 (или ES6), также известный как ECMAScript 2015, представил множество новых возможностей для JavaScript, которые сделали язык более удобным, мощным и современным. Я знаком с большинством нововведений, и ниже я подробно расскажу о самых популярных из них.

🟠`let` и `const`
До ES6 переменные создавались с помощью var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены.
let — для переменных, которые могут изменяться.
const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).

let a = 10;
a = 20; // Работает

const b = 30;
// b = 40; // Ошибка: Нельзя переназначить

🟠Стрелочные функции (Arrow Functions)
Стрелочные функции дают более лаконичный синтаксис для объявления функций. Они также не создают собственный this, а используют this из окружающего контекста.

// Обычная функция
function add(a, b) {
  return a + b;
}

// Стрелочная функция
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

🟠Шаблонные строки (Template Literals)
Раньше строки приходилось склеивать с помощью конкатенации (+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.

const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.

🟠Деструктуризация (Destructuring)
Деструктуризация позволяет извлекать значения из массивов или объектов и присваивать их переменным.

// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2

// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

🟠Модули (Modules)
ES6 добавил встроенную поддержку модулей через import и export. Теперь код можно организовывать и повторно использовать более эффективно.

// В модуле user.js
export const greet = (name) => `Привет, ${name}`;

// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice

🟠Операторы "..." (Spread и Rest)
Оператор ... используется для работы с массивами, объектами и функциями.
Spread — для разворачивания массивов и объектов.
Rest — для сбора оставшихся элементов в массив или объект.

// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest);  // [2, 3, 4]

🟠Классы (Classes)
Классы добавляют объектно-ориентированный стиль программирования. Это синтаксический сахар над прототипами.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} говорит.`);
  }
}

const dog = new Animal("Собака");
dog.speak(); // Собака говорит.

🟠Обещания (Promises)
Обещания (Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Данные получены"), 1000);
  });
};

fetchData().then((data) => console.log(data)); // Данные получены

🟠Итераторы и генераторы
Итераторы дают возможность обходить коллекции (например, массивы) шаг за шагом.
Генераторы — функции, которые можно приостанавливать и возобновлять.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

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

🔹 HTML (HyperText Markup Language)

👉 Веб-страницаларнинг скелети (skelet).

HTML описывает структуру сайта: заголовки, параграфы, таблицы, изображения, ссылки.

Без HTML сайта вообще не будет видно, только пустой экран.

📌 Пример:

<h1>Заголовок</h1>
<p>Это абзац текста.</p>

🔹 CSS (Cascading Style Sheets)

👉 Веб-страницаларнинг дизайни ва стиле.

CSS меняет внешний вид: цвета, размеры, шрифты, отступы, анимации.

HTML показывает что будет, а CSS показывает как это выглядит.

📌 Пример:

h1 {
  color: red;
  font-size: 30px;
}

🔹 JavaScript (JS)

👉 Веб-страницаларнинг мияси (логикаси).

JS добавляет интерактивность: кнопка нажимается → открывается меню, калькулятор считает, чат отправляет сообщения.

Без JS сайт будет статическим, как книга.

📌 Пример:

document.querySelector("h1").onclick = function() {
  alert("Ты нажал на заголовок!");
};

🔹 React (JavaScript библиотека)

👉 Веб-страницаларни современный framework/library yordamida тезroq, модулли ва динамик qilish uchun ishlatiladi.

React — это библиотека на JavaScript, которая помогает строить большие и сложные приложения.

Он разделяет сайт на компоненты (navbar, карточка, форма) → их можно использовать повторно.

Делает сайт очень быстрым за счёт виртуального DOM.

📌 Пример (React компонент):

function App() {
  return <h1>Привет, это React!</h1>;
}

Real😂

🎯 TOMORROW: HACKATHON DAY 🚀

💻 All in. Full power.
🔥 No excuses, just results.
🏆 Our mission: 1st place.

⚡ Let’s code, create & conquer together!

🧐 Что делает и для чего нужна функци function.Prototype.Bind?

bind() – это метод, который создает новую функцию с привязанным контекстом (this) и (опционально) фиксированными аргументами.

🛑Основные возможности `bind()`

Привязывает this, чтобы не потерять контекст
Позволяет создавать частично примененные функции
Используется в обработчиках событий и таймерах

Пример: потеря this без bind()

const user = {
  name: "Иван",
  sayHello() {
    console.log(`Привет, ${this.name}!`);
  },
};

setTimeout(user.sayHello, 1000); // ❌ this = undefined

Дебаунс событий для плавного интерфейса!

Частые события resize или input могут перегружать страницу и тормозить анимации. Решение — дебаунс с правильными опциями.

Проблемный код:

window.addEventListener('resize', () => {
  console.log('Width:', window.innerWidth);
  updateLayout();
});

Проблема: при быстром resize — десятки вызовов в секунду.

Улучшенный дебаунсер:

function debounce(fn, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Применяем с cleanup:

const debouncedResize = debounce(() => {
  console.log('Debounced width:', window.innerWidth);
}, 300);

window.addEventListener('resize', debouncedResize);

🔥 В следующей части рассмотрим почему для scroll дебаунс не работает и как throttle решает эту проблему для плавных анимаций!

⚠️ XSS-атака (Cross-Site Scripting) в JavaScript
Что это такое?
XSS-атака позволяет злоумышленнику внедрить вредоносный JavaScript-код на сайт. Это может привести к краже данных пользователей, изменению интерфейса сайта или даже захвату аккаунтов.


❌ Как выглядит уязвимость?
Пример кода, уязвимого к XSS:

<form>
  <input type="text" id="name" placeholder="Введите имя">
  <button onclick="submitForm()">Отправить</button>
</form>
<p id="output"></p>

<script>
  function submitForm() {
    let name = document.getElementById("name").value;
    document.getElementById("output").innerHTML = "Привет, " + name;
  }
</script>

💀 Что тут не так?
Если в поле ввести:

<script>alert("Взлом!");</script>

то этот код выполнится на сайте!

✅ Как защититься от XSS?
🔹 Экранируй ввод пользователя – удаляй или заменяй специальные символы.
🔹 Используй textContent вместо innerHTML:

document.getElementById("output").textContent = "Привет, " + name;

🔹 Применяй Content Security Policy (CSP) – ограничивай выполнение скриптов.

Это только один вид атак. Если интересно, могу рассказать про SQL-инъекции, CSRF или MITM. Пиши в комменты! 🚀

🧐 Что такое dispatch?

В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React.

🛑`dispatch` в Redux
В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🛑`dispatchEvent` в JavaScript (EventTarget API)
В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

const button = document.querySelector("button");

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🛑`dispatch` в React (useReducer)
В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

🧐 Чем отличается замыкание от области видимости?

Замыкание и область видимости — это два фундаментальных концепта в JavaScript, связанных с работой переменных, но они решают разные задачи. Давайте разберёмся в их отличиях.

🛑 Область видимости (Scope)

Область видимости определяет, где в коде можно обращаться к переменной. В JavaScript есть три основные области видимости:
Глобальная область видимости – переменные доступны в любом месте кода.
Область видимости функции (функциональная) – переменные доступны только внутри функции, где они были объявлены.
Блочная область видимости (с let и const) – переменные доступны только внутри блока {}.

function testScope() {
  let x = 10; // x доступна только внутри testScope
  console.log(x); // 10
}
console.log(x); // Ошибка: x не определена

🛑 Замыкание (Closure)

Замыкание – это функция, которая запоминает область видимости, в которой была создана, даже после выхода из неё. То есть, если внутренняя функция использует переменные внешней функции, она "захватывает" их и может использовать даже после завершения работы внешней функции.

function outer() {
  let count = 0; 

  return function inner() { 
    count++;  
    console.log(count);
  };
}

const counter = outer(); // outer выполняется, но переменная count остается в памяти
counter(); // 1
counter(); // 2
counter(); // 3

ТСР connection

🧐 Как бы добавлял статический метод в prototype?

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

🛑Как работают статические методы? (`static`)

В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🛑Добавление "статического" метода в `prototype` (не совсем статический)

Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🛑Добавление метода напрямую в сам класс (имитация `static`)

Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

🧐Зачем нужен nginx?

Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.

🛑Как Nginx раздаёт фронтенд-приложение?
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

🛑Как Nginx проксирует запросы к бэкенду?
Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🛑Как Nginx балансирует нагрузку?
Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

🛑Как Nginx ускоряет сайт с кэшем?
Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

🧐Что такое псевдоэлемент?

Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML.

🛑Синтаксис

Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after.

🛑Распространенные псевдоэлементы
::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🛑Особенности работы

Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями.
Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).
Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript.

📚 Базу знаний

🧐Что такое миксины в препроцессорах?

Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.

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

🛑Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

🛑Использование миксина

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

🛑Пример на LESS

🛑Определение миксина

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

🛑Использование миксина

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

🛑Пример на Stylus

🛑Определение миксина

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

🛑Использование миксина

.box
border-radius(10px)

.button
border-radius(5px