Code Ready | Frontend

👩‍💻 Градиентная рамка для карточки! Иногда нужно визуально выделить карточку или кнопку, но обычный border выглядит слишком просто. В этом приёме рамка создаётся отдельным слоем с градиентом. Как работает:

• псевдоэлемент ::before создаёт слой градиентной рамки; • inset расширяет его за пределы блока, формируя контур; • border-radius: inherit сохраняет форму карточки; • при наведении меняется яркость и масштаб рамки.

Это простой способ добавить акцент и глубину интерфейсным элементам без дополнительных обёрток и изображений. 📣 Code Ready | #фишка

Как разработчик решил параллельно найму пилить свои бизнес-проекты с нулевым опытом: дневник с передовой Меня зовут Александр Торбек, И я попал в день сурка: код писать умею, зарплата стабильная. Но в заднице зудит ощущение катастрофического застоя. Поэтому я сделал глупейшую вещь — начал разрабатывать продукты. Без связей, плана и стратегии. В блоге буду фиксировать: — идеи (и почему 90% из них — говно собаки) — что сделал, сколько заработал — мысли айтишника, который впервые думает как продакт, а не как тупой исполнитель Я хочу пройти весь путь от основателя продукта до продажника. И выяснить, смогу ли без бизнес-бэкграунда выйти на уровень дядек в элитных пиджаках. Если тоже хотите создавать свои продукты — посмотрите, как я набиваю шишки первым: @atorbek_it

💅 Modern JS Cheatsheet — шпаргалка по JS для реальных проектов! Это репозиторий с компактным, но очень полезным материалом. Внутри собраны ключевые концепции и паттерны, которые постоянно встречаются в коде. Всё сопровождается небольшими примерами и пояснениями, поэтому ресурс удобно использовать как быстрый справочник, когда нужно освежить синтаксис.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

matchMedia — проверка и отслеживание media queries! matchMedia() — Web API, позволяющий проверять и отслеживать media queries напрямую из JavaScript. Это помогает синхронизировать поведение JS-кода с CSS-адаптивностью. Функция возвращает объект MediaQueryList, содержащий результат проверки media query. Базовое использование:

const media = window.matchMedia('(max-width: 768px)');

console.log(media.matches);

matches — boolean, показывающий соответствует ли текущий viewport заданному media query. Пример 1 — проверка условия:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-theme');
}

Так можно адаптировать поведение интерфейса под системные настройки пользователя. Пример 2 — отслеживание изменения media query:

const media = window.matchMedia('(max-width: 768px)');

media.addEventListener('change', e => {
  console.log('mobile:', e.matches);
});

Событие change срабатывает при изменении состояния media query. Это позволяет реагировать на изменение состояния media query без использования window.resize. Пример 3 — адаптация логики интерфейса:

const media = window.matchMedia('(max-width: 600px)');

function updateLayout(mql) {
  if (mql.matches) {
    enableMobileLayout();
  } else {
    enableDesktopLayout();
  }
}

updateLayout(media);
media.addEventListener('change', updateLayout);

Обработчик сначала вызывается вручную для установки начального состояния, затем автоматически при изменении media query. Пример 4 — учет пользовательских настроек доступности:

const motion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (motion.matches) {
  disableAnimations();
}

Media queries позволяют учитывать пользовательские настройки доступности. Пример 5 — отслеживание ориентации экрана:

const orientation = window.matchMedia('(orientation: portrait)');

orientation.addEventListener('change', e => {
  console.log('portrait:', e.matches);
});

matchMedia используется для: адаптивной логики интерфейса, синхронизации JavaScript и CSS media queries, учета пользовательских настроек доступности и оптимизации поведения UI на разных устройствах. 🔥 matchMedia — удобный способ проверять и отслеживать media queries напрямую из JavaScript. 📣 Code Ready | #практика

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 1. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

Оптимизируем вертикальные отступы между элементами! Часто в верстке нужно просто равномерное расстояние между элементами: абзацами, карточками, пунктами списка, блоками формы. Обычно делают так — добавляют margin-bottom каждому элементу.

.item {
  margin-bottom: 1rem;
}

Проблема в том, что у последнего элемента остаётся лишний отступ, и начинается возня с :last-child. Есть более чистый паттерн, который используют в дизайн-системах:

.stack > * + * {
  margin-top: 1rem;
}

Селектор * + * означает: любой элемент, который идёт сразу после другого элемента. То есть первый элемент отступа не получает, а все остальные получают автоматически:

