Code Ready | Frontend

👩‍💻 Делаем обычные карточки интерактивными! В этой фишке карточки реагируют на наведение, расходясь веером и чуть приподнимаясь в 3D. Получается выразительный эффект без JS. Как работает:

• transform на :hover наклоняет активную карточку и поднимает её над слоем; • Соседние элементы смещаются через селектор .card:hover ~ .card, создавая веерный эффект; • z-index позволяет hovered-элементу визуально выходить вперёд.

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

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 Ребята сделали крутейший канал про айти Здесь сложные темы объясняют на простых картинках и понятном языке, а еще делятся полезными ресурсами и свежими новостями из мира IT Подписывайтесь: @IT_Portal

👩‍💻 Управляем состоянием интерфейса через :has()! Чтобы изменить стиль родителя, когда вложенный элемент находится в активном состоянии делают:

parent.classList.toggle('open', child.checked)

Но CSS может делать это сам:

.card:has(.toggle:checked) .content {
  max-height: 400px;
}

Если внутри .card есть элемент.toggle, который checked, то .content автоматически раскрывается. Изменение внешнего вида родителя в зависимости от действий пользователя:

.input:has(input:focus) {
  border-color: #4da3ff;
}

Подсветка активного пункта меню:

nav:has(a.active) {
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

🔥 Родитель сам понимает, что внутри есть активный элемент. 📣 Code Ready | #совет

👩‍💻 Тег для изменения настроения текста, но без семантического значения! Тег <i> используется для изменения голоса или настроения части текста, чтобы передать его другое качество: официальное название, идиома из другого языка, транслитерация или ремарки. Применяется только в том случае, если не существует более подходящего семантического элемента. Например:

• <em> — смысловое ударение в предложении; • <strong> — повышенная важность; • <mark> — выделение «маркером»; • <dfn> — термин или расшифровка сокращения.

По умолчанию браузеры применяют к <i> курсивное начертание с помощью font-style: italic. 📣 Code Ready | #атрибут

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. ИИ-ассистент для автооткликов 5. IT стажировки и волонтерства 6. IT стажировки в топовых компаниях мира 7. Удалённые IT вакансии и стажировки 8. Python вакансии и стажировки 9. БИГТЕХ вакансии и стажировки 10. Design вакансии и стажировки 11. QA вакансии и стажировки 12. Junior вакансии и стажировки 13. Frontend вакансии и вопросы собесов 14. Вакансии и стажировки для аналитиков 15. Вакансии в русских стартапах за границей 16. Вакансии и стажировки для DevOps 17. Вакансии, которых нет на ХХ.РУ

Локальная обработка файлов в браузере — быстрый предпросмотр! Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер. Шаг 1 — получаем выбранный файл:

const input = document.querySelector('#file');

Шаг 2 — создаём FileReader для чтения локального файла:

const reader = new FileReader();

Шаг 3 — реагируем, когда чтение завершено:

reader.onload = () => {
  console.log('Тип:', currentFile.type);
  console.log('Размер:', currentFile.size);
  showPreview(reader.result);
};

Шаг 4 — читаем файл, когда пользователь выбирает его:

let currentFile = null;

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  currentFile = file;
  reader.readAsDataURL(file);
});

Шаг 5 — универсальная мини-утилита для превью:

function readFilePreview(file, cb) {
  const r = new FileReader();
  r.onload = () => cb(r.result, file);
  r.readAsDataURL(file);
}

Пример использования:

readFilePreview(input.files[0], (dataUrl, file) => {
  console.log(file.type, file.size);
  previewImg.src = dataUrl;
});

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

Локальная обработка файлов в браузере — быстрый предпросмотр! Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер. Шаг 1 — получаем выбранный файл:

const input = document.querySelector('#file');

Шаг 2 — создаём FileReader для чтения локального файла:

const reader = new FileReader();

Шаг 3 — реагируем, когда чтение завершено:

reader.onload = () => {
  console.log('Тип:', currentFile.type);
  console.log('Размер:', currentFile.size);
  showPreview(reader.result);
};

Шаг 4 — читаем файл, когда пользователь выбирает его:

let currentFile = null;

input.addEventListener('change', () => {
  const file = input.files[0];
  if (!file) return;

  currentFile = file;
  reader.readAsDataURL(file);
});

Шаг 5 — универсальная мини-утилита для превью:

function readFilePreview(file, cb) {
  const r = new FileReader();
  r.onload = () => cb(r.result, file);
  r.readAsDataURL(file);
}

