Frontender | CMD

⚡️ Трюк с `Set`: как быстро убрать дубликаты из массива Самый частый вопрос на собеседованиях для новичков и ежедневная задача в реальных проектах — очистка данных от повторяющихся элементов. В современном JS это решается в одну строчку без циклов for и методов .indexOf(). **Секрет в объекте Set: Это специальная коллекция в JavaScript, которая по определению может содержать только уникальные значения. Если попытаться добавить в неё дубликат, она его просто проигнорирует. Как это использовать:**

    
        const numbers = [1, 2, 2, 3, 4, 4, 4, 5];

// 1. Создаем Set из массива (он уберет дубли)
// 2. Распыляем его обратно в массив через [...]
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

{}
    

Почему это круто: — Скорость: Поиск и удаление дубликатов через Set работает гораздо быстрее, чем через .filter() или .reduce(), особенно на больших массивах. — Читаемость: Код понятен любому разработчику с первого взгляда. — Универсальность: Работает не только с числами, но и со строками. Нюанс: Этот метод идеально работает с примитивами (числа, строки). Если у вас массив объектов, Set не поймет, что {id: 1} и {id: 1} — это одно и то же (так как это разные ссылки в памяти). Для объектов всё же придется использовать .filter() или Map.

🚀 Полезная инфа: CSS-свойство `aspect-ratio` Раньше, чтобы заставить картинку или видео сохранять пропорции (например, 16:9) при изменении ширины экрана, приходилось использовать «костыль» с padding-top: 56.25%. Это выглядело странно и путало новичков. Теперь в CSS есть нативное свойство aspect-ratio, которое делает код чистым и понятным. Как это работает: Вы просто указываете желаемое соотношение сторон, и браузер сам высчитывает высоту элемента на основе его ширины.

    
        .video-card {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.avatar {
  width: 100px;
  aspect-ratio: 1 / 1; /* Всегда идеальный квадрат */
  object-fit: cover;
}

{}
    

Почему это важно для производительности: Когда вы указываете aspect-ratio, браузер заранее знает, сколько места на странице займет элемент, еще до того, как загрузится само изображение или видео. Это предотвращает Layout Shift (резкие прыжки контента при загрузке), что напрямую улучшает ваш показатель CLS в Google PageSpeed. Где применять: — Карточки товаров: Чтобы все изображения были одной высоты. — Видеоплееры: Чтобы фрейм не «схлопывался» до загрузки контента. — Скелетоны (заглушки): Чтобы прелоадер точно повторял форму будущего контента.

⚡️ Трюк с `AbortController`: как отменить Fetch Бывало такое, что пользователь быстро кликает по фильтрам, и на сервер улетает 10 запросов подряд? Если их не отменить, может возникнуть Race Condition: данные от первого запроса придут позже всех и перезапишут актуальный результат. Решение — нативный AbortController. Как это работает: Мы создаем контроллер, передаем его «сигнал» в запрос, и в любой момент можем вызвать .abort(), чтобы мгновенно прервать выполнение. Пример:

    
        let controller;

const fetchData = async () => {
  // Если предыдущий запрос еще идет — отменяем его
  if (controller) controller.abort();
  
  controller = new AbortController();

  try {
    const response = await fetch('/api/data', { 
      signal: controller.signal 
    });
    const data = await response.json();
    console.log(data);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменен');
    } else {
      console.error('Ошибка:', err);
    }
  }
};

{}
    

Где это использовать: — Живой поиск: Отменяем старый запрос при вводе каждого нового символа. — Смена страниц: Если пользователь ушел с экрана до того, как данные загрузились. — React/Vue хуки: В useEffect или при размонтировании компонента, чтобы избежать утечек памяти. Бонус: AbortController — универсальная штука. Его можно использовать не только для fetch, но и для удаления слушателей событий (addEventListener) одной командой!

Редко такое рекламируем, но решили поделиться. Наш знакомый ведёт закрытый канал по международным финансовым операциям: обмен, переводы, перестановка средств между странами. — Как не ловить блокировки — Как избежать комиссии при переводах — Как безопасно работать с зарубежными платёжками — Реальные кейсы и инструменты Владислав разбирает реальные кейсы, ошибки, которые приводят к блокировкам по 115-ФЗ и 161-ФЗ, и завтра покажет как открыть зарубежную карту с возможностью расплачиваться заграницей. Подписка ограничена, доступ периодически закрывается: https://t.me/+tfmfkq2rTag4MGNi

🚀 Полезная инфа: Как ускорить загрузку сайта через `Priority Hints` Обычно браузер сам решает, какой ресурс загружать первым: сначала стили и шрифты, потом картинки. Но иногда нам нужно, чтобы главный баннер (LCP) появился мгновенно, а второстепенные скрипты подождали. Для этого в HTML есть атрибут fetchpriority. 3 способа управления приоритетом: — **high: Говорит браузеру, что этот ресурс критически важен. Идеально для главного изображения на первом экране. — low: Для контента, который не нужен сразу (например, картинки внизу страницы или тяжелые скрипты аналитики). — auto: Значение по умолчанию — браузер решает сам. Пример использования:**

    
        <img src="hero-banner.jpg" fetchpriority="high" alt="Main Banner">

<script src="heavy-ads-script.js" fetchpriority="low"></script>

{}
    

Почему это важно для Core Web Vitals: Использование fetchpriority="high" для самого большого элемента на странице (LCP) может сократить время отрисовки на 20-30%. Это напрямую влияет на то, как высоко Google будет ранжировать ваш сайт. > Важно: Не ставьте high на всё подряд. Если все ресурсы будут «важными», приоритет просто перестанет работать. Используйте это только для 1-2 самых значимых элементов на странице.

