.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-07-28T16:10:55Z","dateModified":"2026-07-28T16:10:55Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1491},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2770","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2770","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2770","headline":"Так вот ты какое, летнее настроение В Т-Шоп завезли новую фестивальную коллекцию. Собрали дизайнерские вещи,…","articleBody":"Так вот ты какое, летнее настроение\n\nВ Т-Шоп завезли новую фестивальную коллекцию. Собрали дизайнерские вещи, которые точно пригодятся:\n\n— футболки;\n— бандану;\n— плед;\n— веер и даже подвеску-открывашку.\n\nИдеально для путешествий, пикников и отдыха. Осталось выбрать, что первым отправится в корзину \n\nПосмотреть каталог\n\n#реклама \ntbank.ru\nО рекламодателе","datePublished":"2026-07-28T13:35:59Z","dateModified":"2026-07-30T11:58:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_YnDLcQOdoT8jGHWdQMPVIl0Y-GUAOQlBB-hxBucpOk8?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1141},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2769","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2769","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2769","headline":"🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей…","articleBody":"🤔 Как достигается изоляция при использовании бэм?\n\nБЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. \n\n🚩Как БЭМ предотвращает конфликты? \n\n🟠Все стили зависят только от конкретного блока \nВ БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте. \n

Кнопка

\n.button {\n background: blue;\n color: white;\n}\n\nПлохой пример без БЭМ \n.container .button {\n background: blue;\n}\n\n🟠Элементы (`__`) зависят только от своего блока \nСтили элемента никогда не зависят от родителя — только от блока. \n

\n

Заголовок

\n

Текст карточки

\n

\n.card__title {\n font-size: 20px;\n}\n\n.card__text {\n color: gray;\n}\n\n🟠Модификаторы (`--`) изменяют только нужные стили \nМодификаторы позволяют изменять внешний вид без переписывания базовых стилей. \nКнопка\nКнопка\n.button {\n padding: 10px;\n border-radius: 5px;\n}\n\n.button--red {\n background: red;\n}\n\n.button--blue {\n background: blue;\n}\n\n🟠Имена классов уникальны, нет глобальных стилей \nВ БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей. \nh1 {\n color: red;\n}\n\nБЭМ-версия \n.card__title {\n color: red;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-07-28T09:05:44Z","dateModified":"2026-07-28T09:05:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1476},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2768","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2768","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2768","headline":"Kafka на практике: продюсеры, консьюмеры, Docker Хотите увидеть, как реально работает Kafka? 3 августа в 20:0…","articleBody":"Kafka на практике: продюсеры, консьюмеры, Docker\n\nХотите увидеть, как реально работает Kafka? \n\n3 августа в 20:00 — вебинар с живыми примерами кода. Поднимем кластер в Docker, создадим топики, напишем продюсеров на Python/Java, настроим консьюмеров с consumer groups. Разберем партиционирование, оффсеты и гарантии доставки. \n\nДля backend-разработчиков, DevOps и всех, кто любит практику. \n\nУзнать больше\n\n#реклама 16+\notus.ru\nО рекламодателе","datePublished":"2026-07-27T23:36:09Z","dateModified":"2026-07-29T21:48:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_DVBRPiCrgJ5q2qyJo1yfQ0okq361uAk29dEBN5GtsDE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1032}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2767","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2767","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2767","headline":"🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так…","articleBody":"🤔 В каком случае важен порядок: при копировании объекта или массива?\n\n- Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура).\n- Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-07-27T16:10:55Z","dateModified":"2026-07-27T16:10:55Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1398},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2766","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2766","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2766","headline":"Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют…","articleBody":"Подключайтесь 24.09 к Yandex Scale 2026\n\nГлавная конференция Yandex Cloud. \n\nУзнайте о сервисах, которые меняют ваш бизнес. \n\n4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. \n\nУчастие бесплатное! \n\nЗарегистрироваться\n\n#реклама 16+\nscale.yandex.cloud\nО рекламодателе","datePublished":"2026-07-27T10:01:53Z","dateModified":"2026-07-29T09:23:49Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_jjbPUdqnZapZab4JnT5KRUPO6Ba6pyd6I5aG6wXu5DA?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1036},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2765","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2765","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2765","headline":"🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для…","articleBody":"🤔 Как проверить правильную иерархию html заголовков?\n\nПроверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. \n\n🚩Зачем нужна правильная иерархия заголовков?\n\n🟠Логическая структура\nЗаголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги.\n🟠Доступность\nЛюди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице.\n🟠SEO\nПоисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.\n\n🚩Что значит \"правильная иерархия заголовков\"?\n\n🟠`

