Для JavaScript появился ещё один движок

Создал его разработчик полностью в соло. Движок называется Brimstone и написан полностью на Rust.

Несмотря на небольшой вес, Brimstone очень быстрый и на 97% реализует спецификацию ECMAScript, что позволяет использовать его практически с любым кодом. Представляет собой виртуальную машину на основе байт-кода с современной сборкой мусора, собранную по образцу V8.

Такой движок отлично подойдёт для какого-нибудь WebView, где требуется легковесный движок. Подробнее можно прочитать на странице проекта. Там же лежит инструкция по установке.

#javascript

Кстати, пока искал информацию про Brimstone, обнаружил сайт с каталогом JavaScript-движков

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

Полезно, если есть необходимость выбирать движок для проекта.

Зоопарк движков можно изучить по ссылке: https://zoo.js.org/

#javascript

This is JavaScript: методы объектов и контекст «this»

Полезная статья для новичков в JavaScript. С this вам так или иначе предстоит столкнуться во время разработки, поэтому нужно уметь с ним работать и понимать его. Тут вы узнаете про методы объектов и их отличия от функций, как this помогает работать с данными объекта внутри методов и получите полезные советы.

#javascript #основы

Разбираемся, как работает цикл событий в JS

Event Loop Visualizer — очень удобная песочница, в которой можно посмотреть, как работает цикл событий и асинхронный код. Просто берёте готовый или вставляете свой, запускаете его и смотрите, что происходит в очереди вызовов, цикле, API-запросах и так далее.

Причём вы также можете попробовать угадать в каком порядке будет выполнен код. Для этого есть отдельное окошко.

Пробуем тут.

#javascript

Перестаньте использовать JavaScript для решения проблем с CSS

Недостаток знаний подталкивает людей к чрезмерному усложнению, и рано или поздно это сказывается на производительности. Например, content-visibility: auto. Он делает то же, что и React-Window, без использования JavaScript и с минимальным весом пакета. Та же история с современными единицами измерения области просмотра (dvh, svh, lvh), которые позволяют избавиться от window.innerHeight в коде. Обе функции получили 90 % глобальной поддержки в 2024 году. Тем не менее мы по-прежнему используем JavaScript в силу привычки.

Эта статья призвана исправить это и показать, что вам не нужно столько JS-кода, как вы привыкли.

#javascript #css

Создаём портфолио в формате 2D-игры на JavaScript

Это один из креативных способом показать свои скилы и впечатлить рекрутера/тимлида/интервьюера.

Гайд по разработке: https://youtu.be/wy_fSStEgMs
Демо: https://jslegenddev.github.io/portfolio/
Исходники: https://github.com/JSLegendDev/2d-portfolio-kaboom

#javascript

Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

@tproger_web #javascript #инструменты

Новогодний генератор снежинок на JS

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

Посмотреть принцип работы кода можно на странице проекта.

#codepen #javascript

Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

Запросы на сервер. Fetch, XMLHttpRequest (XHR), Ajax

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

#javascript #видео

Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений

Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.

Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices

#javascript #nodejs #тестирование

@tproger_web
Читайте также в VK и Max

Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

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

@tproger_web
Читайте также в VK и Max

JavaScript для всех: деструктуризация

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

С появлением ES6 в 2015 году у нас появилась деструктуризация: единый, лаконичный синтаксис для распаковки значений из массива или объекта и их присваивания переменным в одном объявлении let, const или var. В самой простой форме — деструктуризации с шаблоном связывания — каждое значение извлекается из литерала и попадает в соответствующий идентификатор за раз.

Понять, как это работает и где может пригодиться вам, поможет эта статья: https://css-tricks.com/javascript-for-everyone-destructuring/

#javascript #основы

@tproger_web
Читайте также в VK и Max

SPA-переходы без фреймворков: асинхронная смена страниц с клонированием DOM

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

В туториале показывают, как собрать лёгкий SPA-роутер на чистом JS, GSAP и Vite. Ключевой приём: клонировать контейнер, подгрузить HTML новой страницы, запустить параллельную анимацию и только потом удалить старый DOM.

