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

Эй, ученик,

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

1. Наслаждайтесь CSS

Честно говоря, хотя я много занимаюсь интерфейсной разработкой, я слишком хорошо разбираюсь в CSS, но вместо того, чтобы создавать собственные стили CSS, я предпочитаю, чтобы этот инструмент работал умно и быстро. Этот очень простой инструмент — мой спаситель в трудную минуту. Он позволяет создавать элементы с помощью простого пользовательского интерфейса и дает соответствующий вывод CSS.

2. Красивая игровая площадка

Prettier — форматировщик кода с поддержкой JavaScript, включая ES2017, JSX, Angular, Vue, Flow, TypeScript и другие. Он удаляет ваш оригинальный стиль и заменяет его стандартным последовательным стилем, придерживаясь лучших практик. Этот удобный инструмент был очень популярен в наших IDE, но у него также есть онлайн-версия — игровая площадка, где вы можете приукрасить свой код.

3. Почтальон

Почтальон — это инструмент, который был в моем наборе инструментов разработчика с самого начала моей карьеры разработчика. Было очень полезно проверить мои конечные точки в бэкэнде. Он определенно заслужил свое место в этом списке. Включены такие конечные точки, как GET, POST, DELETE, OPTIONS и PUT. Вы обязательно должны использовать этот инструмент.

4. StackBlitz

StackBlitz позволяет настроить Angular, React, Ionic, TypeScript, RxJS, Svelte и другие JavaScript-фреймворки одним щелчком мыши. Благодаря этой удобной функции вы можете начать программировать менее чем за пять секунд.

Я нашел этот инструмент весьма полезным, особенно при опробовании фрагментов кода или библиотек в Интернете. У вас не будет времени создавать новый проект с нуля только для того, чтобы опробовать новую функцию. С помощью StackBlitz вы можете просто опробовать новый пакет NPM менее чем за несколько минут, не создавая проект локально с нуля. Красиво, правда?

5. Bit.dev

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

Именно этим занимается Bit.dev. Это позволяет вам делиться повторно используемыми компонентами кода и фрагментами и тем самым позволяет вам сократить накладные расходы и ускорить процесс разработки.

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

Компоненты — это ваша дизайн-система. Создавайте лучше вместе.

Как цитирует Bit.dev, этот концентратор компонентов также подходит для использования в качестве сборщика систем проектирования. Позволяя вашей команде разработчиков и дизайнеров работать вместе, Bit.dev является идеальным инструментом для создания дизайн-системы с нуля.

Bit.dev теперь поддерживает React, Vue, Angular, Node и другие фреймворки JavaScript.

6. МОЖНО ИСПОЛЬЗОВАТЬ

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

У меня было много случаев, когда некоторые функции, используемые в моем приложении, не поддерживались в других браузерах. Я узнал на собственном горьком опыте, что вы должны проверить совместимость браузера. Одним из примеров было то, что в моем проекте портфолио на устройствах Safari не поддерживалась определенная функция. Я понял это через несколько месяцев после развертывания.

Чтобы увидеть это в действии, давайте проверим, какие браузеры поддерживают формат изображения WebP.

Как видите, Safari и IE в настоящее время не поддерживаются. Это означает, что у вас должен быть запасной вариант для несовместимых браузеров. Приведенный ниже фрагмент кода является наиболее часто используемой реализацией изображений WebP для поддержки всех браузеров.

Вывод

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

Спасибо за чтение, и давайте подключаться!

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