Code Ready | Frontend

Почему ellipsis не срабатывает во flex и grid? Во flex и grid элементы по умолчанию не хотят сжиматься меньше своего контента, из-за этого текст может выталкивать соседей и ломать layout:

.title {
  overflow: hidden;
  text-overflow: ellipsis;
}

Даже с ellipsis элемент может не обрезаться, потому что ему не разрешено сжиматься:

.item {
  min-width: 0;
}

Эта строка явно разрешает элементу ужиматься по доступному пространству, и всё начинает работать как ожидается:

.item {
  min-width: 0;
}

Особенно критично для flex и grid-колонок с 1fr, где переполнение встречается чаще всего. 🔥 Если где-то ломается текст или layout — в 50% случаев не хватает именно min-width: 0. 📣 Code Ready | #совет

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Homo Manifestans — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗 ✓ Как научиться отвлекаться от работы и отдыхать? ✓ Как совместить кучу рабочих задач и время с семьей? ✓ Как справиться с прокрастинацией? ✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: 👉 https://t.me/+NqXSd0EGb_I1ODAy

📂 Напоминалка по объектам в JavaScript! Например, объект помогает хранить данные в формате ключ-значение, а через dot notation, bracket notation и destructuring можно быстро получать и использовать нужные свойства. На картинке — базовые приёмы работы с объектами: создание, доступ к свойствам, изменение значений, добавление новых полей, деструктуризация и методы. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы

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

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

Так можно добавить акцент CTA-кнопкам или карточкам без сложной анимации и без JS. 📣 Code Ready | #фишка

😎 Жора 008 - трушный блог 18-летнего админа. Трафик, бизнес, путешествия, секреты продвижения и адаптация к постоянно меняющемуся рынку. Читай полезный контент

navigator.sendBeacon для отправки данных при закрытии страницы! Если нужно отправить аналитику или финальные данные сессии, обычные HTTP-запросы могут не успеть выполниться — пользователь закрыл вкладку или перешёл на другую страницу. Для таких случаев есть navigator.sendBeacon. Метод ставит данные в очередь на отправку и не блокирует закрытие страницы. Базовый пример:

navigator.sendBeacon('/analytics', JSON.stringify({
  event: 'page_close'
}));

Метод принимает URL и данные. Запрос отправляется методом POST. Если нужно явно указать Content-Type: application/json, лучше передать Blob:

navigator.sendBeacon(
  '/analytics',
  new Blob(
    [JSON.stringify({ event: 'page_close' })],
    { type: 'application/json' }
  )
);

Пример 1 — отправка при скрытии страницы:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analytics', JSON.stringify({
      event: 'session_end',
      time: Date.now()
    }));
  }
});

visibilitychange часто используют для отправки последних метрик перед уходом пользователя. Обычно это работает стабильнее, чем beforeunload. Пример 2 — отправка FormData:

const data = new FormData();

data.append('event', 'scroll_depth');
data.append('value', 80);

navigator.sendBeacon('/analytics', data);

Можно отправлять строки, FormData, Blob, URLSearchParams и некоторые бинарные типы данных. Пример 3 — проверка:

const accepted = navigator.sendBeacon('/analytics', JSON.stringify({
  event: 'leave'
}));

console.log('Beacon accepted:', accepted);

Метод возвращает true, если браузер принял данные в очередь на отправку. Это не гарантия доставки, но означает, что отправка была запланирована браузером. 🔥 Если нужен ответ сервера, кастомные заголовки или полный контроль над запросом, можно использовать fetch с опцией keepalive. 📣 Code Ready | #практика

Совет на 2026 год — освойте ВАЙБ-КОДИНГ. ИИ уже пишет код, чинит баги, генерит тесты и документацию быстрее и качественнее любой команды айтишников И те, кто научится вайбкодить сейчас, будут зарабатывать в разы больше тех, кто всё ещё делает всё вручную Разобраться в этом с нуля поможет канал Вайб-кодинг. Там простым языком разбирают, какие инструменты действительно стоит использовать, как собирать проекты от идеи до релиза и что сейчас актуально в вайбкодинге Подписывайтесь, нас уже 15 тысяч: @vibecoding_tg

😍 My-JS — большая база знаний по JavaScript! Это сайт с подборкой руководств, шпаргалок и полезных материалов для JavaScript-разработчиков. Здесь собраны статьи по TypeScript, React, Node.js, Next.js и другим технологиям. На сайте можно найти объяснения сложных тем, алгоритмы и структуры данных, а также практические гайды по инструментам вроде Docker и GraphQL. Все материалы удобно структурированы. 📌 Оставляю ссылочку: my-js.org 📣 Code Ready | #сайт

Как сделать аккуратный fade по краям контента без псевдоэлементов! Обычно хочется мягко приглушить края, чтобы показать пользователю, что контент продолжается. Часто для этого добавляют псевдоэлементы с градиентом:

.scroll::after {
  position: absolute;
  right: 0;
  width: 40px;
  background: linear-gradient(...);
}

Но это создаёт лишние слои, проблемы с pointer-events и иногда ломает клики. Есть другой способ — использовать CSS-маску:

.scroll {
  mask-image: linear-gradient(to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
}

mask-image управляет прозрачностью элемента, а не рисует поверх него слой. Чёрный цвет = полностью видимый контент Прозрачный = плавное исчезновение. Это хорошо работает для горизонтальных списков:

.scroll {
  display: flex;
  overflow-x: auto;
  mask-image: linear-gradient(to right,
    transparent,
    black 40px,
    black calc(100% - 40px),
    transparent
  );
}

🔥 В итоге получаем нативный fade-эффект без псевдоэлементов, без лишних слоёв и без JS. 📣 Code Ready | #совет

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сгенерировать сайт через Giga, DeepSeek, ChatGPT - Сверстать страницу на HTML + CSS по Figma макету - Оживить её логикой на JavaScript - Превратить сайт во фронтенд-приложение на Angular - Подключить backend и выложить проект на хостинг Чтобы в итоге ты своими руками всего за 7 дней разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд: «Фронтенд в 2026 году: стоит ли входить сейчас и что делать новичку в эпоху ИИ». Стартуем завтра.

👩‍💻 Когда работаешь с YAML-конфигурациями! YAML — расширение для VS Code, которое добавляет подсветку синтаксиса, автодополнение и проверку структуры YAML-файлов. Помогает быстрее писать конфиги для Docker, Kubernetes, GitHub Actions и других инструментов, сразу показывая ошибки и подсказки. 📣 Code Ready | #vscode

👩‍💻 Шпаргалка по cursor в CSS. Например, cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор. На картинке — 16 популярных значений свойства cursor. Сохрани, чтобы не искать в документации каждый раз! 📣 Code Ready | #ресурсы

👩‍💻 Градиентная рамка для карточки! Иногда нужно визуально выделить карточку или кнопку, но обычный 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. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!