🙃 Как Google Переводчик ломает React и другие веб-приложения

Когда Переводчик переводит страницу, он не просто подменяет текст. Он лезет в DOM и без стеснения меняет структуру элементов. Был <p>There are 4 lights!</p> — стало <p><font>Er zijn 4 lampen!</font></p>. Красиво? Возможно. Но React от этого в шоке: его виртуальный DOM теперь говорит одно, а реальный — другое. В результате приложение может “повиснуть” или выдать NotFoundError: Failed to execute 'removeChild'.

React живёт по принципу “ничего не ломаем — всё обновляем точечно”. Но когда Переводчик самовольно выдёргивает узлы, React теряет связь с элементами и впадает в ступор. Отсюда — залипший текст, странные клики (потому что event.target вдруг указывает на <font>), и фатальные креши. Но справедливости ради, достаётся не только React — любой фреймворк, работающий с DOM, рискует оказаться в похожей ситуации.

А можно починить? Теоретически — да: оборачивайте каждый TextNode в span, патчите методы removeChild, ловите ошибки границами и молитесь на ESLint-плагин. На практике — проще запретить перевод вообще. Грустно, но факт: единственный стабильный фикс — не давать пользователю переводить страницу. Звучит немного антигуманно, зато работоспособно.

Подробнее про работу Google переводчика в связке с React читайте на Хабре.

@js_for_devs

🔥 HolyJS устраивает день открытых дверей

29 октября любой может ворваться в мир JavaScript-движухи, пощупать формат конференции и почувствовать атмосферу HolyJS — без билета, paywall’ов и корпоративных пропусков. Просто онлайн, просто бесплатно.

Что по программе?
— JSON in → App out — расскажут, как превратить унылые таблицы и документы в графы и память агентов. Звучит как магия, но это уже почти стандарт в AI-разработке.
— Транскодирование видео в web — если вы когда-нибудь страдали от "почему видео не работает в Safari", вам туда.
— Создание RAG-системы на Node.js — да-да, та самая Retrieval-Augmented Generation, только своими руками. Прямо мастер-класс: собери себе мини-ChatGPT-поиск.

Всё что нужно для участия – зарегистрироваться.

@js_for_devs

😅 Российские вузы перевели JavaScript на русский

Проект направлен на то, чтобы снизить языковой барьер у начинающих программистов

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

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

1С, подвинься! ЖаваСкрипт в здании)

Источник

@js_for_devs

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

Фреймворки сегодня уже не соревнуются — их выбор всё чаще делает не разработчик, а LLM. И в этой системе координат React занял место «платформы по умолчанию»: модели видят его в обучающих данных, инструменты подсовывают его в промптах, а разработчики ожидают именно его. Получается круг, из которого трудно вырваться.

Из-за этого новые фреймворки оказываются «мёртвыми при рождении»: чтобы модель начала их генерировать, нужно 12–18 месяцев реального использования, чтобы появлялась экосистема — ещё больше. А за это время React просто продолжает наращивать массу, укрепляя своё статистическое преимущество.

Примечательный факт: по данным BuiltWith, за год появилось более 13 млн новых сайтов на React — в десятки раз больше, чем во всей видимой выборке HTTP Archive. С такой инерцией неудивительно, что альтернативы тонут в шуме.

@js_for_devs

🔥 Обзор новых возможностей CSS в Safari 26

Safari 26 вышел, и это одно из самых содержательных обновлений WebKit за последние годы.

В релизе — 75 новых возможностей и 171 улучшение. Многие фичи уже были в Chrome, но теперь они становятся доступными и в Safari, что важно для кросс-браузерного использования.

Главные изменения в части CSS:

• Anchor positioning. Теперь Safari поддерживает привязку абсолютно позиционированных элементов к другим узлам. Это делает возможным реализацию тултипов и попапов на чистом CSS.

• Scroll-linked animations. Появились animation-timeline с функциями scroll() и view(), а также animation-range. Анимации можно привязывать к прокрутке или к появлению элемента во вьюпорте — без JS.

• progress(). Новая функция, которая вычисляет прогресс в диапазоне и умеет работать со смешанными единицами измерения (px + vw и т.п.). Упрощает сценарии, которые раньше приходилось собирать через calc() или тригонометрию.

• Самовыравнивание при absolute. В absolute-контейнерах теперь можно использовать align-self и justify-self (включая anchor-center). Это решает часть типичных задач центрирования без translate-хаков.

• contrast-color(). Функция автоматически выбирает чёрный или белый текст для заданного фона. Реализация пока ограниченная, но впервые доступна в стабильном релизе Safari.

• text-wrap: pretty. Улучшает разбиение текста на строки: уменьшает количество коротких строк и сглаживает «рваный» край. Safari идёт дальше текущей реализации Chrome.

Это только часть изменений. Полный разбор со множеством демо — в статье.

@js_for_devs

Как выбраться из гравитации фреймворков?

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

Автор убеждён: браузеры развиваются быстрее, чем экосистемы вокруг них, а зависимость от React и других инструментов тормозит инновации. Пора снова смотреть на веб как на платформу, а не как на “внутренность” фреймворка.

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

📚 Читать на Хабр: https://habr.com/ru/articles/968510/

