Зачем вам нужен Passive Event Listener

Passive Event Listener — это особый режим для обработчика событий, при котором браузер сразу знает, что внутри вы не будете вызывать preventDefault(). Узнав это заранее, движок может не ждать вашего решения и тут же приступать к прокрутке или другим действиям по умолчанию. В итоге интерфейс отзывается быстрее и анимация скролла становится плавнее. Это позволяет:

1. Бороться с «дёрганым» скроллом на мобильных устройствах. На touchstart/touchmove браузер вынужден приостанавливать прокрутку, пока не убедится, что вы не отменили её через preventDefault(). Если таких обработчиков много, задержка может достигать 100 мс и пользователь ощущает «тормоза». С passive: true пауза не требуется.

2. Снизить нагрузку на главный поток (main thread). Меньше блокирующих операций — меньше шансов, что UI «замёрзнет» на мгновение.

Как использовать:

Ключевой момент — в объекте опций passive: true.

function handleMove(e) {
  // Только читаем, не вызываем preventDefault
  const { clientX, clientY } = e.touches[0];
  // ...логика, например, показать координаты
}

window.addEventListener('touchmove', handleMove, { passive: true });

Если в пасcивном обработчике всё-таки написать e.preventDefault();, браузер выведет предупреждение в консоли и проигнорирует вызов. Поэтому добавляйте passive: true только там, где оно действительно безопасно, то есть где вы не собирались отменять действие по умолчанию.

Где это особенно полезно:
— touchstart и touchmove — для плавного скролла на мобильных.
— wheel и scroll — когда отслеживаете прокрутку, но не мешаете ей.
— Любые жесты, где вы просто читаете координаты.

#простымисловами #javascript

Адаптивный сайт значит, что пользователь может под него адаптироваться

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Как сделать обтекание текста без лишней вёрстки

Используйте свойство shape-outside, которое позволяет добавить обтекание текста по фигуре. Весь текст вне обтекания сам подстроится под оставшееся место.

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

#советы #css

Как Node.js обрабатывает сотни тысяч запросов в одном потоке

Пошаговый разбор циклов событий, фаз timers → pending → poll → check → close и роли libuv. Вы узнаёте, кто будит коллбэки, почему промисы и таймеры попадают в разные очереди и как Node удерживает высокую производительность, оставаясь однопоточным.

#бэкенд #nodejs

меню «Пуск» в Windows 11 — это React Native приложение

И оно грузит процессор до 80%.

Тут пользователи Reddit и в X.com выяснили, что каждый вызов «Пуска» запускает тяжелый интерфейс, который обновляется как веб-страница: с анимациями, DOM-объектами и переработкой слоев.

Это приложение запускается на каждый клик и может загружать до 80% одного ядра процессора. В зависимости от конфигурации ПК, это приводит к ощутимым подлагиваниям, особенно на устройствах со слабым железом.

Microsoft уже давно использует React Native в интерфейсе Windows 11. Например, на этом же фреймворке построена страница «Ваша учетная запись» в настройках. Сделано это для унификации разработки, чтобы использовать один код и на десктопе, и в вебе.

Но зачем гонять процессор до 80% ради того, чтобы показать сетку ярлыков? Ничего не понятно, но очень интересно.

@your_tech

«Список покупок за 2 часа»: как AI сгенерировал дизайн, код и голосовой ввод на лету

Автор этой статьи поделился своим опытом разработки приложения с помощью ИИ, Он бросил в Google Stitch один промпт, а через 30 секунд получил готовый Figma-макет и HTML. Дальше — чистый JS без фреймворков, WebSocket-синхронизация, голосовой ввод через Gemini 2.5 Pro и живое демо, которым удобно пользоваться на телефоне. Теперь мы можем пошагово изучить промпты, архитектуру ванильного SPA и нюансы интеграции AI-моделей прямо в браузере.

#фронтенд #javascript #ai

​​Самые популярные вопросы на собеседовании фронтенд-разработчика

Это 55 выпуск видеокаста «Front-end. Вопросы на собеседовании».
В серии видео автор помогает подготовиться к собеседованиям на позицию джуниор и мидл фронтенд-разработчик.

Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью: https://www.youtube.com/watch?v=PI1X5oFHou8

