\n\n🚩Плюсы\n\n➕Быстрая работа после загрузки\nПриложение становится очень интерактивным после инициализации.\n➕Меньшая нагрузка на сервер\nОсновная работа выполняется на клиентской стороне.\n➕Гибкость и модульность\nЛегко добавлять сложные интерактивные компоненты.\n\n🚩Минусы\n\n➖Медленная первая загрузка (Time to First Byte, TTFB)\nПользователь видит пустую страницу, пока загружается JavaScript и данные.\n➕Проблемы с SEO\nПоисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.\n➖Требования к устройствам\nБольше ресурсов требуется на стороне клиента.\n\n🚩SSG (Static Site Generation)\n\nСайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.\nnpm run build\n\n🚩Плюсы и минусы\n\n➕Молниеносная загрузка\nHTML статичен и отдается сервером без обработки.\n➕SEO-дружелюбность\nПоисковые системы могут легко индексировать готовый HTML.\n➕Уменьшение нагрузки на сервер\nВсе вычисления выполняются заранее (во время сборки).\n➖Ограничения при частых обновлениях контента\nДля обновления нужно заново пересобирать сайт, что может занимать много времени.\n➖Не подходит для динамических данных\nЕсли страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.\n\n🚩ISR (Incremental Static Regeneration)\n\nЭто гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.\nexport async function getStaticProps() {\n return {\n props: {\n data: fetchData(),\n },\n revalidate: 60, // Обновлять страницу каждые 60 секунд\n };\n}\n\n🚩Плюсы и минусы\n\n➕Лучшая производительность\nСтраницы отдаются как статические, но обновляются при необходимости.\n➕Гибкость\nУдобно для контента, который редко обновляется.\n➕SEO\nПоисковики видят статические страницы.\n➖Сложнее настроить\nНужно управлять кэшированием и интервалами обновления.\n➖Не подходит для полностью динамических страниц\nЕсли обновления контента слишком частые, ISR может не подойти.\n\n🚩DPR (Dynamic Rendering / Hybrid Rendering)\n\nЭто подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.\n\n🚩Плюсы и минусы\n\n➕Оптимально для SEO\nБоты получают готовый HTML.\n➕Гибкость\nПользователи получают интерактивные страницы через CSR.\n➖Усложнение архитектуры\nНужно отслеживать запросы и разделять их.\n➖Задержки для ботов\nГенерация страницы на сервере может занять время.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-30T09:05:31Z","dateModified":"2025-12-30T09:05:31Z","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":1978},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":34}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2276","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2276","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2276","headline":"🤔 Что известно про сложность алгоритмов? Сложность алгоритма описывает, насколько быстро растёт время или пам…","articleBody":"🤔 Что известно про сложность алгоритмов?\n\nСложность алгоритма описывает, насколько быстро растёт время или память, необходимая для выполнения задачи при увеличении объёма данных. Обозначается как Big O:\n- O(1) — константная;\n- O(log n) — логарифмическая;\n- O(n) — линейная;\n- O(n²) — квадратичная и т.д.\nИспользуется для анализа эффективности кода и оптимизации.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-29T16:10:31Z","dateModified":"2025-12-29T16:10:31Z","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":1971},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2275","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2275","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2275","headline":"📺 База 1000+ реальных собеседований На программиста, тестировщика, аналитика, проджекта и другие IT профы. Ес…","articleBody":"📺 База 1000+ реальных собеседований\n\nНа программиста, тестировщика, аналитика, проджекта и другие IT профы. \n\nЕсть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.\n\n🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!","datePublished":"2025-12-29T11:10:18Z","dateModified":"2025-12-31T11:10: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":1321},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2274","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2274","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2274","headline":"🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажи…","articleBody":"🤔 Что происходит в момент запроса в браузере?\n\nКогда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. \n\n🟠Ввод URL и начало запроса\nПользователь вводит URL в адресную строку браузера.\nБраузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.\n\n🟠DNS-разрешение\nЕсли ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.\n\n🟠Установление TCP-соединения\nПосле получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:\nБраузер отправляет SYN-пакет серверу.\nСервер отвечает SYN-ACK пакетом.\nБраузер отправляет ACK-пакет, подтверждая установление соединения.\n\n🟠HTTPS и SSL/TLS\nЕсли URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:\nБраузер и сервер обмениваются сертификатами и выполняют шифрование данных.\n\n🟠Отправка HTTP-запроса\nБраузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:\n GET / HTTP/1.1\n Host: www.example.com\n\n🟠Обработка запроса на сервере\nСервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.\n\n🟠Получение и обработка HTTP-ответа\nБраузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:\n HTTP/1.1 200 OK\n Content-Type: text/html\n Content-Length: 1234\n\n \n \n \n \n \n \n

Добро пожаловать!

\n \n \n \n\n🟠Парсинг и рендеринг страницы\nБраузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.\nВ процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.\n\n🟠Выполнение JavaScript\nПосле парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.\nJavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-29T09:05:31Z","dateModified":"2025-12-29T09:05:31Z","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":2033},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":49}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2273","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2273","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2273","headline":"Бесплатная защита от DDoS-атак 📱 DDoS-атаки способны замедлить сайт или полностью вывести его из строя. Особе…","articleBody":"Бесплатная защита от DDoS-атак\n\n📱 DDoS-атаки способны замедлить сайт или полностью вывести его из строя. Особенно это критично в пиковые сезоны или во время распродаж, когда каждая минута простоя сайта равна потерянным клиентам.\n\n👍 AntiDDoS от Solar Space — облачное решение для защиты сайта от DDoS-атак. Бесплатный тариф подходит для небольших ресурсов: сайтов-визиток, сайтов экспертов и корпоративных порталов.\n\n✅ Решение не требует сложных настроек: после активации сервис сразу начинает фильтровать трафик и подавлять атаки. \n\n👌 Подключение занимает всего 20 минут в личном кабинете. Никаких карт, подписок и скрытых платежей. \n\nВключить\n\n#реклама 16+\nrt-solar.ru\nО рекламодателе","datePublished":"2025-12-28T23:31:31Z","dateModified":"2025-12-30T21:59:32Z","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":1336},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2272","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2272","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2272","headline":"🤔 Что такое debug? Debug (отладка) — это процесс поиска и устранения ошибок в коде. В ходе отладки разработчи…","articleBody":"🤔 Что такое debug?\n\nDebug (отладка) — это процесс поиска и устранения ошибок в коде. В ходе отладки разработчик пошагово проверяет выполнение программы, отслеживает значения переменных и логику исполнения.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-28T16:10:30Z","dateModified":"2025-12-28T16:10:30Z","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":2067},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2271","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2271","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2271","headline":"🤔 Какие значения будут являться falsy значениями? В JavaScript значения, которые при приведении к логическому…","articleBody":"🤔 Какие значения будут являться falsy значениями? \n\nВ JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются \"falsy\" значениями. Существует всего семь таких значений:\n\n🟠`false`\nЛогическое значение false. \nconsole.log(Boolean(false)); // false \n\n🟠`0`\nЧисло ноль. \nconsole.log(Boolean(0)); // false \n\n🟠`-0`\nОтрицательное число ноль (хотя это редко встречается на практике). \nconsole.log(Boolean(-0)); // false \n\n🟠`0n`\nЧисло BigInt с значением ноль. \nconsole.log(Boolean(0n)); // false \n\n🟠`\"\"` (пустая строка)\nСтрока без символов. \nconsole.log(Boolean(\"\")); // false \n\n🟠`null`\nСпециальное значение, обозначающее отсутствие какого-либо значения. \nconsole.log(Boolean(null)); // false \n\n🟠`undefined`\nСпециальное значение, обозначающее необъявленное или неприсвоенное значение. \nconsole.log(Boolean(undefined)); // false \n\n🟠`NaN`\nСпециальное значение, обозначающее не число (Not-a-Number). \nconsole.log(Boolean(NaN)); // false \n\n🚩Примеры использования\n\n🟠Проверка значений на falsy\nВ условиях (if statements) все falsy значения интерпретируются как false.\nconst values = [false, 0, -0, 0n, \"\", null, undefined, NaN];\n\nvalues.forEach(value => {\n if (!value) {\n console.log(`${value} is falsy`);\n }\n});\n\nПримеры в условиях\nif (!false) {\n console.log('false is falsy'); // выводится\n}\n\nif (!0) {\n console.log('0 is falsy'); // выводится\n}\n\nif (!\"\") {\n console.log('\"\" is falsy'); // выводится\n}\n\nif (!null) {\n console.log('null is falsy'); // выводится\n}\n\nif (!undefined) {\n console.log('undefined is falsy'); // выводится\n}\n\nif (!NaN) {\n console.log('NaN is falsy'); // выводится\n}\n\n🟠Использование в логических операторах\nFalsy значения также учитываются в логических операциях.\nconst value = null;\n\nconst result = value || 'default value';\nconsole.log(result); // 'default value', потому что value является falsy\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-28T09:05:30Z","dateModified":"2025-12-28T09:05:30Z","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":2348},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2270","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2270","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2270","headline":"🤔 Как выглядят REST-запросы? REST-запросы используют методы HTTP: - GET /users — получить список; - POST /use…","articleBody":"🤔 Как выглядят REST-запросы?\n\nREST-запросы используют методы HTTP:\n- GET /users — получить список;\n- POST /users — создать нового пользователя;\n- PUT /users/1 — заменить пользователя;\n- PATCH /users/1 — частично обновить;\n- DELETE /users/1 — удалить.\nОни передают данные через URL, заголовки и тело запроса (чаще в формате JSON).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-27T16:10:30Z","dateModified":"2025-12-27T16:10:30Z","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":2026},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2269","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2269","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2269","headline":"🤔 Что такое flexbox? Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает ма…","articleBody":"🤔 Что такое flexbox?\n\nFlexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки. \n\nГлавные особенности\n🟠Гибкое выравнивание \nэлементов в строку или колонку \n🟠Равномерное распределение \nпространства между элементами \n🟠Упрощает адаптивную верстку \nбез float и position \n🟠Легкое центрирование \nэлементов \n\n🚩Основные термины Flexbox \n\nКогда включается display: flex;, элементы внутри него становятся флекс-элементами. \n\nFlex-контейнер → родительский элемент (display: flex;) \nFlex-элементы → дочерние элементы контейнера \nГлавная ось (main axis) → ось, вдоль которой расположены элементы \nПоперечная ось (cross axis) → перпендикулярная ось \n\n.container {\n display: flex;\n}\n\n🚩Основные свойства Flexbox \n\n🟠`display: flex;` \nВключает Flexbox для контейнера. \n.container {\n display: flex;\n}\n\n🟠`flex-direction` – направление оси \nОпределяет, как располагаются элементы (по горизонтали или вертикали). \n.container {\n flex-direction: row; /* По умолчанию: слева направо */\n}\n/* Другие значения */\n.container {\n flex-direction: column; /* В столбик */\n flex-direction: row-reverse; /* Справа налево */\n flex-direction: column-reverse; /* Вниз-вверх */\n}\n\n🟠`justify-content` – выравнивание по главной оси \n.container {\n justify-content: flex-start; /* По умолчанию, слева направо */\n justify-content: center; /* Центр */\n justify-content: flex-end; /* Справа налево */\n justify-content: space-between; /* Равномерное распределение */\n justify-content: space-around; /* С отступами */\n justify-content: space-evenly; /* Равномерные промежутки */\n}\n\n🟠`align-items` – выравнивание по поперечной оси \n.container {\n align-items: stretch; /* По умолчанию (растягивает) */\n align-items: center; /* Центр по вертикали */\n align-items: flex-start; /* Вверх */\n align-items: flex-end; /* Вниз */\n align-items: baseline; /* По базовой линии текста */\n}\n\n🟠`flex-wrap` – перенос элементов на новую строку \n.container {\n flex-wrap: nowrap; /* По умолчанию – все в одной строке */\n flex-wrap: wrap; /* Элементы переносятся */\n flex-wrap: wrap-reverse; /* Перенос в обратном порядке */\n}\n\n🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`) \nРаботает, когда элементы занимают несколько строк. \n.container {\n align-content: flex-start; /* Вверх */\n align-content: flex-end; /* Вниз */\n align-content: center; /* По центру */\n align-content: space-between; /* Равномерное распределение */\n align-content: space-around; /* С отступами */\n align-content: stretch; /* Растянуть (по умолчанию) */\n}\n\n🚩Управление отдельными элементами (`flex`-элементы) \n\nflex-grow – рост элемента \n.item {\n flex-grow: 1; /* Растянется, если есть место */\n}\nflex-shrink – сжатие элемента \n.item {\n flex-shrink: 0; /* Не уменьшаться */\n}\n\nflex-basis – начальный размер элемента\n.item {\n flex-basis: 200px; /* Фиксированный размер */\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-27T09:05:30Z","dateModified":"2025-12-27T09:05:30Z","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":2108},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2268","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2268","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2268","headline":"🤔 Как поставить cookie-файл так, чтобы он удалился через 3 дня? Нужно задать атрибут времени жизни (Expires и…","articleBody":"🤔 Как поставить cookie-файл так, чтобы он удалился через 3 дня?\n\nНужно задать атрибут времени жизни (Expires или Max-Age) на 3 дня вперёд от текущей даты. После этого браузер автоматически удалит cookie по истечении срока.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-26T16:10:30Z","dateModified":"2025-12-26T16:10:30Z","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":1971},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2267","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2267","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2267","headline":"🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопк…","articleBody":"🤔 Когда нужно использовать кнопки а когда ссылки?\n\nВ веб-разработке часто возникает вопрос: использовать кнопку () или ссылку () для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. \n\n🟠Когда использовать ``? \n\nКогда действие выполняется на странице без перехода на другую \nКогда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта)\nОтправка формы \nОткрытие/закрытие модального окна \nВключение/выключение чего-то на странице \nВзаимодействие с JavaScript (AJAX-запросы, события) \nКликни\n\nПример кнопки в форме: \n

\n \n Отправить\n

\n\n🟠Когда использовать ``? \n\nКогда нужно перейти на другую страницу (или секцию сайта)\nКогда ссылка ведет на внешний или внутренний ресурс\nНавигация по сайту \nПереход на другую страницу \nСсылки на соцсети, статьи, файлы \nПерейти на сайт\n\nСсылка внутри страницы (якорь)\nПерейти вниз\n

Контент

\n\nОткрытие в новом окне\n\n Открыть в новой вкладке\n\n\n🟠Ошибки и неправильное использование \nОшибка: использовать вместо ссылки\nПерейти\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-26T09:05:30Z","dateModified":"2025-12-26T09:05:30Z","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":2281},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2266","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2266","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2266","headline":"🤔 Как бороться с переполнением контентом? Через: - overflow: hidden | scroll | auto; - ограничение размеров (…","articleBody":"🤔 Как бороться с переполнением контентом?\n\nЧерез:\n- overflow: hidden | scroll | auto;\n- ограничение размеров (max-width, max-height);\n- перенос текста (word-wrap, text-overflow: ellipsis);\n- адаптивные единицы (vh, vw, %, clamp()).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-25T16:10:29Z","dateModified":"2025-12-25T16:10:29Z","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":2048},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2265","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2265","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2265","headline":"🤔 Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изобра…","articleBody":"🤔 Какими способами мы можем получить картинку с сервера?\n\nВ веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.). \n\n – самый простой способ (браузер сам загружает) \n\n\nCSS (background-image) – если нужно фоновое изображение \n.element {\n background-image: url(\"https://example.com/image.jpg\");\n background-size: cover;\n}\n\n🟠`fetch()` – если нужно обработать картинку в JS \nМожно загрузить изображение как Blob и создать временный URL. \nfetch(\"https://example.com/image.jpg\")\n .then(response => response.blob())\n .then(blob => {\n const url = URL.createObjectURL(blob);\n document.getElementById(\"img\").src = url;\n });\n\nXMLHttpRequest – старый метод (устарел, но работает) \nconst xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"https://example.com/image.jpg\", true);\nxhr.responseType = \"blob\";\n\nxhr.onload = function () {\n const url = URL.createObjectURL(xhr.response);\n document.getElementById(\"img\").src = url;\n};\n\nxhr.send();\n\n🟠`` – если нужно редактировать изображение \nМожно загрузить картинку и нарисовать её на . \nconst canvas = document.getElementById(\"myCanvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst img = new Image();\n\nimg.onload = function () {\n ctx.drawImage(img, 0, 0);\n};\n\nimg.src = \"https://example.com/image.jpg\";\n\nWebSocket – если изображение передаётся в реальном времени \nconst socket = new WebSocket(\"wss://example.com/socket\");\n\nsocket.onmessage = function (event) {\n const url = URL.createObjectURL(event.data);\n document.getElementById(\"img\").src = url;\n};\n\ndata URL (Base64) – если нужно хранить изображение в тексте \n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-25T09:05:29Z","dateModified":"2025-12-25T09:05:29Z","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":2201},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@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/2264","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2264","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2264","headline":"🤔 Сколько понадобиться сравнений для того чтобы найти нужный элемент из 8? Если применить бинарный поиск на о…","articleBody":"🤔 Сколько понадобиться сравнений для того чтобы найти нужный элемент из 8?\n\nЕсли применить бинарный поиск на отсортированном массиве, максимум будет log₂(8) = 3 сравнения.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-24T16:10:30Z","dateModified":"2025-12-24T16:10:30Z","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":1981},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2263","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2263","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2263","headline":"🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они име…","articleBody":"🤔 Чем var отличается от const ? \n\nКлючевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.\n\n🚩Область видимости (Scope)\n\n🟠Var\n Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.\n\n🟠Const\nКак и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.\n\n🚩Переназначение и изменение\n\n🟠Var\nПеременные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.\n\n🟠Const\n Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.\n\n🚩Поднятие (Hoisting)\n\n🟠Var\nПеременные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined.\n\n🟠Const\nПодобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как \"временная мертвая зона\".\n\n🚩Инициализация\n\n🟠Var\nЭти переменные можно объявить без инициализации, и их начальное значение будет undefined.\n\n🟠Const\nЭти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.\n\nvar varVariable = 1;\nvarVariable = 2; // Переназначение возможно\n\nconst constVariable = { a: 1 };\nconstVariable.a = 2; // Изменение содержимого объекта возможно\n// constVariable = { b: 3 }; // Переназначение вызовет ошибку\n\nif (true) {\n var varScope = \"доступна везде в функции\";\n const constScope = \"доступна только в этом блоке\";\n}\nconsole.log(varScope); // Выведет строку\nconsole.log(constScope); // Ошибка: constScope не определена\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-24T09:05:29Z","dateModified":"2025-12-24T09:05:29Z","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":2199},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2262","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2262","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2262","headline":"🤔 Что такое необъявленные (undeclared) переменные? undeclared — это переменные, которые не были объявлены с п…","articleBody":"🤔 Что такое необъявленные (undeclared) переменные?\n\nundeclared — это переменные, которые не были объявлены с помощью let, const или var, но используются в коде. В строгом режиме это вызовет ошибку.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-12-23T16:10:30Z","dateModified":"2025-12-23T16:10:30Z","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":2041},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2261","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2261","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2261","headline":"🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице.…","articleBody":"🤔 Что такое meta теги?\n\nMeta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. \n\n🚩Зачем нужны meta-теги? \n\nУлучшают SEO (поисковую оптимизацию) \nУправляют отображением в соцсетях и поисковиках \nНастраивают адаптивность страницы (например, на мобильных устройствах) \nОпределяют кодировку, язык и авторство страницы \n\n🚩Основные meta-теги с примерами \n\nКодировка страницы \n\n\nОписание страницы (SEO) \n\n\nКлючевые слова (SEO, устарело) \n\n\nАвтор страницы \n\n\nЗапрет индексации страницы \n\n\nАдаптивность на мобильных устройствах \n\n\nСоциальные сети (Open Graph, Twitter Cards) \nFacebook и другие соцсети (Open Graph) \n\n\n\n\n\nTwitter-карточки \n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-12-23T09:05:29Z","dateModified":"2025-12-23T09:05:29Z","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":2346},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}}]}

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

17 861

🤔 Когда брать абсолютные величины а когда относительные? Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы. 🚩Абсолютные величины (например, px, pt, cm, in) Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста. 🚩Когда использовать 1⃣Пиксели (`px`) Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне. Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки). Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh) Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты. 🟠Проценты (`%`) Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента. Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`) Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя. Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`): Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование. Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`): Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера). Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

🚩Комбинированное использование Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

2.0k257

分析

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

17 861

🤔 Что делает box-sizing: border-box? Изменяет модель расчёта размеров элемента: 1. Ширина и высота включают содержимое, padding и border. 2. Это упрощает управление размерами, так как итоговый размер элемента остаётся фиксированным. Без border-box (по умолчанию content-box), padding и border увеличивают размеры элемента, что усложняет расчёты. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

1.8k1213

分析

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

17 861

Удобные банковские операции с навыком "помощник ВТБ" Сделайте повседневные дела приятнее: забудьте про рутину оплаты мобильной связи, штрафов ГАИ и ЖКУ по Москве. Голосовой навык "Помощник ВТБ" на устройствах с Алисой подскажет по банковским вопросам, даст консультации по продуктам банка, а после авторизации поможет с платежами в ВТБ и выбором категорий кешбэка. Как запустить? - Скажите: "Алиса, чат с ВТБ". Потом просто скажите: "Оплати мой мобильный". И задача будет выполнена. Навык работает без биометрии — спокойно и удобно. Перейти на сайт #реклама 16+ alice.yandex.ru О рекламодателе

1.4k

分析

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

17 861

🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. 🚩CSR (Client-Side Rendering) Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.

<div id="app"></div>
<script src="bundle.js"></script>

🚩Плюсы ➕Быстрая работа после загрузки Приложение становится очень интерактивным после инициализации. ➕Меньшая нагрузка на сервер Основная работа выполняется на клиентской стороне. ➕Гибкость и модульность Легко добавлять сложные интерактивные компоненты. 🚩Минусы ➖Медленная первая загрузка (Time to First Byte, TTFB) Пользователь видит пустую страницу, пока загружается JavaScript и данные. ➕Проблемы с SEO Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере. ➖Требования к устройствам Больше ресурсов требуется на стороне клиента. 🚩SSG (Static Site Generation) Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.

npm run build

🚩Плюсы и минусы ➕Молниеносная загрузка HTML статичен и отдается сервером без обработки. ➕SEO-дружелюбность Поисковые системы могут легко индексировать готовый HTML. ➕Уменьшение нагрузки на сервер Все вычисления выполняются заранее (во время сборки). ➖Ограничения при частых обновлениях контента Для обновления нужно заново пересобирать сайт, что может занимать много времени. ➖Не подходит для динамических данных Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным. 🚩ISR (Incremental Static Regeneration) Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.

export async function getStaticProps() {
  return {
    props: {
      data: fetchData(),
    },
    revalidate: 60, // Обновлять страницу каждые 60 секунд
  };
}

🚩Плюсы и минусы ➕Лучшая производительность Страницы отдаются как статические, но обновляются при необходимости. ➕Гибкость Удобно для контента, который редко обновляется. ➕SEO Поисковики видят статические страницы. ➖Сложнее настроить Нужно управлять кэшированием и интервалами обновления. ➖Не подходит для полностью динамических страниц Если обновления контента слишком частые, ISR может не подойти. 🚩DPR (Dynamic Rendering / Hybrid Rendering) Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков. 🚩Плюсы и минусы ➕Оптимально для SEO Боты получают готовый HTML. ➕Гибкость Пользователи получают интерактивные страницы через CSR. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний

2.0k346

分析

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

17 861

🤔 Что известно про сложность алгоритмов? Сложность алгоритма описывает, насколько быстро растёт время или память, необходимая для выполнения задачи при увеличении объёма данных. Обозначается как Big O: - O(1) — константная; - O(log n) — логарифмическая; - O(n) — линейная; - O(n²) — квадратичная и т.д. Используется для анализа эффективности кода и оптимизации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k1915

分析

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

17 861

📺 База 1000+ реальных собеседований На программиста, тестировщика, аналитика, проджекта и другие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

1.3k1

分析

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

17 861

🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. 🟠Ввод URL и начало запроса Пользователь вводит URL в адресную строку браузера. Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы. 🟠DNS-разрешение Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера. 🟠Установление TCP-соединения После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие: Браузер отправляет SYN-пакет серверу. Сервер отвечает SYN-ACK пакетом. Браузер отправляет ACK-пакет, подтверждая установление соединения. 🟠HTTPS и SSL/TLS Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS: Браузер и сервер обмениваются сертификатами и выполняют шифрование данных. 🟠Отправка HTTP-запроса Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠Обработка запроса на сервере Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц. 🟠Получение и обработка HTTP-ответа Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

🟠Парсинг и рендеринг страницы Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы. В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки. 🟠Выполнение JavaScript После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы. JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки. Ставь 👍 и забирай 📚 Базу знаний

2.0k4913

分析

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

17 861

Бесплатная защита от DDoS-атак 📱 DDoS-атаки способны замедлить сайт или полностью вывести его из строя. Особенно это критично в пиковые сезоны или во время распродаж, когда каждая минута простоя сайта равна потерянным клиентам. 👍 AntiDDoS от Solar Space — облачное решение для защиты сайта от DDoS-атак. Бесплатный тариф подходит для небольших ресурсов: сайтов-визиток, сайтов экспертов и корпоративных порталов. ✅ Решение не требует сложных настроек: после активации сервис сразу начинает фильтровать трафик и подавлять атаки. 👌 Подключение занимает всего 20 минут в личном кабинете. Никаких карт, подписок и скрытых платежей. Включить #реклама 16+ rt-solar.ru О рекламодателе

1.3k1

分析

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

17 861

🤔 Что такое debug? Debug (отладка) — это процесс поиска и устранения ошибок в коде. В ходе отладки разработчик пошагово проверяет выполнение программы, отслеживает значения переменных и логику исполнения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.1k310

分析

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

17 861

🤔 Какие значения будут являться 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

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

2.3k125

分析

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

17 861

🤔 Как выглядят REST-запросы? REST-запросы используют методы HTTP: - GET /users — получить список; - POST /users — создать нового пользователя; - PUT /users/1 — заменить пользователя; - PATCH /users/1 — частично обновить; - DELETE /users/1 — удалить. Они передают данные через URL, заголовки и тело запроса (чаще в формате JSON). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k1617

分析

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

17 861

🤔 Что такое flexbox? Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки. Главные особенности 🟠Гибкое выравнивание элементов в строку или колонку 🟠Равномерное распределение пространства между элементами 🟠Упрощает адаптивную верстку без float и position 🟠Легкое центрирование элементов 🚩Основные термины Flexbox Когда включается display: flex;, элементы внутри него становятся флекс-элементами. Flex-контейнер → родительский элемент (display: flex;) Flex-элементы → дочерние элементы контейнера Главная ось (main axis) → ось, вдоль которой расположены элементы Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox 🟠`display: flex;` Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`) Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы) flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

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

