JavaScript *

Чек-лист для эффективного технического интервью

1. Подготовка: что сделать перед собеседованием

• Определите 3 главных навыка, необходимых для вакансии. Например: «Оптимизация React», «Работа с легаси-кодом (React классы)», «Работа с Redux».

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

• Четко опишите стек технологий и проблемы проекта, чтобы кандидат понимал контекст.

Пример: «У нас проект на React 16.8. Остались классовые компоненты, которые нужно переписать на хуки, и мы используем классический Redux».

2. Структура собеседования

А. Вводная часть (5-10 минут)

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

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

Б. Проверка навыков (30-50 минут)

1. Практическая задача (5-10 минут)

   • Дайте кандидату упрощенную версию реальной проблемы. Например: «Нужно переписать классовый компонент на хуки и подключить его к Redux, а затем оптимизировать рендер».

   • Позвольте кандидату воспользоваться интернетом для поиска информации. Главное, чтобы он показал процесс решения задачи, а не просто копировал ответ.

2. Гибкие вопросы (5-10 минут)

   • В процессе выполнения задачи или после ее завершения (на мой взгляд, лучше после) задавайте вопросы, которые помогут вам лучше понять подход кандидата.

   Пример: «Вы использовали кеширование. Расскажите подробнее, как это поможет нашему проекту?»

3. Финальное обсуждение задачи (10-15 минут)

   • Обсудите решение задачи целиком, что получилось, а что можно улучшить.

4. Если все навыки не уместились в одну задачу, вернитесь к шагу 1.

В. Заключение (5-10 минут)

• Дайте кандидату возможность задать вопросы о проекте.

• Объясните, какие будут следующие шаги, чтобы не оставлять его в подвешенном состоянии.

3. Критерии оценки

Оценивайте кандидата по конкретным показателям, а не по субъективным впечатлениям:

1. Понимание проблемы — видит ли кандидат суть задачи?

2. Процесс решения — как ищет ответ, какие вопросы задает?

3. Качество кода — читаемость, оптимизация.

4. Коммуникация — может ли кандидат объяснить свои решения?

Пример оценки:

• ✅ «Правильно переписал с классов на хуки и подключил Redux» — отличный кандидат!

• ⚠️ «Правильно настроил кеширование, но забыл useCallback в одном месте» — нужно обсудить детали.

• ❌ «Не смог объяснить, почему компонент ререндерится» — потенциальные риски для проекта.

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

Что такое мнемотехники и как их использовать программистам

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

Как это относится к IT-специальностям? Также, как и к любому другому обучению новому. Возьмём для примера изучение языку JavaScript, где будущему программисту нужно понять, чем отличаются методы call, apply и bind. 

Для запоминания можно использовать мнемотехники:

• Call. Коля звонит другу напрямую — передаёт параметры через запятую: call (a, b).

• Apply. Аня присылает список задач — параметры передаются массивом: apply ([a, b]).

• Bind. Бен привязывает себя к таске — создаёт новую функцию с привязанным контекстом, которую можно вызывать позже.

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

Популярные мнемотехнические приёмы

1. Дворец памяти. Мысленно разместите информацию в хорошо знакомом месте: например, на пути от дома до ближайшего магазина. Когда она вам понадобится, просто отправьтесь на воображаемую прогулку по этому маршруту. 

2. Аббревиатуры и акронимы. Составьте из первых букв слов новые слова или фразы. Именно благодаря этой мнемотехнике программисты могут припомнить, что такое KISS, SOLID и DRY.

3. Рифмы и ритмы. Зарифмуйте информацию в стишок, можно самый примитивный. Как пример, стих для запоминания числа Пи (π = 3,1415926): «Чтобы нам не ошибиться, надо правильно прочесть: три, четырнадцать, пятнадцать, девяносто два и шесть».

4. Образные связки. Соедините элементы в единый яркий образ. Допустим, французское слово pomme — «яблоко» — можно связать с таким образом: на помятом яблоке сидит крошечный гном с флагом Франции.

