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

Відкрити в Telegram

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

Сітка:easyoffer Росія37 010 Технології та додатки7 165...

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 17 887 підписників, посідаючи 7 165 місце в категорії Технології та додатки та 37 010 місце у регіоні Росія.

📊 Показники аудиторії та динаміка

З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 17 887 підписників.

За останніми даними від 25 серпня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -149, а за останні 24 години на -6, загальне охоплення залишається високим.

Статус верифікації: Не верифікований
Рівень залученості (ER): Середній показник залученості аудиторії становить 6.98%. Протягом перших 24 годин після публікації контент зазвичай збирає 4.62% реакцій від загальної кількості підписників.
Охоплення публікацій: В середньому кожен допис отримує 1 249 переглядів. Протягом першої доби публікація в середньому набирає 827 переглядів.
Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 5.
Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.

📝 Опис та контентна політика

Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Завдяки високій частоті оновлень (останні дані отримано 26 серпня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.

17 887

Підписники

-624 години

-457 днів

-14930 день

1 249

Перегляди допису

~ 82724 години

~ 94148 годин

6.98%

Коефіцієнт залучення

~ 3

Дописів на день

Ads index

beta

Архів дописів

\";\ndocument.getElementById(\"content\").innerHTML = userInput;\n\n🟠Проблемы с безопасностью CSP (Content Security Policy) \nЕсли в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности. \n\n\n🟠Случайное удаление обработчиков событий \nЕсли заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся. \ndocument.getElementById(\"btn\").addEventListener(\"click\", () => {\n alert(\"Нажато!\");\n});\n\ndocument.getElementById(\"container\").innerHTML = \"\";\ndocument.getElementById(\"btn\").click(); // Ошибка, обработчик удален\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-18T09:05:40Z","dateModified":"2026-08-18T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1264},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2844","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2844","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2844","headline":"О!Хакатон возвращается — на кону миллион Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджер…","articleBody":"О!Хакатон возвращается — на кону миллион\n\nПриглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка.\n\nВам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽.\n\nПрисоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков:\n\n📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей.\n📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик.\n\n📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября.\n\nСкорее присоединяйтесь по ссылке!\n\nРеклама. ООО \"БРОНИРОВАНИЕ ГОСТИНИЦ\". ИНН 7703389880.","datePublished":"2026-08-18T07:00:10Z","dateModified":"2026-08-20T07:29:59Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_CCS0BLObe7NwDFhNBl2Ry2T9yhzj0LWHKORnaj9K_Ow?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":889},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2843","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2843","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2843","headline":"deep tech night: 5 сентября, онлайн ⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и междуна…","articleBody":"deep tech night: 5 сентября, онлайн\n\n⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems.\n\nРазберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену.\n\nВ прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события. \n\nЗарегистрироваться\n\n#реклама 16+\ndeeptechnight.ru\nО рекламодателе","datePublished":"2026-08-18T03:11:51Z","dateModified":"2026-08-20T01:19:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":880}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2842","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2842","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2842","headline":"🤔 Какое событие сработает при потере фокуса элементом формы? Событие blur — срабатывает, когда элемент теряет…","articleBody":"🤔 Какое событие сработает при потере фокуса элементом формы?\n\nСобытие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-17T16:10:30Z","dateModified":"2026-08-17T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1153},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2841","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2841","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2841","headline":"Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже…","articleBody":"Яндекс Музыка до 360 дней бесплатно\n\nЯндекс Музыка для вас и 3-х ваших близких.\nКинопоиск и Яндекс Книги тоже в мультиподписке Плюс.\nПопробуйте бесплатно❤️ \n\nСлушать\n\n#реклама 18+\nmusic.yandex.ru\nО рекламодателе","datePublished":"2026-08-17T11:04:54Z","dateModified":"2026-08-19T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_J0rvKzoeTiA6fXsTvexFG8rJSNUOxWMI04is7a9qzSk?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":943}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2840","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2840","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2840","headline":"🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать…","articleBody":"🤔 Как добавить слушатель события?\n\nЭто важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.\n\n🚩Почему это нужно?\n\nСлушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.\n\n🚩Как это используется?\n\nРассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.\n\n🟠Чистый JavaScript\nДля добавления слушателя события используется метод addEventListener.\n\n\n\n \n Event Listener Example\n\n\n \n\n \n\n\n\n🟠React\nОбработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.\nimport React from 'react';\n\nfunction App() {\n const handleClick = () => {\n alert('Button was clicked!');\n };\n\n return (\n

\n \n

