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

\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\nexport default App;\n\n🟠jQuery\nЕсли вы используете его, добавление слушателей событий также очень просто и удобно.\n\n\n\n \n \n \n\n\n Click me\n\n \n\n\n\n🚩Почему это удобно и важно\n\n🟠Интерактивность\nПозволяет создавать динамичные и отзывчивые интерфейсы.\n🟠Гибкость\nВозможность реагировать на различные действия пользователей.\n🟠Удобство\nВ каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-06T09:05:29Z","dateModified":"2025-10-06T09:05:29Z","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":2327},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2015","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2015","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2015","headline":"Теперь сайты будет создавать искусственный интеллект В Битрикс24 появился AI-помощник, который по текстовому…","articleBody":"Теперь сайты будет создавать искусственный интеллект\n\nВ Битрикс24 появился AI-помощник, который по текстовому запросу генерирует готовый сайт с дизайном и контентом. Вот это уровень, мое почтение. \n\nУзнать больше\n\n#реклама \nsites-24.bitrix24.ru\nО рекламодателе","datePublished":"2025-10-06T01:49:53Z","dateModified":"2025-10-08T00:09:30Z","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":1676},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2014","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2014","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2014","headline":"🤔 Почему обычные генераторы позволяют написать асинхронный код? Генераторы в JavaScript позволяют приостанавл…","articleBody":"🤔 Почему обычные генераторы позволяют написать асинхронный код?\n\nГенераторы в JavaScript позволяют приостанавливать выполнение функции, что делает их подходящими для пошагового выполнения логики, как в асинхронном программировании. Они стали основой для реализации async/await через трансформацию кода.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-05T16:10:32Z","dateModified":"2025-10-05T16:10:32Z","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":2487},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2013","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2013","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2013","headline":"🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компоне…","articleBody":"🤔 Зачем нужен ref? \n\nВ React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.\n\n🚩Основные случаи использования `ref`\n\nДоступ к DOM-элементам:\nИспользование в сторонних библиотеках:\nСохранение состояния вне дерева компонентов:\n\n🚩Примеры использования `ref`\n\nДоступ к DOM-элементам\nУстановка фокуса на элемент\nimport React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n\n const onButtonClick = () => {\n // Установить фокус на текстовое поле\n inputEl.current.focus();\n };\n\n return (\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\nexport default MeasureDiv;\n\nИспользование в классовых компонентах\nДоступ к методам компонента:\nimport React, { Component } from 'react';\n\nclass CustomComponent extends Component {\n customMethod() {\n console.log('Метод компонента вызван');\n }\n\n render() {\n return ;\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\nexport default ParentComponent;\n\n🚩Важно помнить\n\nПрямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.\nКогда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.\nСостояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-05T09:05:42Z","dateModified":"2025-10-05T09:05: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":2482},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2012","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2012","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2012","headline":"REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетин…","articleBody":"REKONFA Live\n\n6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут:\n\n— О ситуации на рынке рекламы\n— Как продвигать и продавать в интернете в 2025 году\n— Как бизнесу адаптироваться к меняющимся условиям\n\nВас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива.\n\nВстречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. \n\nЗарегистрироваться\n\n#реклама 18+\nya.rekonfa.ru\nО рекламодателе","datePublished":"2025-10-04T19:33:16Z","dateModified":"2025-10-06T17:56:31Z","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":1609}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2011","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2011","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2011","headline":"🤔 Как правильно выбрать фреймворк? - Проект и команда: если команда знает Angular — нет смысла переходить на…","articleBody":"🤔 Как правильно выбрать фреймворк?\n\n- Проект и команда: если команда знает Angular — нет смысла переходить на React просто так.\n- Требования: SSR, мобильность, SEO — выбирать Next.js/Nuxt/Angular Universal.\n- Экосистема: поддержка, документация, количество библиотек.\n- Скорость и масштабируемость: что важнее — стабильность или гибкость?\nНет \"лучшего\" фреймворка — есть подходящий под задачу.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-04T16:10:30Z","dateModified":"2025-10-04T16:10:30Z","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":2156},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2010","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2010","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2010","headline":"🤔 Зачем нужен eslint? ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и T…","articleBody":"🤔 Зачем нужен eslint?\n\nESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода. \n\n🚩Почему ESLint полезен? \nБез линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить. \n\n🚩Проблемы без ESLint \n\nРазные стили написания кода \nПропущенные точки с запятой или лишние пробелы \nНеиспользуемые переменные \nОшибки, которые не выявляются во время компиляции (например, undefined переменные) \n\n🚩Решение с ESLint: \n\nАвтоматически находит ошибки и предупреждения \nПодсказывает лучшие практики \nПоддерживает кастомные правила \nРаботает в IDE и CI/CD (автоматическая проверка) \n\n🟠Как ESLint работает? \nESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку. \nfunction sayHello(name) {\n console.log(\"Hello, \" + name)\n}\n\nsayHello(\"John\")\n\n\nПример исправленного кода (ESLint fix) \nfunction sayHello(name) {\n console.log(`Hello, ${name}`);\n}\n\nsayHello(\"John\");\n\n🟠Как установить и настроить ESLint? \nУстановка \nnpm install eslint --save-dev\n\nСоздание конфига \nnpx eslint --init\n\nПример .eslintrc.js (настройки ESLint) \nmodule.exports = {\n env: {\n browser: true,\n es6: true,\n },\n extends: [\n \"eslint:recommended\", // Базовые рекомендации\n \"plugin:vue/vue3-recommended\" // Рекомендации для Vue\n ],\n rules: {\n \"no-unused-vars\": \"warn\", // Предупреждать о неиспользуемых переменных\n \"semi\": [\"error\", \"always\"], // Обязательные точки с запятой\n \"quotes\": [\"error\", \"double\"], // Только двойные кавычки\n },\n};\n\nЗапуск проверки кода \nnpx eslint myfile.js\n\nАвтоматическое исправление ошибок \nnpx eslint myfile.js --fix\n\n🟠ESLint в IDE (VS Code, WebStorm) \nЧтобы ESLint работал в VS Code, установите расширение ESLint и включите \"editor.codeActionsOnSave\" \n\"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": true\n}\n\n🟠ESLint в CI/CD (автоматическая проверка на сервере) \nВ проектах ESLint можно запускать в GitHub Actions, Jenkins, GitLab CI и других CI/CD системах, чтобы не допускать ошибок в main ветку. \n\"scripts\": {\n \"lint\": \"eslint src --fix\"\n}\n\nТеперь перед коммитом можно запускать: \nnpm run lint\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-04T09:05:43Z","dateModified":"2025-10-04T09:05: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":2375},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2009","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2009","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2009","headline":"🤔 Откуда тег b или strong берут свою \"жирность\"? Жирность задаётся стилями по умолчанию, встроенными в браузе…","articleBody":"🤔 Откуда тег b или strong берут свою \"жирность\"?\n\nЖирность задаётся стилями по умолчанию, встроенными в браузер, чаще всего через CSS-свойство font-weight. Если нужно — можно переопределить стили вручную.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-03T16:10:30Z","dateModified":"2025-10-03T16:10:30Z","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":2369},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2008","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2008","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2008","headline":"🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массив…","articleBody":"🤔 Почему map используют чаще, чем объект?\n\nХотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев.\n\n🟠`Map` может использовать любые типы данных в качестве ключей \nВ объектах {} ключи всегда автоматически приводятся к строке. \nconst obj = {};\nconst key1 = {};\nconst key2 = {};\n\nobj[key1] = \"value1\";\nobj[key2] = \"value2\";\n\nconsole.log(obj); // { '[object Object]': 'value2' }\nconsole.log(obj[key1]); // \"value2\" (ключи перезаписались, потому что оба стали \"[object Object]\")\n\nПример с Map: \nconst map = new Map();\nmap.set(key1, \"value1\");\nmap.set(key2, \"value2\");\n\nconsole.log(map.get(key1)); // \"value1\"\nconsole.log(map.get(key2)); // \"value2\"\n\n🟠`Map` хранит порядок ключей \nВ объекте {} порядок ключей не гарантируется (особенно для числовых ключей). \nconst obj = { 2: \"two\", 1: \"one\", 3: \"three\" };\nconsole.log(Object.keys(obj)); // [\"1\", \"2\", \"3\"] (порядок числовых ключей изменился!)\n\nПример с Map \nconst map = new Map();\nmap.set(2, \"two\");\nmap.set(1, \"one\");\nmap.set(3, \"three\");\n\nconsole.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)\n\n🟠`Map` быстрее при частых добавлениях/удалениях \nОбъекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки.\nРазница в скорости \nВ Map операции .set(), .get(), .delete() выполняются быстрее.\nВ объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей.\n\n🟠У `Map` есть удобные методы\nОбъект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.\nconst map = new Map();\nmap.set(\"a\", 1);\nmap.set(\"b\", 2);\n\nconsole.log(map.size); // 2\nconsole.log(map.has(\"a\")); // true\nconsole.log(map.delete(\"b\")); // true (удалит \"b\")\n\nВ объекте {}\nconst obj = { a: 1, b: 2 };\n\nconsole.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())\nconsole.log(obj.hasOwnProperty(\"a\")); // true (менее удобный синтаксис)\ndelete obj.b; // Удаление ключа\n\n🟠`Map` не имеет проблем с прототипами\nВ объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.\nconst obj = {};\nconsole.log(obj.toString); // [Function: toString] (унаследованное свойство!)\nconsole.log(obj[\"toString\"]); // [Function: toString] (может вызвать баги)\n\nЧтобы обойти это, приходится делать так\nconst obj = Object.create(null); // Теперь у объекта нет прототипа\nobj.toString = \"custom\";\nconsole.log(obj.toString); // \"custom\"\n\nВ Map таких проблем нет\nconst map = new Map();\nmap.set(\"toString\", \"custom\");\nconsole.log(map.get(\"toString\")); // \"custom\" (никаких багов!)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-03T09:05:41Z","dateModified":"2025-10-03T09: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":2593},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":33}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2007","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2007","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2007","headline":"Wink AI Challenge — хакатон на стыке IT и кино. Участников ждут задачи, которые ускорят производство фильмов…","articleBody":"Wink AI Challenge — хакатон на стыке IT и кино. Участников ждут задачи, которые ускорят производство фильмов и сериалов за счёт прикладных AI-решений. Призовой фонд соревнования — 1 125 000 рублей. \n\n🗓 Регистрация до 31 октября: https://cnrlink.com/winkaichallengeeasyfront\n💻 Формат: онлайн, а в финале — очная защита. Участвовать можно в команде или соло. \n⭐️ Приглашаем: ML-инженеров, backend- и frontend-разработчиков, специалистов в DevOps, MLOps, а также инженеров в сфере мультимедиа. \n\nГлавные причины присоединиться:\n🔸 Первый в России хакатон, посвящённый применению ИИ в кинопроизводстве. \n🔸 Разработка ML-модели, которую оценят и будут использовать продюсеры популярных российских фильмов и сериалов. \n🔸 Работа с настоящими сценариями и видеоматериалами, анализ текстов, извлечение сущностей, генерация структуры съёмок.\n\nЗадачи хакатона основаны на реальных кейсах, с которыми продюсеры сталкиваются каждый день:\n→ Трек 1. Разработайте решение, которое на основе сценария проведет анализ каждой сцены, определит место действия, персонажей, реквизит и поможет оптимизировать планирование съемок.\n→ Трек 2. Обучите модель определять возрастную категорию контента и выделять ключевые сцены, влияющие на рейтинг. Решение сэкономит время профильных юристов и облегчит адаптацию контента для разных медиа.  \n→ Трек 3. Создайте систему, которая превращает текст сценария в превиз с эскизами, ключевыми кадрами, анимацией и возможностью командного редактирования. \n\nРегистрируйтесь на Wink AI Challenge, чтобы разработать ИИ-ассистента, который станет частью производства фильмов и сериалов: https://cnrlink.com/winkaichallengeeasyfront","datePublished":"2025-10-03T07:00:09Z","dateModified":"2025-10-05T07:00:17Z","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":1494},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2006","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2006","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2006","headline":"Видеонаблюдение для бизнеса. Камера со скидкой 99% До 31 декабря подключите видеонаблюдение от МегаФона и пол…","articleBody":"Видеонаблюдение для бизнеса. Камера со скидкой 99%\n\nДо 31 декабря подключите видеонаблюдение от МегаФона и получите камеру для видеонаблюдения за 60 ₽ вместо 6 000 ₽, в стоимость входит доставка камеры, установка и настройка\n\nВидеонаблюдение для бизнеса в МегаФоне - это:\n— Услуга «Тайный покупатель» — аудит качества и процессов бизнеса\n— Скидка до 20% (при оплате на год вперёд)\n— Архив 180 дней (хранение записи в облаке до 180 дней)\n— И многое другое \n\nПолучить скидку\n\n#реклама \nmegafon.ru\nО рекламодателе","datePublished":"2025-10-02T23:11:18Z","dateModified":"2025-10-04T21:11:21Z","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":1520}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2005","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2005","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2005","headline":"🤔 Как оптимизировать страницы для печати? - Использовать медиа-запрос @media print; - Убирать навигацию, рекл…","articleBody":"🤔 Как оптимизировать страницы для печати?\n\n- Использовать медиа-запрос @media print;\n- Убирать навигацию, рекламу, интерактивные блоки;\n- Использовать чёрно-белую палитру, читаемые шрифты;\n- Избегать анимаций и динамического контента;\n- Добавлять display: none для ненужного в печати.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-02T16:10:29Z","dateModified":"2025-10-02T16:10:29Z","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":2298},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@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/2004","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2004","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2004","headline":"🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые…","articleBody":"🤔 Как методы будут у api?\n\nВ API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). \n\n🚩Примеры использования \n\n🟠`GET` – Получение данных \nЗапрашиваем список пользователей:\nGET /users HTTP/1.1\nHost: api.example.com\n\nОтвет (JSON)\n[\n { \"id\": 1, \"name\": \"Alice\" },\n { \"id\": 2, \"name\": \"Bob\" }\n]\n\n🟠`POST` – Создание нового ресурса \nОтправляем данные нового пользователя:\nPOST /users HTTP/1.1\nHost: api.example.com\nContent-Type: application/json\n\n{\n \"name\": \"Charlie\",\n \"email\": \"charlie@example.com\"\n}\n\nОтвет (201 Created)\n{\n \"id\": 3,\n \"name\": \"Charlie\",\n \"email\": \"charlie@example.com\"\n}\n\n🟠`PUT` – Полное обновление ресурса \nЗаменяем пользователя с ID 1:\nPUT /users/1 HTTP/1.1\nHost: api.example.com\nContent-Type: application/json\n\n{\n \"name\": \"Alice Smith\",\n \"email\": \"alice.smith@example.com\"\n}\n\n🟠`PATCH` – Частичное обновление ресурса \nМеняем только имя пользователя 1, не трогая email:\nPATCH /users/1 HTTP/1.1\nHost: api.example.com\nContent-Type: application/json\n\n{\n \"name\": \"Alice Johnson\"\n}\n\n🟠`DELETE` – Удаление ресурса \nУдаляем пользователя с ID 2:\nDELETE /users/2 HTTP/1.1\nHost: api.example.com\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-02T09:05:41Z","dateModified":"2025-10-02T09: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":2538},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2003","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2003","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2003","headline":"EXLANTIX ET от EXEED. Уже в продаже! Гибридный кроссовер будущего! Премиальный гибридный автомобиль EXLANTIX…","articleBody":"EXLANTIX ET от EXEED. Уже в продаже!\n\nГибридный кроссовер будущего! \n\nПремиальный гибридный автомобиль EXLANTIX ET в продаже!\n\nЗапас хода 1180 км, Ускорение за 4,8 сек до 100 км/ч, 8 лет гарантии или 200 000 км! \nБлагодаря надежным и современным системам EXLANTIX ET устанавливает новые стандарты гибридных автомобилей, обеспечивая защиту водителя и пассажиров при любых дорожных ситуациях. \n\nХотите приобрести автомобиль или узнать больше? \n\nУзнать цену\n\n#реклама \nexeed.ru\nО рекламодателе","datePublished":"2025-10-01T23:11:26Z","dateModified":"2025-10-03T21:21: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":1654},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2002","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2002","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2002","headline":"🤔 В чём опасность работы с innerHTML? innerHTML может привести к XSS, если вставляется непроверенный пользова…","articleBody":"🤔 В чём опасность работы с innerHTML?\n\ninnerHTML может привести к XSS, если вставляется непроверенный пользовательский ввод. Также он перезаписывает содержимое элемента целиком, что может вызвать потерю обработчиков событий.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-01T16:10:28Z","dateModified":"2025-10-01T16:10:28Z","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":2400},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2001","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2001","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2001","headline":"🤔 Почему повсеместно нужен https? HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, ко…","articleBody":"🤔 Почему повсеместно нужен https?\n\nHTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации. \n\n🚩 Главные причины использовать HTTPS \n\n🟠Шифрование данных (Защита от перехвата) \nБез HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты. \nВ HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi). \nВ HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать. \n\n🟠Защита от атак \"Человек посередине\" (MITM) \nБез HTTPS злоумышленник может подменить содержимое сайта. \nОпасные сценарии: \nХакер в Wi-Fi кафе встраивает вредоносный код в сайт. \nВредоносный провайдер заменяет рекламу или ворует куки. \n\n🟠Google даёт больше доверия к HTTPS-сайтам\nGoogle понижает в поиске сайты без HTTPS, а Chrome помечает их как \"Небезопасные\". \n\n🟠Обязателен для онлайн-платежей и авторизации \nДля ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей). \nЕсли сайт работает без HTTPS, браузеры блокируют передачу банковских данных.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-01T09:05:39Z","dateModified":"2025-10-01T09: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":2773},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2000","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2000","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2000","headline":"🤔 К какой структуре данных в JavaScript близок Observable? Похоже на итерируемую коллекцию или поток событий.…","articleBody":"🤔 К какой структуре данных в JavaScript близок Observable?\n\nПохоже на итерируемую коллекцию или поток событий. Поведение ближе всего к генераторам и Promise, но многократно исполняемый и отменяемый.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-09-30T16:10:28Z","dateModified":"2025-09-30T16:10:28Z","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":2434},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1999","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1999","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1999","headline":"🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное сост…","articleBody":"🤔 Что такое псевдоклассы?\n\nЭто ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое.\n\n:hover — применяется к элементу, когда на него наводят курсор мыши.\na:hover {\n color: red; /* Ссылка станет красной при наведении /\n}\n\n:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).\ninput:focus {\n border-color: blue; / Граница инпута станет синей при фокусе /\n}\n\n:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).\nbutton:active {\n transform: scale(0.98); / Кнопка немного уменьшится при клике /\n}\n\n:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.\nli:nth-child(odd) {\n background-color: gray; / Заливка каждого нечетного элемента списка /\n}\n\n:not() — исключает из выборки элементы, соответствующие указанному селектору.\ndiv:not(.special) {\n color: green; / Применяется к каждому div, который не имеет класса special */\n}\n\n🚩Зачем нужны псевдоклассы?\n\nОни делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-09-30T09:05:38Z","dateModified":"2025-09-30T09: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":2734},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1998","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1998","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1998","headline":"Виртуальный сервер в аренду в Турции или России. Отказоустойчивый виртуальный облачный сервер на базе виртуал…","articleBody":"Виртуальный сервер в аренду в Турции или России.\n\nОтказоустойчивый виртуальный облачный сервер на базе виртуализации VMWARE по модели подписки.\n\n - Бесплатная миграция инфраструктуры в Турцию\n - Размещайте ресурсы в Турции или России и оплачивайте в рублях, турицких лирах или евро.\n - Храните резервные копии данных за рубежом для минимизации рисков\n - Продолжайте использовать импортное ПО, скачивайте обновления и патчи, общайтесь с техподдержкой\n - Доступность сервиса — от 99,982% SLA\n - Дата центры Tier III в России и Турции\n - Почасовой биллинг и постоплата\n\nПодключите услугу сегодня со скидкой 50% на инфраструктуру. \n\nПодать заявку\n\n#реклама \ncloud4y.ru\nО рекламодателе","datePublished":"2025-09-30T00:06:22Z","dateModified":"2025-10-01T22:28: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":1554}]}}]}