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

Відкрити в Telegram

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

Сітка:easyoffer Росія36 827 Технології та додатки7 139...

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

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

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

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

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

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

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

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

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

17 871

Підписники

-624 години

-457 днів

-16830 день

1 201

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

~ 79924 години

~ 90248 годин

6.72%

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

~ 3

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

Ads index

beta

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

\n \n \n\n\n

Привет, это AMP!

\n \n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-16T09:05:30Z","dateModified":"2026-02-16T09:05:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2548},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2394","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2394","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2394","headline":"🤔 В чём отличие for от while? - for — когда знаем начало и конец. - while — когда повторяем пока выполняется…","articleBody":"🤔 В чём отличие for от while?\n\n- for — когда знаем начало и конец.\n- while — когда повторяем пока выполняется условие.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-15T16:10:32Z","dateModified":"2026-02-15T16:10:32Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2382},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2393","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2393","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2393","headline":"🤔 Когда используются теги div и span?

и — это самые универсальные HTML-теги, но у них разные рол…","articleBody":"🤔 Когда используются теги div и span?\n\n

и — это самые универсальные HTML-теги, но у них разные роли: \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":"2026-02-15T09:05:29Z","dateModified":"2026-02-15T09:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2666},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2392","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2392","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2392","headline":"🤔 Что такое протокол SOAP? SOAP (Simple Object Access Protocol) — это протокол обмена структурированными сооб…","articleBody":"🤔 Что такое протокол SOAP?\n\nSOAP (Simple Object Access Protocol) — это протокол обмена структурированными сообщениями по сети, основанный на XML. Часто используется в веб-сервисах. Поддерживает строгую спецификацию, расширенные механизмы безопасности, но сложен и тяжелее, чем REST.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-14T16:10:31Z","dateModified":"2026-02-14T16:10:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2292},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2391","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2391","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2391","headline":"🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед…","articleBody":"🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?\n\nВ JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. \n\n🟠Использование `history.back()` и `history.forward()`\nЭти методы аналогичны кнопкам \"Назад\" и \"Вперед\" в браузере. \nhistory.back(); // Перемещение на одну страницу назад\nhistory.forward(); // Перемещение на одну страницу вперед\n\nПример кнопок \"Назад\" и \"Вперед\"\n\n\n\n🟠Использование `history.go(n)`\nЭтот метод позволяет перемещаться на определенное количество шагов: \nhistory.go(-1) – назад на 1 страницу \nhistory.go(1) – вперед на 1 страницу \nhistory.go(-2) – назад на 2 страницы \nhistory.go(-2); // Перейти на две страницы назад\nhistory.go(3); // Перейти на три страницы вперед\n\n🟠Получение длины истории `history.length`\nЕсли нужно узнать, сколько страниц в истории текущей сессии: \nconsole.log(history.length); // Количество записей в истории\n\n🟠Манипуляции с историей: `pushState()` и `replaceState()` \nЕсли нужно изменить URL без перезагрузки страницы, можно использовать: \nhistory.pushState(state, title, url)\nДобавляет новый URL в историю (как будто пользователь перешел по ссылке). \nhistory.pushState({ page: 1 }, \"Title 1\", \"/page1\");\n\nhistory.replaceState(state, title, url)\nЗаменяет текущий URL (не добавляет новую запись в историю). \nhistory.replaceState({ page: 2 }, \"Title 2\", \"/page2\");\n\nПример динамического изменения истории: \ndocument.querySelector(\"button\").addEventListener(\"click\", () => {\n history.pushState({ page: \"about\" }, \"About Page\", \"/about\");\n});\n\n🟠Отслеживание изменений истории `popstate`\nКогда пользователь нажимает \"Назад\" или \"Вперед\", можно реагировать с помощью события popstate\nwindow.addEventListener(\"popstate\", (event) => {\n console.log(\"Текущий state:\", event.state);\n});\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-14T09:05:29Z","dateModified":"2026-02-14T09:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2434},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2390","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2390","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2390","headline":"🤔 В каком случае функция меняет контекст? Контекст функции может измениться при использовании методов bind, c…","articleBody":"🤔 В каком случае функция меняет контекст?\n\nКонтекст функции может измениться при использовании методов bind, call, apply, при вызове функции как метода объекта или в стрелочных функциях, где контекст фиксирован.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-13T16:10:30Z","dateModified":"2026-02-13T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2131},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2389","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2389","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2389","headline":"🤔 Как отменить обтекание картинки текстом? Когда мы добавляем картинку в HTML, текст по умолчанию может обтек…","articleBody":"🤔 Как отменить обтекание картинки текстом?\n\nКогда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float. \n\n🚩Отмена обтекания с `clear: both;` \n\nЕсли изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;. \n

