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

Kanalga Telegram’da o‘tish

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

Ko'proq ko'rsatish

Tarmoq:easyoffer Rossiya36 827 Texnologiyalar & Aralashmalar7 139...

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 871 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 139-o'rinni va Rossiya mintaqasida 36 827-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 17 871 obunachiga ega bo‘ldi.

28 Avgust, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -168 ga, so‘nggi 24 soatda esa -6 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

Tasdiqlash holati: Tasdiqlanmagan
Jalb etish (ER): Auditoriya o‘rtacha 6.72% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.47% ini tashkil etuvchi reaksiyalarni to‘playdi.
Post qamrovi: Har bir post o‘rtacha 1 201 marta ko‘riladi; birinchi sutkada odatda 799 ta ko‘rish yig‘iladi.
Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.

📝 Tavsif va kontent siyosati

Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Yuqori yangilanish chastotasi (oxirgi ma’lumot 29 Avgust, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.

17 871

Obunachilar

-624 soatlar

-457 kunlar

-16830 kunlar

1 201

Post ko'rishlar

~ 79924 soatlar

~ 90248 soatlar

6.72%

Muloqot nisbati

~ 3

Kuniga postlar

Ads index

beta

Postlar arxiv

\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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2394","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2394","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2393","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2393","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2392","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2392","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2391","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2391","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2390","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2390","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2389","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2389","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2388","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2388","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2387","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2387","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2386","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2386","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2385","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2385","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2384","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2384","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2383","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2383","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2382","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2382","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2381","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2381","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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 О рекламодателе