⏱️ Быстрые фиксы — самые дорогие

«Сейчас подкручу, потом нормально переделаем». А «потом» обычно не наступает, и костыль становится частью системы.

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

👩‍💻 Обзор наследования в JavaScript

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

Читать...

👩‍💻 Как спрятать любые данные в PNG

Статья объясняет, как спрятать данные в PNG-изображении, используя младшие биты (LSB) пикселей. Рассматривается структура PNG, каналы R, G, B и альфа, а также методы внедрения данных без заметного изменения картинки.

Читать...

👩‍💻 Удаление объектов с дубликатами по ключу

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

Пример:

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Alice' },
  { id: 4, name: 'Charlie' },
  { id: 5, name: 'Bob' }
];

const result = removeDuplicatesByKey(data, 'name');
console.log(result);
// Ожидаемый результат:
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 4, name: 'Charlie' }
// ]

Решение задачи🔽

function removeDuplicatesByKey(array, key) {
const seen = new Set();
return array.filter(item => {
const value = item[key];
if (seen.has(value)) {
return false;
}
seen.add(value);
return true;
});
}

// Пример использования:
const data = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Alice' },
{ id: 4, name: 'Charlie' },
{ id: 5, name: 'Bob' }
];

const result = removeDuplicatesByKey(data, 'name');
console.log(result);

🧠 Способ стабильного создания больших приложений с помощью ИИ

Покажу, как собрать «большое» приложение из независимых модулей (~200 строк) с помощью ИИ: стабильные промпты, чат вместо агентов, бэкенд в Yandex Cloud. Плюсы и грабли.

Читать...

⚙️ Что такое path модуль в Node.js и как он используется?

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

➡️ Пример:

const path = require('path');

const fullPath = path.join(__dirname, 'files', 'example.txt'); // Объединение путей
console.log(fullPath); // Полный путь к файлу

console.log(path.basename(fullPath)); // example.txt (имя файла)
console.log(path.extname(fullPath)); // .txt (расширение файла)

🗣️ В этом примере модуль path используется для создания и анализа путей к файлам, что упрощает работу с файловой системой в Node.js.

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

👩‍💻 Когда не стоит использовать метод find() в JavaScript

Немногие знают истинную ценность Map. Между тем, применение этой структуры данных позволяет повысить производительность и улучшить пользовательский опыт. Особенно она полезна при работе со сложными структурами данных или при необходимости получить быстрый доступ к данным.

Читать...

💬 Добавление поддержки нескольких языков в NestJS и Angular приложениях

В этой статье я добавлю поддержку нескольких языков в NestJS и Angular приложениях, для сообщений в ошибках, уведомлениях и данных полученных из базы данных.

Читать...

⚙️ Четыре пункта, как улучшить код Backend стажера

В статье разобраны распространенные проблемы в коде начинающих разработчиков с конкретными решениями: грамотная инъекция зависимостей, использование Scoped-сервисов, паттерн Generic Repository и создание Stateless-классов.

Читать...

⚙️ Что бы я хотел знать о Postgres, когда начал его изучать

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

Читать...

➡️ HTTP-запросы: структура, методы, строка статуса и коды состояния

Статья объясняет базовые элементы HTTP: структуру запросов, методы для выполнения операций, строку статуса и коды состояния, помогающие понять результат взаимодействия с сервером.

Читать...

🔨 Последний гвоздь в крышку гроба ручного программирования

🫡 Создатель Node.js признал, что эра написания кода людьми закончилась. Полная цитата:

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

🥲 - За что?

✖️ xCode Journal

➡️ Как внедрить наблюдаемость в микросервисное приложение с помощью 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