Этот текст не будет обтекать картинку.

\n.float-img {\n float: left; /* Изображение обтекается текстом */\n margin-right: 10px;\n}\n\n.clear-text {\n clear: both; /* Останавливает обтекание */\n}\n\n🚩Сделать изображение блочным (`display: block;`) \n\nПо умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз. \nimg {\n display: block;\n margin: 10px auto; /* Центрирование */\n}\n\n🚩Использовать `overflow: hidden;` для предотвращения наложений \n\nЕсли у родителя есть float, можно использовать overflow: hidden; для очистки потока. \n.container {\n overflow: hidden; /* Очищает обтекание */\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-13T09:05:29Z","dateModified":"2026-02-13T09:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2417},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2388","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2388","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2388","headline":"🤔 В каких случаях используются array.forEach и array.map? - forEach используется, когда нужно выполнить дейст…","articleBody":"🤔 В каких случаях используются array.forEach и array.map?\n\n- forEach используется, когда нужно выполнить действие над каждым элементом без возврата значения (например, лог или побочный эффект).\n- map используется, когда нужно создать новый массив, преобразуя каждый элемент. Он возвращает результат, в отличие от forEach.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-12T16:10:31Z","dateModified":"2026-02-12T16:10:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2253},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2387","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2387","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2387","headline":"🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это и…","articleBody":"🤔 Зачем нужен docker?\n\nЭто инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. \n\n🚩Почему нужен Docker? \n\n🟠Решает проблему \"работает у меня, но не у тебя\" \nВ разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. \n\n🟠Автоматизирует развертывание \nБез Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. \n\n🟠Легко масштабировать \nDocker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). \n\n🟠Разделяет зависимости \nКаждое приложение работает в изолированной среде, и конфликты библиотек исключены. \n\n🟠Работает везде (Windows, Mac, Linux, серверы, облако) \nКонтейнер можно запустить где угодно, где установлен Docker. \n\n🚩Как работает Docker? \n\n🟠Создаем `Dockerfile` (инструкция для сборки контейнера) \nПример для Node.js-приложения \n# Базовый образ с Node.js\nFROM node:18\n\n# Устанавливаем рабочую директорию\nWORKDIR /app\n\n# Копируем файлы проекта\nCOPY package.json ./\nRUN npm install\nCOPY . .\n\n# Запускаем приложение\nCMD [\"node\", \"server.js\"]\n\nСобираем образ Docker (создаем \"упакованный\" контейнер) \ndocker build -t my-app .\n\nЗапускаем контейнер\ndocker run -p 3000:3000 my-app\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-12T09:05:29Z","dateModified":"2026-02-12T09:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2413},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2386","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2386","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2386","headline":"🤔 Что такое secure (\"безопасные\") cookies? Secure-cookie — это cookie, которое отправляется только по защищён…","articleBody":"🤔 Что такое secure (\"безопасные\") cookies?\n\nSecure-cookie — это cookie, которое отправляется только по защищённым HTTPS-соединениям. Оно защищает данные от перехвата, особенно при передаче конфиденциальной информации, например, сессионных токенов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-11T16:10:30Z","dateModified":"2026-02-11T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2326},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2385","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2385","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2385","headline":"🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программиро…","articleBody":"🤔 Что такое функциональное программирование?\n\nФункциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. \n\n🚩Основные принципы функционального программирования \n\n🟠Чистые функции (Pure Functions) \nФункция называется чистой, если: \nПри одинаковых входных данных всегда возвращает одинаковый результат. \nНе изменяет внешние переменные (нет побочных эффектов). \nНечистая функция (изменяет внешнюю переменную) \nlet count = 0;\nfunction increment() {\n count += 1; // изменяет внешнюю переменную\n return count;\n}\n\nЧистая функция (зависит только от аргументов) \nfunction increment(num) {\n return num + 1; // не меняет внешнее состояние\n}\nconsole.log(increment(5)); // 6\nconsole.log(increment(5)); // 6 (всегда одинаковый результат)\n\n🟠Иммутабельность (Immutable Data) \nДанные не изменяются, а создаются новые версии объектов. \nИзменение объекта (нефункциональный подход)\nconst user = { name: \"Alice\", age: 25 };\nuser.age = 26; // изменяет объект\n\nСоздание нового объекта (функциональный подход) \nconst user = { name: \"Alice\", age: 25 };\nconst updatedUser = { ...user, age: 26 }; // создаём новый объект\n\n🟠Функции высшего порядка (Higher-Order Functions) \nФункция, которая принимает другую функцию в аргумент или возвращает функцию. \nconst numbers = [1, 2, 3];\nconst squared = numbers.map(n => n * n); // [1, 4, 9]\n\nПример: Функция, возвращающая другую функцию \nconst multiplyBy = (factor) => (num) => num * factor;\nconst double = multiplyBy(2);\nconsole.log(double(5)); // 10\n\n🟠Функциональные методы массивов (map, filter, reduce) \nФункциональные методы позволяют не мутировать массив, а создавать новый. \nИспользуем map() для изменения элементов \nconst numbers = [1, 2, 3];\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\nИспользуем filter() для фильтрации \nconst words = [\"apple\", \"banana\", \"kiwi\"];\nconst shortWords = words.filter(word => word.length < 6); // [\"kiwi\"]\n\nИспользуем reduce() для вычислений \nconst numbers = [1, 2, 3, 4];\nconst sum = numbers.reduce((acc, num) => acc + num, 0); // 10\n\n🟠Каррирование (Currying) \nРазделение функции на несколько функций, каждая принимает по одному аргументу. \nfunction sum(a, b) {\n return a + b;\n}\nconsole.log(sum(2, 3)); // 5\n\nПример: Каррированная функция \nconst sum = (a) => (b) => a + b;\nconsole.log(sum(2)(3)); // 5\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-11T09:05:29Z","dateModified":"2026-02-11T09:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2433},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2384","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2384","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2384","headline":"🤔 На чём строится HTML? HTML — это язык разметки, основанный на иерархической структуре тегов. Он определяет…","articleBody":"🤔 На чём строится HTML?\n\nHTML — это язык разметки, основанный на иерархической структуре тегов. Он определяет структуру контента веб-страницы (заголовки, параграфы, списки, формы и т.д.).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-10T16:10:29Z","dateModified":"2026-02-10T16:10:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2219},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2383","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2383","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2383","headline":"🤔 Как можно работать с датами в js? В JavaScript для работы с датами можно использовать: Date – встроенный об…","articleBody":"🤔 Как можно работать с датами в js?\n\nВ JavaScript для работы с датами можно использовать: \nDate – встроенный объект \nБиблиотеку Intl.DateTimeFormat – для форматирования \nБиблиотеки (moment.js, date-fns, luxon) – для удобной работы \n\n🚩Встроенный объект `Date` \n\nСоздание даты \nconst now = new Date(); // Текущая дата и время\nconsole.log(now); // Например: 2025-02-25T12:34:56.789Z\n\nСпособы создания даты\nnew Date(); // Текущая дата\nnew Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)\nnew Date(\"2025-02-25\"); // ISO строка\nnew Date(1708850400000); // Unix timestamp (в мс)\n\nПолучение значений\nconst date = new Date();\nconsole.log(date.getFullYear()); // 2025\nconsole.log(date.getMonth()); // 1 (февраль, потому что январь — 0)\nconsole.log(date.getDate()); // 25\nconsole.log(date.getDay()); // 2 (вторник, потому что воскресенье — 0)\nconsole.log(date.getHours()); // Часы\nconsole.log(date.getMinutes()); // Минуты\nconsole.log(date.getSeconds()); // Секунды\nconsole.log(date.getTime()); // Время в миллисекундах (Unix timestamp)\n\nИзменение даты\nconst date = new Date();\ndate.setFullYear(2030);\ndate.setMonth(11); // Декабрь\ndate.setDate(31);\nconsole.log(date); // 31 декабря 2030\n\nФорматирование даты\nconst date = new Date();\nconsole.log(date.toDateString()); // \"Tue Feb 25 2025\"\nconsole.log(date.toISOString()); // \"2025-02-25T12:34:56.789Z\"\nconsole.log(date.toLocaleString()); // Локальное представление\nconsole.log(date.toUTCString()); // \"Tue, 25 Feb 2025 12:34:56 GMT\"\n\nФорматирование с Intl.DateTimeFormat\nconst date = new Date();\nconst formatter = new Intl.DateTimeFormat(\"ru-RU\", {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n weekday: \"long\",\n});\nconsole.log(formatter.format(date)); // \"вторник, 25 февраля 2025 г.\"\n\n🚩Библиотеки (более удобные способы) \n\ndate-fns (легковесная альтернатива Moment.js) \nnpm install date-fns\nimport { format, addDays } from \"date-fns\";\n\nconst now = new Date();\nconsole.log(format(now, \"dd.MM.yyyy HH:mm\")); // 25.02.2025 15:30\nconsole.log(addDays(now, 5)); // Дата + 5 дней\n\nmoment.js (устаревший, но популярный)\nnpm install moment\nimport moment from \"moment\";\n\nconst now = moment();\nconsole.log(now.format(\"DD.MM.YYYY HH:mm\")); // 25.02.2025 15:30\nconsole.log(now.add(5, \"days\").format(\"DD.MM.YYYY\")); // +5 дней\n\nluxon (современная альтернатива Moment.js)\nnpm install luxon\nimport { DateTime } from \"luxon\";\n\nconst now = DateTime.now();\nconsole.log(now.toFormat(\"dd.MM.yyyy HH:mm\")); // 25.02.2025 15:30\nconsole.log(now.plus({ days: 5 }).toFormat(\"dd.MM.yyyy\")); // +5 дней\n\nРазница между датами \nconst date1 = new Date(\"2025-02-25\");\nconst date2 = new Date(\"2025-03-01\");\n\nconst diff = date2 - date1; // Разница в миллисекундах\nconsole.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-02-10T09:05:28Z","dateModified":"2026-02-10T09:05:28Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2408},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2382","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2382","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2382","headline":"🤔 Какие функции есть в JS? Функции в JavaScript могут быть: 1. Обычными функциями (function declaration). 2.…","articleBody":"🤔 Какие функции есть в JS?\n\nФункции в JavaScript могут быть:\n1. Обычными функциями (function declaration).\n2. Функциональными выражениями (function expression).\n3. Стрелочными функциями (arrow functions).\n4. Анонимными функциями (без имени).\n5. Колбэками (передаются как аргументы в другие функции).\n6. Асинхронными функциями (async/await).\n7. Генераторами (function*).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-02-09T16:10:30Z","dateModified":"2026-02-09T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2387},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2381","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2381","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2381","headline":"ChatGPT без VPN и зарубежных карт! Хватит гуглить часами. Gemini 3 объяснит код, найдет ошибку в JS и напишет…","articleBody":"ChatGPT без VPN и зарубежных карт!\n\nХватит гуглить часами. Gemini 3 объяснит код, найдет ошибку в JS и напишет CSS за секунду.\nРаботает в РФ без VPN. Оплата любой российской картой.\nТвой личный ментор по фронтенду 24/7. \n\nПерейти на сайт\n\n#реклама 16+\nsandboxer.ru\nО рекламодателе","datePublished":"2026-02-09T13:44:45Z","dateModified":"2026-02-11T11:59:22Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/5211177025782093238?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1752}]}}]}