🤑 Anthropic купили Bun – runtime среду для JavaScript и TypeScript

Этот инструмент превосходит Node.js по скорости и уже использовался в Claude Code (а еще им пользуются, например, Midjourney). Теперь, после покупки, Bun интегрируют в агента еще глубже: это означает, что нас ждет ускорение и, возможно, какие-нибудь новые фичи для отладки/тестирования.

Anthropic обещают, что Bun останется в опенсорсе под MIT-лицензией, и они продолжат в него инвестировать.

@js_for_devs

⚡️ Вышел WebStorm 2025.3

В новом релизе JetBrains усилили работу с TypeScript-проектами, улучшили поддержку монорепозиториев и добавили полноценную интеграцию ИИ-агентов прямо в IDE.

Коротко — самое важное:

— Новая тема интерфейса Islands по умолчанию.
— Улучшенное разрешение модулей и поддержка монорепозиториев (customConditions, exports, pnpm).
— Удалённая отладка JavaScript в WSL, Docker, SSH и других средах.
— Обновлённый AI Assistant: теперь Junie + Claude Agent прямо в IDE.
— Полная поддержка Vitest 4 с новым API репортинга.
— Виджет Prettier и автоформатирование при вставке.
— Централизованные настройки сред выполнения Node.js, Bun и Deno.

📚 Читайте и комментируйте на Хабр.

@js_for_devs

⚡️ 37signals показывают, на что способен нативный CSS

Три их продукта (Campfire, Writebook, Fizzy) построены на чистом CSS и при этом закрывают реальные сложные интерфейсы: канбан, drag-and-drop, диалоги, темы, адаптивность. Архитектура максимально простая: плоская структура файлов, кастомные свойства, OKLCH, container queries, CSS Layers, селектор :has() и color-mix(). Никакой сборки, никаких утилитарных фреймворков.

Cовременные возможности CSS уже перекрывают большинство причин, ради которых раньше использовали препроцессоры и Tailwind. Управление состоянием, тёмная тема, адаптивность, анимации — всё решается декларативно и масштабируется без инструментальной надстройки.

Полный разбор всех приёмов, и примеров кода читайте в статье на Хабре.

@js_for_devs

🧱 CSS Grid Lanes — нативные masonry-раскладки без JavaScript

Masonry в вебе годами делали через JS-библиотеки с костылями для доступности, фокуса и производительности. Grid Lanes наконец закрывают эту историю на уровне CSS.

Новый режим display: grid-lanes расширяет CSS Grid и позволяет браузеру самому раскладывать элементы по «полосам» — туда, где контент оказывается ближе к верху.

В итоге:
— никакого JavaScript
— корректный tab-order и accessibility
— адаптивность без media и container queries

При этом сохраняется вся мощь Grid: переменная ширина колонок, растягивание элементов, явное позиционирование, смена направления раскладки. Плюс появляется новый параметр item-tolerance, который позволяет контролировать, насколько агрессивно элементы «перестраиваются» между полосами — важная деталь для UX и клавиатурной навигации.

📚 Читайте и комментируйте на Хабр.

@js_for_devs

🧩 RSC Explorer: что реально передаётся по сети в React Server Components

RSC-протокол — внутренняя и почти недокументированная часть React, из-за чего даже опытные пользователи Server Components часто смутно представляют, что именно стримится между сервером и клиентом. На фоне недавнего интереса к безопасности это стало особенно заметно.

RSC Explorer — небольшой open-source инструмент, который пошагово показывает, как React сериализует и восстанавливает React-деревья, а не HTML или строки. Видно стриминг, “дыры” в async-дереве, ссылки на client components, Server Actions и то, как обновляется серверный UI без сброса клиентского состояния.

Очень наглядный способ понять, как RSC работают под капотом.

👉 Подробный разбор с примерами — в новой статье на Хабре.

⚙️ Инструменты для JavaScript больше не пишут на JavaScript — и вот почему это осознанный выбор

За последние пару лет экосистема JS радикально сменила курс: бандлеры, линтеры и компиляторы массово переезжают на Rust, Go и Zig.

Причина проста. Современные JS-проекты — это тысячи файлов, сложные графы зависимостей и тяжёлые пайплайны сборки. Инструменты, написанные на самом JavaScript, упираются в CPU и память, даже при всех оптимизациях V8.

Системные языки решают эту проблему на уровне архитектуры:
— нативная производительность;
— реальная многопоточность;
— предсказуемое потребление памяти.

Именно поэтому SWC заменяет Babel, а Microsoft переписывает компилятор TypeScript на Go ради масштабируемости.

Интересно, что сообщество сознательно приняло компромисс: инструменты стали быстрее, но сложнее для контрибьюта. Большинство JS-разработчиков больше не могут «залезть внутрь» своего линтера или компилятора так же легко, как раньше.

@js_for_devs

🔥 Почему свой игровой движок — это проще, чем кажется

В новой, большой и практической статье смотрим, как создать игровой движок с нуля — без шейдеров, GPU-магии и «взрослых» фреймворков.

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

📚 Читать на Хабр: https://habr.com/ru/articles/986110/

Наконец-то могу видеть свои tailwind-классы без бесконечного скролла..