JavaScript *

Привет, я Игорь Аникин, Frontend разработчик RUTUBE TECH. Медиадизайнер, специализируюсь на компьютерной графике. Увлекаюсь программированием более 15 лет.

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

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

Получится ли сделать полноценную 3D-игру на Qt Quick3D?

Именно такой вопрос у меня возник, когда я начал изучать Quick3D. Казалось бы, рендер и партиклы есть, базовая физика в лице Quick3D Physics тоже присутствует. Пример CharacterController из Qt указывал на то, что проблем быть не должно.

Но хотелось проверить это самому на чём-то реальном.

Поскольку моделлер и художник из меня никакой, да и в геймдеве опыта у меня меньше нуля, я решил переписать Quake — любимую игру своего детства. В ней я провёл сотни (тысячи?) часов, играя в мультиплеер на бесплатных серверах МТУ-Информ через модем US Robotics 33600.

В итоге получился проект Kwayk — попытка переписать Quake на Quick3D.

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

Мы разрабатываем продуктовый сайт на Angular 17 с микрофронтендовой архитектурой на Module Federation. Нам нужно было и хорошее SEO, и привычный CSR для пользователей. В итоге мы выбрали гибридный подход: для людей — клиентский рендеринг, для поисковых ботов — пререндеринг через доработанный сервис MTS botview.

В статье рассказываем, почему чистый SSR не подошел, как мы разделили рендеринг, что доработали в открытом решении и как отличаем ботов от людей без ошибок.

Недавно я увидел видео, где маленький мальчик собирает кубик Рубика за 2,76 секунды (вот оно), и мне тоже захотелось научиться его собирать. Конечно, не за такое время, но главное — суметь сложить хотя бы за 10 минут. Главная проблема в том, что кубика у меня нет; можно купить, но это как-то скучно, на троечку. Поэтому я подумал: а почему бы не написать за выходные простой код, чтобы побыстрее посмотреть и покрутить кубик, а потом уже можно и купить. Заодно и разберусь, где что находится у кубика.

Navigation API предоставляет возможность инициировать (программно запускать), перехватывать и управлять навигацией в браузере. Он также позволяет исследовать (traverse) сущности истории (history entries) приложения. Это улучшенный вариант предыдущих возможностей веб-платформы, связанных с навигацией, таких как History API и window.location, который решает их проблемы и специально предназначен для одностраничных приложений (single-page applications, SPA).

Заключительная часть серии статей про Laravel + Centrifugo и как его готовить.

Сравниваем альтернативы Centrifugo для Laravel: Reverb, Pusher, Ably, Socket.IO, SSE и polling. Разбираем плюсы, минусы и сценарии выбора real-time решения.

Kufar.by - это примерно как avito.ru, только в Беларуси. После очередного “улучшения” там стало невозможно выбирать авто и недвижимость: цены показываются только в белорусских рублях, хотя рынок всегда будет в долларах (боже, храни Америку). Поэтому я сделал небольшой Chrome Extension, который добавляет рядом ориентировочную цену в долларах. Пока только для авто и недвиги. И да, по ощущениям, ЛПРы, которые это выкатывали, никогда не покупали ни то ни другое на своём сайте.

Начинаете писать E2E-тесты? Думаете, нужно просто открыть страницу, нажать кнопку и написать expect?

Разберем на примере Playwright, почему отчёт может быть зелёным, но бесполезным.

Меня зовут Иван Некипелов, я технический руководитель команды фронтенд инфраструктуры в Wildberries & Russ. Последнии несколько лет мы с командой развиваем архитектуру и инфраструктуру большого frontend-продукта.

В этой статье разберу наш путь от монолита к микрофронтендам:  расскажу как решали ключевые проблемы и с какими сложностями столкнулись во время миграции.

В статье разберём, как именно раннер решает, что тест прошёл, почему .then без return выполняется уже после теста, почему try/catch в async‑тесте — частый источник ложного зелёного, что не так с forEach и setTimeout внутри тестов и какие инструменты не дают тесту соврать. Примеры на Jest, но контракт у Mocha, vitest и прочих тот же.