⚡️ Сокращаем условия с помощью Optional Chaining и Nullish Coalescing Комбинация операторов ?. и ?? — это лучший способ писать безопасный код, который не падает при отсутствии данных и при этом не плодит десяток строк с проверками if. Как это работает на практике: Представьте, что вы получаете данные пользователя из API, где некоторые поля могут отсутствовать. До (код-лабиринт):

    
        let theme;
if (user && user.settings && user.settings.theme) {
  theme = user.settings.theme;
} else {
  theme = 'light';
}

{}
    

После (одна изящная строка):

    
        const theme = user?.settings?.theme ?? 'light';

{}
    

Разбор магии:

— user?.settings?.theme — если хотя бы один объект в цепочке null или undefined, выражение сразу вернет undefined, не вызывая ошибку. — ?? 'light' — если слева получилось undefined или null, сработает значение по умолчанию.

В чем ловушка: Не путайте ?? с ||. Если бы тема была пустой строкой "", то || заменил бы её на light, а ?? оставил бы пустую строку (так как это не null). Пользуйтесь этим, чтобы не терять валидные данные!

📚 Полезная инфа: Семантика — это не только про SEO Многие фронтенд-разработчики по привычке используют <div> и <span> для всего подряд, стилизуя их до неузнаваемости. Но использование правильных семантических тегов — это база профессиональной верстки. Почему это важно: * Доступность (A11y): Скринридеры для слабовидящих людей понимают структуру страницы только через семантику. Для них <div> с обработчиком клика — это просто текст, а <button> — это действие. * Поисковики (SEO): Google и Яндекс отдают приоритет контенту внутри тегов <main>, <h1> и <article>, лучше понимая иерархию данных. * Поддержка кода: Другому разработчику проще прочитать <header>, чем искать <div class="top-navigation-wrapper">. Заменяем «дивы» на смысл: * **<header> / <footer>** — шапка и подвал сайта или отдельной секции. * **<main> — основной уникальный контент страницы (должен быть один). * <nav> — блок с навигационными ссылками. * <section> — тематический раздел документа (обычно с заголовком). * <article> — независимый, самодостаточный блок (пост в блоге, карточка товара). * <aside> — побочный контент (сайдбар, рекламный баннер). > Золотое правило:** Перед тем как написать очередной <div>, спроси себя: «Есть ли в HTML тег, который лучше описывает этот контент?». Если это кнопка — используй <button>, если это список — <ul> и <li>.

⚡️ Console.table(): Визуализируй данные как профи Когда у тебя есть массив объектов или сложный JSON, обычный console.log() превращает отладку в бесконечное «раскрывание» вложенных свойств мышкой. Есть способ лучше. Метод console.table() отрисовывает данные в виде аккуратной интерактивной таблицы прямо в консоли браузера. Пример:

    
        const users = [
  { id: 1, name: 'Alex', role: 'Admin', status: 'online' },
  { id: 2, name: 'Elena', role: 'Editor', status: 'offline' },
  { id: 3, name: 'Ivan', role: 'User', status: 'online' }
];

// Вместо обычного лога
console.table(users);

{}
    

Почему это удобно: * Сортировка: Кликни по заголовку колонки в консоли, и данные отсортируются. * Выбор колонок: Если свойств слишком много, можно вывести только нужные: console.table(users, ['name', 'role']); * Объекты: Метод отлично работает и с одиночными объектами — ключи станут строками, а значения — колонкой. Лайфхак: Это работает не только в браузере, но и в Node.js. Таблица отрисуется в терминале с помощью символов псевдографики. Попробуй это в следующем дебаге вместо привычного лога!

👩‍💻 Всем программистам посвящается! Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 AI & ML — t.me/neuro_ready 👩‍💻 Frontend — t.me/frontend_ready 👩‍💻 IT Новости — t.me/it_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Linux — t.me/linux_ready 👩‍💻 Java — t.me/java_ready 📖 IT Книги — t.me/books_ready 📱 JavaScript — t.me/javascript_ready 🖼️ DevOps — t.me/devops_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

🚀 Полезная инфа: Зачем использовать `rel="noopener noreferrer"`? Если вы добавляете на сайт внешнюю ссылку с target="_blank", вы открываете огромную дыру в безопасности, о которой новички даже не догадываются. Это называется Tabnapping. В чем проблема: Когда пользователь переходит по вашей ссылке на другой сайт, новая вкладка получает доступ к объекту window.opener. Злоумышленник может с помощью JS подменить вашу страницу (оригинальную вкладку) на фишинговую копию, пока пользователь читает статью на втором сайте. Как это работает: 1. Пользователь жмет на ссылку. 2. Открывается вредоносный сайт. 3. Вредоносный скрипт делает: window.opener.location = 'https://phishing-site.com'. 4. Пользователь возвращается на вашу вкладку и видит форму «Войдите снова», вводит пароль — и готово. Решение: Всегда добавляйте атрибут rel:

    
        <a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
  Перейти безопасно
</a>

{}
    

* noopener: Запрещает новой вкладке доступ к window.opener. * noreferrer: Делает то же самое + скрывает адрес вашего сайта из заголовка Referer (полезно для приватности). > Хорошие новости: Современные браузеры (Chrome 88+, Safari 12.1+) автоматически добавляют noopener для всех ссылок с target="_blank". Но для поддержки старых браузеров и явной безопасности лучше прописывать это вручную.