→ Подробнее рассказываем о теме в блоге на сайте.

Обновлён бесплатный учебник по JavaScript. Проект полностью на русском языке. Там собрано всё: от основ синтаксиса до замыканий и ООП, событий, промисов и других сложных концепций. В каждой главе десятки примеров кода — не понять материал просто невозможно. Есть много задач и контрольных как после глав, так и после больших разделов.

SOLID как священная корова? 🤔
Я думал, что пост о «фальшивых сеньорах» пройдёт спокойно — ну, очередной крик души о собеседованиях. 😅 Но нет! Хабровчане увидели слово «SOLID» и решили, что это вызов их святыне. Хотя я ничего плохого про него не сказал — просто отметил, что в React 2025 спрашивают про него по инерции. 😕

Где магия, а где фарс? ✨
Комментатор с саркастичным «быдлокод» (спасибо за реакцию, коллега!) будто подтвердил мою мысль: SOLID — это не религия, а инструмент. 🛠
SRP (Single Responsibility) в React — это о компонентах. Но если ваш «компонент формы» содержит логику, стили, валидацию и даже полёт на Марс, это не нарушение SOLID’а, а просто плохой код. 🌙
DIP (Dependency Inversion) в мире хуков и Context API чаще выглядит как «передать пропс» или «создать useClient», чем как «абстрактный фабричный фасад». 🧩
LSP (Liskov Substitution) в функциональном программировании? Его там просто нет. Или вы верите, что Button и IconButton должны наследоваться от AbstractClickable? 🤔

Если кандидат не может объяснить даже это, а только бормочет о «SOLID — это про ответственность» и использует ChatGPT, это не про принципы, а про некомпетентность. 🙅‍♂️

Про GPT и кандидатов-попугаев 🦜
«Чатжпт вам расскажет» — именно! Но если человек не может пересказать своими словами, он не понимает. А если не понимает, как он будет применять это на практике? 😵

Вывод 📜
SOLID — это хорошо. Плохо — догматично использовать его без понимания, где он нужен, а где создаёт лишние сложности. 🚫

🤡 «Фальшивые сеньоры»: как меня пытались обмануть кандидаты

Кандидат с «идеальной памятью»

Сидит передо мной разработчик. Отвечает на вопросы... странно:

Простые вещи вроде «что такое замыкание» — щёлкает как орешки.

Сложные вопросы — делает паузу на 15 секунд... и выдаёт академический ответ.

Решил проверить на практике:

✅ Теория — 10 из 10

❓ Практика — 6 из 10: простые и типовые задачи легко, рефакторинг с адской болью

❌ Объяснить, что и для чего делал — 0 из 10. Поддержать диалог, хоть как-то отойти от шаблонов — это всё не про таких кандидатов.

Напоминает студента, который выучил билеты, но не понимает предмет. Скорее всего, ему кто-то подсказывал, или он просто зазубрил типовые ответы.

«SOLID? Ну это когда ответственно»

Обычно я не люблю спрашивать про SOLID (кому вообще это нужно в React в 2025?). Но тут поведение кандидата было подозрительным — решил проверить.

Диалог:

— Расскажи про SOLID

— Это принцип единственной ответственности!

— Я жду продолжения

— Всё...

— Больше ничего не помнишь?

— Ну это основная часть....💥

Тут всё еще грустнее, видимо, GPT просто выкинул перед кандидатом 5 принципов без пояснения, что все 5 принципов образуют SOLID.

Так к чему это я:

Иногда люди кажутся хорошими специалистами, но их знания поверхностны. Они не могут объяснить свои действия, поддержать разговор или предложить что-то новое. Такие люди могут подвести в важный момент. Важно отличать настоящих профессионалов от тех, кто только красиво отвечает на вопросы, чтобы собрать сильную команду для решения сложных задач.

Представлен открытый проект ccprompts – это коллекция из 70 команд Claude Code для рабочих процессов разработки программного обеспечения. Команды включают проверку безопасности и могут использоваться непосредственно с Claude Code или адаптироваться для конкретных задач.

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

