Category : javascript

javascript
Как я собрал кубик Рубика в браузере на чистом Canvas

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

  • четверг, 21 мая 2026 г. в 00:00:13
javascript
SSR и CSR в одном месте: как мы разделили рендеринг для людей и поисковых ботов

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

  • четверг, 21 мая 2026 г. в 00:00:12
javascript
Kwayk: как я сделал Quake на Qt Quick3D и прикрутил физику из Death Stranding 2

Босс на e1m7Получится ли сделать полноценную 3D-игру на Qt Quick3D?Именно такой вопрос у меня возник, когда я начал изучать Quick3D. Казалось бы, рендер и партиклы есть, базовая физика в лице Quick3D Physics тоже присутствует. Пример CharacterController из Qt указывал на то, что проблем быть не должно.Но хотелось проверить это самому на чём-то реальном.Поскольку моделлер и художник из меня никакой, да и в геймдеве опыта у меня меньше нуля, я решил переписать Quake — любимую игру своего детства.…

  • четверг, 21 мая 2026 г. в 00:00:11
javascript
12 паттернов, которые приведут твой код в порядок

Если ты до сих пор пишешь так: const name = user.name; const email = user.email; const age = user.age;то деструктуризация покажется тебе супер способностью.ES6 ввел синтаксис деструктурирующего присваивания — лаконичный способ распаковки значений из массивов и объектов в отдельные переменные. Это одна из тех фич, начав использовать которые, ты удивишься, как раньше без нее жил.Разберем 12 паттернов: от базовых до продвинутых.Деструктуризация объектовПаттерн 1. Базовая деструктуризация объектаc…

  • четверг, 21 мая 2026 г. в 00:00:10
javascript
Вы неправильно тестируете асинхронный код: тест проходит раньше, чем выполняется проверка

Привет, Хабр!Самая распространённая ошибка в тестировании асинхронного кода — уверенность, что зелёный тест означает «проверка внутри отработала и прошла». Вы написали test(...), внутри есть expect, прогон зелёный — значит, код проверен. Кажется очевидным.А потом выясняется, что тест с заведомо неверным expect всё равно остаётся зелёным, что проверка на выброшенную ошибку проходит и тогда, когда код перестал эту ошибку выбрасывать, а функция, давно сломанная, годами имеет при себе зелёный тест.…

  • среда, 20 мая 2026 г. в 00:00:09
javascript
От legacy-монолита к микрофронтендам: архитектура современного SPA

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

  • среда, 20 мая 2026 г. в 00:00:08
javascript
5 распространенных ошибок новичка в E2E-тестах

Начинаете писать E2E-тесты? Думаете, нужно просто открыть страницу, нажать кнопку и написать expect?Разберем на примере Playwright, почему отчёт может быть зелёным, но бесполезным!Сразу к делу! Ошибка 1. Проверка интерфейса без проверки взаимодействияОшибка распространенная, но не примитивная. Вот вам вредный совет, как проверить, что после нажатия на кнопку все сохраняется:await page.getByRole('button', { name: 'Сохранить' }).click(); await expect(page.getByText('Сохранено&…

  • среда, 20 мая 2026 г. в 00:00:07
javascript
Telegraf.js умер. Как мы оживили фреймворк, переписали ядро на Native Fetch и затащили Bot API 9.6

Каждый, кто пишет Telegram-ботов на Node.js / TypeScript, знает про библиотеку Telegraf.js. Это был стандарт индустрии. Ключевое слово — «был». Оригинальный репозиторий фактически заброшен майнтейнерами, пулл-реквесты годами висят без ответа, а сам фреймворк застрял в прошлом.Пока Telegram один за другим выкатывает масштабные апдейты (Звёзды, Подарки, Бизнес-аккаунты, Улучшенные медиа), официальный Telegraf не поддерживает ничего из этого.Мне надоело смотреть на падающие в продакшене боты и гор…

  • вторник, 19 мая 2026 г. в 00:00:07
javascript
Публикация событий из Laravel в Centrifugo: Events, listeners, queue jobs и безопасный real-time pa…

Real-time в Laravel-проекте не должен начинаться с прямого HTTP-запроса к Centrifugo из контроллера. Это быстрый путь к связанному коду, нестабильной архитектуре и ошибкам синхронизации между frontend и backend. Правильная публикация событий из Laravel в Centrifugo строится иначе: Laravel меняет состояние системы, создаёт событие приложения, listener передаёт задачу в queue job, а job уже публикует минимальный payload в Centrifugo.Такой подход особенно важен для проектов, где real-time обновлен…

  • вторник, 19 мая 2026 г. в 00:00:05