Code Ready | Frontend

Открыть в Telegram

Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready

Больше

Россия30 266 Технологии и приложения5 954...

📈 Аналитический обзор Telegram-канала Code Ready | Frontend

Канал Code Ready | Frontend (@code_ready) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 21 702 подписчиков, занимая 5 954 место в категории Технологии и приложения и 30 266 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 21 702 подписчиков.

Согласно последним данным от 26 августа, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило 213, а за последние 24 часа — 2, при этом общий охват остаётся высоким.

Статус верификации: Не верифицирован
Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 8.16%. В первые 24 часа после публикации контент обычно набирает 4.47% реакций от общего числа подписчиков.
Охват публикаций: В среднем каждый пост получает 1 771 просмотров. В течение первых суток публикация набирает 971 просмотров.
Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 23.
Тематические интересы: Контент сосредоточен на ключевых темах, таких как css, браузер, интерфейс, загрузка, api.

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

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready”

Благодаря высокой частоте обновлений (последние данные получены 27 августа, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

21 702

Подписчики

+224 часа

+547 дней

+21330 день

1 771

Просмотры поста

~ 97124 часа

~ 1 21048 часов

8.16%

Коэффициент вовлеченности

~ 2

Постов в день

Ads index

beta

Архив постов

\n\nСоздаём функцию генерации QR в DataURL (data:image/png;base64,... по умолчанию):\nasync function generateQR(text) {\n try {\n const url = await QRCode.toDataURL(text, { width: 300 });\n console.log(\"QR DataURL:\", url);\n return url;\n } catch (e) {\n console.error(\"Ошибка генерации QR:\", e);\n return null;\n }}\n\nГенерируем QR для ссылки или текста:\ngenerateQR(\"https://example.com\").then(qr => {\n if (qr) console.log(\"QR успешно создан\");\n});\n\nФормально вызовы идут параллельно (fire-and-forget). Если нужен контроль завершения — используем Promise.all, но для простых задач достаточно forEach:\n[\"Alpha\", \"Beta\", \"Gamma\"].forEach(t => {\n generateQR(t).then(qr => console.log(`QR для ${t}:`, !!qr));\n});\n\nГенерация QR для JSON:\nconst payload = JSON.stringify({ id: 123, role: \"tester\", active: true });\ngenerateQR(payload).then(qr => console.log(\"QR для JSON готов:\", !!qr));\n\nМожно кодировать JSON, токены и любые строковые данные.\n\n🔥 В итоге получаем простой инструмент для генерации QR-кодов под большинство данных прямо в браузере. Легко встраивается в проекты, тестовые утилиты и ботов.\n\n📣 Code Ready | #практика","datePublished":"2026-01-23T12:10:13Z","dateModified":"2026-01-23T12:10:13Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2549},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":40}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2793","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2793","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2793","headline":"Собрал чат-бота за вечер → заработал 9 000₽. Так и работают специалисты по чат-ботам: открыл шаблон → собрал…","articleBody":"Собрал чат-бота за вечер → заработал 9 000₽.\n\nТак и работают специалисты по чат-ботам:\n открыл шаблон → собрал бота как конструктор → получил деньги.\n\n Работы — на 2–3 часа.\n Оплата — 9–15 000₽ за сборку.\n Никакого программирования и долгих задач.\n\n Если умеешь открыть ворд или запустить косынку — справишься.\n\nА спрос сейчас бешеный:\n более 10 000 предпринимателей в месяц ищут тех, кто делает ботов и авторассылки.\n Это одна из самых простых и пустых ниш в онлайне — бери и зарабатывай.\n\nИ главное:\n Собрать первого бота без опыта и получить клиента — проще, чем кажется.\n Все инструкции лежат здесь:\n👉 @other_digital_bot\n\nКто готов кликать мышкой и брать заказы —\n тот спокойно накопит на отдых, машину, квартиру и любые хотелки.\n\nПробуй: @other_digital_bot","datePublished":"2026-01-23T10:10:07Z","dateModified":"2026-01-25T10:10:19Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1651},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2792","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2792","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2792","headline":"Code Ready | Frontend","datePublished":"2026-01-23T07:12:17Z","dateModified":"2026-01-23T07:12:17Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2752},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":39},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2791","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2791","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2791","headline":"Code Ready | Frontend","datePublished":"2026-01-23T07:12:07Z","dateModified":"2026-01-23T07:12:07Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":3029},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2790","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2790","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2790","headline":"👩‍💻 Можно ли управлять тем, как ведут себя вложенные элементы в 3D-трансформациях? Свойство transform-style о…","articleBody":"👩‍💻 Можно ли управлять тем, как ведут себя вложенные элементы в 3D-трансформациях?\n\nСвойство transform-style определяет, будут ли дочерние элементы сохранять своё 3D-положение или сплющиваться в плоскость родителя при трансформациях. \n\nОсновные значения:\n• flat — значение по умолчанию, все дочерние элементы проецируются в плоскость родителя;\n\n• preserve-3d — сохраняет 3D-позиционирование вложенных элементов.\n\nСвойство не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.\n\n📣 Code Ready | #свойство","datePublished":"2026-01-22T12:12:07Z","dateModified":"2026-01-22T12:12:07Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2991},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2789","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2789","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2789","headline":"Изоляция рунета ближе, чем ты думаешь Loading … ██████████████] 99% Роскомнадзору дали карт-бланш на блокиров…","articleBody":"Изоляция рунета ближе, чем ты думаешь\n\nLoading …\n\n██████████████] 99%\n\nРоскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее.\n\nЧтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack.\n\nТут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса.\n\nНе жди момента «Х». Перестрахуйся подпиской.","datePublished":"2026-01-22T10:12:15Z","dateModified":"2026-01-24T10:12:25Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"image":["https://n1.tlmtr.cc/p/5305644990371401457?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1785},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2788","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2788","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2788","headline":"❤️ Crockford — материалы человека, который сыграл ключевую роль в развитии JS! Здесь собраны статьи и материа…","articleBody":"❤️ Crockford — материалы человека, который сыграл ключевую роль в развитии JS!\n\nЗдесь собраны статьи и материалы программиста, который сыграл огромную роль в развитии JS и придумал JSON. Крокфорд объясняет, где в JS сильные стороны, где опасные места и какие подходы реально работают в долгосрочной перспективе. Это хороший ресурс, если ты уже знаешь основы и хочешь лучше понять логику его дизайна и то, как писать более надёжный и понятный код.\n\n📌 Оставляю ссылочку: crockford.com\n\n📣 Code Ready | #ресурс","datePublished":"2026-01-22T07:12:12Z","dateModified":"2026-01-22T07:12:12Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2566},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2787","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2787","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2787","headline":"Синхронизация данных между вкладками! Если у пользователя открыто несколько вкладок одного сайта, браузер поз…","articleBody":"Синхронизация данных между вкладками!\n\nЕсли у пользователя открыто несколько вкладок одного сайта, браузер позволяет им обмениваться сообщениями в пределах одного origin через стандартный BroadcastChannel API.\n\nСоздаём канал для обмена событиями:\nconst channel = new BroadcastChannel(\"app_sync\");\n\nИз одной вкладки отправляем событие в остальные:\nchannel.postMessage({\n type: \"LOGOUT\"\n});\n\nВ других вкладках подписываемся на входящие сообщения:\nchannel.onmessage = (event) => {\n console.log(event.data);\n};\n\nПрактический кейс — одновременный logout во всех вкладках приложения:\nchannel.onmessage = (event) => {\n if (event.data.type === \"LOGOUT\") {\n // Удаляем только auth-данные, без полного clear\n localStorage.removeItem(\"access_token\");\n localStorage.removeItem(\"refresh_token\");\n location.reload();\n }\n};\n\nФункция logout в текущей вкладке должна сначала выполнить локальную очистку, а затем уведомить остальные вкладки:\nfunction logout() {\n localStorage.removeItem(\"access_token\");\n localStorage.removeItem(\"refresh_token\");\n\n channel.postMessage({ type: \"LOGOUT\" });\n}\n\nРаботает нативно, поддерживается современными браузерами, описан в HTML Living Standard.\n\n🔥 Почему BroadcastChannel, а не localStorage events: это нативный event-bus без побочных записей в localStorage, не требующий триггерных ключей и дающий более чистую, предсказуемую модель событий.\n\n📣 Code Ready | #практика","datePublished":"2026-01-21T12:13:03Z","dateModified":"2026-01-21T12:13:03Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2478},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":37},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":39}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2786","url":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2786","mainEntityOfPage":"https://telemetr.io/ru/channels/1743337580-code_ready/posts/2786","headline":"Пройти видеоверификацию на бирже или фармить донаты на OnlyFans 😍 Создать виртуальную личность и устроиться н…","articleBody":"Пройти видеоверификацию на бирже или фармить донаты на OnlyFans 😍\n\nСоздать виртуальную личность и устроиться на работу онлайн.\n\nЭто 1 из 1000 способов оседлать ИИ. А научиться работать с этим можно в этом канале. Там уже слили:\n\n– Как получить много генераций [гайд]\n– Промты, улучшающие ответы ChatGPT в 10 раз [скопировать]\n– Дикие способы заработка на ИИ [читать]\n\n⚡️ Сохраняйте, это мастхев на 2026 год: @neiropulse","datePublished":"2026-01-21T10:12:11Z","dateModified":"2026-01-23T10:10:15Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/ru/channels/1743337580-code_ready","image":"https://img.tlmtr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1586},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}}]}

21 693

Записываем звук с микрофона в браузере! Современные браузеры позволяют писать аудио без сторонних библиотек, используя MediaRecorder API. Для начала запрашиваем у пользователя доступ к микрофону (работает только в HTTPS или localhost окружении):

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

Перед созданием рекордера желательно проверить поддерживаемый формат:

const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
  ? 'audio/webm;codecs=opus'
  : 'audio/webm';

Создаём рекордер для записи аудио:

const recorder = new MediaRecorder(stream, { mimeType });

Подготавливаем массив для аудио-чанков и подписываемся на событие dataavailable: (срабатывает минимум при stop(), а при использовании timeslice — периодически):

const chunks = [];

recorder.ondataavailable = (e) => {
  if (e.data && e.data.size > 0) {
    chunks.push(e.data);
  }
};

Запускаем запись (при необходимости можно передать timeslice, например recorder.start(1000)):

recorder.start();

Останавливаем запись, например, через 5 секунд:

setTimeout(() => {
  recorder.stop();
}, 5000);

После остановки записи собираем аудио в единый файл и воспроизводим его:

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: mimeType });
  const url = URL.createObjectURL(blob);

  const audio = document.createElement('audio');
  audio.controls = true;
  audio.src = url;

  document.body.append(audio);

Воспроизведение может быть ограничено политикой autoplay:

  audio.play().catch(() => {});

Освобождаем ресурсы после использования:

  audio.onended = () => {
    URL.revokeObjectURL(url);
  };

  stream.getTracks().forEach(track => track.stop());
};

🔥 Формат аудио зависит от браузера — при необходимости проверяйте поддержку через MediaRecorder.isTypeSupported() и задавайте mimeType явно. 📣 Code Ready | #практика

21 693

Слили в телеграмм тонны инфы и отсортировали по каналам 🖥 Курсы & GitHub — 1579ГБ ⌨️ Python — 955ГБ 🤒 OSINT — 315ГБ ☁️ Хакинг & ИБ — 756ГБ 🙃 Linux & Bash — 459ГБ 😦 Работа в IT — 778ГБ 🖥 Общий архив — 2346ГБ ➡️ Практические инструкции, курсы, книги и инструменты.

21 693

📂 Напоминалка для работы с CSS-псевдоклассами! Например, :first-child применяется к элементу, который является первым дочерним элементом родителя, а :first-of-type выбирает первый элемент указанного типа среди дочерних. На изображении - наиболее используемые псевдоклассы для работы со структурой DOM. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

21 693

👩‍💻 Нужно быстро проверить API? Postman — инструмент для работы с API прямо из VS Code: отправка запросов, просмотр ответов, работа с headers, body, токенами и коллекциями. Удобно тестировать эндпоинты, проверять ответы и разбираться в API ещё до интеграции во фронт. Экономит время и помогает быстрее понять, что приходит с сервера. 📣 Code Ready | #vscode

21 693

👩‍💻 Сегментированный переключатель состояний! Во многих интерфейсах нужен простой способ переключать состояние: табы, фильтры, режимы. В этом приёме переключатель собирается на html/css, где radio-кнопки становятся источником состояния. Как работает:

• группа radio гарантирует, что активен всегда только один сегмент; • индикатор - отдельный слой, который перемещается через transform, не влияя на layout; • grid задаёт геометрию элементов; • один и тот же state управляет и положением индикатора, и цветом текста.

Такой прием легко масштабируется и отлично ложится в продакшн-код. 📣 Co de Ready | #фишка

21 693

👩‍💻 Быстро и просто обнуляем специфичность селекторов! Одна из самых частых причин, почему стили не применяются, это разросшаяся специфичность селекторов. Со временем каждый новый селектор должен быть сложнее предыдущего:

.header .nav .item a {
  color: red;
}

Такой код работает, но он повышает специфичность и делает дальнейшие переопределения всё сложнее. В CSS есть способ этого избежать, использовать :where():

:where(.header .nav .item a) {
  color: red;
}

Особенность :where() в том, что он всегда имеет нулевую специфичность, независимо от того, что находится внутри. Это значит, что правило применяется, но никогда не мешает более конкретным стилям компонентов. Именно поэтому :where() идеально подходит для базовых и системных стилей:

:where(button) {
  font: inherit;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

🔥 Такие правила не ломают компоненты, легко переопределяются и позволяют обходиться без !important. 📣 Code Ready | #совет

21 693

📱 Адаптивная шапка при прокрутке! Привет! В этом гайде создаём фиксированную шапку, которая адаптируется к прокрутке страницы: сжимается и автоматически скрывается при скролле вниз, возвращаясь при движении вверх. Ключевые моменты:

• HTML: структура шапки с навигационным меню. • CSS: плавные анимации, эффект сжатия и скрытия через классы состояния. • JS: определение направления прокрутки и переключение классов scrolled и hide.

Компонент подходит для интерфейсов с фиксированной навигацией, где важно экономить пространство и улучшать восприятие контента при активной прокрутке страницы. 📣 Code Ready | #гайд

21 693

Секрет, который делит январь на «до» и «после» в карьере. В январе есть два типа соискателей:

99% — обновляют резюме, рассылают его в 100 компаний и ждут. Они получают тишину или вежливые отказы. 1% — используют «окно возможностей». Они знают, что мало просто найти вакансии. Нужно пройти так, чтобы рекрутер не мог вас пропустить.

Разница не в опыте. Разница в методе. Мы в @mathcareer — про метод. Мы не даём «советы», а разбираем систему: как читать вакансию между строк, что писать в сопроводительном письме, которое откроет двери, и как вести переговоры. Хотите перейти из 99% в 1%? 👉 Всё уже разложено по полочкам здесь: https://t.me/+v5AE1DRA7L04MGVi

21 693

👩‍💻 Строки с Tailwind-классами становятся слишком длинными? Headwind — расширение, которое автоматически сортирует классы Tailwind в правильном порядке, без ручного редактирования. Один запуск и строка становится аккуратной и одинаковой во всём проекте. Особенно полезно, если над кодом работает несколько человек. 📣 Code Ready | #vscode

21 693

👩‍💻 3D-лента изображений с фокусом при наведении! В этой фишке мы создаём 3D-ленту изображений с глубиной, перспективой и движением. Как работает:

• используется единая адаптивная единица --index, которая масштабируется; • perspective задаёт глубину; • кастомный cubic-bezier формирует плавное движение без дёрганий; • вся интерактивность работает через transform и filter.

Такой приём отлично подходит для галерей и портфолио, подборок контента, hero-блоков. 📣 Co de Ready | #фишка

21 693

❤️ В Москве на стильной площадке TAU пройдет масштабная офлайн-конференция для инженеров, ориентированная на практику и живое общение — T-Sync Conf от Т-Технологий На конференции: • Выбор собственной траектории из восьми технических контуров — AI, Data, R&D, Security, UX/UI, Productivity, Observability и Platform; • Демо-стенды с AI- и дата-платформами, где технологии можно протестировать руками; • Инженерные диалоги с разбором реальных кейсов и инцидентов; • Хакатон T-Hack Hardcore для продвинутых инженеров и публичная сборка сервиса в реальном времени; • UX/UI инструменты — от интерфейсов до дизайн-систем. 📣 Code Ready | #конференция

21 693

Генератор QR-кодов прямо в браузере! QR-коды часто нужны в разработке: передача ссылок, упаковка тестовых данных, автоматизация, обмен данными для ботов. Сделаем генератор на чистом JavaScript с помощью qrcode. Подключаем библиотеку в браузер через CDN как ES-модуль:

<script type="module">
  import QRCode from "https://cdn.jsdelivr.net/npm/qrcode@1.5.3/+esm";
  // Делаем доступным глобально, чтобы примеры ниже работали при копипасте
  window.QRCode = QRCode;
</script>

Создаём функцию генерации QR в DataURL (data:image/png;base64,... по умолчанию):

async function generateQR(text) {
  try {
    const url = await QRCode.toDataURL(text, { width: 300 });
    console.log("QR DataURL:", url);
    return url;
  } catch (e) {
    console.error("Ошибка генерации QR:", e);
    return null;
  }}

Генерируем QR для ссылки или текста:

generateQR("https://example.com").then(qr => {
  if (qr) console.log("QR успешно создан");
});

Формально вызовы идут параллельно (fire-and-forget). Если нужен контроль завершения — используем Promise.all, но для простых задач достаточно forEach:

["Alpha", "Beta", "Gamma"].forEach(t => {
  generateQR(t).then(qr => console.log(`QR для ${t}:`, !!qr));
});

Генерация QR для JSON:

const payload = JSON.stringify({ id: 123, role: "tester", active: true });
generateQR(payload).then(qr => console.log("QR для JSON готов:", !!qr));

Можно кодировать JSON, токены и любые строковые данные. 🔥 В итоге получаем простой инструмент для генерации QR-кодов под большинство данных прямо в браузере. Легко встраивается в проекты, тестовые утилиты и ботов. 📣 Code Ready | #практика

21 693

Собрал чат-бота за вечер → заработал 9 000₽. Так и работают специалисты по чат-ботам: открыл шаблон → собрал бота как конструктор → получил деньги. Работы — на 2–3 часа. Оплата — 9–15 000₽ за сборку. Никакого программирования и долгих задач. Если умеешь открыть ворд или запустить косынку — справишься. А спрос сейчас бешеный: более 10 000 предпринимателей в месяц ищут тех, кто делает ботов и авторассылки. Это одна из самых простых и пустых ниш в онлайне — бери и зарабатывай. И главное: Собрать первого бота без опыта и получить клиента — проще, чем кажется. Все инструкции лежат здесь: 👉 @other_digital_bot Кто готов кликать мышкой и брать заказы — тот спокойно накопит на отдых, машину, квартиру и любые хотелки. Пробуй: @other_digital_bot

21 693

Что же выведет консоль?

Anonymous voting

21 693

👩‍💻 Можно ли управлять тем, как ведут себя вложенные элементы в 3D-трансформациях? Свойство transform-style определяет, будут ли дочерние элементы сохранять своё 3D-положение или сплющиваться в плоскость родителя при трансформациях. Основные значения:

• flat — значение по умолчанию, все дочерние элементы проецируются в плоскость родителя; • preserve-3d — сохраняет 3D-позиционирование вложенных элементов.

Свойство не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности. 📣 Code Ready | #свойство

21 693

Изоляция рунета ближе, чем ты думаешь

Loading … ██████████████] 99%