17 871

🤔 Какие используешь подходы для написания приложения которую проще поддерживать, чем делать первоначальную разработку? При разработке frontend-приложений, которые в будущем будет проще поддерживать и масштабировать, я придерживаюсь ряда ключевых подходов. 🟠Разделение ответственности (Separation of Concerns) Это значит, что код должен быть разделен по зонам ответственности. В frontend-разработке это проявляется в: Чистом разделении логики, представления и данных (например, с помощью архитектуры MVC, MVVM или FLUX). Использовании компонентов в React/Vue или шаблонов в Angular. Разделении CSS, JS и HTML, либо использовании методологий, где стили хранятся рядом с компонентом (CSS Modules, Styled Components). Вместо того, чтобы писать всю логику и разметку в одном файле:

function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Я разделяю бизнес-логику и представление

// CounterLogic.js
export function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

// Counter.js
import { useCounter } from "./CounterLogic";
function Counter() {
  const { count, increment } = useCounter();
  return <button onClick={increment}>Count: {count}</button>;
}

🟠Компонентный подход и повторное использование кода Frontend-приложения должны строиться из переиспользуемых и изолированных компонентов. Это уменьшает дублирование кода и делает его понятным.

// Button.js (переиспользуемый компонент)
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// Counter.js (использует Button)
function Counter() {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount(count + 1)}>Count: {count}</Button>;
}