MoscowJS 67 X A?.Frontend

Приглашаем вас на регулярную встречу фронтенд-сообщества в неформальной обстановке 28 августа. В этот раз — MoscowJS в гостях у Альфа-Банка.

В программе:

• От JavaScript к DeFi: как инженеры могут изменить мир финансов. Спикер: Даниил Швецов, Full Stack Engineer.
  Доклад познакомит JavaScript-инженеров с основами DeFi: ключевыми концепциями, математическими моделями и работой с JS SDK.

• Архитектура микрофронтендов: от А до Single Spa. Спикер: Павел Шлыков, Team Lead Frontend.
  Поговорим о микрофронтендах с нуля: от принципов и базовой реализации до инструментов вроде Module Federation и single-spa. Разберёмся, как всё устроено, и рассмотрим нестандартные подходы.

• Под капотом платформы. Спикер: Антон Марченко, Ведущий разработчик.
  Доклад об опыте сборки платформы из готовых решений и объединения приложений через iframe, Module Federation и webview. Узнаете про выбор подходов и работу с командами.

• Гильдия: место, где разработчик перестаёт быть одиноким кузнецом. Спикер: Владислав Сазонов, Head of Frontend.
  Чувствуете себя одиноким фронтендером? Есть решение — гильдия. В докладе — о том, как этот формат помогает расти, делиться опытом и не выгорать, а также краткий исторический экскурс.

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

Где: г. Москва, Андропова пр-т., 18, к. 3 (офис Альфа-Банка)

Как провести идеально бесполезное собеседование для фронтендера!

Шаг 1: Берем «элитный» шаблон Яндекс.Мультитрека.

Шаг 2: Удаляем всё ценное — оставляем только хаотичный набор вопросов.

Шаг 3: Делаем вид, что это «специально под вакансию» (спойлер: одни и те же 40 вопросов получают все — от стажера до лида).

Главные хиты программы:

— «Назови 5+ способов центрировать div» (ведь React-лид должен уметь это с закрытыми глазами). — «Расскажи про Event Loop как стихотворение» (иначе как проверить лидерские качества?). — «SOLID наизусть, включая историю создания каждого принципа». — Секретный прием: задаем общие вопросы, но с видом эксперта ждем «правильного» ответа (который знает только интервьюер).

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

Гарантированный результат:

• Кандидат либо засыпает, либо пишет гневный пост.

• Ваша компания экономит на зарплатах — никто не доходит до оффера.

• Вы получаете статус «самое запоминающееся собеседование в карьере». Если узнали свою компанию — не переживайте, вы не одиноки в этом увлекательном квесте!

minimal vscode: открываем окна

Нет, не от духоты, ее в видео как раз не будет 🌚️️️️
Видео короткое, динамичное, практичное.

Перед тем как учиться пользоваться vscode, необходимо:

1. Её поставить

2. Научиться её открывать

3. Располагать её на рабочем пространстве

Мой конфиг: https://github.com/sobolevn/dotfiles

В видео поговорили про: hotkey managers, тайлы, всякие красивости для macos.

Менеджеры горячих клавиш:

• jumpapp для Linux: https://github.com/mkropat/jumpapp и https://linux.die.net/man/1/wmctrl

• AutoHotkey для Windows: https://autohotkey.com

• whkd для Windows: https://github.com/LGUG2Z/whkd

• skhd для macos: https://github.com/koekeishiya/skhd

• skhd-zig для macos: https://github.com/jackielii/skhd.zig

Тайловые менеджеры:

• macos: https://github.com/rxhanson/Rectangle мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/config/RectangleConfig.json

• macos более продвинутая альтернатива: https://github.com/ianyh/Amethyst

• самая продвинутая альтернатива для macos: https://github.com/koekeishiya/yabai

• Windows: https://github.com/LGUG2Z/komorebi

• Linux: ТЫСЯЧИ ИХ

Полезности:

