Code Ready | Frontend – Telegram
Code Ready | Frontend
22.2K subscribers
1.08K photos
447 videos
17 files
715 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
13👍11🤝9
Что же выведет консоль?
Anonymous Quiz
44%
A
13%
B
8%
C
35%
D
17🔥13👍9
👩‍💻 CSS-приём — анимированная заливка текста!

В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора.

Как работает:
data-text хранит копию строки, которую использует псевдо-элемент для заливки;

::before накладывается поверх и начинается с ширины 0, скрывая часть текста;

Анимация плавно увеличивает width, открывая символы один за другим;

border-right добавляет небольшой “курсор”, усиливая ощущение движения.


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

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1910👍8🤝3
Определяем, что делает пользователь в 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 | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥139🤝2
📱 Math: методы работы с числами — часть 2!

В этой шпаргалке собраны методы объекта Math, используемые при работе со степенями, корнями, логарифмами, экспонентами, случайными значениями и 32-битной арифметикой. Эти инструменты лежат в основе вычислений, необходимых при работе с графикой, анимациями, геометрией элементов и обработкой данных.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1912👍10🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Когда нужно быстро превратить хаотичные данные в аккуратный JSON!

Paste as JSON — расширение, которое берёт содержимое буфера и автоматически превращает его в валидный, правильно отформатированный JSON. Особенно удобно, когда работаешь с API, моками или копируешь данные из логов.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
21🔥11👍10🤝1
Фронтенд-разработка с AI: Яндекс рассказывает, почему это важно именно сейчас

Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Встреча полностью посвящена практическому использованию нейросетей во фронтенд-разработке. Специалисты Яндекса расскажут о последних тенденциях: какие AI-решения внедрены, как изменился жизненный цикл разработки и с какими трудностями приходилось сталкиваться на практике.

Приходите, чтобы услышать топовых экспертов:

Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают

Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется. Ловите момент пообщаться с профи — поверьте, стоит попробовать!

Регистрация и подробная программа
🔥5👍31👎1
👩‍💻 Можно ли управлять отображением цифр в тексте без подмены шрифта?

Свойство 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 | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1810🔥9
👩‍💻 Управляй отступами и колонками вложенных элементов без копирования шаблона сетки!

Когда сетка большая, внутренние элементы часто должны идеально выровняться по внешней стороне.

.inner наследует колонки и их размеры от родительской сетки:
.inner {
display: grid;
grid-template-columns: subgrid;
}


Чтобы наследовать и отступы:
.inner {
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}


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

Чтобы заголовок или текст “защелкнулся” в ту же колонку, что и картинка родителя:
.noscript {
grid-column: span 2;
}


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

📣 Code Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1911👍10
📱 Интерактивное поле поиска!

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

Ключевые моменты:
• HTML: лаконичная структура — контейнер, кнопка и скрытый input.

• CSS: стеклянный фон, скругления, hover-эффекты и анимированное раскрытие.

• JS: переключение состояния, смена иконки и авто-фокус на поле поиска.


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

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1814🤝8🔥1😁1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Нужно быстро проверить логику или переменную?

Quokka.js
запускает JavaScript код прямо в VS Code и сразу показывает результат. Пишешь и тут же видишь значения переменных, ошибки и результаты функций без запуска проекта. Очень удобно, когда нужно быстро проверить идею или убедиться, что всё работает так, как задумано.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1510👍9
Создаем простой календарь прямо в консоли!

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

Создаем функцию для генерации календаря:

Получаем первый день и название месяца:
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 | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1710👍8🤝2