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

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

Итак, начнем!

1. Урлкот

Urlcat — это крошечная библиотека Javascript, которая делает создание URL-адресов очень удобным и предотвращает распространенные ошибки.

Да, вы можете использовать URL API для создания своих URL. Но все же вам придется позаботиться о некоторых деталях самостоятельно, а не просто создавать URL.

Вот почему я люблю эту библиотеку. Это просто «подключи и работай». Вам не нужно изучать сложные шаблоны или тратить часы на документацию.

Итак, не стесняйтесь попробовать: https://github.com/balazsbotond/urlcat.

2. Используйте Hooks-ts

Если вы разработчик React, вы используете хуки (надеюсь). Если это так, вероятно, вам придется много раз создавать собственный хук для очень мелких вещей. Например, для обработки темного режима. Или для события изменения размера окна. Или множество других случаев.

UseHooks — это небольшая библиотека с хорошо закодированными, хорошо задокументированными и полностью типизированными (для пользователей Typescript) крючками для всех этих мелких случаев, поэтому вы можете сосредоточиться на самом проекте.

Проверить это можно здесь: https://github.com/juliencrn/usehooks-ts.

3. Логт

Мне нравится иметь журналы везде, поэтому, когда мне нужно знать, что происходит, я могу их проверить.

И когда я кодирую внешний интерфейс, мне также нужны эти журналы. Но с некоторыми реквизитами:

  • Он должен быть полностью типизирован (чтобы я мог использовать его в Typescript без головной боли)
  • Он должен быть маленьким
  • Он должен иметь красочные метки (чтобы я мог быстро определить тип журнала).
  • Он должен иметь уровни журнала
  • Должен быть какой-то способ скрыть некоторые журналы в соответствии с условиями (например, производственная сборка или нет)
  • Должна быть возможность отправлять эти журналы куда-то еще (например, в Sentry).

Потратив много времени на поиски (и почти начав писать свой код), я нашел Logt, который отвечает всем моим требованиям, а также еще несколько.

100% рекомендуется! https://github.com/sidhantpanda/logt

4. Загружаемые компоненты

Если вы пытаетесь оптимизировать свое приложение React, вероятно, вы используете React.lazy и Suspense для отложенной загрузки компонентов.

Это нормально.

Но есть еще лучшие способы! Например, эта библиотека. Очевидно, что в этой статье я не могу дать полного объяснения, почему вам стоит перейти с React.lazy на эту библиотеку, но не стесняйтесь проверить этот пост у автора.

По сути, несколько ключевых моментов: он поддерживает SSR (рендеринг на стороне сервера), разделение библиотеки и даже полный динамический импорт. Неплохо, да?

И самое лучшее. Это действительно легко использовать. Почти подключи и работай. Итак, попробуйте! https://github.com/gregberge/loadable-components

5. Магазин эмодзи

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

Это не сложно. Но затем вы начинаете получать больше требований: он должен отложенно загружать смайлики, он должен поддерживать интернационализацию, он должен разрешать поиск, он должен разрешить использовать тот же текст запроса, что и Slack…

А это требует времени. Я могу сделать это. Но клиенты обычно предпочитают, чтобы я сосредоточился на самом проекте. Итак… я нашел эту маленькую библиотеку. Красивый и полезный.

Позвольте мне показать вам, Emoji Mart! https://github.com/missive/emoji-mart

Если вы похожи на меня, вы любите находить такие маленькие и полезные библиотеки, простые в использовании и идеально подходящие для интеграции с вашими проектами. Так что не волнуйтесь. У меня уже есть большой список, которым я могу поделиться. Это первые 5 из этой серии. Обязательно подпишитесь на меня, чтобы вскоре получать уведомления, когда я опубликую следующие!

Тем временем…

🌎 Подключаемся!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.