➡️ Как внедрить наблюдаемость в микросервисное приложение с помощью OpenTelemetry, Jaeger и Prometheus

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

Читать...

➡️ Пишем Realtime для Multiple-page application в микросервисной архитектуре

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

Читать...

⚙️ Интеграция и сохранение выбранного языка пользователя в базу данных в фулстек-приложении на «Angular» и «NestJS»

Пример миграции базы данных для нового поля и добавления функционала на бэкенде и фронтенде. Пошаговый разбор: обновление схемы, логика на сервере и интерфейс для изменения данных.

Читать...

⚙️ Что читали на Хабре в 2024 году: анализ статей с Node.js, Google Sheets и каплей ChatGPT

Рассматриваем анализ данных Хабра за 2024 год: популярные статьи, скрытые тренды и интересные находки. Node.js, нейросети и Google Таблицы в деле!

Читать...

⛔️ Performance budget который все любят на словах и игнорят в жизни

Про performance budget говорят красиво. На созвонах кивают, в доках рисуют цифры, в презентациях всё зелёное. А потом проходит пара спринтов и внезапно выясняется, что бандл потолстел, LCP поплыл, а никто даже не заметил. Я такое видел не раз и почти всегда причина одна и та же.

✅ Как performance budget обычно выглядит в теории

На бумаге всё выглядит аккуратно и логично. Ограничения на размер бандла, контроль LCP, TTI и CLS, лимиты на количество запросов, ожидания по времени рендера. Кажется, что если есть цифры, значит есть и контроль. Но реальность быстро вносит свои правки.

❌ Почему budget умирает почти сразу

Самая частая ошибка в том, что budget вводят как набор чисел, а не как процесс. Написали JS не больше условных 200 KB и разошлись. Никто не проговорил, что делать если лимит превышен, кто за это отвечает и что важнее в конкретный момент новая фича или перф. В итоге цифры есть, а решений ноль.

Вторая боль это отсутствие автоматической проверки. Если budget не проверяется в CI, его просто не существует. Локально у всех всё быстро, а в проде внезапно плюс десятки килобайт и лишние секунды LCP. И самое грустное никто этого не поймал в моменте.

👏 Почти всегда побеждают фичи

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

Ещё одна проблема в том, что budget делают слишком общим. Один лимит на всё приложение выглядит просто, но работает плохо. Лендинг, дашборд и админка живут по разным правилам и ожиданиям. Но budget почему то часто одинаковый для всех.

📣 И финальный гвоздь в крышку гроба это отсутствие прозрачности

Когда лимит превышен, никто не может быстро ответить, чем именно мы его съели. Без понимания причин budget превращается в абстрактную цифру из дока.

⚙ Когда performance budget реально начинает работать

Он перестаёт быть про килобайты и становится про пользовательские метрики. Он проверяется автоматически через CI, Lighthouse или Web Vitals. Он разбит по страницам и сценариям, а не размазан по всему приложению. И самое важное есть чёткое правило, что делает команда если лимит превышен. Performance становится частью Definition of Done, а не красивым бонусом.

📌 Performance budget это не цифры в документации. Это договор внутри команды. Про то, что для нас достаточно быстро и про то, от чего мы готовы отказаться, если стало хуже. Пока этого договора нет, budget будет нарушаться снова и снова, сколько бы цифр вы туда ни написали.

🚪 Frontender's notes

⚙️ Хост директивы: ключ к декомпозиции

Directive Composition API в Angular 15: hostDirectives в @Component/@Directive позволяет автоматически добавлять standalone-директивы, упрощая декомпозицию логики и внедряя новые подходы.

Читать...

⚙️ Что такое fs.promises в Node.js и как его использовать?

fs.promises — это API для работы с файловой системой с использованием промисов, что позволяет писать асинхронный код без коллбеков.

➡️ Пример:

const fs = require('fs').promises;

async function readFile() {
  try {
    const data = await fs.readFile('example.txt', 'utf8');
    console.log('Содержимое файла:', data);
  } catch (err) {
    console.error('Ошибка чтения файла:', err.message);
  }
}

readFile();

🗣️ В этом примере fs.promises.readFile используется для чтения файла асинхронно, делая код чище и проще для обработки ошибок через try-catch.

🖥 Подробнее тут

⚙️ Интернационализация (i18n) бэкенда в Express с использованием Intlayer

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

Читать...

😁 На LinkedIn появилась верификация скиллов вайбкодинга

LinkedIn запартнерился с Descript, Lovable, Relay и Replit — теперь они смогут автоматически оценивать ваш уровень владения инструментом и подтверждать навык, который тут же может отобразиться в профиле. Всего есть несколько уровней вайбкодинга: бронзовый, серебряный, золотой, платиновый и алмазный.

Потенциально это поможет работодателям быстрее понять ваш реальный навык работы с ИИ. И да — апдейт уже выкатили.

✖️ xCode Journal

🧠 Прокачивай мышление через эксперименты

Давно работаешь с одним и тем же инструментом или подходом? Это удобно, но затормаживает рост.

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

👩‍💻 Как за 10 минут создать тестировщик нагрузки для API на Node.js

Почему разработка собственного инструмента для нагрузки на API иногда оказывается лучшим выбором? В статье обсуждается реальный кейс: задачи тестирования производительности, ограничения Postman и сложность JMeter. Узнайте, как и зачем был создан простой и эффективный API-лоадер на Node.js.

Читать...

❌ Client-side кеширование: где выигрываем, а где стреляем себе в ногу

Client-side кеш звучит как халявный апгрейд перфоманса Меньше запросов, интерфейс летает, пользователи довольны. Ровно до тех пор, пока не появляются: «обнови страницу»; «у меня не так, как у тебя»; «в проде вообще какая-то магия». Давай разберёмся, где кеш реально тащит, а где quietly превращается в мину под ногами.

👏 Где client-side кеш — это win

• Read-heavy данные
Справочники, конфиги, словари, фичефлаги. Редко меняются, часто читаются — классический кандидат на кеш.

• Повторные переходы в рамках сессии
Когда пользователь бегает туда-сюда по одним экранам. Кеш в памяти, SWR-подход — и UI ощущается мгновенным

• Медленные или дорогие API.
Если запрос:
— тяжёлый
— платный
— или упирается в rate limit
—Тут кеш уже не оптимизация, а средство выживания

• Offline и flaky network
PWA, мобильный интернет, метро. Без кеша UX просто рассыпается.

⛔️ Где начинаются выстрелы в ногу

• Данные «почти всегда актуальные»
Самый коварный кейс. Сегодня кажется, что можно кешировать. Завтра бизнес приносит real-time и всё ломается.

• Кеш без стратегии инвалидции
Если нет чёткого ответа на вопрос, когда и почему данные устаревают — кеш уже неправильный.

TTL «на глаз» — это техдолг с таймером
Кеширование мутабельных данных. Формы, статусы, состояния процессов.

Особенно весело, когда:
— на сервере данные обновились
— клиент продолжает жить прошлой жизнью

❌ Получаем рассинхрон и баги «через раз»

LocalStorage как универсальное хранилище: долго живёт, не очищается и не версионируется. Идеальное место, чтобы хранить баги годами.

Кеш, про который забыли
Фичу переписали, API поменяли, а старый кеш всё ещё радостно подсовывает старые данные.

⭐️ Что отличает здоровое кеширование

— Явная стратегия инвалидции
— Чёткое разделение: memory / persistent / server cache
— Кеш — это оптимизация, а не источник истины
— Возможность легко сбросить кеш
— Видимые метрики: кеш-хиты и кеш-миссы

📌 Client-side кеш — это не про «сделать приложение быстрее». Это про «сделать его сложнее, но быстрее». Если вы не готовы справляться со сложностями, кеш может стать вашим врагом, а не помощником.

🚪 Frontender's notes

⚙️ Конвертация даты по временной зоне пользователя в «NestJS», а также ввод и отображение даты в «Angular»