🟠Чистый код и читаемость Код должен быть понятным не только мне, но и другим разработчикам. Понятные имена переменных и функций. Вместо x → userAge, вместо doSmth() → calculateTotalPrice(). Меньше вложенности. Вместо кучи if и else, лучше использовать early return. Разбиение кода на модули. Один файл = одна зона ответственности.

function getDiscountedPrice(price, discount) {
  if (discount <= 0) return price;
  return price - price * (discount / 100);
}

🟠Состояние приложения: локальное vs глобальное В зависимости от сложности приложения нужно правильно управлять состоянием: Локальное состояние – useState (React), ref (Vue) для простых данных внутри компонента. Глобальное состояние – Redux, MobX, Zustand, Pinia, Context API – когда данные нужны многим компонентам. Серверное состояние – React Query, SWR – когда данные приходят с API и их нужно кешировать. 🟠Следование принципам SOLID и DRY DRY (Don't Repeat Yourself) – не повторяем код, используем функции, хуки, компоненты. SOLID – например, принцип единственной ответственности (Single Responsibility Principle) гласит, что каждый компонент или функция должны решать только одну задачу.

function sendEmailAndSaveToDB(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

Лучше разделить логику

function sendEmail(email) { /* отправка письма */ }
function saveUserToDatabase(user) { /* сохранение в БД */ }
function registerUser(user) {
  sendEmail(user.email);
  saveUserToDatabase(user);
}

🟠Использование TypeScript TypeScript помогает избежать ошибок и делать код предсказуемым.

type User = {
  id: number;
  name: string;
};

function getUserName(user: User): string {
  return user.name;
}

🟠Документация и кодстайл ESLint + Prettier → автоформатирование и проверка стиля. JSDoc/TypeScript → документация функций и типов данных. Storybook → для документирования UI-компонентов. Ставь 👍 и забирай 📚 Базу знаний

17 871

🤔 Сравни MobX с другими системами управления state. - Redux — декларативный, явный, работает по принципу store + reducer + dispatch; - MobX — императивный, реактивный, простой в использовании; - Recoil / Zustand — гибридные и легковесные решения. MobX лучше, когда нужно меньше boilerplate и больше магии, Redux — для строгой предсказуемости и логирования. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах. 🚩Progressive Enhancement (Прогрессивное улучшение) Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах. 🚩Graceful Degradation (Постепенное упрощение) Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров. Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox Приложение на React, но показываем простой HTML, если JavaScript отключён. Ставь 👍 и забирай 📚 Базу знаний

17 871

🤔 Что такое боксинг? Боксинг — это автоматическое оборачивание примитива в объект. Например, строка "abc" становится объектом String, если вызываешь метод: "abc".length. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

Пожизненная PRO подписка на easyoffer по цене одного года. Акция до 20 февраля. Покупаешь сейчас один раз – пользуешься всю жизнь без лимита, включая все будущие функции. Запланированные новые фичи на ближайшие пол года: 1. Агрегатор вакансий 2. Улучшение резюме, чтобы проходить ATS системы 3. Генерация уникального резюме и сопроводительного письма под вакансию Покупай на https://easyoffer.ru/

17 871

🤔 Что такое amp страницы? AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что: Используют оптимизированный HTML (AMP HTML) Ограничивают использование JavaScript Подключают Google AMP Cache для мгновенной загрузки 🚩Зачем нужны AMP? Ускоряют загрузку страниц → полезно для мобильных пользователей Улучшают SEO → Google любит быстрые сайты Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание Снижают нагрузку на сервер 🚩Как создать AMP-страницу? AMP-страница – это обычный HTML, но с ограничениями и своими тегами.

<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>

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

17 871

🤔 В чём отличие for от while? - for — когда знаем начало и конец. - while — когда повторяем пока выполняется условие. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

17 871

🤔 Что такое протокол SOAP? SOAP (Simple Object Access Protocol) — это протокол обмена структурированными сообщениями по сети, основанный на XML. Часто используется в веб-сервисах. Поддерживает строгую спецификацию, расширенные механизмы безопасности, но сложен и тяжелее, чем REST. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. 🟠Использование `history.back()` и `history.forward()` Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠Использование `history.go(n)` Этот метод позволяет перемещаться на определенное количество шагов: history.go(-1) – назад на 1 страницу history.go(1) – вперед на 1 страницу history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠Получение длины истории `history.length` Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠Манипуляции с историей: `pushState()` и `replaceState()` Если нужно изменить URL без перезагрузки страницы, можно использовать: history.pushState(state, title, url) Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url) Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠Отслеживание изменений истории `popstate` Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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

17 871

🤔 В каком случае функция меняет контекст? Контекст функции может измениться при использовании методов bind, call, apply, при вызове функции как метода объекта или в стрелочных функциях, где контекст фиксирован. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Как отменить обтекание картинки текстом? Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float. 🚩Отмена обтекания с `clear: both;` Если изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;.

<img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>

.float-img {
  float: left; /* Изображение обтекается текстом */
  margin-right: 10px;
}

.clear-text {
  clear: both; /* Останавливает обтекание */
}

🚩Сделать изображение блочным (`display: block;`) По умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз.

img {
  display: block;
  margin: 10px auto; /* Центрирование */
}

🚩Использовать `overflow: hidden;` для предотвращения наложений Если у родителя есть float, можно использовать overflow: hidden; для очистки потока.

.container {
  overflow: hidden; /* Очищает обтекание */
}

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

17 871

🤔 В каких случаях используются array.forEach и array.map? - forEach используется, когда нужно выполнить действие над каждым элементом без возврата значения (например, лог или побочный эффект). - map используется, когда нужно создать новый массив, преобразуя каждый элемент. Он возвращает результат, в отличие от forEach. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения

# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]

Собираем образ Docker (создаем "упакованный" контейнер)

docker build -t my-app .

Запускаем контейнер

docker run -p 3000:3000 my-app

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

17 871

🤔 Что такое secure ("безопасные") cookies? Secure-cookie — это cookie, которое отправляется только по защищённым HTTPS-соединениям. Оно защищает данные от перехвата, особенно при передаче конфиденциальной информации, например, сессионных токенов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Что такое функциональное программирование? Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов. 🚩Основные принципы функционального программирования 🟠Чистые функции (Pure Functions) Функция называется чистой, если: При одинаковых входных данных всегда возвращает одинаковый результат. Не изменяет внешние переменные (нет побочных эффектов). Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠Иммутабельность (Immutable Data) Данные не изменяются, а создаются новые версии объектов. Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠Функции высшего порядка (Higher-Order Functions) Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠Функциональные методы массивов (map, filter, reduce) Функциональные методы позволяют не мутировать массив, а создавать новый. Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠Каррирование (Currying) Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

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

17 871

🤔 На чём строится HTML? HTML — это язык разметки, основанный на иерархической структуре тегов. Он определяет структуру контента веб-страницы (заголовки, параграфы, списки, формы и т.д.). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

🤔 Как можно работать с датами в js? В JavaScript для работы с датами можно использовать: Date – встроенный объект Библиотеку Intl.DateTimeFormat – для форматирования Библиотеки (moment.js, date-fns, luxon) – для удобной работы 🚩Встроенный объект `Date` Создание даты

const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z

Способы создания даты

new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)