• Top Notch для macos: https://topnotch.app

• HazeOver для macos: https://hazeover.com/ru

• Brewfile: https://docs.brew.sh/Brew-Bundle-and-Brewfile мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/Brewfile

Automate Your Daily Tasks in 10 Minutes: A Practical Guide to n8n for Beginners

Until 2022, I thought automation was only large companies. But in 2022 I discovered n8n, and everything changed. Now, I automate routine work, reports, and even whole business processes—sometimes in under 10 minutes. Here’s how it works, what surprised me, and what you can try today.

In 2022, I deployed n8n on a separate VPS to demonstrate the ability to process design data from Revit and show that it's like working in Dynamo or Grasshopper, but for data managers and automation pipelines outside of Autodesk products.

But it was hard to get experts interested in 2022 - at the time, n8n was still in its early stages: there were no Python nodes, no LLM integration, and most workflows took weeks to create, relying on scattered blog posts and incomplete examples on forums.

Fast forward to 2025, and everything has changed.

Today, thanks to native LLM nodes, you can simply ask ChatGPT, Claude, or any advanced AI assistant to generate automation n8n pipelines — whether for validating parameters or producing custom QTO tables — and get ready-to-run workflows in seconds.

Why Bother with Automation?

Let’s be honest: most “office work” is repetitive. Copy-paste, renaming files, sending the same email—again and again. It’s boring and, more importantly, wastes hours every week. For me, automation started as an experiment, but quickly became a must-have. Once you automate your first task, you won’t want to go back.

What is n8n and Why Use It?

n8n (pronounced “n-eight-n”) is a free, open-source tool for automating anything—emails, file operations, notifications, even AI tasks. The best part? No coding needed. You just drag, drop, connect blocks, and press play. It runs on Windows, Mac, or Linux. I set up my first workflow in under 15 minutes.

How I Got Started (And You Can Too)

1. Install Node.js (from the official site, takes 2 minutes)

2. Install n8n with one command

3. Open n8n in your browser (local or online)

4. Start building: drag blocks (“nodes”) to connect apps, add logic, or even call ChatGPT to write emails for you!

Video Tutorial:
Automate Your CAD-BIM Workflows Local with n8n + ChatGPT & Claude | No Code, No Plugins, No Internet

My first workflow? Automating project reports — collecting data, formatting it, and sending it as an email, all triggered by a single button.

Video Tutorial:
Automate Your CAD-BIM Workflows Local with n8n + ChatGPT & Claude | No Code, No Plugins, No Internet

Where the Magic Happens: AI & Templates

The next “wow moment” for me was connecting n8n to AI tools like Claude and ChatGPT. Need to generate text, analyze data, summarize, or respond to messages? Just add a ChatGPT node—no API coding, just your prompt.

Short on time? n8n has a big library of ready-made templates. You can find workflows for almost any need: document processing, cloud backups, database syncs, even advanced stuff like BIM/CAD data processing. Grab a template, tweak it for your needs, done.

Lessons Learned and Tips

• Don’t overthink: Start simple. Even automating one small task (like downloading attachments from email) pays off.

• Debug as you go: n8n makes it easy to see where something breaks—just follow the logs, tweak, and re-run.

• Experiment: The community is active and shares real-life examples. Some of my best workflows came from GitHub repos or the official n8n library.

• Combine tools: I use n8n with spreadsheets, databases, cloud storage, and AI. Everything connects!

Why You Should Try It

After a few weeks, I realized how much time I was saving. Reports that took 30 minutes now take 2. Integrations that seemed impossible (like sending BIM data to a spreadsheet, then to Teams) were suddenly simple.

Automation isn’t just for techies anymore. With tools like n8n, anyone can build and run real workflows—saving hours, reducing errors, and focusing on what really matters.

Приглашаем на бесплатный вебинар «Эффективное использование RxJS в Angular: шаблоны, подходы, лучшие практики».

📅 Дата: 15.07.2025

⏰ Время: 17:00-18:00 (Мск)