\n );\n}\n\nexport default App;\n\n🟠jQuery\nЕсли вы используете его, добавление слушателей событий также очень просто и удобно.\n\n\n\n \n Event Listener Example\n \n\n\n \n\n \n\n\n\n🚩Почему это удобно и важно\n\n🟠Интерактивность\nПозволяет создавать динамичные и отзывчивые интерфейсы.\n🟠Гибкость\nВозможность реагировать на различные действия пользователей.\n🟠Удобство\nВ каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-17T09:05:39Z","dateModified":"2026-08-17T09:05:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1121},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","headline":"В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 2 года мы развиваем комьюнити, гд…","articleBody":"В нашем канале много ценного для разработчиков по подготовке к собесам👇\n\nУже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!\n\nПолные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ\n\nСтримы с гостями и записями: \nКак проходить собеседование на английском\nКак решать livecoding задачи\nПрокачали более 30 резюме вместе с Юрой\n\nСборники вопросов по темам:\nКибербезопасность на собеседовании\nВсе вопросы по React на собеседовании\nВсе вопросы по TypeScript на собеседовании\nКак решать задачи двумя указателями\nВопросы с Vue собеседований\nВопросы по сетям и методологиям с 200 собесов\nВопросы по JS с 200 собесов\nКакие задачи спрашивают на livecoding чаще\n\nПолезные посты:\nJob-борды для поиска работы\nЗапись нашего самого кринжового собеса\nНовый HTTP метод QUERY\n\nСтатистика по рынку:\nИюль, Июнь, Май, Апрель, Март\n\nТекущие рекорды участников: \nОффер 6800$ net с релокацией на Кипр\nИз Шанхая до 4500$ в американскую компанию\nПолучили 427 000 на руки в Сбер и отказались\nВыбили 380 000 на руки в банк и приняли!\nНаши встречи в Питере, Москве, Шанхае\n\nКак я прохожу собесы на ютубе: \nОффер 260к на Go в Empoycity\nОффер 300к на Go в \"Системная интеграция\"\nОтжал 390 gross + 25% премии в Иннотех\nОффер на лида 415 gross + 20% премии в ПСБ\n\nА еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) \n\nПодписывайся 👇\nhttps://t.me/frontend_punks\n\nРеклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809","datePublished":"2026-08-17T07:00:18Z","dateModified":"2026-08-17T07:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_OHrosQTvU3dAY7dgvv-Pbuc1-gKDot5fwmuN1zpJGXE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1086},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","headline":"Основные шаблоны проектирования в системном дизайне Знать CQRS, Event Sourcing и Saga недостаточно, чтобы пра…","articleBody":"Основные шаблоны проектирования в системном дизайне\n\nЗнать CQRS, Event Sourcing и Saga недостаточно, чтобы правильно применять эти шаблоны в реальной системе. Каждый из них решает архитектурную проблему, но одновременно увеличивает сложность разработки, эксплуатации и поддержки. Если выбирать паттерн только потому, что он популярен или используется в высоконагруженных проектах, можно получить архитектуру, сложнее самой задачи.\n\nНа открытом уроке 24 августа в 20:00 в OTUS разберём ключевые шаблоны системного дизайна: CQRS, Event Sourcing и Saga Pattern. Рассмотрим, какие проблемы они решают, в каких системах действительно нужны и какие новые ограничения создают. На практических примерах посмотрим, как эти подходы применяются в высоконагруженных сервисах, событийных системах и процессах с распределёнными транзакциями. \n\nУзнать больше\n\n#реклама 16+\notus.ru\nО рекламодателе","datePublished":"2026-08-17T03:09:21Z","dateModified":"2026-08-19T01:18:23Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_VJb-2Siji9Wt700FpgIVHhYeHpZaivgJuJGKvH_9JCM?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":830}]}}]}

17 887

🤔 Что такое SVG? SVG (Scalable Vector Graphics) — это векторный графический формат, основанный на XML. Он позволяет отображать графику (фигуры, линии, текст) с возможностью масштабирования без потери качества. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 887

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>

🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>

🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

17 887

Планируете переводить ребенка в онлайн-школу в сентябре? ✅Приглашаем родителей на прямую линию с директором онлайн-школы «Синергия». Встреча пройдет 25 августа в 18:00 в формате онлайн. Количество мест в вебинарной команте ограничено! Успейте зарегистрироваться! Регистрация бесплатная в мессенджере TELEGRAM Зарегистрироваться #реклама 16+ s.salebot.pro О рекламодателе

17 887

🤔 Как отменить обтекание картинки текстом? Используется свойство clear, которое говорит элементу не обтекать плавающие элементы. Можно применить clear: both или вставить блок с этим стилем после float-элемента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 887

Не знак свыше, а точный таргетинг Теперь всем, кто продвигается через CTV в Яндекс Директе, стало проще находить свою аудиторию. Таргетингов стало в 5 раз больше. Вот что нового: — Таргетинг по интересам. Например, можно выбрать не всех, кто интересуется спортом, а только любителей фитнеса или тенниса. — Таргетинг по привычкам. Находите аудиторию по поведению в онлайне и офлайне — например, тех, кто регулярно посещает торговые центры или часто покупает товары в интернете. — Более гибкие настройки. Можно сочетать интересы и социально-демографические характеристики с жанрами и тематиками контента. 👌 Используйте новые возможности, чтобы сделать рекламу на Connected TV еще эффективнее Узнать больше #реклама yandex.ru О рекламодателе