Как добавить новое поле в базу данных и связать его с фронтендом? В статье рассказывается об обновлении таблицы Webhook, создании календаря на Angular и настройке работы с временными зонами и локализацией.

Читать...

⚙️ Что такое process в Node.js и как получить доступ к аргументам командной строки?

process — это глобальный объект в Node.js, который предоставляет информацию и управление текущим процессом. Через process.argv можно получить массив аргументов командной строки.

➡️ Пример:

// Запуск: node script.js привет мир
const args = process.argv.slice(2); // Убираем первые два аргумента (node и имя файла)
console.log(args); // ['привет', 'мир']

🗣️ В этом примере process.argv позволяет извлечь пользовательские аргументы командной строки, что полезно для CLI-приложени

🖥 Подробнее тут

💻 Почему все говорят о Kafka?

Хочешь узнать, как обрабатывать миллионы событий в секунду и почему такие гиганты, как Netflix и Uber, без ума от Kafka? Давай разберемся, как этот инструмент может превратить поток данных в золотую жилу для твоего проекта.

Читать...

👩‍💻 Уменьшаем размер образа Docker для приложения Next.js

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

Читать...

👩‍💻 5 библиотек JavaScript, которые повысят вашу эффективность

Представляем 5 полезных, но малоизвестных библиотек JavaScript! Они помогут сэкономить силы и время при форматировании дат, обработке URL-параметров и отладке веб-страниц в мобильном терминале.

Читать...

👩‍💻 Задачка по NodeJS

Создайте небольшое приложение на Node.js, которое симулирует простой чат. Программа должна принимать два аргумента командной строки: действие (send, history) и сообщение. Программа должна сохранять все сообщения в текстовом файле (chat.txt) и уметь добавлять новые сообщения, а также выводить историю чата.

➡️ Пример:

• node app.js send "Привет, как дела?" — добавляет сообщение "Привет, как дела?" в файл. • • node app.js history — выводит историю всех сообщений из файла.

Решение задачи ⬇️

const fs = require('fs');
const action = process.argv[2];
const message = process.argv[3];
const filePath = 'chat.txt';

if (!action) {
console.log('Используйте: node app.js <send|history> [message]');
process.exit(1);
}

// Функция для добавления нового сообщения
function sendMessage(message) {
const timestamp = new Date().toLocaleString();
const formattedMessage = `[${timestamp}] ${message}`;

fs.appendFile(filePath, `${formattedMessage}\n`, (err) => {
if (err) {
console.error('Ошибка при отправке сообщения:', err);
process.exit(1);
}
console.log('Сообщение отправлено.');
});
}

// Функция для вывода истории сообщений
function showHistory() {
fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error('Ошибка чтения файла:', err);
process.exit(1);
}

const messages = data.trim().split('\n');
if (messages.length === 0 || (messages.length === 1 && messages[0] === '')) {
console.log('История чата пуста.');
} else {
console.log('История чата:');
messages.forEach((msg) => {
console.log(msg);
});
}
});
}

// Логика обработки команд
if (action === 'send') {
if (!message) {
console.log('Введите сообщение для отправки.');
} else {
sendMessage(message);
}
} else if (action === 'history') {
showHistory();
} else {
console.log('Неизвестное действие. Используйте "send" или "history".');
}

👩‍💻 4 типичные ошибки разработчиков Node.js

Растущее комьюнити Node.js - свидетельство надежности и эффективности этого инструмента. Однако не всем удается извлечь из него максимальную выгоду. Рассмотрим самые распространенные ошибки разработчиков Node.js.

Читать...

👩‍💻 Пользовательские события CustomEvent

JavaScript CustomEvent расширяют функциональность встроенной системы событий. Проще говоря, они позволяют программистам создавать и обрабатывать события, уникальные для их приложения, и в этой статье мы расскажем о них всё.

Читать...

👩‍💻 Как преобразовать Node.js Buffer в String

При преобразовании между Buffer и String может быть указана кодировка символов. Если кодировка не указана, по умолчанию будет использоваться UTF-8

Читать...