Помимо роутинга с перехватом кликов и обработкой popstate, разбирают организацию страниц как модулей с init/cleanup, анимацию входа для элементов и блокировку повторных переходов.

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

Детали и код — в материале.

#spa #javascript #vite

React vs Vue в 2026: сравнение по 12 критериям с бенчмарками

React лидирует по загрузкам npm — 429 млн в месяц против 47 млн у Vue. Вакансий с React в 3–4 раза больше. Казалось бы, выбор очевиден. Но у Vue есть аргументы, которые на собеседовании не спросят.

React 19.2 и Compiler v1.0 — важные события. Компилятор автоматически мемоизирует компоненты, устраняя необходимость в useMemo и useCallback. По данным Meta, это сократило количество лишних ре-рендеров в их приложениях на 40%. Vue тем временем готовит Vapor Mode — рендеринг без виртуального DOM, по принципу Svelte: компиляция шаблонов напрямую в DOM-операции.

В статье мы сравнили оба фреймворка по производительности, экосистеме, TypeScript-поддержке, размеру бандла, кривой обучения и рынку вакансий — с актуальными данными на март 2026.

Читать: https://tproger.ru/articles/react-vs-vue-v-2026-godu--kakoj-frejmvork-vybrat

#javascript #frontend @tproger

@tproger_web
Читайте также в VK и Max

Cloudflare выпустила EmDash — open-source CMS на TypeScript, где каждый плагин в изолированной песочнице

96% уязвимостей WordPress-сайтов приходит из плагинов. Причина архитектурная: в WordPress плагин — это PHP-скрипт, который встраивается в ядро с полным доступом к базе данных и файловой системе. Без изоляции, без ограничений. Установить плагин — значит полностью ему доверять.

Cloudflare выпустила EmDash v0.1.0 — CMS с принципиально другой моделью. Каждый плагин запускается в собственном изолированном воркере (Dynamic Worker, v8-песочница) и декларирует нужные разрешения в манифесте:

definePlugin({
  capabilities: ["read:content", "email:send"],
  // плагин не может сделать ничего сверх этого
})

Под капотом: Astro, serverless-архитектура, Portable Text вместо HTML, встроенный MCP-сервер для ИИ-агентов. Лицензия MIT. Проект создан за 2 месяца с помощью ИИ-агентов и за сутки набрал 3 200+ звёзд на GitHub.

Подробнее: https://tproger.ru/news/cloudflare-zapustila-emdash---open-source-cms-na-typescript--kot

#javascript

Автор react-motion выпустил библиотеку для вёрстки текста без DOM

Cheng Lou (React core, Midjourney) открыл pretext — 15 КБ, zero deps. Суть: стандартные getBoundingClientRect и offsetHeight вызывают layout reflow — браузер пересчитывает геометрию всей страницы. При 60fps бюджет кадра 16.7 мс, а один reflow на сотне текстовых блоков легко его съедает.

pretext идёт другим путём: замеряет текст через Canvas font engine один раз, а вёрстку для любой ширины считает чистой арифметикой — DOM не трогает вообще.

const prepared = prepare('Hello world', '16px Inter')
const { height, lineCount } = layout(prepared, 320, 20)

Работает с React, Vue, Svelte, vanilla JS, в браузере и на сервере. За первые 48 часов — 14 000 звёзд.

GitHub
Демо

#javascript #производительность

Формы в Angular всегда были той ещё головной болью — кажется, это начинает меняться

В Angular 21 появились Signal Forms — экспериментальная альтернатива привычным реактивным формам. Главная идея: форма и данные синхронизируются сами, без ручного перекладывания значений туда-обратно.

Грубо говоря, вместо вот этого:

ngOnChanges() {
  this.loginForm.patchValue({ ...this.login });
}

Теперь просто:

loginForm = form(this.login);

Форма сама следит за состоянием. Меньше кода, лучше типизация, встроенные debounce, hidden, disabled, readonly и валидация — синхронная и асинхронная.

Пока это экспериментальный API и может измениться, но уже сейчас разница с реактивными формами ощутимая. В статье — подробный разбор с примерами кода для каждой возможности.

#javascript

@prog_point (теперь ещё в VK и Max)