17 887

🤔 Какие особенности слежения за "глубокими" объектами? Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching). Проблема: поверхностное слежение (`shallow watching`) JavaScript сравнивает только ссылки на объекты, а не их содержимое.

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

🚩Глубокое копирование vs поверхностное Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:

const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)

Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):

const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)

🚩Как следить за глубокими объектами? 🟠React: следим через `useState` и `useEffect` В React состояние обновляется только при изменении ссылки (shallow compare).

const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
  console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом

Решение – создавать новый объект при изменении:

setUser(prev => ({ ...prev, name: "Петр" }));

🟠Vue: `watch` vs `watchEffect` (глубокое слежение) Обычный watch следит только за первой вложенностью

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
});

Глубокое слежение (deep: true)

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
}, { deep: true });

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

17 887

🤔 Как очистить форму? - Установить значения всех полей в "", null или undefined. - Использовать reset() на DOM-форме. - В фреймворках — сброс v-model/state. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 887

Тренинги по ИИ с выездом экспертов Практикума в ваш офис ⚡ Чтобы закрывать больше задач с меньшими ресурсами, нужна «суперсила». И это — ИИ, который снимает рутину, ускоряет процессы и повышает качество решений. Обучайте сотрудников ИИ, чтобы автоматизировать операционные задачи и ускорить ключевые процессы. Выберите формат, который подходит именно вашей команде: ✅ Базовый ИИ - закладываем фундамент. ✅ ИИ под роль - навыки для конкретных функций и специалистов: руководители, продукт и аналитика, маркетинг и продажи, HR и L&D, операционные команды. ✅ ИИ-трансформация - для компаний, которые хотят внедрять нейросети системно. ✨ При покупке любой из программ в августе и сентябре дарим доступ к бибиотеке ИИ навыков для команды Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 887

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

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

17 887

Gurufy 📚 Gurufy — ИИ-сервис, который собирает персональный курс под вашу задачу: план из глав, статьи с иллюстрациями и интерактивными виджетами, задания и ИИ-ассистент прямо в главе. ✨ Простой вопрос быстрее задать ChatGPT. Но когда на тему нужен день и больше, одним чатом её не закрыть: нет плана, нет визуализаций, нет заданий — всё тонет в одной переписке. 🎓 Готовый курс — десятки тысяч рублей против 500–1000 ₽. ⚡ Попробуйте сами. Старт бесплатный. Узнать больше #реклама 16+ gurufy.ru О рекламодателе

17 887

🤔 Как мы можем заставить элемент быть выше другого? Через z-index, но только если элемент позиционирован (relative, absolute, fixed, sticky). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 887

Дачная дача в Т-Банк Шопе Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать. Посмотреть каталог #реклама tbank.ru О рекламодателе

17 887

🤔 Опасности использования `innerHTML` в JavaScript innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода) Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy) Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

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

17 887

О!Хакатон возвращается — на кону миллион Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка. Вам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽. Присоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков: 📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей. 📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик. 📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября. Скорее присоединяйтесь по ссылке! Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

17 887

deep tech night: 5 сентября, онлайн ⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems. Разберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену. В прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события. Зарегистрироваться #реклама 16+ deeptechnight.ru О рекламодателе

17 887

🤔 Какое событие сработает при потере фокуса элементом формы? Событие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 887

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

17 887

🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий. 🚩Почему это нужно? Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее. 🚩Как это используется? Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery. 🟠Чистый JavaScript Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠React Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠jQuery Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩Почему это удобно и важно 🟠Интерактивность Позволяет создавать динамичные и отзывчивые интерфейсы. 🟠Гибкость Возможность реагировать на различные действия пользователей. 🟠Удобство В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Ставь 👍 и забирай 📚 Базу знаний

17 887

В нашем канале много ценного для разработчиков по подготовке к собесам👇

Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!

Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 https://t.me/frontend_punks Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809

17 887

Основные шаблоны проектирования в системном дизайне Знать CQRS, Event Sourcing и Saga недостаточно, чтобы правильно применять эти шаблоны в реальной системе. Каждый из них решает архитектурную проблему, но одновременно увеличивает сложность разработки, эксплуатации и поддержки. Если выбирать паттерн только потому, что он популярен или используется в высоконагруженных проектах, можно получить архитектуру, сложнее самой задачи. На открытом уроке 24 августа в 20:00 в OTUS разберём ключевые шаблоны системного дизайна: CQRS, Event Sourcing и Saga Pattern. Рассмотрим, какие проблемы они решают, в каких системах действительно нужны и какие новые ограничения создают. На практических примерах посмотрим, как эти подходы применяются в высоконагруженных сервисах, событийных системах и процессах с распределёнными транзакциями. Узнать больше #реклама 16+ otus.ru О рекламодателе