Пример использования:

readFilePreview(input.files[0], (dataUrl, file) => {
  console.log(file.type, file.size);
  previewImg.src = dataUrl;
});

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

Создаем простой календарь прямо в консоли! Работа с датами и форматированием текста часто требуется в самых разных задачах — от небольших скриптов до проверки расписаний или вывода структурированных данных. Создаем функцию для генерации календаря: Получаем первый день и название месяца:

function generateMonthCalendar(year, month) {
  const date = new Date(year, month - 1, 1);
  const monthName = date.toLocaleString("en", { month: "long" });

Выводим шапку календаря:

  console.log(`\n     ${monthName} ${year}`);
  console.log("Mo Tu We Th Fr Sa Su");

Рассчитываем день начала месяца и формируем отступ:

  const startDay = (date.getDay() + 6) % 7;
  let output = "   ".repeat(startDay);

Заполняем календарь днями:

  while (date.getMonth() === month - 1) {
    const day = String(date.getDate()).padStart(2, " ");
    output += day + " ";

    if ((startDay + date.getDate()) % 7 === 0) {
      output += "\n";
    }

    date.setDate(date.getDate() + 1);
  }

Финальный вывод:

  console.log(output + "\n");
}

Вызываем календарь для нужного месяца:

generateMonthCalendar(2025, 4); // апрель

🔥 После запуска вы получите простой и визуально понятный календарь. Такой пример укрепляет понимание работы с объектом Date, циклической логикой и форматированием вывода в консоли. 📣 Code Ready | #практика

Собрал команду мечты. Не потратил ни рубля. Senior-разработчик, который ревьюит каждый PR. Архитектор, следящий за SOLID. DevOps, контролирующий CI/CD. И даже юрист, закрывающий лицензии и риски. Все они - уже в Merge Sensei AI-мультиагенты, которые встраиваются в Git и работают как штат. Реальные специалисты: • Учитывают контекст проекта и код • Проверяют по метрикам, паттернам, багам и документации • Выдают точные рекомендации  • Видят и архитектуру и узкие места в пайплайне • Делают то, что должен был бы делать tech lead. 10+ AI-экспертов, каждый - по своей зоне: ревью, нагрузка, автотесты, уязвимости, базы, метрики, лицензии и т.д. 🕒 Подключение - 7 минут 💸 До 20 PR - бесплатно 👉 https://mergesensei.ru/

👩‍💻 Нужно быстро проверить логику или переменную? Quokka.js — запускает JavaScript код прямо в VS Code и сразу показывает результат. Пишешь и тут же видишь значения переменных, ошибки и результаты функций без запуска проекта. Очень удобно, когда нужно быстро проверить идею или убедиться, что всё работает так, как задумано. 📣 Code Ready | #vscode

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

• HTML: лаконичная структура — контейнер, кнопка и скрытый input. • CSS: стеклянный фон, скругления, hover-эффекты и анимированное раскрытие. • JS: переключение состояния, смена иконки и авто-фокус на поле поиска.

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

Привет. Вот тебе самые топовые каналы по IT! ⚙️ Free Znanija (IT) — Самая огромная коллекция платных курсов, которые можно скачать бесплатно; 👩‍💻 IT Books — Самая огромная библиотека книг; 💻 Hacking & InfoSec Base — Крутой блог белого хакера; 🛡 CyberGuard — Всё про ИБ; 🤔 ИБ Вакансии— Всё, чтобы найти работу в ИБ; 👩‍💻 linux administration — Всё про Линукс; 👩‍💻 Программистика — Python, python и ещё раз python; 👩‍💻 GameDev Base — Всё про GameDev; 😆 //code — Самые топовые мемы по IT: Подпишись, чтобы не потерять!

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

.inner {
  display: grid;
  grid-template-columns: subgrid;
}

Чтобы наследовать и отступы:

