\";\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-04-25T09:05:41Z","dateModified":"2026-04-25T09:05:41Z","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":1929},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2559","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2559","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2559","headline":"🤔 Что такое ES-модули? ES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволя…","articleBody":"🤔 Что такое ES-модули?\n\nES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволяют экспортировать и импортировать переменные, функции, классы между файлами с помощью export и import. Они поддерживаются нативно в современных браузерах и Node.js.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-24T16:10:44Z","dateModified":"2026-04-24T16:10:44Z","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":1771},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2558","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2558","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2558","headline":"🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и…","articleBody":"🤔 Для чего нужна методология в html?\n\nМетодология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.\n\n🚩Зачем это нужно\n\n🟠Понятность кода\nБез единого подхода код может стать \"кашей\" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.\n\n🟠Снижение ошибок\nЕсли есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.\n\n🟠Упрощение масштабирования\nВ больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.\n\n🟠Легкость сопровождения\nС методологией легко найти нужные элементы и вносить изменения.\n\n🚩Примеры популярных методологий\n🟠БЭМ (Блок, Элемент, Модификатор)\nОдна из самых популярных методологий для HTML и CSS.\n - Она предлагает структурировать классы так:\n - Блок: независимый компонент (например, menu).\n - Элемент: часть блока (например, menu__item).\n - Модификатор: вариант блока или элемента (например, menu__item--active).\nПример кода\n \n \n \n \n🟠Atomic Design\nОснована на создании интерфейсов из \"атомов\" (простейшие элементы, например, кнопки), \"молекул\" (комбинации атомов, например, форма) и \"организмов\" (сложные компоненты, например, шапка сайта).\nПример\n \n \n
Клик \n \n
\n Имя \n
\n \n\n🟠SMACSS (Scalable and Modular Architecture for CSS)\nДелит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-24T09:05:40Z","dateModified":"2026-04-24T09:05:40Z","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":1901},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2557","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2557","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2557","headline":"🤔 Как строить сетку сайта? Сетку можно строить несколькими способами: 1. CSS Flexbox — для одномерной разметк…","articleBody":"🤔 Как строить сетку сайта?\n\nСетку можно строить несколькими способами:\n1. CSS Flexbox — для одномерной разметки (по строке или колонке).\n2. display: flex;\n3. flex-direction: row;\n4. justify-content: space-between;\n5. CSS Grid — для двумерных сеток (и строки, и колонки).\n6. display: grid;\n7. grid-template-columns: repeat(3, 1fr);\n8. gap: 20px;\n9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.).\n10. Media Queries — адаптивные сетки с изменением структуры под разные экраны.\nСетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-23T16:10:44Z","dateModified":"2026-04-23T16:10:44Z","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":2175},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2556","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2556","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2556","headline":"🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селект…","articleBody":"🤔 Как изменить стили кнопок с атрибутом disabled? \n\nC атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.\n\n🚩Пример использования\n\n🟠Селектора [disabled]\nЭтот селектор выбирает все элементы, у которых присутствует атрибут disabled.\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */\n opacity: 0.6; /* Уменьшает непрозрачность */\n}\n\n🟠Псевдокласса :disabled\nЭтот селектор выбирает все элементы, которые находятся в состоянии disabled.\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🚩Полные примеры\n\nС HTML\n\n\n\n
\n
\n
Disabled Button Styling \n
\n\n\n
Active Button \n
Disabled Button \n\n\n\nС CSS\n/* Стили для активных кнопок */\nbutton {\n background-color: blue;\n color: white;\n border: 1px solid #000;\n padding: 10px 20px;\n cursor: pointer;\n}\n\n/* Стили для кнопок с атрибутом disabled */\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Альтернативный способ с использованием псевдокласса :disabled */\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🟠Комбинированный подход\nВы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.\n/* Стили для кнопок с классом .special, которые имеют атрибут disabled */\nbutton.special[disabled] {\n background-color: darkgray;\n color: black;\n border: 1px dashed #999;\n cursor: not-allowed;\n opacity: 0.7;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-23T09:05:39Z","dateModified":"2026-04-23T09:05:39Z","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":1842},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2555","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2555","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2555","headline":"🤔 Зачем нужна семантика? Семантическая разметка улучшает: - SEO – поисковики лучше понимают контент (
, , и т.д.).\n- Доступность (Accessibility) – помогает экранным читалкам понимать смысл элементов.\n- Читаемость кода – упрощает поддержку и понимание структуры.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-22T16:10:43Z","dateModified":"2026-04-22T16:10:43Z","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":1894},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2554","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2554","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2554","headline":"🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать…","articleBody":"🤔 Как уничтожить объект web worker?\n\nВ JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.\n\n🚩Зачем уничтожать Web Worker?\n\nWeb Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.\n\n🚩Как использовать `terminate()`?\n\nВы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.\n// Создаем worker\nconst myWorker = new Worker('worker.js');\n\n// Выполняем какие-то операции через worker\nmyWorker.postMessage('Hello, worker!');\n\n// Завершаем работу worker, когда он больше не нужен\nmyWorker.terminate();\n\n🚩Важно помнить\n\n1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.\n2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.\n3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.\nconst worker = new Worker('worker.js');\n\n// Отправляем сообщение\nworker.postMessage('Start working');\n\n// Завершаем работу worker\nworker.terminate();\n\n// Попытка отправить сообщение после уничтожения worker\nworker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен\n\n🚩 Когда еще уничтожается worker?\n\nЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-22T09:05:38Z","dateModified":"2026-04-22T09:05:38Z","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":2172},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2553","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2553","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2553","headline":"🤔 Как получается, что на всех элементах есть одни и те же свойства (class, id, и т.д.)? Потому что все элемен…","articleBody":"🤔 Как получается, что на всех элементах есть одни и те же свойства (class, id, и т.д.)?\n\nПотому что все элементы в DOM наследуют от общего прототипа — Element, Node, EventTarget, и имеют общее API. Это часть архитектуры DOM и браузерной реализации.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-21T16:10:42Z","dateModified":"2026-04-21T16:10:42Z","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":1932},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2552","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2552","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2552","headline":"Как frontend-разработчику вырасти в ЗП? День сурка frontend-разработчика выглядит так Зарплата замерла, задач…","articleBody":"Как frontend-разработчику вырасти в ЗП?\n\nДень сурка frontend-разработчика выглядит так \n\nЗарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов\n\nОткликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».\n\nИ самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...\n\nТы тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.\n\n👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.\n\nВ своем канале:\n👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения\n👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться\n👉На примерах объясняю как проходить собеседования, включая техничку\n👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров \n\nА еще регулярно публикую полезные материалы:\n▪️Задачи, на которых валяться кандидаты \n▪️База по микрофронтам\n▪️Подборка из 100+ каналов с вакансиями для разработчиков\n▪️100 вопросов, которые точно помогут тебе на собеседовании\n▪️Чек лист проверки своего резюме\n\nА еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.\n\nРеклама, erid: 2W5zFGM7M3o ИП Галактионов Тихон Витальевич, ИНН 771618975809","datePublished":"2026-04-21T14:00:06Z","dateModified":"2026-04-23T14:00:12Z","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"},"image":["https://n1.tlmtr.cc/p/_O6hlc6qz8_-esOV9vmfyYIwabvLXKcGgHR4mPWdlmYM?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1318},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2551","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2551","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2551","headline":"🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Fun…","articleBody":"🤔 В чем различие методов call apply bind? \n\nМетоды call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.\n\n🚩Сall\n\nВызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.\nfunction greet(message, name) {\n console.log(${message}, ${name}. This is ${this});\n}\n\ngreet.call(\"Earth\", \"Hello\", \"Alice\"); // \"Hello, Alice. This is Earth\"\n\n🚩Apply\n\nОчень похож на call, но принимает аргументы в виде массива, а не по отдельности.\nfunction greet(message, name) {\n console.log(\n${message}, ${name}. This is ${this}\n);\n}\n\ngreet.apply(\"Earth\", [\"Hello\", \"Alice\"]); // \"Hello, Alice. This is Earth\"\n\n🚩Bind\n\nСоздаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.\nfunction greet(message, name) {\n console.log(\n${message}, ${name}. This is ${this}\n);\n}\n\nconst greetEarth = greet.bind(\"Earth\", \"Hello\", \"Alice\");\ngreetEarth(); // \"Hello, Alice. This is Earth\"\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-21T09:05:39Z","dateModified":"2026-04-21T09:05:39Z","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":2124},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2550","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2550","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2550","headline":"🤔 Что такое семантика? Семантика — это значение или смысл, который несет элемент или структура кода, указывая…","articleBody":"🤔 Что такое семантика?\n\nСемантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, , , ) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-20T16:10:40Z","dateModified":"2026-04-20T16:10:40Z","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":1981},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@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/2549","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2549","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2549","headline":"🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-а…","articleBody":"🤔 Как мы будем через js анимировать что либо?\n\nВ JavaScript есть три основных способа создания анимаций: \n\nCSS-анимации (transition, @keyframes) + изменение классов через JS\nМетод requestAnimationFrame() \nИспользование библиотек (GSAP, Anime.js, Velocity.js) \n\n🟠CSS-анимации + управление через JS \nСамый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы. \nАнимировать \n
\n\n\n\n\n\n🟠`requestAnimationFrame()` — лучший способ в чистом JS \nЕсли нужно более гибкое управление анимацией, используем requestAnimationFrame(). \nСтарт \n
\n\n\n\n\n\n🟠Библиотеки (GSAP, Anime.js, Velocity.js)\nЕсли нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку. \nАнимировать \n
\n\n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-20T09:05:35Z","dateModified":"2026-04-20T09:05:35Z","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":2034},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2548","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2548","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2548","headline":"🤔 Arrow functions — to avoid using bind — чем от обычной отличается? Стрелочные функции автоматически \"привяз…","articleBody":"🤔 Arrow functions — to avoid using bind — чем от обычной отличается?\n\nСтрелочные функции автоматически \"привязывают\" this к контексту, в котором были объявлены. В отличие от обычных функций, где this зависит от вызова, стрелочная берёт его из лексического окружения.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-04-19T16:11:01Z","dateModified":"2026-04-19T16:11:01Z","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":1825},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2547","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2547","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2547","headline":"🤔 Что такое элемент datalist в html 5? — это тег в HTML5, который позволяет создать выпадающий спи…","articleBody":"🤔 Что такое элемент datalist в html 5?\n\n — это тег в HTML5, который позволяет создать выпадающий список вариантов для , список остаётся необязательным — пользователь может ввести своё значение. \n\n🚩Как работает ``? \n\nПример: автодополнение города \nВыберите город: \n\n \n \n \n \n \n\n🚩Можно ли использовать с `type=\"number\"`? \n\nНет, не работает с type=\"number\". \nНо с type=\"text\" и type=\"email\" — работает отлично. \n\n \n \n \n\nРабочий вариант \n\n Установить фокус \n
\n );\n}\n\nexport default TextInputWithFocusButton;\n\nПолучение размеров элемента\nИзмерение элемента:\nimport React, { useRef, useEffect, useState } from 'react';\n\nfunction MeasureDiv() {\n const divRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n useEffect(() => {\n if (divRef.current) {\n const { width, height } = divRef.current.getBoundingClientRect();\n setDimensions({ width, height });\n }\n }, []);\n\n return (\n \n
\n Измеряемый элемент\n
\n
Ширина: {dimensions.width}px, Высота: {dimensions.height}px
\n
Custom Component
;\n }\n}\n\nclass ParentComponent extends Component {\n constructor(props) {\n super(props);\n this.customComponentRef = React.createRef();\n }\n\n handleClick = () => {\n this.customComponentRef.current.customMethod();\n };\n\n render() {\n return (\n \n Вызвать метод компонента \n
\n );\n }\n}\n\nexport default ParentComponent;\n\n🚩Важно помнить\n\nПрямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.\nКогда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.\nСостояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-04-18T09:05:34Z","dateModified":"2026-04-18T09:05:34Z","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":1989},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}}]}🤔
Какие значения будут являться falsy значениями?
В JavaScript значения, которые при приведении к логическому типу (boolean) становятся
false, называются "falsy" значениями. Существует всего семь таких значений:
🟠
`false`
Логическое значение
false.
console.log(Boolean(false)); // false
🟠
`0`
Число ноль.
console.log(Boolean(0)); // false
🟠
`-0`
Отрицательное число ноль (хотя это редко встречается на практике).
console.log(Boolean(-0)); // false
🟠
`0n`
Число
BigInt с значением ноль.
console.log(Boolean(0n)); // false
🟠
`""` (пустая строка)
Строка без символов.
console.log(Boolean("")); // false
🟠
`null`
Специальное значение, обозначающее отсутствие какого-либо значения.
console.log(Boolean(null)); // false
🟠
`undefined`
Специальное значение, обозначающее необъявленное или неприсвоенное значение.
console.log(Boolean(undefined)); // false
🟠
`NaN`
Специальное значение, обозначающее не число (Not-a-Number).
console.log(Boolean(NaN)); // false
🚩
Примеры использования
🟠
Проверка значений на falsy
В условиях (if statements) все falsy значения интерпретируются как
false.
const values = [false, 0, -0, 0n, "", null, undefined, NaN];
values.forEach(value => {
if (!value) {
console.log(`${value} is falsy`);
}
});
Примеры в условиях
if (!false) {
console.log('false is falsy'); // выводится
}
if (!0) {
console.log('0 is falsy'); // выводится
}
if (!"") {
console.log('"" is falsy'); // выводится
}
if (!null) {
console.log('null is falsy'); // выводится
}
if (!undefined) {
console.log('undefined is falsy'); // выводится
}
if (!NaN) {
console.log('NaN is falsy'); // выводится
}
🟠
Использование в логических операторах
Falsy значения также учитываются в логических операциях.
const value = null;
const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsyСтавь 👍 и забирай 📚 Базу знаний 🤔 В чём разница между HTML и XHTML?
- HTML — более свободный в синтаксисе, не требует строгости.
- XHTML — расширение HTML, основанное на XML, требует строгого соответствия правилам (например, закрывающиеся теги, правильные атрибуты). XHTML строже, но хуже поддерживается и более чувствителен к ошибкам.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Когда использовать uselayuouteffect, а когда useeffect?
Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере.
useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере.
То есть
useLayoutEffect блокирует рендер, а
useEffect — нет.
🚩
Когда использовать `useEffect`?
useEffect выполняется асинхронно, после того как браузер отрисовал страницу.
Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (
document.title).
import { useState, useEffect } from "react";
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Вы кликнули ${count} раз`;
}, [count]); // Запускается после рендера
return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}
🚩
Когда использовать `useLayoutEffect`?
useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения.
Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (
getBoundingClientRect).
- Анимаций (например, при расчёте позиций).
import { useEffect, useLayoutEffect, useState } from "react";
function Example() {
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
const box = document.getElementById("box");
setWidth(box.offsetWidth);
}, []);
return (
<div>
<div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
<p>Ширина: {width}px</p>
</div>
);
}Ставь 👍 и забирай 📚 Базу знаний 🤔 В чём заключается отличие классов в JS от классов в других языках?
Классы в JS не компилируются в строгие структуры, а интерпретируются в цепочки прототипов. У них нет доступа к модификаторам (private/protected в классическом понимании), они не компилируются строго, и наследование можно изменять во время выполнения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Опасности использования `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(); // Ошибка, обработчик удаленСтавь 👍 и забирай 📚 Базу знаний 🤔
Что такое ES-модули?
ES-модули (ECMAScript Modules) — это стандартная система модулей в JavaScript. Позволяют экспортировать и импортировать переменные, функции, классы между файлами с помощью export и import. Они поддерживаются нативно в современных браузерах и Node.js.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Для чего нужна методология в 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)
Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Как строить сетку сайта?
Сетку можно строить несколькими способами:
1. CSS Flexbox — для одномерной разметки (по строке или колонке).
2. display: flex;
3. flex-direction: row;
4. justify-content: space-between;
5. CSS Grid — для двумерных сеток (и строки, и колонки).
6. display: grid;
7. grid-template-columns: repeat(3, 1fr);
8. gap: 20px;
9. CSS-фреймворки — Bootstrap, Tailwind и др. предлагают готовые сетки и классы (col-, grid-cols- и пр.).
10. Media Queries — адаптивные сетки с изменением структуры под разные экраны.
Сетки — основа современного responsive-дизайна. Grid используется всё чаще из-за гибкости и контроля.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔
Как изменить стили кнопок с атрибутом disabled?
C атрибутом
disabled, используя селекторы атрибутов. Селектор
[disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор
:disabled позволяет выбрать все элементы, которые находятся в состоянии
disabled.
🚩Пример использования
🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}
🟠
Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}🚩Полные примеры
С HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
🟠
Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}Ставь 👍 и забирай 📚 Базу знаний 🤔 Зачем нужна семантика?
Семантическая разметка улучшает:
- SEO – поисковики лучше понимают контент (<article>, <section>, <nav> и т.д.).
- Доступность (Accessibility) – помогает экранным читалкам понимать смысл элементов.
- Читаемость кода – упрощает поддержку и понимание структуры.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как уничтожить объект 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 автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Как получается, что на всех элементах есть одни и те же свойства (class, id, и т.д.)?
Потому что все элементы в DOM наследуют от общего прототипа — Element, Node, EventTarget, и имеют общее API. Это часть архитектуры DOM и браузерной реализации.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Ad
Как frontend-разработчику вырасти в ЗП?
День сурка frontend-разработчика выглядит так
Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов
Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».
И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...
Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.
👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.
В своем канале:
👉Объясняю,
как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь
убеждениями, которые мешают развиваться
👉На примерах объясняю
как проходить собеседования, включая техничку
👉
Разбираю резюме и делюсь лайфхаками, например
как аккуратно “пинговать” рекрутеров
А еще регулярно публикую полезные материалы:
▪️ Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️ Чек лист проверки своего резюме
А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно
в канале.
Реклама, erid: 2W5zFGM7M3o ИП Галактионов Тихон Витальевич, ИНН 771618975809 🤔
В чем различие методов call apply bind?
Методы call, apply и bind принадлежат к функциональному объекту
Function и используются для указания контекста
this при вызове функции. Хотя все три метода позволяют контролировать значение
this внутри функции, между ними существуют ключевые различия в способе использования и поведении.
🚩
Сall
Вызывает функцию, явно устанавливая
this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.
function greet(message, name) {
console.log(${message}, ${name}. This is ${this});
}
greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"
🚩
Apply
Очень похож на
call, но принимает аргументы в виде массива, а не по отдельности.
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"
🚩
Bind
Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст
this, указанный в первом аргументе. В отличие от
call и
apply,
bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.
function greet(message, name) {
console.log(
${message}, ${name}. This is ${this}
);
}
const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"Ставь 👍 и забирай 📚 Базу знаний 🤔 Что такое семантика?
Семантика — это значение или смысл, который несет элемент или структура кода, указывая на её предназначение. В HTML семантические теги (например, <header>, <footer>, <article>) улучшают читаемость кода и помогают поисковым системам и браузерам лучше интерпретировать его. Семантика кода улучшает доступность и упрощает его поддержку.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как мы будем через js анимировать что либо?
В JavaScript есть три основных способа создания анимаций:
CSS-анимации (
transition,
@keyframes) + изменение классов через JS
Метод
requestAnimationFrame()
Использование библиотек (GSAP, Anime.js, Velocity.js)
🟠
CSS-анимации + управление через JS
Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.
<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>
<style>
#box {
width: 100px;
height: 100px;
background: red;
transition: transform 0.5s ease-in-out;
}
.move {
transform: translateX(200px);
}
</style>
<script>
function toggleBox() {
document.getElementById("box").classList.toggle("move");
}
</script>
🟠
`requestAnimationFrame()` — лучший способ в чистом JS
Если нужно более гибкое управление анимацией, используем
requestAnimationFrame().
<button onclick="startAnimation()">Старт</button>
<div id="box"></div>
<style>
#box {
width: 50px;
height: 50px;
background: blue;
position: absolute;
}
</style>
<script>
let position = 0;
let animationId;
function animate() {
position += 5; // Двигаем на 5px за кадр
document.getElementById("box").style.transform = `translateX(${position}px)`;
if (position < 300) { // Останавливаем, когда достигнет 300px
animationId = requestAnimationFrame(animate);
}
}
function startAnimation() {
cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
position = 0;
animate();
}
</script>
🟠
Библиотеки (GSAP, Anime.js, Velocity.js)
Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.
<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
function animateBox() {
gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
}
</script>Ставь 👍 и забирай 📚 Базу знаний 🤔 Arrow functions — to avoid using bind — чем от обычной отличается?
Стрелочные функции автоматически "привязывают" this к контексту, в котором были объявлены. В отличие от обычных функций, где this зависит от вызова, стрелочная берёт его из лексического окружения.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для
<input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от
<select>, список остаётся необязательным — пользователь может ввести своё значение.
🚩
Как работает `<datalist>`?
Пример: автодополнение города
<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Казань">
<option value="Новосибирск">
</datalist>
🚩
Можно ли использовать с `type="number"`?
Нет,
<datalist> не работает с
type="number".
Но с
type="text" и
type="email" — работает отлично.
<input type="number" list="numbers">
<datalist id="numbers">
<option value="10">
<option value="20">
</datalist>
Рабочий вариант
<input type="text" list="numbers">Ставь 👍 и забирай 📚 Базу знаний 🤔 С помощью чего можно рассчитать идентификатор в JS?
Можно использовать:
- Счётчики (let id = 1);
- UUID-библиотеки (например, uuid);
- Временные метки ( Date.now ());
- Хеш-функции от строки или состояния объекта.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔
Зачем нужен ref?
В React
ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.
🚩
Основные случаи использования `ref`
Доступ к DOM-элементам:
Использование в сторонних библиотеках:
Сохранение состояния вне дерева компонентов:
🚩
Примеры использования `ref`
Доступ к DOM-элементам
Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// Установить фокус на текстовое поле
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Установить фокус</button>
</div>
);
}
export default TextInputWithFocusButton;
Получение размеров элемента
Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (divRef.current) {
const { width, height } = divRef.current.getBoundingClientRect();
setDimensions({ width, height });
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
Измеряемый элемент
</div>
<p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
</div>
);
}
export default MeasureDiv;
Использование в классовых компонентах
Доступ к методам компонента:
import React, { Component } from 'react';
class CustomComponent extends Component {
customMethod() {
console.log('Метод компонента вызван');
}
render() {
return <div>Custom Component</div>;
}
}
class ParentComponent extends Component {
constructor(props) {
super(props);
this.customComponentRef = React.createRef();
}
handleClick = () => {
this.customComponentRef.current.customMethod();
};
render() {
return (
<div>
<CustomComponent ref={this.customComponentRef} />
<button onClick={this.handleClick}>Вызвать метод компонента</button>
</div>
);
}
}
export default ParentComponent;
🚩
Важно помнить
Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.
Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.
Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React.
ref следует использовать для случаев, которые не могут быть решены этим способом.
Ставь 👍 и забирай 📚 Базу знаний Show more 
Network: