Code Ready | Frontend

\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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2793","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2793","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2792","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2792","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2791","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2791","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2790","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2790","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2789","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2789","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2788","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2788","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2787","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2787","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2786","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2786","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.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}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2785","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2785","mainEntityOfPage":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2785","headline":"📂 Напоминалка для работы с JavaScript! Например, let и const используются для корректного объявления переменн…","articleBody":"📂 Напоминалка для работы с JavaScript!\n\nНапример, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками.\n\nНа картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой.\n\nСохрани, чтобы не забыть!\n\n📣 Code Ready | #ресурс","datePublished":"2026-01-21T07:12:09Z","dateModified":"2026-01-21T07:12:09Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2905},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":39}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2783","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2783","mainEntityOfPage":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2783","headline":"👩‍💻 Посимвольная загрузка с волновой анимацией! Интерактивность не всегда требует сложных компонентов. Иногда…","articleBody":"👩‍💻 Посимвольная загрузка с волновой анимацией!\n\nИнтерактивность не всегда требует сложных компонентов. Иногда достаточно правильно прописать движение.\n\nКак работает:\n• каждый символ вынесен в отдельный , что дает контроль над фазой анимации;\n\n• animation-delay через CSS-переменную создаёт ритм без дублирования ключевых кадров;\n\n• движение построено на transform, поэтому анимация не вызывает перекомпоновки;\n\n• изменение opacity визуального акцента активных цифр.\n\nОтлично подходит для обработки загрузки, ожидания и переходов, где важно удерживать внимание, не перегружая пользовательский интерфейс.\n\n📣 Code Ready | #фишка","datePublished":"2026-01-20T10:12:10Z","dateModified":"2026-01-20T10:12:10Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2990},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":37},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":45}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2782","url":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2782","mainEntityOfPage":"https://telemetr.io/en/channels/1743337580-code_ready/posts/2782","headline":"👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ Держи сотни гигабайт свежих уроков, и…","articleBody":"👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ\n\nДержи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё!\n\n• 1612 ГБ — DevOps\n• 1402 ГБ — Python\n• 1300 ГБ — C, C++\n• 1815 ГБ — Frontend\n• 1515 ГБ — Backend\n• 898 ГБ — ИБ, Хакинг\n• 996 ГБ — Kotlin, Swift\n• 212 ГБ — JavaScript\n• 315 ГБ — Flutter\n• 820 ГБ — Go, PHP\n• 419 ГБ — Java, Rust\n• 648 ГБ — GameDev\n• 517 ГБ — Windows, Linux\n• 998 ГБ — Дизайн (UX/UI)\n• 617 ГБ — Нейросети (ML/RL)\n• 546 ГБ — БД (SQL & NoSQL)\n• 687 ГБ — Аналитика данных\n• 115 ГБ — QA-тестирование\n\nПодписывайся и не плати за то, что можно получить бесплатно","datePublished":"2026-01-20T08:12:12Z","dateModified":"2026-01-22T08:12:13Z","author":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"publisher":{"@type":"Organization","name":"Code Ready | Frontend","url":"https://telemetr.io/en/channels/1743337580-code_ready","image":"https://img.telemetr.io/c/1TYRK4/5470090139851149735?ty=x"},"image":["https://n1.tlmtr.cc/p/5330502225262408412?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1669},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}}]}

Code Ready | Frontend

21 572

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

4.5k6555

Analytics

Code Ready | Frontend

21 572

+1

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

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

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

4.7k4937

Analytics

Code Ready | Frontend

21 572

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

.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 | #совет

3.9k4551

Analytics

Code Ready | Frontend

21 572

+4

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

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

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

3.9k64371

Analytics

Code Ready | Frontend

21 572

Ad

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

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

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

1.5k23

Analytics

Code Ready | Frontend

21 572

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

3.2k78381

Analytics

Code Ready | Frontend

21 572

+1

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

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

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

3.4k5636

Analytics

Code Ready | Frontend

21 572

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

2.7k91

Analytics

Code Ready | Frontend

21 572

Генератор 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 | #практика

2.5k4031

Analytics

Code Ready | Frontend

21 572

Ad

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

1.7k213

Analytics

Code Ready | Frontend

21 572

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

Anonymous voting

2.8k1391

Analytics

Code Ready | Frontend

21 572

3.0k431

Analytics

Code Ready | Frontend

21 572

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

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

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

3.0k22311

Analytics

Code Ready | Frontend

21 572

Ad

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

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

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

1.8k23

Analytics

Code Ready | Frontend

21 572

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

2.6k21301

Analytics

Code Ready | Frontend

21 572

Синхронизация данных между вкладками! Если у пользователя открыто несколько вкладок одного сайта, браузер позволяет им обмениваться сообщениями в пределах одного 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 | #практика

2.5k3937

Analytics

Code Ready | Frontend

21 572

Ad

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

1.6k128

Analytics

Code Ready | Frontend

21 572

📂 Напоминалка для работы с JavaScript! Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками. На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурс

2.9k3931

Analytics

Code Ready | Frontend

21 572

+1

👩‍💻 Посимвольная загрузка с волновой анимацией! Интерактивность не всегда требует сложных компонентов. Иногда достаточно правильно прописать движение. Как работает:

• каждый символ вынесен в отдельный <span>, что дает контроль над фазой анимации; • animation-delay через CSS-переменную создаёт ритм без дублирования ключевых кадров; • движение построено на transform, поэтому анимация не вызывает перекомпоновки; • изменение opacity визуального акцента активных цифр.

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

3.0k4537

Analytics

Code Ready | Frontend

21 572

Ad

👩‍💻 В сеть вывалилась гигантская куча курсов и книг от топовых IT‑школ Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! • 1612 ГБ — DevOps • 1402 ГБ — Python • 1300 ГБ — C, C++ • 1815 ГБ — Frontend • 1515 ГБ — Backend • 898 ГБ — ИБ, Хакинг • 996 ГБ — Kotlin, Swift • 212 ГБ — JavaScript • 315 ГБ — Flutter • 820 ГБ — Go, PHP • 419 ГБ — Java, Rust • 648 ГБ — GameDev • 517 ГБ — Windows, Linux • 998 ГБ — Дизайн (UX/UI) • 617 ГБ — Нейросети (ML/RL) • 546 ГБ — БД (SQL & NoSQL) • 687 ГБ — Аналитика данных • 115 ГБ — QA-тестирование Подписывайся и не плати за то, что можно получить бесплатно

1.7k65

Analytics

Show more