В этой шпаргалке - основные функции объекта Math, применяемые для округления, извлечения целых частей, определения знаков и вычисления минимальных и максимальных значений. Это базовые операции, на которых держатся корректные числовые вычисления в приложениях.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍14❤7🤝2
Если один и тот же компонент в разных блоках требует разные отступы, можно использовать
: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 получает аккуратные отступы.Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤12🤝10
Привет! В этом гайде создаём компактную всплывающую панель, которая появляется над выделенным текстом и позволяет мгновенно выполнить поиск в Google.
Ключевые моменты:
• HTML: минимальная разметка — текстовый блок и скрытая панель действия.
• CSS: лёгкое оформление, мягкая тень и анимация появления.
• JS: определение выделенного текста и обработка кликов вне элемента.
Такой элемент подходит для блогов, учебных материалов и рабочих интерфейсов, где пользователю важно быстро искать дополнительную информацию без лишних действий.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤19🔥12👍9🤝4
❤17🔥13👍9
В этом мини-трюке создадим эффект появления строки, когда цветной слой постепенно «проходит» по тексту и заполняет его, будто это анимация набора.
Как работает:
• 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