Этот семинар углубит ваши знания в RxJS и Angular. Вы изучите, как организовать потоки данных, управлять подписками, избегать утечек памяти и эффективно настроить change detection. Мы рассмотрим полезные RxJS-операторы, частые ошибки и лучшие практики. Обсудим, как выстраивать архитектуру на основе RxJS, использовать AsyncPipe и делить компоненты на умные и глупые.

На вебинаре:

✔️ Как устроен RxJS под капотом.

✔️ Проблемы RxJS в реальных приложениях.

✔️ Tестирование потоков.

✔️ Лучшие практики и архитектурные паттерны.

✔️ Работа с операторами.

✔️ Работа с данными в реальном времени.

✔️ Кастомные операторы.

✍️Записаться

Как немножко хакнуть Мосрег⁠⁠

Всем привет!

При оформлении заявлений в детский сад на детей на uslugi.mosreg.ru столкнулся с тем, что если ранее было подано заявление и нужно какие-то данные в нём поправить, то выбрать год зачисления ребёнка в ДС можно только следующий. То есть, мы подали в 2024, а теперь можно выбрать только 2026 год, потому что текущий нельзя.

Мне показалось это не очень удобным, решил немножко изучить фронтенд сайта и обнаружил, что валидации на простановку года нет :)

В видео подробнее, как обойти ограничение

P.S. На записи не видно контекстного меню в браузере, когда нажимаешь ПКМ, нас интересует последний пункт "Просмотреть код"

Сила RxJS. scan + mergeScan = 'Загрузить еще'

Кнопка 'Загрузить еще' (либо автоматическая подгрузка данных при скролле) довольно часто встречается в проектах и обычно решение связано с большим количеством подписок и переменных.

Как всегда, для оптимизации чего либо нам на помощь приходит великий и могучий RxJS, а в данной ситуации конкретно операторы scan & mergeScan.

Код:

  readonly loadTrigger$ = new Subject<void>();
  private readonly batchSize = 5;

  private readonly posts$ = this.loadTrigger$.pipe(
    startWith(void 0),
    scan((offset) => offset + this.batchSize, -this.batchSize),
    mergeScan(
      (accPosts: Post[], offset: number) =>
        getPosts(offset, this.batchSize).pipe(
          map((newPosts) => [...accPosts, ...newPosts]),
        ),
      [] as Post[],
    ),
  );

1. scan – калькулятор + хранитель состояния для offset:

   • Управляет состоянием загрузки (текущее смещение)

   • Начинается с -batchSize, чтобы первая загрузка была с 0

   • Увеличивает смещение на batchSize при каждом срабатывании

2. mergeScan – волшебный оператор для инкрементальной загрузки:

   • Сохраняет массив накопленных постов

   • Объединяет новые данные с существующими

   • Корректно обрабатывает параллельные запросы (в отличие от обычного scan)

Где полезен этот паттерн?

• Постраничные API (пагинация)

• Бесконечная прокрутка

• Порционная загрузка данных

• Любые сценарии накопления асинхронных данных

scan - https://rxjs.dev/api/operators/scan
mergeScan - https://rxjs.dev/api/operators/mergeScan
Больше об Angular - https://t.me/grandgular

Я сделал таймер Pomodoro с котами

Привет, ребята!
Я создал небольшой сторонний проект — милый маленький таймер Pomodoro с котами под названием Meowdoro.

Это бесплатное расширение Chrome, которое помогает вам оставаться сосредоточенным с помощью техники Pomodoro.

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

Ничего особенного — просто то, что я хотел для себя и решил поделиться.
Буду рад любым конструктивным отзывам или идеям по улучшению!

→ https://chromewebstore.google.com/detail/meowdoro-tracker-pomodoro/gmmcoggmjnbbklphjcbnpfepmagelgkk

Спасибо за чтение! 😺

МойОфис Frontend&UX Talks уже начался!

Самое время смотреть и задавать вопросы спикерам в чате митапа!

