Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads

Network: easyofferRussia37 797Technologies & Applications7 467...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 337 subscribers, ranking 7 467 in the Technologies & Applications category and 37 797 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 337 subscribers.

According to the latest data from 05 November, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -286 over the last 30 days and by -4 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 6.64%. Within the first 24 hours after publication, content typically collects 4.45% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 152 views. Within the first day, a publication typically gains 771 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Thanks to the high frequency of updates (latest data received on 06 November, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

17 337

Subscribers

-424 hours

-967 days

-28630 days

1 152

Post views

~ 77124 hours

~ 88148 hours

6.64%

Engagement rate

~ 2

Posts per day

Ads index

Posts Archive

\n\n🚩`stopImmediatePropagation`\n\nЭтот метод, помимо остановки всплытия (как stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.\n\n\n\n\n🚩`preventDefault`\n\nЭтот метод отменяет поведение элемента по умолчанию. \nНекоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например:\n- Клик по ссылке ведет на новый URL.\n- Отправка формы перезагружает страницу. \nС помощью preventDefault можно предотвратить это поведение.\nПерейти на сайт\n\n\n\n🚩`passive`\n\nЭто модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.\nwindow.addEventListener(\"scroll\", () => {\n console.log(\"Скролл работает\");\n}, { passive: true });\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-01-09T09:10:27Z","dateModified":"2025-01-09T09:10:27Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3336},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":42}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1020","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1020","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1020","headline":"🤔 Какое Flexbox свойство отвечает за перенос элементов на новую строку? Свойство flex-wrap позволяет определя…","articleBody":"🤔 Какое Flexbox свойство отвечает за перенос элементов на новую строку?\n\nСвойство flex-wrap позволяет определять, могут ли элементы переноситься на новую строку, если они не помещаются в контейнере. Это свойство управляет тем, как элементы распределяются в ограниченном пространстве.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-01-08T16:10:09Z","dateModified":"2025-01-08T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3464},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":38},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1019","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1019","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1019","headline":"🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса э…","articleBody":"🤔 Какое событие сработает при потери фокуса элементом формы?\n\nСобытие, которое срабатывает при потере фокуса элементом формы, называется blur.\n\n🚩Почему нужно событие `blur`?\n\nСобытие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.\nАвтоматическое сохранение введенных данных при переходе на другой элемент формы.\nСкрытие вспомогательной информации (например, подсказок) при уходе с элемента.\nblur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.\n\n🚩Как оно работает?\n\nblur срабатывает, когда элемент теряет фокус, то есть пользователь:\nКликнул на другой элемент.\nНажал клавишу Tab, чтобы перейти на следующий элемент.\nВ отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.\n\n🚩Как использовать `blur`?\n\nСобытие можно обрабатывать с помощью:\n1. HTML-атрибутов (например, onblur).\n2. JavaScript через метод addEventListener.\n\nПример на практике\n\n\n\n \n \n Пример blur\n \n\n\n \n\n\n\n🚩Особенности события `blur`\n\n🟠Не всплывает\nСобытие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.\n \n // Работает только для конкретного элемента\n element.addEventListener(\"blur\", handler);\n\n // Для делегирования используют focusout\n parentElement.addEventListener(\"focusout\", handler);\n \n\n🟠Отличие от `change`\nСобытие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-01-08T09:10:07Z","dateModified":"2025-01-08T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3688},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1018","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1018","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1018","headline":"🤔 За что отвечает z-index? z-index управляет порядком наложения элементов на оси Z. Элементы с более высоким…","articleBody":"🤔 За что отвечает z-index?\n\nz-index управляет порядком наложения элементов на оси Z. Элементы с более высоким значением отображаются поверх элементов с более низким значением, при условии, что они находятся в рамках позиционирования.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-01-07T16:10:07Z","dateModified":"2025-01-07T16:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3568},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":24},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1017","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1017","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1017","headline":"🤔 Почему селекторы перенаследуются? Селекторы перенаследуются в CSS для того, чтобы упростить иерархию стилей…","articleBody":"🤔 Почему селекторы перенаследуются? \n\nСелекторы перенаследуются в CSS для того, чтобы упростить иерархию стилей и избежать избыточного кода. Перенаследование позволяет дочерним элементам автоматически применять стили, заданные для родительских элементов, если не указано иначе. Это помогает поддерживать консистентность дизайна и упрощает управление стилями.\n\n🚩Пример и объяснение\n\n

Текст в параграфе.

Другой текст в параграфе.