Разбираем frontend и эксплуатацию real-time системы на Laravel и Centrifugo: JS client, reconnect, token refresh, HTTP recovery, Nginx, логи и мониторинг.

В этой статье разберём, как правильно организовать публикацию real-time событий в Laravel: почему не стоит отправлять сообщения напрямую из контроллеров, как использовать Laravel Events и listeners, зачем нужны queue jobs, почему afterCommit() критичен для корректности данных и каким должен быть безопасный payload без полной Eloquent-модели.

Каждый, кто пишет Telegram‑ботов на Node.js / TypeScript, знает про библиотеку Telegraf.js. Это был стандарт индустрии. Ключевое слово — «был». Оригинальный репозиторий фактически заброшен майнтейнерами, пулл‑реквесты годами висят без ответа, а сам фреймворк застрял в прошлом.

Пока Telegram один за другим выкатывает масштабные апдейты (Звёзды, Подарки, Бизнес‑аккаунты, Улучшенные медиа), официальный Telegraf не поддерживает ничего из этого.

Мне надоело смотреть на падающие в продакшене боты и городить костыли, поэтому я создал форк — telegraf‑hardened. На прошлой неделе мы выпустили мажорный релиз v6.0.0. Рассказываю, как под капотом устроена обновленная либа.

Это девятая статья про инженерные решения в ONEMIX. Тема узкая, push-уведомления. Но я её давно хотел разобрать, потому что туториалов в интернете много, а production-граблей в них почти нет.

Если коротко, туториал по push выглядит так. Регистрируешь токен через Notifications.getExpoPushTokenAsync(). Отправляешь на бэкенд. Когда приходит пуш — addNotificationResponseReceivedListener ловит тап, навигируешь в нужный экран. Всё.

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

Всем привет! Хочу поделиться, возможно, не новым, но, на мой взгляд, довольно изощренным видом фишинга. Кто-то уже наверняка сталкивался с таким методом, а для кого-то он окажется в новинку.

Real-time без авторизации опасен. Если пользователь может подписаться на чужой канал, он может получать чужие уведомления, статусы заказов, сообщения, события админки или финансовые обновления. В обычном HTTP API такая ошибка выглядела бы как доступ к чужому endpoint. В WebSocket-архитектуре ошибка такая же, просто выглядит менее очевидно.

Разбираем в Centrifugo: публичные и приватные подписки, connection token, subscription token, права доступа и безопасное подключение

Когда локальный стейт в React-модуле начинает расти - разработчик инстинктивно тянется к useReducer+Context. Это работает, пока не перестаёт: ререндеры везде, провайдеры в елочку, логика размазана. В статье разбираю как этот путь выглядит в реальном продакшне на примере редактора субтитров, и почему паттерн Scoped Store на базе Context+Zustand+useRef решает эту проблему чище и проще.

Современная корпоративная разработка — это всегда про компромиссы. Нужно быстро прототипировать, но при этом не потерять в качестве кода. Хочется держать в голове всю архитектуру — и фронтенд, и бэкенд, и контейнеризацию, и тесты. А по факту время уходит на переключение между десятками вкладок, согласование REST-контрактов и разбор ошибок по логам.

В этой статье мы расскажем, как в проекте нейропрототипа модуля Планирования (PlanningProto) мы использовали Cursor — редактор с ИИ, который встроен прямо в репозиторий.

В первой части мы разобрались, что Real-time на Laravel-сайте нужен там, где интерфейс должен получать изменения без перезагрузки страницы: новые уведомления, смену статуса заказа, сообщения в чате, обновления виджетов, события в административной панели. Для таких задач классическая модель HTTP-запроса уже недостаточна, а polling создаёт лишнюю нагрузку на backend. Один из практичных вариантов решения — использовать Centrifugo как отдельный WebSocket-сервер рядом с Laravel-приложением.

В этой статье разберём архитектуру Laravel + Centrifugo: за что отвечает Laravel, какую роль выполняет Centrifugo, как frontend подключается к real-time каналу и как выглядит типовой сценарий публикации события, например при изменении статуса заказа.