.form > * + * {
  margin-top: 1.2rem;
}

🔥 Это делает верстку чище, элементы можно добавлять, удалять, менять местами, и расстояния всегда остаются корректными. 📣 Code Ready | #совет

⚡️ Писать код руками больше не нужно! Привет. Меня зовут Кирилл. Я создаю топовые подборки с уроками по AI и вайбкодингу: — 60+ промптов для дебага: поиск ошибок, оптимизация кода — 40 бесплатных курсов по вайбкодингу — 150 гайдов, как использовать ChatGPT, Claude Code, Antigravity, Cursor, Perplexity, Lovable — 100 готовых модулей: авторизация, админки, логирование, тесты, i18n — 37 MCP серверов: дизайн, разработка, Тесты/QA, деплой Всего 10 минут в день на канале и ты начнешь писать код на 85% быстрее и сможешь за пару дней закрывать спринты. Подписывайся, чтобы получать подборки каждую неделю!

📂 Напоминалка по CSS Position! Свойство position управляет тем, как элементы располагаются на странице и относительно чего происходит их смещение. Например, relative позволяет сдвигать элемент относительно его обычного положения, absolute позиционирует элемент относительно ближайшего позиционированного родителя. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

👩‍💻 Меню, которое реагирует на курсор! Интерфейс качественный, когда элементы дают мгновенную визуальную обратную связь. В этом приёме пункт меню подсвечивается и слегка смещается при наведении, создавая эффект активной строки без перегруженной анимации. Как работает:

• состояние :hover используется как источник интерактивности — без обработчиков событий; • фоновая подсветка формирует чёткую активную область; • transform: translateX() добавляет ощущение «притяжения» к курсору; • движение выполняется через transform, поэтому не вызывает перерасчёта layout и остаётся плавным.

Такой микроэффект делает навигацию более предсказуемой и снижает визуальную нагрузку по сравнению с тяжёлыми анимациями. 📣 Code Ready | #фишка

Как бигтехи кошмарят вас на собеседованиях Успешно пройти секцию по профильным хардам, но смачно опозориться на логической задаче с часами? Классика бигтеха Автор этой истории побывал на собесе в ❤️ и рассказал всю правду о клоунаде, которая там происходила Вита Заебумба | Путь корпората — топовый канал про IT, сферу найма, трешовые собесы и работу в корпорациях. Просто кладезь кулстори не только от автора, но и от подписчиков Истории, которые уже успели стать бестселлером: — Поймала интервьюеров за руку на собесе в Ягодках 🛍 — Что будет с рынком найма в 2026 году + полезные материалы — Эффект Писюхи, или как я столкнулась с эйджизмом в найме — Aston, разлогинься, или как продать свою жопу в рабство — Если твой руководитель ведет себя так, беги оттуда Но тут не только про поржать. Здесь вы узнаете: 🔹Как писать резюме так, чтобы вас звали, а не морозили 🔹Что вообще происходит с рынком 🔹Как обойти 90% кандидатов 🔹Как не продешевить и не выйти с собеса с чувством, что вас поимели Подписывайтесь на @vitazaebymba

👩‍💻 Удобное редактирование Markdown-файлов! Markdown All in One расширяет возможности работы с Markdown в VS Code: автодополнение, быстрые команды форматирования, создание оглавления, предпросмотр, горячие клавиши и удобная навигация по документу. Всё, что нужно для комфортной работы с документацией и заметками. 📣 Code Ready | #vscode

Наблюдение за изменением размера любого элемента! Есть нативный инструмент ResizeObserver, который реагирует именно на изменение размеров конкретного элемента:

const ro = new ResizeObserver(entries => {
  const rect = entries[0].contentRect;
  console.log('width:', rect.width, 'height:', rect.height);
});

Достаточно наблюдать за элементом:

ro.observe(document.querySelector('#box'));

Теперь любое изменение его ширины или высоты - мгновенно вызывает callback. Можно остановить наблюдение:

ro.disconnect();

🔥 ResizeObserver даёт контроль над размерами элементов и позволяет строить предсказуемые, адаптивные интерфейсы. 📣 JS Ready | #совет

Забудь про ChatGPT. Это как просить калькулятор нарисовать картину. Пока массы гоняют одни и те же скучные запросы в зацензуренные боты, реальная революция ИИ в канале «Техноразум»: — Нейросети, которые не боятся запретных тем ( 🔞) — Скрытые функции, которые другие ИИ прячут за платную подписку или цензурой — Настоящие инструкции и промты для взлома творческих шаблонов Переходи к настоящим возможностям, забудь про детский сад нейросетей: https://t.me/+ykoDhAfKfWRiODVi