Роскомнадзору дали карт-бланш на блокировки, а «белые списки» сайтов тестируют уже в десятках регионов. И гайки будут закручиваться только сильнее. Чтобы в одночасье не лишиться доступа к свободному Интернету, просто сохрани Only Hack. Тут профессиональный хакер делится фишками, с которыми доступ к глобальной сети у тебя будет даже в случае ядерного апокалипсиса. Не жди момента «Х». Перестрахуйся подпиской.

21 693

❤️ Crockford — материалы человека, который сыграл ключевую роль в развитии JS! Здесь собраны статьи и материалы программиста, который сыграл огромную роль в развитии JS и придумал JSON. Крокфорд объясняет, где в JS сильные стороны, где опасные места и какие подходы реально работают в долгосрочной перспективе. Это хороший ресурс, если ты уже знаешь основы и хочешь лучше понять логику его дизайна и то, как писать более надёжный и понятный код. 📌 Оставляю ссылочку: crockford.com 📣 Code Ready | #ресурс

21 693

Синхронизация данных между вкладками! Если у пользователя открыто несколько вкладок одного сайта, браузер позволяет им обмениваться сообщениями в пределах одного origin через стандартный BroadcastChannel API. Создаём канал для обмена событиями:

const channel = new BroadcastChannel("app_sync");

Из одной вкладки отправляем событие в остальные:

channel.postMessage({
  type: "LOGOUT"
});

В других вкладках подписываемся на входящие сообщения:

channel.onmessage = (event) => {
  console.log(event.data);
};

Практический кейс — одновременный logout во всех вкладках приложения:

channel.onmessage = (event) => {
  if (event.data.type === "LOGOUT") {
    // Удаляем только auth-данные, без полного clear
    localStorage.removeItem("access_token");
    localStorage.removeItem("refresh_token");
    location.reload();
  }
};

Функция logout в текущей вкладке должна сначала выполнить локальную очистку, а затем уведомить остальные вкладки:

function logout() {
  localStorage.removeItem("access_token");
  localStorage.removeItem("refresh_token");

  channel.postMessage({ type: "LOGOUT" });
}

Работает нативно, поддерживается современными браузерами, описан в HTML Living Standard. 🔥 Почему BroadcastChannel, а не localStorage events: это нативный event-bus без побочных записей в localStorage, не требующий триггерных ключей и дающий более чистую, предсказуемую модель событий. 📣 Code Ready | #практика

21 693

Пройти видеоверификацию на бирже или фармить донаты на OnlyFans 😍 Создать виртуальную личность и устроиться на работу онлайн. Это 1 из 1000 способов оседлать ИИ. А научиться работать с этим можно в этом канале. Там уже слили: – Как получить много генераций [гайд] – Промты, улучшающие ответы ChatGPT в 10 раз [скопировать] – Дикие способы заработка на ИИ [читать] ⚡️ Сохраняйте, это мастхев на 2026 год: @neiropulse