2.1k1311

分析

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

17 861

🤔 Как поставить cookie-файл так, чтобы он удалился через 3 дня? Нужно задать атрибут времени жизни (Expires или Max-Age) на 3 дня вперёд от текущей даты. После этого браузер автоматически удалит cookie по истечении срока. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k814

分析

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

17 861

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы

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

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

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

2.3k147

分析

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

17 861

🤔 Как бороться с переполнением контентом? Через: - overflow: hidden | scroll | auto; - ограничение размеров (max-width, max-height); - перенос текста (word-wrap, text-overflow: ellipsis); - адаптивные единицы (vh, vw, %, clamp()). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k1414

分析

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

17 861

🤔 Какими способами мы можем получить картинку с сервера? В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.). <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

🟠`<canvas>` – если нужно редактировать изображение Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени

const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
  const url = URL.createObjectURL(event.data);
  document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

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

2.2k2015

分析

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

17 861

🤔 Сколько понадобиться сравнений для того чтобы найти нужный элемент из 8? Если применить бинарный поиск на отсортированном массиве, максимум будет log₂(8) = 3 сравнения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k117

分析

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

17 861

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

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

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

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

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

2.2k149

分析

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

17 861

🤔 Что такое необъявленные (undeclared) переменные? undeclared — это переменные, которые не были объявлены с помощью let, const или var, но используются в коде. В строгом режиме это вызовет ошибку. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.0k411

分析

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

17 861

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

<meta charset="UTF-8">

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

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

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

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

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

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

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

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

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

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

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

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

Twitter-карточки

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

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

2.3k236

分析

显示更多