.inner {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

Все вложенные блоки автоматически выравниваются по внешней сетке, как будто это одна общая структура. Чтобы заголовок или текст “защелкнулся” в ту же колонку, что и картинка родителя:

.title {
  grid-column: span 2;
}

🔥 Всё работает, как по линейке, даже если меняете размеры в одном месте. 📣 Code Ready | #совет

👩‍💻 Можно ли управлять отображением цифр в тексте без подмены шрифта? Свойство font-variant-numeric позволяет управлять начертаниями цифр и связанных с ними символов. Принимает одно или несколько значений:

• normal — отключает альтернативное начертание; • ordinal — добавляет дополнительные глифы для порядковых числительных; • slashed-zero — ноль будет с чертой внутри; • lining-nums — каждая цифра лежит на базовой линии текста; • oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешиваются с базовой линии; • proportional-nums — допустима разная ширина цифр; • tabular-nums — одинаковая ширина каждой цифры; • diagonal-fractions — числитель и знаменатель в дроби уменьшены и разделены косой чертой; • stacked-fractions — числитель и знаменатель в дроби уменьшены и разделены горизонтальной линией.

Это свойство работает только со шрифтами, в которых заложены OpenType фичи. 📣 Code Ready | #свойство

Фронтенд-разработка с AI: Яндекс рассказывает, почему это важно именно сейчас Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Встреча полностью посвящена практическому использованию нейросетей во фронтенд-разработке. Специалисты Яндекса расскажут о последних тенденциях: какие AI-решения внедрены, как изменился жизненный цикл разработки и с какими трудностями приходилось сталкиваться на практике. Приходите, чтобы услышать топовых экспертов: — Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов — Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось — Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready — Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли — Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется. Ловите момент пообщаться с профи — поверьте, стоит попробовать! Регистрация и подробная программа

👩‍💻 Когда нужно быстро превратить хаотичные данные в аккуратный JSON! Paste as JSON — расширение, которое берёт содержимое буфера и автоматически превращает его в валидный, правильно отформатированный JSON. Особенно удобно, когда работаешь с API, моками или копируешь данные из логов. 📣 Code Ready | #vscode

📱 Math: методы работы с числами — часть 2! В этой шпаргалке собраны методы объекта Math, используемые при работе со степенями, корнями, логарифмами, экспонентами, случайными значениями и 32-битной арифметикой. Эти инструменты лежат в основе вычислений, необходимых при работе с графикой, анимациями, геометрией элементов и обработкой данных. 📣 Code Ready | #шпора

Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы Выбирайте своё направление: 💩 Frontend 🐍 Python 🐧 Linux 👩‍💻 С/С++ 👩‍💻 C# 🤔 Хакинг & ИБ 📱 GitHub 🖥 SQL 👩‍💻 Сисадмин 🤟 DevOps ⚙️ Backend 🖥 Data Science 🧑‍💻 Java 🐞 Тестирование 🖥 PM / PdM 👩‍💻 GameDev 🧑‍💻 Golang 🤵‍♂️ IT-Митапы 🧑‍💻 PHP 💻 WebDev 🖥 Моб. Dev 🖥Анали.(SA&BA) 👩‍💻 Дизайн 🖥 Нейросети 💛 1C 🤓 Книги IT ➡️ Сохраняйте в закладки

Определяем, что делает пользователь в input — без таймеров и дебаунсов! Разберем, как определить, печатает ли пользователь, удаляет текст, вставляет из буфера обмена или вызывает автозамену — используя только inputType. Шаг 1 — получаем поле:

const field = document.querySelector('#search');

Шаг 2 — определяем ввод символов (именно набор текста руками):

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertText') {
    console.log('Пользователь печатает текст');
  }
});

Шаг 3 — распознаём удаление:

field.addEventListener('input', (e) => {
  if (e.inputType.includes('delete')) {
    console.log('Пользователь удаляет текст');
  }
});

Шаг 4 — ловим вставку из буфера обмена:

field.addEventListener('input', (e) => {
  if (e.inputType === 'insertFromPaste') {
    console.log('Вставка текста из буфера обмена');
  }
});

Шаг 5 — определяем другие вставочные действия (автозамена, drop и т.д.):

field.addEventListener('input', (e) => {
  if (e.inputType.startsWith('insert') &&
      e.inputType !== 'insertText' &&
      e.inputType !== 'insertFromPaste') {
    console.log('Автозамена или другое вставочное действие');
  }
});

🔥 Позволяет строить умные поля поиска, автосохранение, динамические подсказки и разные UX-ветки без debounce, таймеров и лишней логики. 📣 Code Ready | #практика

👩‍💻 CSS-приём — анимированная заливка текста! В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора. Как работает:

• data-text хранит копию строки, которую использует псевдо-элемент для заливки; • ::before накладывается поверх и начинается с ширины 0, скрывая часть текста; • Анимация плавно увеличивает width, открывая символы один за другим; • border-right добавляет небольшой “курсор”, усиливая ощущение движения.

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