\n\n\n🟠Решение: подключение в конце `` \nЕсли разместить \n\n\n🟠Альтернативы: `defer` и `async` \ndefer – отложенное выполнение после загрузки HTML\n\n \n\n\nasync – загрузка и выполнение параллельно \n\n \n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-08T09:05:40Z","dateModified":"2025-12-08T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2183},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2195","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2195","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2195","headline":"Тютю-гребень или капикрыса? Побалуйте себя роскошью от Ричарда Сапогова или утепляйтесь с культовой рубашкой…","articleBody":"Тютю-гребень или капикрыса?\n\nПобалуйте себя роскошью от Ричарда Сапогова или утепляйтесь с культовой рубашкой Инженера. Выбирайте фаворитов из коллекции с персонажами Антона Лапенко. \n\nПерейти на сайт\n\n#реклама \ntbank.ru\nО рекламодателе","datePublished":"2025-12-07T23:50:00Z","dateModified":"2025-12-09T21:50:06Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1517},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2194","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2194","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2194","headline":"🤔 Что известно про graceful shutdown и где применяется? Graceful shutdown — это корректное завершение работы…","articleBody":"🤔 Что известно про graceful shutdown и где применяется?\n\nGraceful shutdown — это корректное завершение работы приложения:\n- Завершение активных соединений;\n- Очистка ресурсов (например, соединений с БД);\n- Применяется в серверных приложениях, микросервисах, особенно при развертывании и обновлении.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-07T16:10:38Z","dateModified":"2025-12-07T16:10:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2106},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2193","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2193","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2193","headline":"🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную ра…","articleBody":"🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку?\n\nПри разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов. \n\n🟠Разделение ответственности (Separation of Concerns)\nЭто значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в: \nЧистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX). \nИспользовании компонентов в React/Vue или шаблонов в Angular. \nРазделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components). \nВместо того, чтобы писать всю логику и разметку в одном файле: \nfunction App() {\n const [count, setCount] = useState(0);\n return ;\n}\n \n\nЯ разделяю бизнес-логику и представление\n// CounterLogic.js\nexport function useCounter() {\n const [count, setCount] = useState(0);\n const increment = () => setCount(count + 1);\n return { count, increment };\n}\n\n// Counter.js\nimport { useCounter } from \"./CounterLogic\";\nfunction Counter() {\n const { count, increment } = useCounter();\n return ;\n}\n \n\n🟠Компонентный подход и повторное использование кода\nFrontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным. \n// Button.js (переиспользуемый компонент)\nfunction Button({ onClick, children }) {\n return ;\n}\n\n// Counter.js (использует Button)\nfunction Counter() {\n const [count, setCount] = useState(0);\n return ;\n}\n \n\n🟠Чистый код и читаемость\nКод должен быть понятным не только мне, но и другим разработчикам. \nПонятные имена переменных и функций. Вместо x → userAge, вместо doSmth() → calculateTotalPrice(). \nМеньше вложенности. Вместо кучи if и else, лучше использовать early return. \nРазбиение кода на модули. Один файл = одна зона ответственности. \nfunction getDiscountedPrice(price, discount) {\n if (discount <= 0) return price;\n return price - price * (discount / 100);\n}\n \n\n🟠Состояние приложения: локальное vs глобальное\nВ зависимости от сложности приложения нужно правильно управлять состоянием: \nЛокальное состояние – useState (React), ref (Vue) для простых данных внутри компонента. \nГлобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам. \nСерверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать. \n\n🟠Следование принципам SOLID и DRY\nDRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты. \nSOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу. \nfunction sendEmailAndSaveToDB(user) {\n sendEmail(user.email);\n saveUserToDatabase(user);\n}\n\nЛучше разделить логику\nfunction sendEmail(email) { /* отправка письма */ }\nfunction saveUserToDatabase(user) { /* сохранение в БД */ }\nfunction registerUser(user) {\n sendEmail(user.email);\n saveUserToDatabase(user);\n}\n\n🟠Использование TypeScript\nTypeScript помогает избежать ошибок и делать код предсказуемым. \ntype User = {\n id: number;\n name: string;\n};\n\nfunction getUserName(user: User): string {\n return user.name;\n}\n \n\n🟠Документация и кодстайл\nESLint + Prettier → автоформатирование и проверка стиля. \nJSDoc/TypeScript → документация функций и типов данных. \nStorybook → для документирования UI-компонентов.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-07T09:05:40Z","dateModified":"2025-12-07T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2085},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2192","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2192","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2192","headline":"🤔 Как использовать селектор? Селектор в CSS используется для выбора элементов по тегу, классу, ID или атрибут…","articleBody":"🤔 Как использовать селектор?\n\nСелектор в CSS используется для выбора элементов по тегу, классу, ID или атрибуту. \nВ JS селекторы используются через document.querySelector() или useRef в React.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-06T16:10:39Z","dateModified":"2025-12-06T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2036},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2191","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2191","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2191","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":"2025-12-06T09:05:40Z","dateModified":"2025-12-06T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2287},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2190","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2190","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2190","headline":"Видовые квартиры в Ялте с собственным пляжем ЖК \"Юсуповский\" — ваша личная резиденция бизнес-класса на берегу…","articleBody":"Видовые квартиры в Ялте с собственным пляжем\n\nЖК \"Юсуповский\" — ваша личная резиденция бизнес-класса на берегу моря!\nЗдесь каждый элемент говорит о статусе: от величественного фасада до 2-этажного SPA и фитнес-центра на территории.\n\n✅ Панорамное остекление\n✅ Открытый подогреваемый бассейн и закрытый двор-парк 2 га\n✅ 2-этажные квартиры\n✅ Трансфер к пляжу\n✅ Реликтовый парк и водопад на территории.\n\nВсего в нескольких минутах езды: Ливадийский дворец, Солнечная тропа, ведущая вдоль побережья, а также лучшие рестораны и культурные, развлекательные объекты Ялты.\n\nЭто инвестиция в будущее: Ваш второй дом и источник вдохновения для будущих поколений.\n\nДо 30 ноября 2025 года вы можете купить квартиры в рассрочку 0%. Не упустите эту возможность! \n\nКупить\n\nПроектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО СЗ ВОЛГА. Финансовые услуги оказывает: ПАО \"Сбербанк\".\n\n#реклама \ngk-yusupovskiy.ru\nО рекламодателе","datePublished":"2025-12-05T22:45:16Z","dateModified":"2025-12-07T20:52:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1348},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2189","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2189","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2189","headline":"🤔 Как делать HTML-форму? HTML-форма создается с помощью тега