Code Ready | Frontend

Локальная обработка файлов в браузере — быстрый предпросмотр! Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер. Шаг 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 | #фишка

🕊🕊🕊🕊🕊🕊🕊🕊🕊🕊 Каналы с IT мероприятиями Подписывайся, чтобы не пропустить 👨‍💻 1. IT мероприятия для стажеров и студентов 2. IT мероприятия по РФ 3. IT мероприятия и хакатоны 4. Бесплатные IT мероприятия 5. IT мероприятия онлайн 6. IT мероприятия Москва 7. IT мероприятия Санкт Петербург

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

• HTML: минимальная разметка — текстовый блок и скрытая панель действия. • CSS: лёгкое оформление, мягкая тень и анимация появления. • JS: определение выделенного текста и обработка кликов вне элемента.

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

👩‍💻 ChatGPT – умер! Власти начали регулирование, и ИИ больше не заменит программистов. Хочешь реально уметь программировать, а не копировать код? Выбирай своё направление и учись по карточкам и фото, а не по сухим текстам. 👩‍💻 Python Flow — @pythonn_flow 👩‍💻 C & C++ Flow — @cpp_flow 💻 IT News Flow — @itnews_flow 👩‍💻 Java Flow — @java_flow 👩‍💻 SQL & Базы данных Flow — @sql_flow 👩‍💻 C# & Unity Flow — @csharp_flow 👩‍💻 Node.js Flow — @nodejs_flow 👩‍💻 Linux & DevOps Flow — @linux_flow 👩‍💻 InfoSec & Хакинг — @hacking_flow 👩‍💻 Git & GitHub Flow — @git_flow 💎 Присоединяйся к тем кто реально думает и растёт, а не ждёт чуда!

👩‍💻 Управляй отступами компонентов легко! Если один и тот же компонент в разных блоках требует разные отступы, можно использовать :where():

:where(.card, .section, .block) h2 {
  margin-block: 0.5em 1em;
}

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

.hero h2 {
  margin-block: 2em 1em;
}

А чтобы ограничить стили только внутри компонента, объединим :where() с контейнером:

.card :where(h2, h3, p) {
  margin-block: 0.7em;
}

🔥 Теперь любой текст внутри .card получает аккуратные отступы. 📣 Code Ready | #совет