Митап посвящен главным вызовам и проблемам в сложных интерфейсах. Спикеры расскажут о самых разных аспектах фротенда в 2025 году: от айтрекинга и других методов исследований до реактивного программирования и СSS-спецификаций.

Сам митап разделен на две категории: JavaScript и UX. В каждой из них, помимо наших специалистов, есть ребята и из других компаний: Лаборатория Касперского, Контур, Alpha Research Center. Всего на встрече будет семь докладов – их расписание можно посмотреть здесь.

Смотрите митап прямо здесь:

Также трансляцию можно смотреть на Youtube и ВК.

Заинтересовало? Тогда скорее переходите в чат митапа. Здесь можно задать вопросы спикерам, и получить раньше остальных доступ к записи выступлений :)

Как студенты с айтрекером изучали наш текстовый редактор

Июнь стал месяцем айтрекинга в UX-команде МойОфис. Сначала у нас прошло совместное исследование со студентами ВШЭ, а в ближайшие дни мы проведем крупный митап, где поговорим о создании и анализе сложных интерфейсов, в том числе с помощью технологий отслеживания взгляда.

Важный анонс: 26 июня пройдет онлайн-митап МойОфис Frontend&UX Talks, на котором JS-еры, дизайнеры, продакты и аналитики соберутся, чтобы обсудить все насущные проблемы и нюансы современного фронтенда. Кроме наших экспертов, на митапе будут ребята из Лаборатории Касперского, Контура и Alfa Research Center!

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

Еще немного о совместном исследовании со студентами:

4 июня в нашем петербургском офисе прошла презентация результатов совместного исследования с лабораторией социальной и когнитивной информатики ВШЭ в рамках учебного сотрудничества. Студенты курса «Айтрекинг в UX-аналитике» провели глубокое тестирование текстового редактора МойОфис 3.4 с обновлённым интерфейсом.

Методология:

• Определили самые востребованные задачи у студентов и на их основе составили задания.

• Использовали носимый open-source айтрекер PupilLabs.

• Провели психологические опросы до и после заданий (спойлер: уровень стресса участников не изменился) и когнитивное интервью после.

Ключевые результаты:

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

2. Получили оценки пользователей: лёгкость и чёткость интерфейса.

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

4. Выявлены новые точки роста для развития продукта

P.S. Большая благодарность Елене Артёменко из лаборатории социальной и когнитивной информатики ВШЭ за эту коллаборацию! А если хотите узнать больше о фронтенде и UX-исследованиях — ждем вас 26 июня на Frontend&UXTalks!

afterEveryRender и afterNextRender

В Angular 20 afterRender был переименован в afterEveryRender, и это очень логично, так как теперь он более четко отражает суть (нейминг решает). Сам afterRender (далее afterEveryRender) и его брат afterNextRender появились в версии 17. Рассмотрим, почему эти два мощных инструмента управления рендерингом — не просто альтернативы ngAfterViewInit, а полноценные хуки жизненного цикла с бесшовной поддержкой SSR!

Это хуки?
Да! Это хуки нового типа, которые выполняются после рендеринга компонента:

• Они не заменяют ngAfterViewInit/ngAfterContentInit, а дополняют их

• Включают гранулярные реакции на рендеры, включая обновления

Почему идеально подходит для SSR?
Главное преимущество: обратные вызовы выполняются только на клиенте!
✅ После гидратации (в SSR)
✅ После первоначального рендеринга (в CSR)
✅ Больше никаких ошибок «документ не определен»

Использование:
constructor() {
// 🚫 Не запускается на сервере
// ✅ Запускается только один раз после загрузки браузера!
// 📊 Идеально подходит для однократной инициализации
afterNextRender(() => {
console.log('Next');
});

// 🚫 Не запускается на сервере
// 🔄 Запускается после каждого цикла обнаружения изменений
// ✨ Отлично подходит для обновлений, зависящих от DOM
afterEveryRender(() => {
console.log('Every');
});
}

Когда использовать?

afterNextRender