` \nЗаголовок страницы (должен быть уникальным и только один на странице).\n🟠`

`\nПодразделы

.\n🟠`

` \nПодразделы

, и так далее.\n\n

Главный заголовок страницы

\n

Раздел 1

\n

Подраздел 1.1

\n

Подраздел 1.2

\n

Раздел 2

\n

Подраздел 2.1

\n

Подраздел 2.1.1

\n\n🚩Как проверить иерархию заголовков?\n\n🟠Ручная проверка HTML-кода\nВручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например,

→

→

и так далее, без \"перескакивания\". Избегайте \"пропуска уровней\" (например, от

сразу к

).\n\n🟠Использование браузерных DevTools\nВ браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку \"Elements\" (Элементы). Найдите заголовки (

,

и так далее) и проверьте их последовательность.\n\n🟠Инструменты для проверки доступности\nИспользуйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.\n\n🟠Скрипт для автоматической проверки\nЕсли вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков. \nconst headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];\nheadings.forEach((heading, index) => {\n console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);\n});\n\n🟠Плагин для анализа заголовков\nДля популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.\n\n🚩Примеры ошибок в структуре и как их исправить\n\nОшибка: Пропуск уровней заголовков\n

Главный заголовок

\n

Подраздел

\n\nИсправление\n

Главный заголовок

\n

Подраздел

\n\nОшибка: Несколько

на одной странице\n

Главный заголовок

\n

Еще один заголовок

\n\nИсправление\n

Главный заголовок

\n

Еще один заголовок

\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-07-27T09:05:46Z","dateModified":"2026-07-27T09:05:46Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1396},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}}]}

Frontend | Вопросы собесов

17 867

Дома так же хорошо, как на природе MirCli создаёт в квартире климат, который не отличить от свежести на природе: тихая прохлада и чистый воздух даже в самую жару. Подберём кондиционер, очиститель и увлажнитель под вашу площадь - более 250 000 товаров для климата и официальные поставки от 800 брендов. Узнать больше #реклама mircli.ru О рекламодателе

9222

Analytics

Frontend | Вопросы собесов

17 867

🤔 Что известно про обобщённые типы? Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию. Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.4k113

Analytics

Frontend | Вопросы собесов

17 867

🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. 🚩CSR (Client-Side Rendering) Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.

<div id="app"></div>
<script src="bundle.js"></script>

🚩Плюсы ➕Быстрая работа после загрузки Приложение становится очень интерактивным после инициализации. ➕Меньшая нагрузка на сервер Основная работа выполняется на клиентской стороне. ➕Гибкость и модульность Легко добавлять сложные интерактивные компоненты. 🚩Минусы ➖Медленная первая загрузка (Time to First Byte, TTFB) Пользователь видит пустую страницу, пока загружается JavaScript и данные. ➕Проблемы с SEO Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере. ➖Требования к устройствам Больше ресурсов требуется на стороне клиента. 🚩SSG (Static Site Generation) Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.

npm run build

🚩Плюсы и минусы ➕Молниеносная загрузка HTML статичен и отдается сервером без обработки. ➕SEO-дружелюбность Поисковые системы могут легко индексировать готовый HTML. ➕Уменьшение нагрузки на сервер Все вычисления выполняются заранее (во время сборки). ➖Ограничения при частых обновлениях контента Для обновления нужно заново пересобирать сайт, что может занимать много времени. ➖Не подходит для динамических данных Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным. 🚩ISR (Incremental Static Regeneration) Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.

export async function getStaticProps() {
  return {
    props: {
      data: fetchData(),
    },
    revalidate: 60, // Обновлять страницу каждые 60 секунд
  };
}

🚩Плюсы и минусы ➕Лучшая производительность Страницы отдаются как статические, но обновляются при необходимости. ➕Гибкость Удобно для контента, который редко обновляется. ➕SEO Поисковики видят статические страницы. ➖Сложнее настроить Нужно управлять кэшированием и интервалами обновления. ➖Не подходит для полностью динамических страниц Если обновления контента слишком частые, ISR может не подойти. 🚩DPR (Dynamic Rendering / Hybrid Rendering) Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков. 🚩Плюсы и минусы ➕Оптимально для SEO Боты получают готовый HTML. ➕Гибкость Пользователи получают интерактивные страницы через CSR. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний

1.5k134

Analytics

Frontend | Вопросы собесов

17 867

Yandex Ecom Open Air — летнее событие про онлайн-продажи Yandex Ecom Open Air 2026 объединяет деловую программу, живое общение и атмосферу фестиваля в одном потоке. Здесь обсуждают технологии, которые становятся частью среды. Исследуют силы, которые влияют на весь рынок. Находят новые связи, идеи и точки роста. В течение дня пространство фестиваля наполняют выступления, дискуссии, встречи, специальные форматы, музыка и активности партнёров. Присоединиться к происходящему можно из любой точки — на площадке фестиваля или через онлайн-трансляцию. Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

955

Analytics

Frontend | Вопросы собесов

17 867

🤔 Что такое кэш приложения в HTML5? Это механизм, позволяющий сохранять ресурсы веб-приложения в локальном кэше, чтобы оно могло работать офлайн. Реализуется через файл манифеста .appcache (устарело, заменено Service Workers). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.4k6

Analytics

Frontend | Вопросы собесов

17 867

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

1.6k86

Analytics

Frontend | Вопросы собесов

17 867

Услуги дата-центра в Москве Размещение и аренда серверного оборудования в дата-центре. 👍 4 современных дата-центра в Москве. 👍 Лицензированный оператор связи. 👍 Индивидуальные конфигурации выделенных серверов под задачи клиента. 👍 Круглосуточная техническая поддержка в Телеграм, без ботов. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

1.0k1

Analytics

Frontend | Вопросы собесов

17 867

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? - Progressive enhancement: вначале создаётся базовая, минимальная версия, которая работает в любом браузере, а затем добавляются улучшения для современных. - Graceful degradation: вначале создаётся максимально функциональная версия, которая плавно теряет функции при запуске в старых браузерах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.3k2

Analytics

Frontend | Вопросы собесов

17 867

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5. 🚩Тестирование (Test Cases) Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям. 🟠Ручное тестирование Вы запускаете код с различными значениями и проверяете результаты. 🟠Автоматизированное тестирование Пишете тестовые скрипты, которые автоматически проверяют корректность работы.

function add(a, b) {
    return a + b;
}

Мы можем протестировать её так

console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2

Однако лучше использовать автоматическое тестирование. Например, с помощью Jest

test('add function works correctly', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 0)).toBe(0);
    expect(add(-1, -1)).toBe(-2);
});

🚩Обработка крайних случаев Иногда код может работать корректно для обычных данных, но давать сбои в "необычных" случаях. Эти ситуации называют крайними случаями. Пустой ввод (например, add() вместо двух чисел). Очень большие числа. Неправильные типы данных (например, строка вместо числа).

   console.log(add()); // undefined или ошибка
   console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
   

🚩Отладка (Debugging) Если код не работает как надо, нужно использовать инструменты для отладки 🟠console.log() Вывод данных для проверки логики. 🟠Инструменты разработчика в браузере Для работы с JavaScript в реальном времени. 🟠Дебаггер Позволяет пошагово выполнять код. 🚩Проверка производительности Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций. 🚩Code Reviews и тестирование пользователями После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний

1.4k56

Analytics

Frontend | Вопросы собесов

17 867

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

960

Analytics

Frontend | Вопросы собесов

17 867

🤔 Какие есть операторы в JS? Арифметические (+, -, *, /), логические (&&, ||, !), сравнения (==, ===, >, <), присваивания (=, +=), тернарный (?:), побитовые, typeof, instanceof, delete, new, in и др. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.4k78

Analytics

Frontend | Вопросы собесов

17 867

Кинопоиск до 360 дней бесплатно Кинопоиск — тысячи фильмов и сериалов без рекламы, в высоком качестве. Яндекс Музыка и Книги тоже в мультиподписке Плюс. Попробуйте бесплатно ❤️ Попробовать #реклама 18+ kinopoisk.ru О рекламодателе

1.1k2

Analytics

Frontend | Вопросы собесов

17 867

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

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

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

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

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

🚩Пример на LESS 1⃣Определение миксина

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

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

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

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

🚩Пример на Stylus 1⃣Определение миксина

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

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

.box
border-radius(10px)

.button
border-radius(5px

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

1.6k56

Analytics

Frontend | Вопросы собесов

17 867

🤔 Для чего существует тег <q>? Тег <q> используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется <blockquote>. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.5k5

Analytics

Frontend | Вопросы собесов

17 867

Так вот ты какое, летнее настроение В Т-Шоп завезли новую фестивальную коллекцию. Собрали дизайнерские вещи, которые точно пригодятся: — футболки; — бандану; — плед; — веер и даже подвеску-открывашку. Идеально для путешествий, пикников и отдыха. Осталось выбрать, что первым отправится в корзину Посмотреть каталог #реклама tbank.ru О рекламодателе

1.1k2

Analytics

Frontend | Вопросы собесов

17 867

🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. 🚩Как БЭМ предотвращает конфликты? 🟠Все стили зависят только от конкретного блока В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте.

<div class="button">Кнопка</div>

.button {
  background: blue;
  color: white;
}

Плохой пример без БЭМ

.container .button {
  background: blue;
}

🟠Элементы (`__`) зависят только от своего блока Стили элемента никогда не зависят от родителя — только от блока.

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

.card__title {
  font-size: 20px;
}

.card__text {
  color: gray;
}

🟠Модификаторы (`--`) изменяют только нужные стили Модификаторы позволяют изменять внешний вид без переписывания базовых стилей.

<button class="button button--red">Кнопка</button>
<button class="button button--blue">Кнопка</button>

.button {
  padding: 10px;
  border-radius: 5px;
}

.button--red {
  background: red;
}

.button--blue {
  background: blue;
}

🟠Имена классов уникальны, нет глобальных стилей В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей.

h1 {
  color: red;
}

БЭМ-версия

.card__title {
  color: red;
}

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

1.5k8

Analytics

Frontend | Вопросы собесов

17 867

Kafka на практике: продюсеры, консьюмеры, Docker Хотите увидеть, как реально работает Kafka? 3 августа в 20:00 — вебинар с живыми примерами кода. Поднимем кластер в Docker, создадим топики, напишем продюсеров на Python/Java, настроим консьюмеров с consumer groups. Разберем партиционирование, оффсеты и гарантии доставки. Для backend-разработчиков, DevOps и всех, кто любит практику. Узнать больше #реклама 16+ otus.ru О рекламодателе

1.0k

Analytics

Frontend | Вопросы собесов

17 867

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.4k66

Analytics

Frontend | Вопросы собесов

17 867

Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

1.0k2

Analytics

Frontend | Вопросы собесов

17 867

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`<h1>` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`<h2>` Подразделы <h1>. 🟠`<h3>` Подразделы <h2>, и так далее.

<h1>Главный заголовок страницы</h1>
  <h2>Раздел 1</h2>
    <h3>Подраздел 1.1</h3>
    <h3>Подраздел 1.2</h3>
  <h2>Раздел 2</h2>
    <h3>Подраздел 2.1</h3>
      <h4>Подраздел 2.1.1</h4>

🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков. 🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков.

const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
  console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});

🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков

<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->

Исправление

<h1>Главный заголовок</h1>
  <h2>Подраздел</h2>

Ошибка: Несколько <h1> на одной странице

<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>

Исправление

<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>

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

1.4k86

Analytics

Show more