Особенность npm, о которой лучше знать 👨🏻‍💻

Данная особенность, называется фантомными зависимостями. Дело в том, что npm использует hoisted модель разрешения зависимостей. Она заключается в том, что все пакеты «всплывают» на самый верх, а дубли с другими версиями остаются на месте, таким образом оптимизируется размер папки node_modules

В то же время такое поведение дает неочевидный эффект: все пакеты, которые «всплыли» становятся доступными для импорта в приложении, хотя они могут быть не указаны как ваши зависимости

Недавно мы нашли фантомную зависимость у себя и избавились от неё на всякий случай. У нас в зависимостях не было пакета lodash, но в проекте он активно использовался. В случае, если после обновления пакета, который позволил нам работать с lodash он перестанет его использовать, у нас сломается не малая часть проекта, звучит не очень

Что мы сделали:

1️⃣ Установили себе оптимизированный вариант библиотеки lodash-es

2️⃣ Добавили автоматизацию для контроля зависимостей (и не только)

#заметки

Как мы научились эффективно работать с техническим долгом 👨🏻‍💻

Очень подробное описание опыта команды Т-Инвестиции в работе с техническим долгом

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

Читать

#статья

Псевдокласс :has 👨🏻‍💻

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

Включаем внутренние отступы при наличии дочернего элемента

<div class="parent">
  <p class="child"></p>
</div>

.parent:has(.child) {
  padding: 15px;
}

Добавляем внешний отступ при наличии соседнего элемента

<div class="sibling1"></div>
<div class="sibling2"></div>

.sibling1:has(+ .sibling2) {
  margin-right: 20px;
}

Подробнее в документации

#заметки #css

Как мы запретили писать код с багами в локализации 🐞

Запись моего доклада о том, как наша команда постоянно натыкалась на однотипные проблемы в локализации — и как шаг за шагом полностью от них избавилась (изменили подход к интернационалищзации, внедрили автоматизированные проверки переводов)

YouTube

VK Видео

#видео

История одного setTimeout ⏱️

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

После недолгого поиска возможных причин мы наткнулись на setTimeout в компоненте аватара, который генерирует две буквы с фоном на основе ФИО. Данный аватар добавлялся два раза для каждой строки таблицы, в которой на момент бага было 200 строк. По итогу оказалось, что 400 setTimeout просто парализовали браузер и он не мог заниматься ничем другим, а когда он освобождался, то страница оживала

По опыту могу сказать, что почти в 90% случаев setTimeout — это бомба замедленного действия, ведь когда его добавляли, компонент аватара использовался в паре мест и проблем не было, а потом мы решили переиспользовать его и столкнулись с этим

Почти всегда можно найти решение без setTimeout, так что будьте осторожны и думайте наперёд!

#заметки #советы

Angular 21 is coming 🎉

Следующую мажорную версию Angular представят уже 20 ноября в 20:00 мск на YouTube

#новости

Метрики нагрузки приложения 🧮

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

RPS (Requests Per Second) — количество запросов, которое приложение обрабатывает в секунду. Метрика показывает не количество пользователей, а количество запросов, один пользователь может за считанные секунды отправить десятки запросов

DAU (Day Active Users) — количество уникальных пользователей приложения за конкретный день

WAU (Week Active Users) — количество уникальных пользователей приложения за конкретную неделю

MAU (Month Active Users) — количество уникальных пользователей приложения за конкретный месяц

#заметки

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад о том, что такое Back Forward Cache и каким образом он может помочь моментально загружать страницы вашего приложения

2️⃣ Доклад про аутентификацию и ту самую грань, когда не нужно пытаться писать её самостоятельно

3️⃣ Доклад о том, что такое конечные автоматы и как они могут помочь при проектировании и написании ваших приложений

#видео

Что я понял, когда написал много тестов 📑

Уже достаточно старая статья, которая давно лежит у меня в закладках. В ней автор делится своим мнением о том, что такое тесты и как их нужно писать. Сам уже написал достаточно много тестов и готов согласиться с каждым пунктом 📋

Некоторые из них:
- Тесты — это документация
- Код должен быть тестируемым
- Тестовое покрытие может врать
- Пиши тесты сразу

Читать

#статья

Секреты продуктивности 👨🏻‍💻

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

1️⃣ Запомнить всё невозможно как бы вы себя не обманывали
Записывайте все детали, на которые сейчас нет времени. Неважно куда: в переписку с самим собой, в заметки, на бумагу, с ошибками, схематично, неважно, лишь бы оно не потерялось и вы вспомнили, что оно значит.
Потом когда появится время, вы сможете быстро вернуться к этому и, вуаля, голова не была забита ничем лишним, но ничего не утеряно и вы ничего не забыли

2️⃣ Добавить в закладки !== узнать что-то новое
Списки с сохранёнными ссылками часто превращаются в свалку, в которую никто никогда не зайдёт. Старайтесь превратить такой список в место, куда хочется вернуться. Для меня базой знаний является этот канал, я постоянно что-то сохраняю в заметки, после итеративно фильтрую материал, а самое интересное и полезное превращаю в пост. Так я всегда изучаю то, что сохранил, знаю где найти самое полезное из этого и плюс ко всему могу помочь другим

#советы

UX-паттерны в проектировании интерфейсов 🧑🏻‍🎨

Я очень люблю делать хороший UX и постоянно пользуюсь различными паттернами, некоторыми из которых хочу поделиться 💬

▪️Схожие элементы должны выполнять одинаковые действия на всех страницах. Если элемент выполняет определённое действие в одном месте интерфейса, то такой же или похожий элемент должен выполнять такое же или похожее действие и в другом месте
Одна и та же кнопка не должна производить оплату и добавлять товар в избранное, это может сбить с толку

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

#заметки #ux

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад про опыт развития цифровой доступности в B2B-корпорации

2️⃣ Доклад про историю чеков и весь их жизненный цикл с современном мире

3️⃣ Доклад, который содержит в себе огромное количество советов по автоматизации рабочих процессов

#видео

Узнаём установленные версии пакетов 👨🏻‍💻

Скорее всего у вас в package.json при указании версий используются не конкретные версии, а версии с указанием некоторых спецификаторов (про спецификаторы рассказывал тут, а про семантическое версионирование тут)

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

Для этого в npm используется команда

npm list --all --depth=0


#заметки

Для чего нужны enum в TypeScript 🤔

Мы каждый день встречаемся с enum в коде, но не всегда задумываемся, а правильно ли мы их используем и могут ли они помочь ещё где-нибудь

Автор статьи поделился тем для чего они нужны, во что они компилируются, как ими можно пользоваться и как делать это правильно 👨🏻‍💻

Читать

#статья

Изменение структуры сборки Angular приложения 🗂

При обновлении Angular до 18 версии произошло изменение, которое нельзя оставить без внимания

В связи с поддержкой SSR и развитием гибридного рендеринга изменилась структура сборки приложения. Раньше всё лежало в условной папке dist/, а теперь в ней появляется развилка в виде двух папок server/ и browser/

Учитывайте это и не забудьте поправить пути в Dockerfile и где-либо ещё 👨🏻‍💻

#заметки #angular

Как читать книги и помнить всё 📚

За время своей профессиональной деятельности я прочитал уже не один десяток книг и прямо сейчас могу вспомнить что нового я узнал из каждой

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

В комментариях прикреплю пример заметок по книге «Теоретический минимум по Computer Science. Все, что нужно знать программисту и разработчику». Если интересно почитать заметки по другим книгам, которые я выкладывал с #книги - пишите

#советы

Подборка докладов с различных мероприятий 🎤👨🏻‍💻

1️⃣ Доклад, в котором на нескольких примерах из реальной жизни показаны практики, которые позволят точнее работать с типами и повысить типобезопасность всего кода

2️⃣ Доклад, про весь путь дизайна упаковок товаров в Самокат

3️⃣ Доклад о том, как искать места для оптимизации и какие действия предпринимать с практическими примерами оптимизации страницы отплаты ЮКассы

#видео

«Новые правила деловой переписки», Максим Ильяхов, Людмила Сарычева 📓

Хорошая книга про базовые правила гигиены в деловой переписке ✍🏻

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

🇷🇺 Скачать на русском

#книги

Коллеги-фронтендеры, с наступающим! 🎄👨🏻‍💻

Релиз New Year 2026 v1.0 🎉

New features:
- Добавлен праздничный background: holiday-mood;
- В систему заложены компоненты Luck.tsx и Money.tsx
- Экспериментальная фича Work-Life-Balance перешла в стабильную версию

Bug Fixes:
- Исправлен баг, при котором Monday наступал слишком резко после Sunday
- Исправлена утечка мотивации в конце квартала (патч coffee-fix)
- Исправлен критический баг procrastination-loop
- Удалён небезопасный метод overwork()

#непрограммирование

Предзагрузка модулей Angular 👨🏻‍💻

У Angular Router есть механизм, с помощью которого можно повысить скорость открытия страниц. Происходит это за счёт определения стратегии предзагрузки модулей приложения

provideRouter(
  appRoutes,
  withPreloading(SelectedStrategy)
)

Доступные значения для SelectedStrategy:

NoPreloading (по умолчанию) – значение, при котором lazy-модули не предзагружаются и будут загружены непосредственно при обращении к ним

PreloadAllModules – значение, при котором после загрузки main.js будут загружены абсолютно все lazy-модули. Подходит для небольших и средних приложений

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

Документация

#заметки #angular