• Одноразовые операции (инициализация библиотеки, загрузка данных)

• Безопасная замена ngAfterViewInit для SSR

afterEveryRender

• Отслеживание изменений DOM (измерения элементов, позиции)
  
  ⚠️ Внимание: может повлиять на производительность

Основные выводы

• Интегрировано в систему жизненного цикла Angular

• Автоматический пропуск на стороне сервера - больше никаких хаков isPlatformBrowser!

• afterNextRender - "один раз после рендеринга"

• afterEveryRender - "после каждого обновления"

"Я пока не использовал afterEveryRender в своих проектах - есть ли у вас практические примеры использования? Поделитесь в комментариях!"

Больше об 🅰️ngular в моём Telegram-канале

JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году? 

Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!

Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.

Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.

Всего на митапе будет 7 докладов, где расскажем:

• как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;

• какие свежие css-спецификации могут упростить ежедневный кодинг;

• как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;

• что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)

и многое другое, что поможет в работе со сложными интерфейсами!

Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.

withComponentInputBinding()
Упрощение работы с параметрами маршрутизатора в Angular.

Как было раньше?

1. Создаем переменную/свойство (Signal, BehaivorSubject, Observable, неважно)

2. Инжектим и подписываемся на ActivatedRoute

3. Получаем параметры маршрута

4. Записываем в BS/Signal

😵‍💫😵‍💫😵‍💫

Манипуляций довольно много, но мы все к этому привыкли и это кажется нормальным.

Но с withComponentInputBinding() все стало намного проще:
1. Создаем сигнальный инпут... и...
Вот и все!

Никаких дополнительных манипуляций, и значение «у вас в кармане». Все, что вам нужно, чтобы это работало, — это передать withComponentInputBinding() в качестве аргумента в provideRouter().

Функция не новая (кажется, появилась в Angular 16), но я редко ее видел в проектах.

Немного технической информации из документации:

🔍Маршрутизатор передает данные в input() из:

1. Параметров запроса (?page=1&sort=asc)

2. Параметров пути и матрицы (/users/123;details=true)

3. Статических данных маршрута (data: { role: 'admin' })

4. Результатов резолвера (resolve: { user: userResolver })

🔍 Приоритеты:
Если есть дублирующиеся ключи, данные переопределяются в порядке выше — резолверы имеют наивысший приоритет и перезапишут остальные.

🚩 Важный нюанс
Если в маршруте нет данных для input(), он получит undefined (например, если параметр запроса удален из URL).

ℹ️ Как задать значения по умолчанию?

✔ Через resolver (чтобы данные всегда были в маршруте)
✔ Через transform в input() (если нужно обрабатывать undefined)

Спасибо разработчикам Angular за эту функциональность 🙏.

Больше об 🅰️ngular в моём Telegram-канале

Что происходит с JavaScript-кодом внутри V8?

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

Интересно, что невалидные программы, вроде...

const = = ;

...ещё не выдадут ошибку на данном этапе. Сканер спокойно разобьет нашу программу на токены и отдаст дальше, ведь проверка синтаксической корректности не его зона ответственности. Это зона ответственности Parser, который способен выявить все синтаксические ошибки.

Кстати, одна из ключевых особенностей Parser — генерация Abstract Syntax Tree, которое затем используется для создания байт-кода внутри Ignition. На основе полученных токенов из Scanner генерируется дерево, в котором каждый узел отражает языковую конструкцию: идентификатор, оператор, выражение или функцию.

Например, для кода...

const sum = (a, b) => a + b;

...мы получим следующее дерево:

VariableDeclaration (const)└── VariableDeclarator    ├── Identifier: sum    └── ArrowFunctionExpression        ├── Params        │   ├── Identifier: a        │   └── Identifier: b        └── BinaryExpression (+)            ├── Identifier: a            └── Identifier: b

Об остальном, что происходит на этапах лексического анализа и синтаксического анализа в V8, читайте в статье «Что происходит с вашим JavaScript-кодом внутри V8. Часть 1».