В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора.
Как работает:
• data-text хранит копию строки, которую использует псевдо-элемент для заливки;
• ::before накладывается поверх и начинается с ширины 0, скрывая часть текста;
• Анимация плавно увеличивает width, открывая символы один за другим;
• border-right добавляет небольшой “курсор”, усиливая ощущение движения.
Трюк отлично показывает силу псевдо-элементов: один дублирует контент, второй управляет визуальным сценарием.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19❤10👍8🤝3
Определяем, что делает пользователь в input — без таймеров и дебаунсов!
Разберем, как определить, печатает ли пользователь, удаляет текст, вставляет из буфера обмена или вызывает автозамену — используя только
Шаг 1 — получаем поле:
Шаг 2 — определяем ввод символов (именно набор текста руками):
Шаг 3 — распознаём удаление:
Шаг 4 — ловим вставку из буфера обмена:
Шаг 5 — определяем другие вставочные действия (автозамена, drop и т.д.):
🔥 Позволяет строить умные поля поиска, автосохранение, динамические подсказки и разные UX-ветки без
📣 Code Ready | #практика
Разберем, как определить, печатает ли пользователь, удаляет текст, вставляет из буфера обмена или вызывает автозамену — используя только
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('Автозамена или другое вставочное действие');
}
});debounce, таймеров и лишней логики.Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥13❤9🤝2
В этой шпаргалке собраны методы объекта Math, используемые при работе со степенями, корнями, логарифмами, экспонентами, случайными значениями и 32-битной арифметикой. Эти инструменты лежат в основе вычислений, необходимых при работе с графикой, анимациями, геометрией элементов и обработкой данных.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19❤12👍10🤝3
This media is not supported in your browser
VIEW IN TELEGRAM
Paste as JSON — расширение, которое берёт содержимое буфера и автоматически превращает его в валидный, правильно отформатированный JSON. Особенно удобно, когда работаешь с API, моками или копируешь данные из логов.
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-формате, трансляция не планируется. Ловите момент пообщаться с профи — поверьте, стоит попробовать!
Регистрация и подробная программа
Бизнес-группа Поисковых сервисов и ИИ Яндекса приглашает на Yet Another Frontend Night 29 ноября. Встреча полностью посвящена практическому использованию нейросетей во фронтенд-разработке. Специалисты Яндекса расскажут о последних тенденциях: какие AI-решения внедрены, как изменился жизненный цикл разработки и с какими трудностями приходилось сталкиваться на практике.
Приходите, чтобы услышать топовых экспертов:
— Иван Артамонов, руководитель группы конверсионных инструментов в Яндекс Бизнесе, расскажет про преимущества AI-ассистентов
— Павел Осташкин, старший разработчик интерфейсов в международной Рекламе, объяснит, как он со своей командой написал и встроил MCP в рабочие процессы и что из этого получилось
— Валерий Баранов, AI-оптимист и тимлид группы технологий фронтенда в Яндекс 360, разберет инструменты управления контекстом во фронтенде и покажет, как MCP-серверы снижают галлюцинации и делают дизайн-систему AI-ready
— Александр Иванков, руководитель группы развития инфраструктуры поисковых интерфейсов в Яндекс Поиске, поделится опытом разработки AI-помощника и подходами промпт-инжиниринга под разные роли
— Андрей Дегтярев, разработчик интерфейсов в Яндекс Браузере, рассмотрит в докладе агентские сценарии по частям, чтобы наглядно показать, какие реальные задачи пользователя они решают
Где и когда: 29 ноября, 15:00, Москва, офис Яндекса на Льва Толстого
Yet Another Frontend Night пройдет только в offline-формате, трансляция не планируется. Ловите момент пообщаться с профи — поверьте, стоит попробовать!
Регистрация и подробная программа
🔥5👍3❤1👎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 фичи.Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤10🔥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;
}Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19❤11👍10
Привет! В этом гайде создаём компактное поле поиска, которое аккуратно раскрывается при нажатии на иконку. Кнопка превращается в ✕, а само поле плавно выезжает с приятной анимацией.
Ключевые моменты:
• HTML: лаконичная структура — контейнер, кнопка и скрытый input.
• CSS: стеклянный фон, скругления, hover-эффекты и анимированное раскрытие.
• JS: переключение состояния, смена иконки и авто-фокус на поле поиска.
Такой элемент отлично подходит для шапок сайтов, панелей фильтров и интерфейсов, где важно экономить место и показывать поиск только когда он действительно нужен.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤14🤝8🔥1😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Quokka.js — запускает JavaScript код прямо в VS Code и сразу показывает результат. Пишешь и тут же видишь значения переменных, ошибки и результаты функций без запуска проекта. Очень удобно, когда нужно быстро проверить идею или убедиться, что всё работает так, как задумано.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤10👍9
Создаем простой календарь прямо в консоли!
Работа с датами и форматированием текста часто требуется в самых разных задачах — от небольших скриптов до проверки расписаний или вывода структурированных данных.
Создаем функцию для генерации календаря:
Получаем первый день и название месяца:
Выводим шапку календаря:
Рассчитываем день начала месяца и формируем отступ:
Заполняем календарь днями:
Финальный вывод:
Вызываем календарь для нужного месяца:
🔥 После запуска вы получите простой и визуально понятный календарь. Такой пример укрепляет понимание работы с объектом
📣 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, циклической логикой и форматированием вывода в консоли.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17❤10👍8🤝2
Локальная обработка файлов в браузере — быстрый предпросмотр!
Выполняем валидацию файла и мгновенно формируем его превью — все операции происходят локально в браузере, без передачи данных на сервер.
Шаг 1 — получаем выбранный файл:
Шаг 2 — создаём
Шаг 3 — реагируем, когда чтение завершено:
Шаг 4 — читаем файл, когда пользователь выбирает его:
Шаг 5 — универсальная мини-утилита для превью:
Пример использования:
🔥 Подходит для: локального предпросмотра изображений, предварительной проверки ограничений, улучшения 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;
});Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22❤10👍9👎1
Тег
<i> используется для изменения голоса или настроения части текста, чтобы передать его другое качество: официальное название, идиома из другого языка, транслитерация или ремарки.Применяется только в том случае, если не существует более подходящего семантического элемента.
Например:
• <em> — смысловое ударение в предложении;
• <strong> — повышенная важность;
• <mark> — выделение «маркером»;
• <dfn> — термин или расшифровка сокращения.
По умолчанию браузеры применяют к
<i> курсивное начертание с помощью font-style: italic.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17❤10👍10