📂 Напоминалка по работе с массивами в JavaScript! Например, map() позволяет преобразовать каждый элемент массива, filter() — отфильтровать данные по условию, а slice() — получить часть массива без изменения исходного. На картинке — основные методы массивов, которые помогают работать с данными быстрее и писать чистый код. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

Скрываем курсор ввода без JS! Иногда нужно сделать поле ввода, которое визуально не выглядит как обычный input. Например: кастомные OTP-поля, PIN-коды, маски или декоративные формы. CSS позволяет управлять цветом курсора ввода через caret-color:

input {
  caret-color: red;
}

Обычно его используют, чтобы изменить цвет курсора под дизайн. Но есть и такой приём. Если задать прозрачный цвет, курсор просто исчезнет:

input {
  caret-color: transparent;
}

Поле остаётся полностью рабочим: текст вводится, фокус есть, клавиатура открывается, но мигающий caret не отвлекает пользователя. Это удобно для кастомных UI: PIN-поля, игровые интерфейсы, терминалы, текстовые эффекты.

.otp-input {
  letter-spacing: .5em;
  caret-color: transparent;
}

🔥 В итоге можно делать аккуратные кастомные input-интерфейсы. Нюанс: скрытая каретка может немного ухудшать UX — пользователь не видит позицию ввода. 📣 Code Ready | #совет

🤬Chat GPT отключат в РФ Офицальная причина была озвучена такая "Они нагружают систему, но купить платную версию не могут из-за своего местоположения". Другие крупные ИИ-сервисы начинают подхватывать эту политику. Чтоб не стать жертвой изоляции рунета, просто сохрани канал Доктор GPT - мы уже готовим обходку к новой системе безопасности. Не жди бана, подпишись: @gpt

👍 JavaScript Questions — систематизированная база вопросов и разборов по ключевым концепциям! Репозиторий представляет собой сборник вопросов с объяснениями: области видимости, замыкания, прототипное наследование, типы данных и особенности работы движка. Материал особенно полезен для подготовки к собеседованиям, повторения базовых принципов и укрепления фундаментальных знаний для разработки.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

performance.now — монотонное измерение прошедшего времени! performance.now() — Web API для точного измерения времени выполнения и длительности операций. В отличие от Date.now(), возвращает монотонно возрастающее время с дробной точностью. Значение (DOMHighResTimeStamp) — миллисекунды от time origin (performance.timeOrigin), обычно начала навигации документа. Точность может ограничиваться браузером из соображений безопасности. Простейшее измерение:

const start = performance.now();

doHeavyWork();

const end = performance.now();
console.log(`Время: ${end - start} ms`);

performance.now() удобен для профилирования синхронных операций и поиска узких мест в коде. Пример 1 — измерение функции:

function measure(fn) {
  const t0 = performance.now();
  fn();
  const t1 = performance.now();
  return t1 - t0;
}

console.log("A:", measure(runA));
console.log("B:", measure(runB));

Один замер может быть неточным из-за JIT-компиляции, GC и фоновых процессов браузера, поэтому для корректного сравнения алгоритмов лучше делать несколько прогонов. Пример 2 — измерение асинхронного кода:

async function measureAsync(fn) {
  const t0 = performance.now();
  await fn();
  return performance.now() - t0;
}

measureAsync(fetchData)
  .then(t => console.log("Время операции:", t));

Здесь измеряется общее прошедшее время операции, включая ожидание промиса. Пример 3 — проверка бюджета кадра:

const t0 = performance.now();

renderLargeList();

const t1 = performance.now();

if (t1 - t0 > 16.7) {
  console.warn("JS-часть кадра превысила бюджет (~16.7ms при 60Hz)");
}

При 120Hz бюджет кадра уже около 8.3 ms, и в него входит не только выполнение JS, но и layout, paint и compositing. Пример 4 — разница с Date.now:

console.log(Date.now());        // системное время
console.log(performance.now()); // монотонное время

Date.now() может изменяться при корректировке системных часов, тогда как performance.now() монотонно увеличивается в рамках текущего контекста выполнения. 🔥 performance.now() — базовый инструмент для ручного профилирования производительности и быстрых замеров в UI-коде. 📣 Code Ready | #практика