🧠 Angular представил Web Codegen Scorer

Новый open-source инструмент от команды Angular — Web Codegen Scorer — оценивает качество AI-сгенерированного фронтенд-кода.

Он анализирует:

🧬 Читаемость и стиль

🧬 Архитектуру и согласованность

🧬 Использование HTML/CSS/JS-паттернов

🧬 «Вайб» — насколько код выглядит, как написанный человеком

ℹ️ Зачем это нужно:

AI-генерация кода растёт, но качество всё ещё «пляшет». Scorer помогает разработчикам и командам понять, насколько надёжны автогенерированные фрагменты перед ревью или деплоем.

🟡 Проект уже на GitHub, написан на TypeScript и работает локально — можно оценивать и свои сниппеты.

🔗 Ссылка на репозиторий

🐸 Библиотека фронтендера

#stack #angular

🐸 Библиотека фронтендера

#pixel_pause

😱 React-баг, который ловят не все

Кажется, простой счётчик — но React со своим batching (см. на картинке).

Ждём ➕ 2 Получаем ➕ 1

💡 Почему так:

React группирует (batch) обновления состояния внутри одного события. Обе строки читают старое значение count из замыкания, поэтому результат — 1.

✅ Решение:

Если новое состояние зависит от предыдущего — используйте функциональное обновление 🔜

setCount(prev => prev + 1);
setCount(prev => prev + 1);
Теперь результат будет 2.

React работает по снимкам состояния, а не по «живым» переменным — и именно это часто сбивает с толку.

🐸 Библиотека фронтендера

#hotfix #react

📞 Апдейты недели

На этой неделе официальных громких релизов почти нет, но есть несколько моментов, на которые стоит обратить внимание:

📪 Node.js v24 → Active LTS

♍️ Node.js 24, выпущенный в мае 2025, с 28 октября 2025 официально стал Active LTS.

♍️ Стабильная версия для серверной части и сборки фронтенд-приложений.

🔥 Разобраться глубже поможет курс «Архитектуры и шаблоны проектирования» (−40%)

📪 SurveyJS v2.3.13

♍️ Возможность задавать индивидуальные схемы нумерации вопросов для каждой страницы и динамических панелей.

♍️ Опция полностью убрать Property Grid из интерфейса Survey Creator (removeSidebar = true).

♍️ Обновления применимы для Angular, React, Vue.js и plain JS

🐸 Библиотека фронтендера

#release_digest

😎 WebAssembly под капотом

Что стоит знать о том, как бинарный формат превращается в машинный код и общается с JS.

⏬ WebAssembly: короткий обзор ассемблера для веба

Как устроен Wasm, чем отличается от JS и почему браузеры так его любят.

⏬ WebAssembly в 2025: зачем знать даже новичку

Актуальный взгляд на роль Wasm в экосистеме веба и его будущее.

⏬ Прогресс WebAssembly и будущее веба

Разбор внутренностей: компиляция через LLVM, оптимизации, сравнение с asm.js.

⏬ Постигаем WebAssembly, рисуя кривую дракона

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

🎥 HolyJS 2024 — На чём сегодня писать для WebAssembly?

Доклад с примерами на Rust, Go и AssemblyScript.

🐸 Библиотека фронтендера

#under_hood #css

🧪 Unit-тесты vs QA протестирует

Когда ответственность встречается с делегированием — рождается главный миф разработки.

🟣 Unit-тесты

— Баги находятся на этапе разработки
— Быстрый feedback loop
— Рефакторинг без страха
— Разработчик = ответственность за качество

🟣 QA протестирует

— Быстрее пишу код без тестов
— QA всё равно найдёт баги
— "Я же не тестировщик"
— Баги уходят в прод, но это не моя вина

💭 А в вашей компании есть правило «нет тестов — нет мержа»? Или «работает — не трогай»?

Голосуем реакциями:

👍 — Пишу unit-тесты перед коммитом
❤️ — Тесты есть, но не всегда
🤔 — QA справится, они для этого есть
🔥 — Продакшн и есть тестовая среда

🐸 Библиотека фронтендера

#code_battle

🐸 Библиотека фронтендера

#pixel_pause

🖍 Все используют em, но пора перейти на lh

Обычно мы пишем:

p + p { margin-top: 1em; }

Но em завязан на размер шрифта, а не на высоту строки.
В итоге при изменении line-height вертикальный ритм ломается.

💡 Решение — lh и rlh:

p + p {
  margin-block-start: 1lh;
}

1lh = текущая высота строки элемента.

1rlh = высота строки корневого элемента (root line height).

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

🔤 Поддержка: Chrome 108+, Safari 16.4+, Firefox 111+

🐸 Библиотека фронтендера

#readme #css

🌪 JS, который ломает мозг #1

Кажется, const защищает данные. Но это не так.

🔶 Что делает const

Фиксирует ссылку на значение, а не само значение. По спецификации (ECMAScript §13.3.1.1), переменная, объявленная через const, не может быть переназначена.

const user = { name: "Alex" };
user = {}; // TypeError

🔶 Но можно менять внутренности объекта

user.name = "Bob"; // работает

Сам объект остаётся в памяти по той же ссылке.

🔶 Как зафиксировать структуру

Object.freeze(user);
user.name = "Carol"; // не изменится

const защищает ссылку, а не содержимое.
Чтобы зафиксировать данные — используйте Object.freeze() или иммутабельные копии ({...obj}).

🐸 Библиотека фронтендера

#career_merge

💡 JavaScript-разминка

Что вернёт код на картинке выше ⬆️

Массив вроде есть, но что хранится в array[0]…

🐸 Библиотека фронтендера

#code_battle

🐸 Библиотека фронтендера

#pixel_pause

⚙️ React Compiler теперь можно выключить прямо в функции

Новая директива — "use no memo" — отключает оптимизацию React Compiler.

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

function MyComponent() {
  "use no memo";
  // ...
}

⏺ Как работает:

— Полностью исключает функцию из оптимизации.

— Срабатывает даже при режиме all.

— Аналог — "use no forget".

⏺ Важно:

— Должна стоять первой в функции.

— Только одинарные или двойные кавычки (не бэктики).

— Временное решение, не постоянный паттерн.

❓ А вы уже пробовали React Compiler:

❤️ — Да, работает быстро
👍 — Пока изучаю

🔗 Ссылка на документацию

🐸 Библиотека фронтендера

#readme #react