#JavaScript

🚩 Какие основные отличия Cookies и Session Storage?

Определения
- Cookies: Небольшие текстовые файлы, которые сохраняются браузером на устройстве пользователя и отправляются на сервер с каждым HTTP-запросом.
- Session Storage: Механизм хранения данных в браузере, доступный только в пределах вкладки/окна в течение сессии.


1️⃣ Время жизни
- Cookies: С expires или max-age живут после закрытия браузера, без них - удаляются после сессии
- Session Storage: Существует только в рамках открытой вкладки


2️⃣ Объём
- Cookies: ~4 КБ на домен (все куки суммарно)
- Session Storage: ~5 МБ на домен


3️⃣ Доступность
- Cookies: Автоматически отправляются с каждым HTTP-запросом
- Session Storage: Доступен только через JavaScript на клиенте


5️⃣ Использование
- Cookies: Аутентификация, трекинг пользователей
- Session Storage: Временные данные в рамках вкладки, кэширование


5️⃣ Безопасность
- Cookies: Уязвимы к CSRF (можно защитить флагами)
- Session Storage: Не уязвим к CSRF, но уязвим к XSS-атакам


🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#JavaScript

🚩 Как избежать слишком частых запросов к серверу при реализации поиска с автокомплитом?


Debounce - отправляет запрос только после паузы в вводе (пример кода на картинке)

Throttle - ограничивает частоту запросов (например, не чаще чем раз в 500 мс) (пример кода на картинке)


Разница:
- Debounce - лучше для автокомплита (ждет окончания ввода).
- Throttle - полезен при скролле или resize (гарантирует периодические вызовы).

Пример с Lodash (библиотека с готовыми функциями):

import { debounce } from 'lodash';
searchInput.addEventListener('input', debounce(fetchResults, 300));

🔎🔎🔎🔎🔄

#️⃣Вопрос

#️⃣Новости

#️⃣База вопросов

#interview

📹 Как превратить даже скромный опыт в мощный кейс, который впечатлит работодателя?

Включай видео и узнай, как получить жирный оффер из скромного опыта 😎


🔎🔎🔎🔎🔄

#️⃣Видео

#️⃣Новости

#️⃣База вопросов

#interview

📹 Сегодня предлагаю проверить свои знания и посмотреть собеседование, включай 👇


🔎🔎🔎🔎🔄

#️⃣Видео

#️⃣Новости

#️⃣База вопросов

#JavaScript

🚩Как защитить данные в LocalStorage от стороннего JS?

LocalStorage доступен всем скриптам на той же странице, поэтому злонамеренный код (например, XSS-атака) может прочитать или изменить его данные.

Полной защиты нет, но можно снизить угрозы:


Основные методы защиты:

🖇Не хранить конфиденциальные данные — токены, пароли не должны попадать в LocalStorage

🖇Шифровать данные перед записью — например, с помощью CryptoJS

🖇Использовать HttpOnly-куки — для критичных данных, они недоступны из JavaScript

🖇Content Security Policy (CSP) — ограничивает выполнение сторонних скриптов


Дополнительные меры защиты:

🖇Проверка целостности данных — добавление контрольных сумм

🖇Время жизни данных — автоматическое удаление устаревших данных

🖇Валидация при чтении — проверка формата и структуры данных

🖇Регулярная очистка — удаление неиспользуемых данных


❗️Помните: LocalStorage — это удобство, а не сейф. Для действительно важных данных используйте серверную сессию и HttpOnly куки.


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

🚩Расскажите про все методы Promise?


Основные методы экземпляра:

🖇then(onFulfilled, onRejected) — используется для обработки успешного выполнения промиса или ошибок

🖇catch(onRejected) — ловит ошибки, которые произошли в промисе или в одном из последующих then()

🖇finally(onFinally) — выполняется в любом случае, когда промис завершен (успешно или с ошибкой)


Статические методы Promise:

🖇Promise.all — принимает массив промисов и возвращает новый промис, который выполнится только тогда, когда все переданные промисы завершатся. Если хотя бы один промис будет отклонён, Promise.all отклонит результат

🖇Promise.race— возвращает промис, который выполнится или будет отклонён первым среди переданных промисов

🖇Promise.allSettled — возвращает новый промис, который выполнится, когда все переданные промисы завершатся (успешно или с ошибкой), и возвращает массив объектов с результатами

🖇Promise.any— возвращает первый успешный промис среди переданных, игнорируя отклоненные промисы


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#TypeScript

🚩Чем отличается тип unknown от типа any в TypeScript?

В TypeScript тип any предоставляет полную свободу для работы с переменной, но при этом теряется всякая защита типов.

