TypeScript *

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

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

Тестирование — неотъемлемая часть разработки, особенно если речь идёт о сложных приложениях. Оно позволяет нам быть уверенными в качестве кода и предотвращать неожиданные ошибки. Но важный вопрос, который рано или поздно возникает у каждого разработчика: как балансировать между качественным покрытием тестами и затратами на их написание? И, что ещё более важно, как справляться с рутиной при этом?

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

Эта история — не про рекламу библиотек или продвижение инструментов. Это мой личный опыт борьбы с типовыми проблемами генерации данных в тестах TypeScript. Я решил поделиться тем, с какими сложностями я столкнулся, как привычные подходы из других языков не сработали и к каким решениям в итоге удалось прийти и, возможно, найти новый взгляд на проблему от сообщества.

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

Всем привет.
Статья представляет из себя краткое резюме из моей практики описания Vue компонентов с помощью полноценных jsx шаблонов, то есть, tsx модулей, возвращающих defineComponent.

Как мы все знаем внешний API компонента во Vue разделен, и имеет не только props. Помимо них есть ещё slots и emitters.

основа defineComponent - функция setup. И как вариант всё можно типизировать через хуки defineProps, defineSlots и defineEmits в теле этой функции. Описывать такой способ типизации я не буду - о нём можно почитать и в документации.

Почему я так не делаю? Я просто не хочу захламлять тело setup функции. Мне нравится отделять логику компонента от его внешнего API и декларировать API через свойства defineComponents, отделяя так сказать мух от котлет. И вот тут то как раз и появляются неочевидные моменты, которые я решил немного поанализировав исходники и погуглив.

Типизация свойства props

Привет, Хабр! Я - Frontend Developer в МТС Диджитал. Все чаще и чаще я натыкаюсь на сообщения и комментарии пользователей в различных социальных сетях про Server-Side Rendering.

Обычно эти жалобы о том, кто-то недоволен зависимостью Next.js от Node.js-сервера. Кто-то сталкивается с ограничениями динамического роутинга при статической генерации. Исходя из этого некоторые люди писали в комментариях что-то вроде: "Вы же не ожидали, что SSR-фреймворк решит все проблемы разом?"

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

Небольшой рассказ о том, как у системообразующего банка торчат исходники, и делать с этим что-либо они не собираются.

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

В этой статье я расскажу, как с помощью NestJS, TypeORM и Tensorflow.js создаю виртуальную вселенную, которая “дышит” и развивается. Мы разберём:

Всем привет, с вами Максим Иванов, и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19, вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.

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

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

Если вы никогда не слышали об эффектах или термине "побочный эффект", рекомендую ознакомиться с этой темой для повышения вашего профессионального уровня и технического кругозора!

▍ Я безголовый

Всем нам, разработчикам, приходится сталкиваться с задачей создания тестовых данных. Это могут быть как простые объекты (например, пользователь с именем, email и ролями), так и сложные вложенные структуры: API-ответы, модели базы данных и так далее. Это особенно актуально при написании unit-тестов, когда нам нужны разнообразные данные для проверки разных сценариев.

И вот тут становится понятно, сколько времени мы тратим на эту рутину. Либо вручную создаем объекты, либо используем более простые инструменты, которые не всегда подходят для сложных проектов. Так появился инструмент — библиотека @artstesh/forger, созданная специально для таких задач, чтобы в разы сократить наше время и упростить процесс разработки. Давайте разберем, как она работает и почему это будет полезно.

Привет, Хабр! Меня зовут Алёна, я senior фронтенд-разработчик отдела разработки ПО для розничного бизнеса в Райффайзенбанке. Недавно передо мной встала задача улучшения пользовательского опыта обработки ошибок запросов к бэкенду. Я решила комплексно исследовать эту тему на примере HTTP-клиента Axios.

Если при отправке запросов с помощью Axios возникает ошибка — клиентское приложение получает аргумент, который может быть экземпляром объекта, производного от системного класса Error, или любым типом. Он может содержать много информации и не всегда понятно, что самое важное для определения типа исключения и способа обработки. Поэтому я выделала 4 категории ошибок запросов, сделанных при помощи Axios, которые нужно по-разному интерпретировать.

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

Когда только начинаешь карьеру разработчика, часто гложет сомнение: верно ли я выбрал язык программирования? Может, он уже устарел, или наоборот — слишком новый и не факт, что перспективный? Легко ли будет найти по нему актуальные книги и уроки? Много ли таких неофитов будет вместе со мной обивать пороги ИТ-компаний через год-два? 

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

Помочь с выбором языка программирования призваны рейтинги их популярности. Однако тут легко обмануться. Каждый рейтинг составляется по своей методике и даёт разные результаты (порой — весьма неожиданные). В этой статье я постарался сделать более взвешенную оценку популярности языков программирования (далее — ЯП) по нескольким источникам. Подробнее о них и почему это важно — рассказываю ниже.

