Привет, я Игорь Аникин, Frontend разработчик RUTUBE TECH. Медиадизайнер, специализируюсь на компьютерной графике. Увлекаюсь программированием более 15 лет. Веду Telegram-блог про новые медиа.Это небольшой мастер-класс, как визуализировать звук двумя способами. Текст подойдёт любому читателю, которому интересна выразительная часть цифрового мира.аудиореактивный визуал https://t.me/mediapancake/86— Что такое креативное программирование?Использование компьютера для создания изображений или звука. …
В прошлой статье я рассказывал, каково в одиночку тащить фуллстек-проект, который разросся до кино-соцсети. В комментариях несколько раз спросили про конкретику — «покажи код», «как сделал, что не выглядит как очередной пет-проект». Логично: дизайн — это то, по чему встречают. Поэтому держите вторую часть, уже техническую и с кодом. Без маркетинга, только решения, которые реально сделали интерфейс «дорогим», и пара бэкенд-хитростей в довесок.Сразу дисклеймер: я не дизайнер. Всё нажито методом «…
Kufar.by - это примерно как avito.ru, только в Беларуси. После очередного “улучшения” там стало невозможно выбирать авто и недвижимость: цены показываются только в белорусских рублях, хотя рынок всегда будет в долларах (Боже, храни Америку). Поэтому я сделал небольшой Chrome Extension, который добавляет рядом ориентировочную цену в долларах. Пока только для авто и недвиги. И да, по ощущениям, ЛПРы, которые это выкатывали, никогда не покупали ни то ни другое на своём сайте.ПрологПопытка #1Цена в…
Centrifugo — сильное решение для real-time систем. Особенно когда нужен отдельный WebSocket-слой, приватные каналы, публикация событий из backend-а, масштабирование и независимость от конкретного фреймворка.Но Centrifugo не единственный вариант. И точно не всегда лучший.В Laravel-проектах можно использовать Reverb, Pusher Channels, Ably, Socket.IO, Server-Sent Events, polling, long polling и разные внутренние брокеры сообщений. Иногда Centrifugo будет правильным выбором. Иногда он окажется избы…
Navigation API предоставляет возможность инициировать (программно запускать), перехватывать и управлять навигацией в браузере. Он также позволяет исследовать (traverse) сущности истории (history entries) приложения. Это улучшенный вариант предыдущих возможностей веб-платформы, связанных с навигацией, таких как History API и window.location, который решает их проблемы и специально предназначен для одностраничных приложений (single-page applications, SPA).На сегодняшний день Navigation API поддер…
ВведениеНедавно я увидел видео, где маленький мальчик собирает кубик Рубика за 2,76 секунды (вот оно), и мне тоже захотелось научиться его собирать. Конечно, не за такое время, но главное — суметь сложить хотя бы за 10 минут. Главная проблема в том, что кубика у меня нет; можно купить, но это как-то скучно, на троечку. Поэтому я подумал: а почему бы не написать за выходные простой код, чтобы побыстрее посмотреть и покрутить кубик, а потом уже можно и купить. Заодно и разберусь, где что находитс…
В современной веб-разработке SEO и производительность часто вступают в противоречие. SSR дает хорошую индексацию, но усложняет архитектуру. CSR быстрее в разработке и меньше нагружает сервер, но поисковые боты могут не понять страницу.Мы разрабатываем продуктовый сайт на Angular 17 с микрофронтендовой архитектурой на Module Federation. Нам нужно было и хорошее SEO, и привычный CSR для пользователей. В итоге мы выбрали гибридный подход: для людей — клиентский рендеринг, для поисковых ботов — пре…
Босс на e1m7Получится ли сделать полноценную 3D-игру на Qt Quick3D?Именно такой вопрос у меня возник, когда я начал изучать Quick3D. Казалось бы, рендер и партиклы есть, базовая физика в лице Quick3D Physics тоже присутствует. Пример CharacterController из Qt указывал на то, что проблем быть не должно.Но хотелось проверить это самому на чём-то реальном.Поскольку моделлер и художник из меня никакой, да и в геймдеве опыта у меня меньше нуля, я решил переписать Quake — любимую игру своего детства.…
Если ты до сих пор пишешь так: const name = user.name; const email = user.email; const age = user.age;то деструктуризация покажется тебе супер способностью.ES6 ввел синтаксис деструктурирующего присваивания — лаконичный способ распаковки значений из массивов и объектов в отдельные переменные. Это одна из тех фич, начав использовать которые, ты удивишься, как раньше без нее жил.Разберем 12 паттернов: от базовых до продвинутых.Деструктуризация объектовПаттерн 1. Базовая деструктуризация объектаc…