let data: any = "Hello";
// Ошибка будет только на этапе выполнения, а не при компиляции
console.log(data.toFixed()); // TypeError: data.toFixed is not a function

Тип unknown — это более безопасная альтернатива.

Как и any, он позволяет присваивать переменной любое значение, но при попытке взаимодействия с этой переменной TypeScript требует явных проверок типа. Это защищает программу от неожиданного поведения:

let value: unknown = "Hello";
// TypeScript не позволит вызвать метод без проверки типа
console.log(value.toFixed()); // Ошибка на этапе компиляции

if (typeof value === "number") {
  console.log(value.toFixed()); // Теперь это безопасно
}

Основные отличия:

🖇 any — отключает все проверки типов, ошибки только в runtime

🖇 unknown — требует проверки типов перед использованием, ошибки на этапе компиляции


❗️ unknown рекомендуется когда тип значения заранее неизвестен (например, при работе с пользовательскими вводами или данными API).


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#interview #summary

✅ Проходим собеседование

1. Какие основные отличия Cookies и Session Storage?

2. Как избежать слишком частых запросов к серверу при реализации поиска с автокомплитом?

3. Что такое Middleware в Redux?

4. Что такое имутабельность и мутабильность?

5. Как в функциональных компонентах подписаться на события?

6. Можно ли обновить React-компонент без изменения state?

7. Как защитить данные в LocalStorage от стороннего JS?

8. Расскажите про все методы Promise?

9. Чем отличается тип unknown от типа any в TypeScript?

10. Что такое utility types в TypeScript?

11. Как работает event loop?


🔎🔎🔎🔎🔄

#️⃣Новости

#️⃣База вопросов

#JavaScript

🚩Как получать данные в реальном времени?

Чат, уведомления, лайв-обновления — как сделать так, чтобы данные приходили мгновенно?


🔴WebSocket - полноценная двусторонняя связь

const socket = new WebSocket('wss://example.com/ws');

socket.onopen = () => console.log('Соединение установлено');
socket.onmessage = (event) => console.log('Получено:', event.data);
socket.onclose = () => console.log('Соединение закрыто');

// Отправка данных
socket.send('Привет, сервер!');

✅Плюсы: мгновенная передача, бинарные данные
❌Минусы: сложнее настройка сервера


🔴Server-Sent Events (SSE) - поток от сервера

const eventSource = new EventSource('/updates');
eventSource.onmessage = (event) => {
  console.log('Новое сообщение:', event.data);
};

Сервер (Node.js):

app.get('/updates', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
});

✅Плюсы: простота, автопереподключение
❌Минусы: только сервер → клиент


🔴Long Polling - запрос с ожиданием

function fetchUpdates() {
  fetch('/poll')
    .then(response => response.json())
    .then(data => {
      console.log('Данные:', data);
      fetchUpdates(); // Новый запрос
    });
}

✅ Плюсы: работает без WebSocket
❌ Минусы: высокая нагрузка на сервер


🔴Когда что использовать?

- WebSocket — чаты, игры, совместная работа
- SSE — уведомления, новостные ленты, мониторинг
- Long Polling — простые обновления, фоллбэк для старых браузеров


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

🚩Как использовать Service Workers для реализации офлайн-приложений и кэширования ресурсов?

Ваш сайт может работать без интернета и загружаться мгновенно! Service Workers делают это возможным.

🟣Что это такое?

Service Worker — умный помощник в браузере, который:
- Сохраняет файлы сайта на устройстве пользователя
- Перехватывает запросы к серверу
- Отдает файлы из памяти вместо скачивания


🟣Как работает?

Первый визит: скачивает и сохраняет важные файлы
Повторные визиты: отдает файлы мгновенно из памяти
Без интернета: сайт работает как обычно!

// 1. Регистрация
navigator.serviceWorker.register('/service-worker.js');

// 2. Сохранение файлов
cache.addAll(['/index.html', '/styles.css', '/script.js']);

// 3. Перехват запросов
caches.match(request) || fetch(request);

🟣Преимущества

Для пользователей:
- Мгновенная загрузка
- Работа без интернета
- Экономия трафика

Для бизнеса:
- Довольные пользователи
- Меньше отказов
- Стабильность


🟣С чего начать?

1. Определите важные страницы
2. Добавьте простой Service Worker
3. Протестируйте офлайн-режим
4. Усложняйте постепенно


🔎🔎🔎🔎🔄

#⃣Вопрос

#⃣Новости

#⃣База вопросов

#JavaScript

This - одна из самых популярных тем на собесах! Рассмотрим за 15 минут 💎

🔎🔎🔎🔎🔄

#⃣Видео

#⃣Новости

#⃣База вопросов