Индексы популярности

Всё началось с того, что мне попался на глаза свежий рейтинг актуальности ЯП, где в TOP 10 внезапно ворвался Delphi. Пытаясь разобраться в причинах его внезапной популярности в 2025 году, я стал искать методики составления таких списков и нашёл много любопытного. Как обычно, дьявол кроется в деталях. 

Индекс TIOBE — известный инструмент мониторинга, показывающий динамику интереса к разным ЯП. Он учитывает частоту поисковых запросов, связанных с ЯП. Для этого каждый месяц в Google, Bing, Yahoo! и Baidu отправляются запросы по определённому шаблону, чтобы отсеивать из выдачи мусор и корректно сравнивать статистические данные. Дополнительно в рейтинге учитывается число образовательных материалов о ЯП: количество видеоуроков на YouTube, книг на Amazon и упоминаний на Wikipedia. 

Современные web-фреймворки для реализации управления состоянием используют библиотеки, такие, например, как Redux для React или Pinia для Vue. У традиционной реализации управления состоянием есть недостатки. Store в таком варианте является частью скрипта страницы, и его данные при её перезагрузке теряются. Кроме того, если нам в приложении нужно организовать управление отображением контента в нескольких окнах браузера, оказывается, что традиционный Store не может этого обеспечить.

Бизнес Dodo Brands — глобальный. У нас уже более 1200 точек в 24 странах мира, и эти числа постоянно растут. А значит каждое наше приложение нужно постоянно адаптировать под новые реалии — обновлять вёрстку, добавлять переводы и изображения.

Однако мы работаем не только с софтом, но и с железом — своим и сторонним. Своё адаптируем по тому же принципу, что и приложения, а стороннее — с помощью плагинной системы, которую можно отдать аутсорс-командам. Но что если вашему железу — киоскам самообслуживания — нужна интеграция со сторонним железом — POS-терминалами?

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

Асинхронное управление событиями в Angular-приложениях — одна из основных задач при разработке, особенно если приложение активно взаимодействует с динамическими данными или имеет сложную архитектуру. Зачастую для решения этой задачи разработчики используют подписки и/или промежуточные сервисы. Несмотря на популярность этих подходов, они могут приводить к избыточным зависимостям, высокому уровню связности и сложному коду.

Библиотека @artstesh/postboy предоставляет альтернативный взгляд на эту проблему: она позволяет избавиться промежуточных сервисов и использовать асинхронные события простым и лаконичным способом.

RxJS (Reactive Extensions for JavaScript) — мощный инструмент для работы с асинхронными потоками данных, который используется во многих современных веб-приложениях. Хотя RxJS предоставляет богатую коллекцию операторов, иногда для решения специфических задач бывает необходимо писать свои собственные. Это позволяет избежать дублирования кода и повысить читаемость программы.

Создание своих операторов RxJS может показаться сложным, особенно для тех, кто только начал использовать библиотеку. Однако, фундаментальные принципы их разработки понятны, если погрузиться в механику работы RxJS. В этой статье мы углубимся в то, как создавать собственные pipeable и creation operators, а также рассмотрим практические примеры их применения.

В этой статье я расскажу о настройках TypeScript, определяемых в файле tsconfig.json, которых я использую в своих проектах.

❯ 1. Возможности, не затрагиваемые в этой статье

В этой статье описывается в основном настройка проектов, в которых все локальные модули являются ESM. Мы почти не будем говорить об импорте CommonJS.

Также мы не будем говорить о следующем:

• импорт и проверка типов обычного JavaScript — настройках allowJs и checkJs
• настройка JSX. См. раздел "JSX" карманной книги по TS
• "проекты" (полезно для монорепозиториев): настройка composite и др. См.:
  
  • раздел "Ссылки на проекты" карманной книги по TS
  • статья "Создание простых монорепозиториев с помощью пространств имен (namespaces) npm и ссылок на проекты TS"

Я и сам до конца не знаю, является ли заголовок статьи кликбейтом или нет. Разберёмся в комментариях. Только давайте по-честному! Согласен с тезисами — напиши, что статья огонь, поставь лайк и всё такое. Не согласен — аргументируй, а не просто: «бред»! Есть что добавить (идеи, фишечки) — добро пожаловать в комментарии.

Привет, меня зовут Андрей Шпилевский, и в этой статье я расскажу, почему я делаю тестовое лучше большинства, а также дам советы, как проходить этот этап быстро и максимально эффективно. Тема достаточно большая, поэтому будет разбита на 3 части. Это первая и начну ее я, пожалуй, не с советов: ‘Делай так, спина болеть не будет’, а с лирического вступления, которое, на самом деле, важнее, чем какие-либо пункты.