Получение значений

const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth());    // 1 (февраль, потому что январь — 0)
console.log(date.getDate());     // 25
console.log(date.getDay());      // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours());    // Часы
console.log(date.getMinutes());  // Минуты
console.log(date.getSeconds());  // Секунды
console.log(date.getTime());     // Время в миллисекундах (Unix timestamp)

Изменение даты

const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030

Форматирование даты

const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString());  // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString());  // "Tue, 25 Feb 2025 12:34:56 GMT"

Форматирование с Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."

🚩Библиотеки (более удобные способы) date-fns (легковесная альтернатива Moment.js)

npm install date-fns

import { format, addDays } from "date-fns";

const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней

moment.js (устаревший, но популярный)

npm install moment

import moment from "moment";

const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней

luxon (современная альтернатива Moment.js)

npm install luxon

import { DateTime } from "luxon";

const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней

Разница между датами

const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");

const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)

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

17 871

🤔 Какие функции есть в JS? Функции в JavaScript могут быть: 1. Обычными функциями (function declaration). 2. Функциональными выражениями (function expression). 3. Стрелочными функциями (arrow functions). 4. Анонимными функциями (без имени). 5. Колбэками (передаются как аргументы в другие функции). 6. Асинхронными функциями (async/await). 7. Генераторами (function*). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 871

ChatGPT без VPN и зарубежных карт! Хватит гуглить часами. Gemini 3 объяснит код, найдет ошибку в JS и напишет CSS за секунду. Работает в РФ без VPN. Оплата любой российской картой. Твой личный ментор по фронтенду 24/7. Перейти на сайт #реклама 16+ sandboxer.ru О рекламодателе