🎮 Код из книги: Управление состоянием с помощью Signals в Angular

Проблема: В современных Angular-приложениях управление состоянием часто становится сложным и трудоёмким, особенно когда используются различные подходы, такие как NgRx или манипуляции с обычными переменными. Это может привести к трудностям в отслеживании изменений состояния и взаимодействии между компонентами.

Решение: Использование Signals — нового инструмента для управления состоянием, который упрощает реактивное программирование в Angular и улучшает производительность. Signals обеспечивают прямое отслеживание изменений состояния, что делает код более читаемым и эффективным.

Пример кода для простого счётчика с использованием Signals:

import { signal } from '@angular/core';

export const counterSignal = signal(0);

export function incrementCounter() {
  counterSignal.update(count => count + 1);
}

export function decrementCounter() {
  counterSignal.update(count => count - 1);
}

Преимущества:

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

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст

🚀 Bun 1.1 — самая быстрая среда для JavaScript

Альтернатива Node.js получила масштабное обновление:

— Теперь с поддержкой Windows

— bun serve стабилен — встроенный HTTP-сервер без Express

— Пакеты ставятся мгновенно: bun install быстрее npm в 30x

— Совместимость с Node API 95%+

— Встроенный bun test и JSX/TSX без конфигурации

⚡ В 2–3 раза быстрее Node.js по большинству метрик. Подходит для CI, SSR, микросервисов и фронта.

Установить можно через терминал:

curl -fsSL https://bun.sh/install | bash

🔗 Читать подробнее в официальном блоге

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

#свежак

📌 Команда дня: animation-composition

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

Свойство animation-composition решает это:

.element {
  animation: fade 2s, slide 2s;
  animation-composition: add;
}

💡 Теперь fade и slide накладываются друг на друга, а не заменяют.

📍 Для чего это:

Чтобы не объединять всё в один @keyframes, не городить JS, и не терять голову от конфликтов.

Работает в Chrome, Firefox, и постепенно внедряется в остальное.

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

#буст

Где-то в мире заплакал один сеньор… 🥲

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

#развлекалово

😬 Чек-лист безопасного рефакторинга

1️⃣ Оцените целесообразность:

• Чётко определите цель: зачем вы делаете рефакторинг?

• Оцените риски и возможные последствия

• Убедитесь, что изменения оправданы с точки зрения бизнеса

2️⃣ Изолируйте изменения:

• Не смешивайте рефакторинг с новой функциональностью

• Делайте маленькие и атомарные изменения

• Проводите отдельные код-ревью для каждого типа правок

3️⃣ Обеспечьте защиту тестами:

• Покройте ключевые сценарии интеграционными тестами

• Тесты должны проверять поведение, а не реализацию

• Убедитесь, что тесты проходят до и после изменений

4️⃣ Проверьте результат вручную:

• Обязательно визуально проверьте, что всё работает корректно

• Убедитесь, что поведение приложения не изменилось

5️⃣ Не надейтесь только на QA:

• Ручное тестирование не заменяет разработческую ответственность

• Проверяйте критичные участки лично

6️⃣ Избегайте масштабных коммитов:

• Разбивайте изменения на логически завершённые части

• Изменения должны быть понятны и легко отслеживаемы

7️⃣ Планируйте заранее:

• Трезво оцените объём и влияние работ

• Определите, какие участки кода требуют внимания в первую очередь

🔗 Источник

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

#буст

💡 Tier List технологий фронтенда — что выбрать сегодня и не пожалеть завтра

Кажется, все уже что-то выбирают: одни бегут за хайпом, другие держатся за проверенное. Но где середина? Это видео — попытка расставить всё по местам.

Что в видео:

📍 React, Vue, Svelte, Qwik, Solid.js, Astro, Next.js, Remix, Vite, Webpack и другие

📍 Дается оценка по критериям: актуальность, перспективы, применимость в проде

📍 Обсуждаются реальные тренды 2025 года и что из них стоит внимания

📍 В итоге формируется Tier List — от «обязательных» до «можно забыть»

🔗 Смотреть на YouTube

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

#буст

🧤 Грин-флаги в вакансиях: что отличает хорошего работодателя

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

В статье:

📍 Как распознать нормальную вакансию по формулировкам

📍 Что говорит о зрелости компании: от стажировки до собеседования

📍 Какие детали в описании стека и обязанностей — тревожный звоночек

📍 Почему четкость условий — не роскошь, а базовый грин-флаг

🔗 Читать на Proglib

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

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

#развлекалово

💡 Что нового в веб-разработке: полезные техники и фичи HTML и CSS

📍 7 продвинутых HTML-трюков для улучшения веб-разработки

Наглядные примеры полезных элементов (<figure>, <details>, <dialog> и др.), повышающих семантику и интерактивность.

📍 Коллекция HTML/CSS лайфхаков

Советы по типографике, кликабельности, виртуальным клавиатурам и адаптивности интерфейсов.

📍 HTML и CSS ошибки, влияющие на доступность

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

📍 Магия CSS на практике: советы по вёрстке от гика

Полезные трюки: inset, стилизация без +, улучшение медиа-запросов и кнопок.

📍 CSS в 2025: какие фишки теперь доступны

Актуальные нововведения: вложенность, :user-valid, balance, расширенные возможности форматирования.

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

#свежак

👚 Топ-вакансий для фронтендеров за неделю