\n\nИ CSS\n.parent p {\n color: blue;\n font-size: 16px;\n}\n.child p {\n font-size: 14px;\n}\n\n🚩Почему это важно\n\n🟠Сокращение кода\nПозволяет избегать дублирования стилей, что делает код более чистым и легким для понимания.\n\n🟠Управляемость \nИзменяя стиль родительского элемента, можно автоматически изменить стиль всех дочерних элементов, что облегчает поддержку и модификацию дизайна.\n\n🟠Консистентность\nОбеспечивает единообразие стилей на всем сайте, так как дочерние элементы наследуют стили от родительских.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-01-07T09:10:07Z","dateModified":"2025-01-07T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":58,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3970},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":58}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1016","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1016","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1016","headline":"Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка…","articleBody":"Как легко прокачать навыки верстки и найти работу? \n\nПрисоединяйся к каналам опытного верстальщика: \n2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе.\n\n2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду\n\nНаучись и зарабатывай на верстке!","datePublished":"2025-01-07T07:00:17Z","dateModified":"2025-01-09T07:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2267},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1015","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1015","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1015","headline":"🤔 Из чего строится размер элемента? Размер элемента состоит из содержимого, внутренних отступов (padding), гр…","articleBody":"🤔 Из чего строится размер элемента?\n\nРазмер элемента состоит из содержимого, внутренних отступов (padding), границ (border) и внешних отступов (margin). Суммарный размер зависит от используемой модели box-sizing.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-01-06T16:10:09Z","dateModified":"2025-01-06T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3690},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}}]}

17 331

🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. 🚩Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

🚩Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

🚩Основные отличия 🟠История коммитов Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 🟠Коммиты слияния Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 🟠Конфликты Merge: Конфликты решаются один раз при слиянии. Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 🟠Применение Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Ставь 👍 и забирай 📚 Базу знаний

17 331

👨‍💻 В телеграме появился новый канал по Фронтенду Всё что нужно для Frontend-разработчика теперь в одном месте: обучающие видео, статьи, онлайн сервисы, шпаргалки и многое другое... ➡️ Перейти в канал "Фронтенд заметки"

17 331

🤔 Что делает метод apply? Вызывает функцию с указанным контекстом this и массивом аргументов. Например: func.apply(context, [arg1, arg2]). Удобен для динамического вызова функций. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

🤔 Как проверить правильную иерархию 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>

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

17 331

🤔 Какие структуры данных есть в JavaScript? Включают примитивы (string, number, boolean, null, undefined, symbol, bigint), сложные структуры (Set, Map, WeakSet, WeakMap), массивы и объекты. Они предоставляют гибкость для работы с данными. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

17 331

🤔 Как добавить слушатель события? Метод addEventListener добавляет обработчик к элементу. Укажите событие и функцию-обработчик: element.addEventListener('click', handler). Это полезно для выполнения действий при определённых событиях. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

🤔 Чего стоит и не стоит избегать в оптимизации сайта? 🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя. 🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один. 🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов. 🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx. 🟠Асинхронная загрузка и критический CSS Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы. 🟠Улучшение производительности сервера Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов. 🟠Использование современных технологий Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов. 🟠Мониторинг и анализ Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic. 🚩Чего стоит избегать при оптимизации сайта 🟠Избегайте чрезмерной минимизации Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку. 🟠Не используйте большие, несжатые изображения Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем. 🟠Не загружайте все ресурсы сразу Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки. 🟠Не пренебрегайте кэшированием Отсутствие кэширования: Увеличивает время загрузки для повторных посещений. 🟠Избегайте блокирующих ресурсов JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами. 🟠Не злоупотребляйте анимациями и большими скриптами Производительность: Сложные анимации и большие скрипты могут замедлить сайт, особенно на мобильных устройствах. 🟠Избегайте чрезмерного использования плагинов Нагрузки: Избыток плагинов может значительно замедлить сайт и создать проблемы с безопасностью. 🟠Не забывайте про оптимизацию для мобильных устройств Мобильная версия: Сайт должен быть оптимизирован для мобильных пользователей, так как большинство пользователей используют мобильные устройства. Ставь 👍 и забирай 📚 Базу знаний

17 331

🤔 Как отрисовать компоненты на основе массива? Используйте метод map, чтобы перебрать массив и для каждого элемента создать компонент. Например, в React: array.map(item => <Component key={item.id} data={item} />). Это позволяет динамически генерировать список компонентов на основе данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.

// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();

🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.

const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен

🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

17 331

