Анимация раскидывания частиц на чистом JavaScript

Вы наверняка встречали такой эффект, как на видео. Часто для его реализации используются уже готовые бибилотеки. Но в этот раз предлагаем вам посмотреть, как повторить такой эффект с помощью чистого JS-кода.

Подробнее: https://codepen.io/ma77os/pen/ExOKBay

#codepen

Уходит эпоха

Мини-Reddit в Telegram: бот + React-мини-апп за неделю

В этой статье показан полный путь создания сообщества «как на Reddit», но прямо в Telegram Mini App. Бот на node-telegram-bot-api управляет постами и голосами, мини-приложение на React рендерит древовидные комментарии и недельный ТОП, API-сервер на Express раздаёт данные, а MySQL и Redis держат хранилище. MVP подняли за одну рабочую неделю, активно используя ИИ для генерации 80–90 % кода.

#фронтенд #бэкенд #telegram

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

От Moment.js к Temporal: новый стандарт работы с датами в JavaScript

Унаследованный Date API путает тайм-зоны, мутирует объекты и требует громоздкого кода. В этой статье мы познакомимся с его альтернативами: Moment.js и date-fns, а затем посмотрим, как встроенный Temporal решает те же задачи — иммутабельность, наносекундная точность, богатая работа с тайм-зонами и разные календарные системы.

Вас ждут: наглядные примеры Temporal.PlainDate, ZonedDateTime, Instant, операции add/round/with и таблица сравнений с Moment.js и date-fns.

#фронтенд #javascript

Курс: фулстек-разработка веб-сервиса

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

Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.

#курс #web #fullstack #ru

Если хотите сделать необычный сайт, то ловите идею

Разраб сделал сайт с миллионом шахматных досок. Возможно, вы уже видели что-то подобное. Например, сайт с миллионом чекбоксов или с одним, но доступным абсолютно каждому пользователю. Это сделал тот же автор.

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

Как вам? Уже готовы сделать такие же шашки или придумали что-то интереснее?

#ненормальноепрограммирование

Зачем вам нужен 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) в контексте веб-разработки?

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

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