JavaScript *

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».

Я устал от форматирования JSON файлов

Я много и часто просматриваю JSON-файлы: от конфигураций сервисов до API ответов и логов. Каждый раз, открывая очередной файл, я форматирую содержимое, чтобы было удобнее читать (ведь JSON не только machine-readable, но и human-readable). И каждый раз я грущу, что все сервисы (онлайн, встроенные средства IDE и даже плагины) предоставляют лишь две крайности: форматировать всё или ничего (минифицировать в одну строку).

Но что, если я хочу отформатировать JSON лишь до определённого уровня? Что, если у меня есть огромный список словарей (возможно, даже глубоких), который при форматировании выглядит как-то так:

[
    {
        "id": 1,
        "name": "Alice",
        "birthday": {
            "day": 5,
            "month": 4,
            "year": 1983
        }
    },
    {
        "id": 2,
        "name": "Bob",
        "birthday": {
            "day": 6,
            "month": 2,
            "year": 1945
        }
    },
    {
        "id": 3,
        "name": "Eve",
        "birthday": {
            "day": 10,
            "month": 11,
            "year": 1978
        }
    }
]

Что, если я хочу оставить каждый словарь в более компактном (не совсем минифицированном) виде? Например, таком:

[
    {"id": 1, "name": "Alice", "birthday": {"day": 5, "month": 4, "year": 1983}},
    {"id": 2, "name": "Bob", "birthday": {"day": 6, "month": 2, "year": 1945}},
    {"id": 3, "name": "Eve", "birthday": {"day": 10, "month": 11, "year": 1978}}
]

Или я хочу, чтобы в каждом словаре развёрнуты были только внешние ключи?

[
    {
        "id": 1,
        "name": "Alice",
        "birthday": {"day": 5, "month": 4, "year": 1983}
    },
    {
        "id": 2,
        "name": "Bob",
        "birthday": {"day": 6, "month": 2, "year": 1945}
    },
    {
        "id": 3,
        "name": "Eve",
        "birthday": {"day": 10, "month": 11, "year": 1978}
    }
]

Да, многие текстовые редакторы вроде Sublime Text или VS Code дают возможность свернуть контент до определённого уровня. Но что, если я хочу оставить файл в этом промежуточном виде и просматривать его прямо в терминале, подключившись по ssh? Или я хочу посмотреть файл на гитхабе с телефона? Да, возможно, мои вкусы весьма специфичны, но в существующих реалиях я вынужден грустно довольствоваться лишь полностью развёрнутым вариантом (или делать это вручную). Встроенные средства форматирования JSON в JS или Python также не предоставляют простой возможности ограничить глубину (либо я так и не научился их готовить).

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

Да, он вряд ли подойдёт, чтобы редактировать на лету гигантские JSON файлы. И он уж точно не пытается стать убийцей какого-либо из существующих онлайн сервисов. В первую очередь он призван решить мою проблему: сделать форматирование JSON чуточку более управляемым. А если и вы сталкивались с подобной проблемой, буду рад, если сервис поможет и вам!

Angular Hack: Цикл без данных (в тэмплейте)

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

Вот мой способ (по крайней мере, я нигде такого не видел):

@for (_ of [].constructor(10); track $index) {
<div class="item"></div>
}

Используется Array.constructor, чтобы создать пустую массив фиксированной длины, который @for может перебрать по индексам.

Плюсы ✅

• Чудо-код (удивит коллег)

• Минимум кода (не нужно объявлять массив в компоненте)

Минусы ⚠️

• Чудо-код (может ненадолго ввести в ступор чающего код человека)

Конечно, можно просто использовать Array.from({length: 10})... но так все делают, не интересно)

Норм тема? Как считаете?

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

⁉️ На вебинаре вы сможете задать вопросы спикеру.

📅 Дата: 13.05.2025

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

На вебинаре:

✔️ История возникновения TypeScript

✔️ Преимущества использования TypeScript

✔️ Пример написания кода на TypeScript

👨‍🎓 Спикер: Кучин Евгений — разработчик на Java и JavaScript.

✍️Записаться на вебинар

Возможно, вам будет интересен курс «Язык программирования TypeScript». Вы освоите TypeScript, изучив типизацию, интерфейсы и классы. Узнаете, как использовать статическую типизацию, интегрировать TypeScript с существующим JavaScript и настраивать окружение разработки. Это поможет сделать ваш код более безопасным и структурированным.

Старт: 19 мая

Цена: 14 900 8 940 ₽ (-40%)

✍️ Записаться на курс

Когда нельзя доверять даже себе

Экосистема JavaScript — обширная, гибкая и насыщенная готовыми решениями. Она позволяет без особых усилий подключать сторонние пакеты — как в браузере, так и на сервере. Но у этой открытости есть и обратная сторона: сторонний код может вмешиваться в ваш собственный. Хорошо, если это происходит явно. Но бывает иначе: кто-то оборачивает ваши функции, переопределяет методы, расширяет прототипы — и тихо выполняет свою «чёрную работу».

В такой среде доверие к собственному коду становится условным. Разработчик ещё способен более-менее контролировать точку входа — HTML-страницу или Node.js-скрипт. Он может доверять тому, что написал сам и вызывает сам. До тех пор, пока не подключит стороннюю библиотеку. А дальше — возможны любые сценарии.

Чтобы можно было доверять своему коду хоть немного больше, я пошёл на эксперимент и по умолчанию встроил "заморозку" всех объектов, создаваемых моим DI-контейнером:

let res = await _composer.create(key, module, stack, this);
if (canBeFrozen(res)) Object.freeze(res);

При запуске node-приложения (или при загрузке кода на веб-страницу) я создаю контейнер и через него получаю нужный объект со всеми зависимостями:

import Container from '@teqfw/di';

const container = new Container();
const resolver = container.getResolver();
resolver.addNamespaceRoot('App_', '/home/user/project/src');
const app = await container.get('App_Main');
app.run();

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

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

Эта идея родилась после прений с коллегой @nin-jin — так что спасибо ему за подброшенную мысль ;) Я реализовал её в коде, опробовал на своих приложениях и вот теперь делюсь результатом.

Опубликовано исследование о том что индексирование сайтов поисковиком (Google) не зависит от того, SPA ли это или же он SSR. Также пару лет назад делал аналогичное расследование и пришел к тому же выводу.

Вообще, мы пришли к идеалу достаточно давно - когда сервер занимается своими делами, а клиент статический, минифицирован, и раздается из CDN для быстроты и без траты ресурсов сервера.

https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

ИИ-ассистенты (промпты) - это тоже low-code. Бизнес-аналитики сами разрабатывают ИТ-продукты. Сайт какой сложности можно разработать без знания JavaScript? Кейс app.2lead.ru

Возможности low-code растут. Бизнес-аналитики сами разрабатывают ИТ-продукты, фактически добавляя к своим обязанностям часть функций программистов. При этом эксперты не прогнозируют, что low-code полностью заменит традиционное программирование в ближайшие годы.

ИИ-помощники (промпты) - это тоже low-code

Чаще всего low-code определяют как создание ПО с помощью графических интерфейсов и настроек, а не через традиционное программирование. Мне ближе более широкое определение: low-code – это системы и платформы, которые предполагают изменение, дополнение кода пользователем, в том числе с применением ИИ-помощников (промптов).

Кейс: Сервисы app.2lead.ru разработаны бизнес-аналитиком

ИИ-ассистенты значительно ускорили разработку сервисов app.2lead.ru, созданных мной на JavaScript - без опыта программирования на этом языке. Это подтверждает возможность разработки ПО силами бизнес-аналитиков, продуктовых менеджеров и так далее. Ранее это была прерогатива только профессиональных программистов. 

Сервисы app.2lead.ru разработаны в конце 2024 года – начале 2025 года. Вошли в топ-5 Яндекса по запросу «калькулятор инфляции». Уже увеличили органический трафик сайта 2lead.ru более чем в 5 раз, без расходов на рекламу. // См. также «Нерекламные методы продвижения» https://habr.com/ru/articles/686736/

Что дальше? Массовое применение таких методов разработки ПО, более совершенные low-code системы и программирование голосом? Считаю, что практику low-code нужно расширять, разрабатывать учебные материалы по этому направлению и т.д. В этих инструментах есть большое пространство для развития.

На картинке — код на JavaScript с ошибкой, который написал специально для Хабра руководитель группы разработки интерфейсов компании «Криптонит» Василий Беляев.

Кто увидел, где ошибка и как её можно решить — пишите в комментариях! А решение этой ошибки оставили под картинкой.

Если запустим этот код, то получим ошибку

Uncaught TypeError: this.clearHistory is not a function

Проблема находится на строчках 11-13 (на картинке)

this.timeout = setTimeout (function () {
        this.clearHistory();
    }, 0);

Когда мы вызываем setTimeout, то вызываем метод объекта window, и меняем область видимости с нашего конструктора на window ( window.setTimeout() ).

Именно по этой причине у нас метод clearHistory пытается вызываться у объекта window ( window.clearHistory() )

Как можно решить эту проблему?

Вариант 1

const MyItem = function () {
    this.clearStorage = function () {
        console.log ('Очищаем хранилища...');
    };
    this.clearHistory = function () {
        console.log ('Очищаем историю...');
    };
};
MyItem.prototype.refresh = function () {
    this.clearStorage();
    this.timeout = setTimeout (() => {
        this.clearHistory();
    }, 0);
};
const mуItem = new MyItem();
mуItem.refresh();

Заменить анонимную функцию на стрелочную функцию. У них отсутствует свой контекст, и они работают в контексте области видимости, включающий их самих.

Вариант 2

const MyItem = function () {
    this.clearStorage = function () {
        console.log ('Очищаем хранилища...');
    };
    this.clearHistory = function () {
        console.log ('Очищаем историю...');
    };
};
MyItem.prototype.refresh = function () {
    this.clearStorage();
    this.timeout = setTimeout (
        this.clearHistory.bind(this), 0
    );
};
const mуItem = new MyItem();
mуItem.refresh();

Явно передать контекст через метод .bind()

Вариант 3

const MyItem = function () {
    this.clearStorage = function () {
        console.log ('Очищаем хранилища...');
    };
    this.clearHistory = function () {
        console.log ('Очищаем историю...');
    };
};
MyItem.prototype.refresh = function () {
    this.clearStorage();
    const self = this;
    this.timeout = setTimeout (() => {
        self.clearHistory();
    }, 0);
};
const mуItem = new MyItem();
mуItem.refresh();

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

А как бы вы решили эту ошибку?

Регулярно на Хабре выходят статьи с рекомендацией использовать moment.js. В комментариях обязательно начинают советовать какой-нибудь dayjs или js-joda, но не потому, что они чем-то сильно лучше, а потому, что первый задепрекейчен авторами.. в пользу luxon.

Что за мания такая у JS-еров использовать раздутые тормозные библиотеки? Есть же быстрый и миниатюрный $mol_time с гораздо более удобным и функциональным API, почти полностью поддерживающим ISO8601, в отличие от всех остальных библиотек.

Что мотивирует людей довольствоваться не самым лучшим решением в индустрии? Я, наверно, странный, но я не могу этого понять.

Полезные ресурсы для начинающего JavaScript-разработчика

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

«Зачем учить JavaScript» — объясняем на примерах, почему без JavaScript не будет современных сайтов и что делает этот язык программирования таким востребованным. Расскажем о преимуществах JS и его перспективах.

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

«Что такое TypeScript и чем он отличается от JavaScript» — у главного языка фронтенда JavaScript есть улучшенная версия — TypeScript. Рассказываем, как он работает и чем отличается от старой версии.

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

Теория — это хорошо, а для практики подойдёт бесплатная часть курса «Фронтенд-разработчик». В ней вы изучите базовый синтаксис HTML и CSS, попробуете размещать блоки на веб-странице, менять шрифт и цвета, а также напишете с нуля простую программу на JavaScript.

Стоит ли идти во фронтенд сейчас? Честный ответ разработчика

Артем несколько лет в сфере (вот его история). Сейчас он разработчик в крупном финтех-проекте. Вот его мысли:

— Да, фронтенд перенасыщен. Фреймворков много, технологии постоянно меняются. Все говорят об одном, но пишут по-разному. Но именно это и держит в тонусе — приходится регулярно обновлять знания. Сожалею ли я о своем выборе? Нет. Всегда любил погружаться в математические задачи, а фронтенд затягивает. Можно сутки биться над багом, ненавидеть его, плеваться… А потом решить — и словить кайф. В такие моменты код полностью поглощает, заставляя забыть о сне и еде.

Стоит ли идти во фронтенд сейчас?

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

🔥 Открыт набор на новый марафон!

Сейчас в Clevertec проходит марафон для начинающих фронтенд‑разработчиков. Это возможность погрузиться в профессию, получить реальный опыт и, возможно, стать частью команды. Участие бесплатное. Успей зарегистрироваться!

Запускаем бесплатный онлайн-марафон по фронтенд-разработке. Будет как в «Рокки» 

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

Как записаться?

Заполни анкету по ссылке в профиле и скинь другу. Заявки принимаем до 26 марта.

Что будет?

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

Это уже четвертый марафон — после каждого наша команда фронтенд-разработчиков растет.

Кого ждём?

Начинающих веб-разработчиков (JS, React), которые уже изучали теорию и хотят прокачаться на практике в условиях, максимально близких к реальному проекту. Главное — желание кодить. Подойдут:

- студенты профильных вузов

- выпускники курсов

- самоучки

Важное условие: приглашаем участников из Беларуси и России.

Что дальше?

После 26 марта отправим на почту инструкции и первые задания. Старт марафона 1 апреля (это не шутка). До связи, Рокки. 

SRE PUB #5 Судный день

Интерактивный стримкаст со зрителями 9 марта в 19:00

Максим будет писать веб интерфейс для вики (с выделением текста и возможностью отставлять инлайн комментарии) с помощью последней версии Copilot agent.
А все мы (включая вас) — токсично (и не очень) комментировать.

Посмотреть нас можно будет на следующих платформах:
Youtube - https://www.youtube.com/@srepubstreamcast
Twitch - https://www.twitch.tv/srepubstreamcast
Telegram - https://t.me/sre_pub

Готовьте попкорн, напитки, хорошее настроение и колкие комментарии.

Пишите в календари: 9 марта, 19:00

База по JavaScript

Если вы только начинаете (или хотите начать) изучать JavaScript, то для вас есть подборка обучающих материалов. Все они доступны бесплатно. Регистрироваться, оставлять контактные данные или оформлять подписку тоже не нужно.

• Как использовать типы данных в JavaScript? Переменные, ввод и вывод информации — изучаем основы, пишем первую программу и разбираемся с базовыми операциями;

• Функции в JavaScript: учимся писать структурированные программы — осваиваем функции и возвращение значений из них, а заодно разбираемся с return и областью видимости в JavaScript;

• Как создавать HTML-элементы в JavaScript — рассказываем, как работать с командами для создания элементов и стилями на странице.

Если вы новичок, после прочтения материалов можете попробовать решить задачу про JavaScript-функцию (чур, не подглядывать в решение).

Новые фичи JS, о которых стоит знать

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

JS развивается каждый год, но многие продолжают писать код, как привыкли, не используя свежие возможности языка. Я стараюсь бороться с этим и внедрять новшества в свою повседневную работу и недавно пошел посмотреть что там нового подвезли в ECMAScript 2024 (ES15). А там оказалось довольно много интересного.

Например, новые методы массивов. Раньше методы вроде .sort() и .reverse() изменяли исходный массив, что могло привести к неожиданным багам.

const arr = [4,1,6,5]
const sortedArr = arr.sort()
console.log(sortedArr) //[1,4,5,6]
console.log(arr) // [1,4,5,6] оригинал также изменился

В ECMAScript2024 (ES15) были добавлены новые методы, которые позволяют работать с копиями массивов не трогая оригинал без дополнительного кода:

const nums = [1, 2, 3];
const reversedNums = nums.toReversed();
console.log(reversedNums); // [3, 2, 1]
console.log(nums); // [1, 2, 3] оригинал не изменился

Точно так же работают новые методы .toSorted() и .toSpliced(). Они делают код более предсказуемым и чистым.

Также, я с огромным восхищением прочитал про Temporal - новый объект для работы с датами и временем. Например, меня всегда поражало , что в Date месяцы индексируются с 0 (январь – это 0), а вот дни месяца начинаются с 1. Temporal фиксит эти проблемы и теперь можно:
✅ Создавать объекты только с датой или только со временем
✅ Удобно складывать и вычитать даты
✅ Работать с часовыми поясами без боли
В общем делать все, для чего мы раньше тащили в проекты всякие moment и day.js.

К огромному сожалению Temporal пока не поддерживается в браузерах, но когда выйдет – работа с датами в JS станет в разы удобнее.

Если вам интересны такие обновления подписывайтесь на мой Telegram-канал!

🔗 t.me/+qbK9ZPuAocI2MWUy

Там делюсь продакшн-опытом,новостями из мира веб-разработки и разбираю реальные кейсы. Подписывайтесь! 🚀

flushSync в React – костыль или спасение?

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

❓ Почему это вообще нужно? (Для тех, кто не совсем в теме)
В React изменения в useState или в useEffect выглядят синхронными, но на самом деле они асинхронны.

Простой пример:

...

const [count, setCount] = useState(0);

console.log(count); // 0

setCount(1); console.log(count); // Всё ещё 0! 😲

...

Кажется, что setCount(1) сразу меняет count, но на самом деле новое значение попадёт в консоль только при следующем ререндере.

То же самое в useEffect:

...

useEffect(() => { console.log("Эффект сработал!"); }, [count]);

setCount(1); console.log("А это после setCount");

...

Лог "А это после setCount" появится в консоли раньше, чем "Эффект сработал!", потому что useEffect выполняется уже после рендера.

Как flushSync меняет поведение?

Обычно React группирует обновления (batching) и откладывает ререндер до конца текущего цикла. flushSync ломает это поведение и заставляет React сразу выполнить ререндер.

function Example() { 
    const [count, setCount] = React.useState(0); 
    const ref = React.useRef(null);
    const handleClick = () => { 
        flushSync(() => setCount(count + 1)); 
        console.log("Высота элемента:", 
            ref.current?.offsetHeight); 
        };

    return (<button onClick={handleClick}>
        Добавить  {count}
    </button>); 
} 

Что тут происходит?
Без flushSync React подождал бы до конца текущего вызова и только потом обновил DOM.
С flushSync обновление происходит немедленно, и console.log видит уже новый DOM.

React нас предупреждает
В документации прямо сказано:

"flushSync – это низкоуровневый API. Используйте его только тогда, когда вам действительно нужно измерить DOM сразу после обновления состояния."

Когда не стоит использовать flushSync?
Если можно обойтись обычными useEffect или useLayoutEffect.
Если batching работает нормально и не мешает.
Если нет необходимости немедленного ререндера (иначе можно уронить производительность).

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

Если понравился пост присоединяйтесь к моему каналу в Telegram по ссылке https://t.me/+qbK9ZPuAocI2MWUy.
Там я делюсь своим опытом и пишу материалы которые будут полезны как новичкам, так и матерым разработчикам.

По итогам жарких обсуждений и критики по поводу медленного кода и плохого fps в тесте вывода на экран графика sin()+noise для Matplolib были внесены усовершенствования и привлечен ИИ для полировки. Исходная статья и код https://habr.com/ru/articles/878002/

Отказ от медленного вывода текста, применение FuncAnimation вместо простого цикла, применение мэджик команды для подключения PyQT backend. FPS поднялся с 12 до 35. Подробности читайте в исходной статье https://habr.com/ru/articles/878002/

м

Написана статья о тестировании (и сравнении FPS) на скорость рисования 2D графиков на python популярных и относительно малоизвестных графических пакетов 2D и 3D (Mayavi 3D, PyVista, Matplotlib, PyQTGraph, Plotly, PyGame, Arcade, pyOpenGL, VisPy, Bokeh) Возникли некоторые технические проблемы и срок публикации пока не ясен (надеюсь, на следующей неделе). Поэтому, заинтересовавшиеся коллеги, прошу подписаться на мой профиль на хабре, чтобы не пропустить публикацию этой статьи. В статье будут видео с отрисовкой в реальном времени 2D графиков и будут измерены FPS. Специально использовался слабенький мини ПК без дискретки. Тем не мене FPS достигал в некоторых случаях 100. Пример видео ниже:

https://habr.com/ru/articles/878002/

Файлы к статье

Признавайтесь, кто любил в детстве пострелять уток? Для скучающих по Nintendo товарищ jslegend написал веб-версию игры Duck Hunt (прежде, чем уходить играть, не забудьте поставить нам лайк) на JavaScript с использованием библиотеки KAPLAY.

Управление максимально простое — стрелять ЛКМ, а кнопка P ставит игру на паузу. Мышкой играть, конечно, не так удобно, но достаточно, чтобы вызвать ностальгическую улыбку.

Бросите вызов уткам и злодейски хихикающей собаке?

Разработчик под ником jslegend представил онлайн версию игры Duck Hunt в HTML5, написанную с помощью библиотеки JavaScript KAPLAY - Duck Hunter.

Игра доступна в браузерах на ПК, управление мышкой.

Как избавиться от всех костылей? Достаточно всего лишь одной функции...

Если считаете, что это кликбейт — настоятельно рекомендуем посмотреть доклад Марата Зимнурова, техлида Авито. В своем выступлении Марат раскрывает все подробности функционального программирования:

• что это такое — функциональное программирование — на практике?

• какие методы оттуда уже проникли в повседневную разработку? 

• какие конкретные недостатки существуют для применения такого способа, в том числе в JavaScript?

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

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

Буквально на днях со мной произошла интересная история, которой я хочу поделится с Вами.

Я состою в одном чатике, где собрались энтузиасты Telegram Mini Apps. Там фаундеры, разработчики и просто интересующиеся обсуждают идеи, делятся опытом и помогают друг другу. Мне очень интересна эта тема, и я планирую запустить что-то своё на базе Telegram.

Но ближе к делу. 2 января в чат зашёл человек в поисках разработчика для своего проекта. Он выглядел весьма взволнованным и объяснил, что помимо долгосрочного сотрудничества ему срочно нужен фикс для его мини-приложения. Это небольшое приложение с игровой механикой, у которого Monthly Active Users (MAU) — около 30 тысяч. Впечатляет, согласитесь! Проблема заключалась в том, что текущие разработчики ушли на праздники и не выходили на связь.

Я решил попробовать помочь просто ради интереса. Сидел за компьютером, пытаясь дописать свою дипломную работу, а мозг требовал смены деятельности. Когда мне дали доступ к репозиториям, я увидел следующее:

• Проект довольно крупный: около 10k строк кода на фронтенде и 5k строк на бэкенде.

• Фронтенд написан на React с использованием Jotai для управления состоянием. Интерфейс реализован с помощью Tailwind CSS.

• Бэкенд — Express.js, взаимодействующий с MongoDB.

Весь проект написан на чистом JavaScript, и вот что меня поразило:

• Полное отсутствие типов. Никакого TypeScript, PropTypes или хотя бы JSDoc. После нескольких лет работы с TS мне было трудно принять, что я не могу быстро понять, какие аргументы ожидаются в функциях. Я думал что все крутые проекты используют TS, а JS только для маленьких проектов, обучения и чего-то не совсем серьезного.

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

• Нарушение принципов DRY. Например, в коде вручную прописывались заголовки для fetch-запросов — везде, где только можно.

• Неоптимальный код. Неправильный вызов хуков, отсутствие lazy loading, дублирование логики и так далее. Я могу продолжать список почти бесконечно.

В общем, код был ужасен. Даже мои студенты, которые только начинают изучать программирование, иногда пишут лучше. Но! Несмотря на всё это, продукт работал, пользователи были довольны, и проект приносил прибыль.

Я быстро разобрался с багом, исправил его и в итоге получил предложение помочь улучшить проект. В ближайшие пару недель как раз займусь этим — заработаю сыну на шоколадки и, надеюсь, сделаю код немного лучше. А теперь — к выводам, которые я сделал (а точнее получил подтверждение в очередной раз):

Выводы:

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

• JS жив и приносит прибыль. Люди продолжают писать серьёзные проекты на JavaScript. Да, TypeScript стал стандартом в моей работе, но это не мешает другим писать на чистом JS и чувствовать себя отлично.

• Маркетинг побеждает. Код, который я видел, был ужасен. Но приложение успешно благодаря сильному маркетингу. Это очередное подтверждение фразы: “Best products never win. But best sales & marketing always win.” Как программисты, мы должны стремиться к чистому коду и хорошей архитектуре, но успех продукта в конечном счёте определяется вовсе не этим.

А что вы думаете о роли маркетинга? Согласны ли вы, что он может перевесить техническую сторону?

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

Объектно-ориентированное программирование и его реализация в JavaScript

Именно так звучит тема нового выпуска нашего открытого курса по JavaScript. В 12 серии вместе с веб-разработчиком Василием Новиковым разберёмся:

• что такое объектно-ориентированное программирование (ООП) и его функции;

• как реализовывать ООП на конкретном примере;

• как применять метод проверки getPrototypeOf.

Больше информации о сериях, а также полезных материалах к ним можно найти на сайте курса JS.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

Немного о резолверах в Angular 19 (теперь в них есть редиректы).

В логике использования гвардов применяется подход:

проверить что-то, если все ок то вернуть true или кинуть редирект на другую страницу

Выглядит достаточно удобно. Но если мне не изменяет память в резолверах такого нет, вместо этого приходилось натягивать Router и рулить navigate или navigateByUrl и т.д.

В 19 же версии нам немного упростили жизнь и резолвер научили в RedirectCommand.

Пример с angular.dev

export const heroResolver: ResolveFn<Hero>= async (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  const router = inject(Router);
  const heroService = inject(HeroService);
  
  try {
    return await heroService.getHero(route.paramMap.get('id')!);
  } catch {
    return new RedirectCommand(router.parseUrl('/404'));
  }
  
};

Ну просто сказка какая-то, а не только сигналы =)

Fusor для React резработчиков за 5 минут

Репозиторий: https://github.com/fusorjs/dom

Как установить ThisArgument вручную?

Пришло время зафиналить тему контекста исполнения: в новом выпуске нашего открытого курса по JavaScript веб-разработчик Василий Новиков рассказывает про способы вызова функции и методы bind, call и apply.

Из одиннадцатой серии вы узнаете:

• как автоматически установить thisArgument для функций;

• как работают методы bind, call и apply при ручной установке;

• как ведут себя стрелочные функции при привязке this через bind, call и apply.

Больше информации о сериях, а также полезных материалах к ним можно найти на сайте курса JS.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

JavaScript для начинающих: бесплатные ресурсы

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

Телеграм-каналы

Задачи по Frontend — опросы, которые помогут разобраться в вёрстке и основах.

Frontend | Вопросы собесов — разбор вопросов с собеседований: HTML, CSS, JavaScript, фреймворки React, Angular и Vue.js.

Будни разработчика — блог с рабочими инструментами, новостями, видео и лайфхаками.

YouTube-каналы

Yandex for Frontend — о командах и технологиях, запис с митапов и конференции.

IT-KAMASUTRA — советы для начинающих и обзоры инструментов. Есть плейлисты по JS: про изучение с нуля и прохождение собеседований.

dcode — туториалы по разработке. HTML, CSS, JavaScript, PHP и Rust.

Книги

JavaScript. Полное руководство — справочник для новичков.

Чистый код: создание, анализ и рефакторинг — принципы и приёмы создания чистого кода с примерами.

Eloquent JavaScript — основы языка от и до.

Статьи

Зачем учить JavaScript — о преимуществах и перспективах языка.

Фронтенд-разработчик — кто это и зачем ему JS.

Backend-разработчик — JS — не только для фронтенда.

React-разработчик — дальнейший путь JS-разработчика, который умеет создавать интерфейсы сайтов с помощью библиотеки React.

Больше ресурсов вы найдёте в статье блога Практикума, а на курсе «Фронтенд-разработчик» мы дадим все необходимые инструменты и обучим навыкам для старта в профессии.

Отладка before-хуков в mocha

Недавно при создании приёмочных тестов для плагина столкнулся с необычной ситуацией. В before-хуке настраивалось окружение: записи в БД, моки зависимостей. В after-хуке происходила зачистка. Отдельно тест работал, но в группе начинал сбоить: оставались следы от предыдущих тестов.

При запуске под отладчиком it-секции пропускались и сразу выполнялись after-хуки. "Игорь Иваныч" (ИИ) объяснил, что mocha пропускает тесты, если в before-хуке есть ошибки. Использование try-catch и несколько часов отладки и рефакторинга убедили меня только в том, что ошибок нет, но it-блоки всё равно пропускаются.

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

before(async function () {
    this.timeout(60000); // 1 min
});

Всё. Это сняло проблему. В mocha по-умолчанию timeout для выполнения before-хука составляет 2 секунды. Ошибкой с точки зрения mocha было то, что разработчик (т.е. - я) тупил в отладчике больше 2 секунд и не оповестил её об этом в явном виде.

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

Дорогие разработчики, как вы относитесь к работе в стартапах?

Если был опыт работы в них, то на каких условиях вы соглашались работать? Процент от компании или зп? Может и то и другое?

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

Было бы шикарно, если бы кто-нибудь смог проконсультировать по разработке