🧠 Machine Learning — авторский канал, где собрана вся база по ИИ и машинному обучению. Senior разработчик AI-алгоритмов и автономных агентов, разбирает гайды, редкую литературу и код топовых моделей машинного обучения и искусственного интеллекта. В 2025 году ИИ выйдет на совершенно новый уровень тот, кто не успеет за прогрессом - отстанет, а кто разберется - сорвет куш. Стоит подписаться: t.me/ai_machinelearning_big_data

17 331

🤔 Как при наведении увеличить в размере элемент, не сдвигая соседние? Для этого используется трансформация элемента, которая изменяет его размер, не затрагивая соседние элементы. Она не влияет на положение других элементов, так как не изменяет геометрическое расположение в документе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

Repost from easyoffer

17 331

🤔 Какие модификаторы есть у событий? В JavaScript у событий есть специальные модификаторы, которые позволяют изменять поведение события, управлять его распространением, обработкой и связанной с ним логикой. 🚩`stopPropagation` Этот метод предотвращает всплытие события вверх по дереву DOM. По умолчанию, события в DOM распространяются по фазам: погружение (capturing) → цель (target) → всплытие (bubbling). Если вы хотите остановить обработку события на текущем элементе и не позволить ему "подняться" выше по дереву DOM, используйте stopPropagation.

<div id="parent" style="padding: 20px; background: lightblue;">
  Родительский элемент
  <button id="child">Дочерний элемент</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    alert("Событие всплыло до родителя");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    alert("Событие на кнопке");
    event.stopPropagation(); // Остановим всплытие
  });
</script>

🚩`stopImmediatePropagation` Этот метод, помимо остановки всплытия (как stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.

<button id="myButton">Нажми меня</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    alert("Обработчик 1");
  });

  button.addEventListener("click", (event) => {
    alert("Обработчик 2");
    event.stopImmediatePropagation(); // Остановим все остальные обработчики
  });

  button.addEventListener("click", () => {
    alert("Обработчик 3"); // Этот обработчик не выполнится
  });
</script>

🚩`preventDefault` Этот метод отменяет поведение элемента по умолчанию. Некоторые элементы (например, ссылки или формы) имеют стандартное поведение. Например: - Клик по ссылке ведет на новый URL. - Отправка формы перезагружает страницу. С помощью preventDefault можно предотвратить это поведение.

<a href="https://example.com" id="link">Перейти на сайт</a>

<script>
  const link = document.getElementById("link");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // Останавливаем переход по ссылке
    alert("Поведение ссылки отменено");
  });
</script>

🚩`passive` Это модификатор, который не является методом, а используется в настройках обработчика событий. Он указывает, что обработчик не вызывает preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.

window.addEventListener("scroll", () => {
  console.log("Скролл работает");
}, { passive: true });

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

17 331

🤔 Какое Flexbox свойство отвечает за перенос элементов на новую строку? Свойство flex-wrap позволяет определять, могут ли элементы переноситься на новую строку, если они не помещаются в контейнере. Это свойство управляет тем, как элементы распределяются в ограниченном пространстве. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 331

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);

🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

17 331

🤔 За что отвечает z-index? z-index управляет порядком наложения элементов на оси Z. Элементы с более высоким значением отображаются поверх элементов с более низким значением, при условии, что они находятся в рамках позиционирования. Ставь 👍 и забирай 📚 Базу знаний

17 331

🤔 Почему селекторы перенаследуются? Селекторы перенаследуются в CSS для того, чтобы упростить иерархию стилей и избежать избыточного кода. Перенаследование позволяет дочерним элементам автоматически применять стили, заданные для родительских элементов, если не указано иначе. Это помогает поддерживать консистентность дизайна и упрощает управление стилями. 🚩Пример и объяснение

<div class="parent">
    <p>Текст в параграфе.</p>
    <div class="child">
        <p>Другой текст в параграфе.</p>
    </div>
</div>

И CSS

.parent p {
    color: blue;
    font-size: 16px;
}
.child p {
    font-size: 14px;
}

🚩Почему это важно 🟠Сокращение кода Позволяет избегать дублирования стилей, что делает код более чистым и легким для понимания. 🟠Управляемость Изменяя стиль родительского элемента, можно автоматически изменить стиль всех дочерних элементов, что облегчает поддержку и модификацию дизайна. 🟠Консистентность Обеспечивает единообразие стилей на всем сайте, так как дочерние элементы наследуют стили от родительских. Ставь 👍 и забирай 📚 Базу знаний

17 331

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

17 331

🤔 Из чего строится размер элемента? Размер элемента состоит из содержимого, внутренних отступов (padding), границ (border) и внешних отступов (margin). Суммарный размер зависит от используемой модели box-sizing. Ставь 👍 и забирай 📚 Базу знаний