В этом выпуске:
— Что такое хвостовая рекурсия? Оптимизация рекурсии?
— Что такое и как работает debounce() и throttle() в JavaScript?
— Как в JavaScript работают декораторы? Как они могут быть использованы для модификации поведения классов и методов?
— Как можно создавать пользовательское событие (custom events) в JavaScript?
— Что такое IndexedDB? Как работает IndexedDB?
— Расскажите о методе requestAnimationFrame()?
— Как работают дефолтные параметры в ES6?
— Что такое «BigInt» в ES2020 и для чего он используется?
— Какие нововведения были представлены в ECMAScript 2021 (ES12)?
— Что такое fetch()? Как работает функция fetch()?
— Что такое JSON в JavaScript? Как его можно использовать?
— Что такое и как работает коэффициент сжатия (compression ratio) в контексте веб-разработки?

#собеседование #фронтенд

Чем отличается новичок от опытного разраба

​​Мегагайд: культура работы с Git

Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

В статье — как раз об этом. В ней раскрыли, что формирует культуру работы с Git: от конвенций именования коммитов и до практик работы в пуллреквесте. В конце статьи — полезные ссылки на интерактивные обучалки, шпаргалки и гайды: https://habr.com/ru/companies/yandex_praktikum/articles/812139/

#git #шпаргалки

16 стендов, 55 экспертов, 400+ участников: итоги GPB Conf

Газпромбанк провел свою первую конференцию и теперь делится результатами. Более 400 профессионалов из ведущих компаний смогли поделиться своими знаниями и экспертностью. А посетители погрузились в атмосферу работы в банке, прослушав доклады и приняв участие в активностях в экспозоне.

Подробнее о том, как все прошло, дальнейших планах, итогах и причинах ждать следующую конференцию — в статье.

20 версий Angular за 5 лет: «незаметные» фичи, которые спасают UI-киты

На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Самое время поностальгировать и вспомнит путь развития фреймворка.

Автор этой статьи прошёл всю эволюцию Angular и собрал чек-лист изменений, которые кажутся мелочью, но экономят часы на поддержке и открывают новые архитектурные трюки.

А какая фича Angular изменила ваш сценарий разработки?

#фронтенд #angular

Тюним стартовую страницу Firefox: убираем лишнее, добавляем своё

В свежем гайде автор показывает, как «причесать» новую вкладку Firefox без расширений: скрыть рекламные блоки, заменить «карточки» на собственные закладки, подправить отступы и фон с помощью пары строк пользовательского CSS.

Гайд в двух часть: первая и вторая. Если хотите довести до ума какую-то часть браузера или исправить ошибки разработчиков, то переходите по ссылкам.

#фронтенд #css #firefox

Оmatsuri

Это небольшой, но полезный набор инструментов. Здесь вы найдете декодер, генератор градиентов, разделитель страниц, генератор данных и многое другое.

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

#инструменты

Pug: HTML без скобок, с шаблонами и миксинами

Если вы устали от громоздкого HTML и хотите писать разметку быстрее и чище, Pug может стать отличным решением. Это препроцессор, который превращает лаконичный код без угловых скобок в полноценный HTML. В статье вы найдёте:

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

А вы используете Pug в своих проектах или нет?

#фронтенд #html #pug

У нас появилась предложка!

Спасибо Паше за очередное обновление телеги, которое дало нам такую возможность.

Теперь вы можете прислать нам ваш авторский контент или материалы, которые вам показались интересными. Мы просмотрим каждое ваше сообщение и если это подходит под тематику нашего канала и не нарушает правила, опубликуем в канале. Анонимно или нет — на ваш выбор!

Эффект выгорающей кинопленки

Нашел интересный codepen-проект. Здесь автор решил сделать эффект при наведении, похожий на выгорающую кинопленку. При этом он учитывает положение курсора в момент наведения при отработке эффекта.

Посмотреть код можно здесь: https://codepen.io/kiranpate1/pen/MWMGKdv

#codepen #css #javascript