Лучшие инструменты, которые должны понадобиться каждому разработчику

Фото Натан да Силва на Unsplash

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

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

1. бандлефобия

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

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

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

Если вы страдаете от Bundlephobia, как я, вам определенно стоит попробовать это приложение.

URL: https://bundlephobia.com/

2.Клаудкрафт

Cloudcraft - это веб-приложение, которое поможет вам спроектировать и составить бюджет вашей облачной инфраструктуры под названием Cloudcraft. В настоящее время он доступен только для AWS, но в основном я использую GCP, но все же считаю его полезным.

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

Вы можете перейти на вкладку «Бюджет», и она даст вам приблизительную разбивку ваших общих расходов. А поскольку все основные облака имеют одинаковую ценовую модель, фактические результаты очень хорошо переносятся на Azure и GCP.

URL: https://www.cloudcraft.co/

3.Fontflipper

Это приложение создано с использованием angular и firebase, и его единственная цель - помочь вам выбрать шрифты для ваших проектов. В Google есть сотни, если не тысячи бесплатных шрифтов. Но очень утомительно пытаться найти идеальный вариант для вашего дизайна.

Font flipper позволяет добавлять собственную графику, а затем экспериментировать с разными шрифтами. И что мне действительно нравится, так это то, что это действительно сфокусированный и простой пользовательский интерфейс, который никоим образом не отвлекает вас.

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

URL: https://fontflipper.com/upload

4.Фигма

Figma, пожалуй, самое известное приложение в этом списке. Однако я давний пользователь Adobe Illustrator. Для меня переход на Figma означает, что он должен давать как минимум в 10 раз больше ценности, чем любой иллюстратор. И на самом деле он предоставляет это разными способами.

Figma - это первый инструмент дизайна, который помогает рисовать графику и создавать макеты для ваших приложений.

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

Это звучит немного безумно, но я являюсь более продуктивным продуктом в веб-приложении Figma, чем в настольном приложении Adobe Illustrator, и это совершенно бесплатно для моих потребностей в графическом дизайне.

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

Это похоже на набросок в том смысле, что он дает вам все, что вам нужно, и что у вас нет страха и превосходства. Если вы, например, разработчик приложения, вы можете заблокировать различные события, происходящие в элементах, а затем экспортировать свои стили как CSS или как стиль Android или iOS.

URL: https://www.figma.com/

5. бессонница

Он используется для отладки API и называется бессонницей. На протяжении многих лет я работал со многими остальными клиентами, и вы можете использовать те, которые интегрированы непосредственно в код VS. Но я всегда возвращаюсь к бессоннице.

Создаете ли вы REST API или графический интерфейс QL API, это приложение поможет вам организовать весь рабочий процесс.

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

Сила графического QL в сочетании с бессонницей просто дает вам потрясающий общий опыт разработчика.

URL: https://insomnia.rest/

6.VisBug

Это инструмент, позволяющий визуально взаимодействовать с вашим сайтом. Здесь мы можем делать самые разные вещи. Но в основном мы можем измерять элементы, перемещать предметы, изменять их стиль.

И вы можете делать все прямо в браузере, не создавая ни единой строчки CSS.

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

И еще мне очень нравится то, что вы можете искать элементы определенного типа. Например, если вы хотите найти все ссылки на странице, мы можем просто выполнить поиск по ним.

URL: https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en

7. блики

Это еще один инструмент дизайна, но он специально предназначен для создания 2D-векторной анимации. Он похож на Figma в том смысле, что вы можете использовать его для рисования графики.

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

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

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

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

URL: https://flare.rive.app/

Заключение

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

Ссылка: https://www.youtube.com/watch?v=U_gANjtv28g