❓ Что выведет этот код?

💡 Подсказка:

Обратите внимание на тип значения внутри условия if и на то, существует ли переменная f вне тела условия.
Здесь используется функциональное выражение в if, а не вызов функции.

Правильный ответ:

Этот код выведет «1undefined».
В условном операторе мы описываем пустую функцию — function f() {}. С описанием всё в порядке, и функция определена корректно, поэтому мы получаем true, а значит — переходим к тому, что делает условный оператор. А вот там уже мы пытаемся получить тип объекта f, но проблема в том, что он определён в условии и не виден внутри фигурных скобок. Его область видимости — условие, которое мы уже проверили, и дальше эта функция нигде не видна, поэтому к единице добавляется сообщение, что переменная не определена.

👍 — если решил/а задачу правильно
🌚 — узнал/а новое

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

#междусобойчик

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

Frontend-разработчик (React JavaScript) — от 200 000 ₽, удаленно (Москва)

Разработчик интерфейсов (Видеопоиск) — 250 000 —‍ 380 000 ₽, офис/гибрид (Москва/Санкт-Петербург)

Middle Backend/Full Stack JavaScript Developer — удаленно (США/Канада)

Middle Frontend-разработчик (React, Next.js) — от 150 000 до 250 000 ₽, офис (Тамбов)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

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

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

#свежак

🎮 Код из книги: Управление состоянием с помощью 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️⃣ Планируйте заранее:

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

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

🔗 Источник

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

#буст

❓ Вопросы подписчиков: какие инструменты использовать для бенчмаркинга JavaScript-кода

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

Вот что он пишет:

«Я хочу сравнить производительность разных реализаций в JavaScript. Какие инструменты для бенчмаркинга вы можете посоветовать? Что реально помогает понять, какой код работает быстрее?»

Что мы советуем:

📍 Для микротестов — используйте Benchmark.js или jsBench me.
📍 Для реального кода — performance now() в браузере и perf_hooks в Nodejs.

Важно: не увлекайтесь синтетикой, тестируйте на реальных сценариях.

💡 Какие бенчмаркинг-инструменты вы используете в своей практике? Делитесь в комментариях!

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

#междусобойчик

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

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

Что в видео:

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

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

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

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

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

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

#буст

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

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

В статье:

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

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

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

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

🔗 Читать на Proglib

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

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

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

🤯 Верстай, но с чувством вкуса: фронтендер или недодизайнер

«Фронтендер, не различающий padding и white space, — это как водитель автобуса, который путает педали. Вроде едет, но лучше бы не садился.»

Почему он должен шарить в дизайне:

🔘 Он ближе всех к пользователю. Если фронтенд — это лицо продукта, то он — его визажист.

🔘 Макет — это теория, браузер — практика. И только фронтендер видит, где фантазия дизайнера не выдерживает реальности DOM’а.

🔘 Чем меньше «просто сверстал», и больше подумал — тем меньше фидбэка и головной боли.

Почему он не обязан быть дизайнером:

➖ Вы фронтендер, а не «один в поле воин». У вас уже есть JavaScript, сборка, баги, архитектура, ревью, дедлайны, CI/CD.

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

➖ Настоящий UX — это ресёрчи, интервью, тесты. А не «давай кнопку синей сделаем, потому что красивее»

❓ Фронтендер — это интерфейсный инженер или дизайнер по принуждению? Нужно ли уметь в Figma — или pull request важнее, чем композиция и контраст?

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

#междусобойчик

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

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

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

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

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

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

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

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

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

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

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

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

#свежак

🔍 Пишем функцию для поиска анаграмм

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

💡 Уточнения:

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

— Возвращаемое значение — true или false.

Примеры:

📍 "Listen" и "Silent" → true

📍 "Astronomer" и "Moon starer" → true

📍 "OpenAI" и "iPenAO" → true

📍 "Example" и "Samples" → false

Пишите своё решение в комментариях ✏️

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

#междусобойчик

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

Разработчик 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 предоставит описание пользовательского пути, включая страницы, функции и основные состояния.

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

#буст