Разработчик Javascript — от 150 000 ₽, удаленно (Москва)

Frontend developer (React) — от 180 000 до 250 000 ₽, удаленно (Москва)

Frontend-разработчик — офис (Санкт-Петербург)

Senior Frontend Developer — 4 200 —‍ 6 000 $, удаленно/помощь с релокацией (Грузия)

Frontend-developer — 120 000 - 200 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

🎮 Код из книги: Тестирование Angular-компонентов с использованием Jasmine и Karma

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

Решение: в книге Mastering Angular Test-Driven Development автор предлагает внедрить практики тестирования с использованием Jasmine и Karma.

Пример теста для компонента PercentPipe, который форматирует числа в проценты:

import { PercentPipe } from './percent.pipe';

describe('PercentPipe', () => {
  it('should create an instance', () => {
    const pipe = new PercentPipe();
    expect(pipe).toBeTruthy();
  });
});

Преимущества:

— Обеспечивает высокое качество и стабильность кода.
— Упрощает выявление и исправление ошибок на ранних стадиях разработки.
— Снижает риски при внесении изменений в кодовую базу.
— Ускоряет процесс разработки за счет автоматизации тестирования.

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст

🚀 Новые возможности в React: View Transitions и Activity API

Инструменты предназначены для улучшения взаимодействия с пользователем и оптимизации производительности веб-приложений.

🔄 View Transitions

Этот компонент упрощает добавление анимаций при изменении состояния UI. Он автоматически определяет, какие части интерфейса должны быть анимированы, и применяет соответствующие CSS-анимations.

Пример использования:

<ViewTransition>
  <div>Контент с анимацией</div>
</ViewTransition>

Триггеры анимации:

startTransition(() => setState(...))
useDeferredValue(value)
<Suspense fallback={<Fallback />}>...</Suspense> 

Настройка анимации:

::view-transition-old(*) {
  animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
  animation: 300ms ease-in fade-in;
}

Эти анимации используют новый API startViewTransition, доступный в большинстве современных браузеров.

🔎 Activity API

Этот компонент позволяет скрывать и показывать части интерфейса без потери их состояния. Это особенно полезно для оптимизации производительности при рендеринге больших списков или сложных компонентов.

Пример использования:
анимации:

startTransition(() => setState(...))
useDeferredValue

Это позволяет React эффективно управлять рендерингом и минимизировать ненужные обновления DOM.

⚠️ Функции находятся на стадии эксперимента, и финальный API может измениться.

🔗 Источник

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

#свежак

👓 Как ускорить сборку с Webpack

Когда проект растёт, время сборки может стать серьёзной проблемой. Рассмотрим несколько методов для ускорения процесса с помощью Webpack.

1️⃣ Persistent Caching

Использование файлового кэша позволяет избегать повторной сборки неизменённых модулей.

Как настроить:

cache: {
  type: 'filesystem',
}
➡️ WebPack не пересобирает всё с нуля, а использует кэшированные данные, что сокращает время сборки.

2️⃣ Tree Shaking

Удаление неиспользуемого кода, чтобы уменьшить размер бандла.

Как настроить:

optimization: {
  usedExports: true,
}

➡️ Webpack отслеживает, какие части кода не используются, и исключает их из финальной сборки.

3️⃣ Module Federation

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

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

Как настроить:

cache: {
  type: 'filesystem',
}

➡️

 WebPack не 

➡️ Модульная загрузка помогает минимизировать размер бандлов и ускоряет загрузку.

4️⃣ Минификация с Terser

Минификация и сжатие JavaScript-кода для уменьшения его размера.

Как настроить:

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
}

➡️ Сжатие кода уменьшает его объём и ускоряет загрузку.

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

#буст

Лайф 🤩

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

#развлекалово

❓Как сгенерировать пользовательский путь из PRD

Один из эффективных подходов — использование ChatGPT для генерации пользовательских путей на основе документации продукта.

Промпт:

Generate a user flow based on this PRD. Describe the pages, features, and major states.

Почему это полезно:

➡️ Позволяет быстро перейти от концепции к визуальному представлению интерфейса.

➡️ Помогает организовать мысли и определить основные компоненты интерфейса.

➡️ Подходит для различных проектов и технологий.

🔗 Этот подход был подробно описан в обсуждении на Reddit, где участники делились своими методами использования AI для ускорения разработки.

Пример использования:

Представим, что у нас есть PRD для приложения по доставке еды:

Generate a user flow based on this PRD: An app that allows users to order food from local restaurants, track delivery in real-time, and provide feedback after receiving the order.

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

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

#буст

⭐️ Запускаем кастомные скрипты в WebStorm

В больших проектах рутина часто повторяется — запуск тестов, сборка, форматирование, генерация кода. Автоматизация через кастомные скрипты — лучший способ ускорить работу. Но еще руче — запускать их одним нажатием клавиши.

1️⃣ Создаем External Tool

➡️ В меню: File > Settings > Tools > External Tools

➡️ Добавьте новый инструмент, указав путь к скрипту (например, npm run lint или bash-скрипт) и настройте рабочую директорию

2️⃣ Привяжем горячую клавишу

➡️ Перейдите в Settings > Keymap и в поиске введите название External Tool

➡️ Правый клик → Add Keyboard Shortcut → назначь удобную комбинацию

💡 Комбинируйте запуск скриптов с WebStorm Live Templates и макросами для ещё более мощного ускорения.

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

#буст