Введение
Трудно выбрать, что учиться, когда вы начинаете свое путешествие в качестве разработчика Frontend. Есть много источников, курсов, учебных пособий или рамок на выбор. Вы можете запутаться, начав исследование всех выше. Одним из практических подходов является дорога Craftsman, где вы изучаете процесс с помощью инструментов. Я создал список лучших инструментов для разработчика Junior Frontend и объяснил, почему вы должны их использовать. Следуй за мной, чтобы получить больше учебных пособий!
GitHub-это веб-хостинг-сервис для управления версиями с помощью GIT. Он предлагает все функции управления распределенной версией и управления исходным кодом (SCM) GIT, а также добавление других функций. Он предоставляет контроль доступа и несколько функций сотрудничества, таких как отслеживание ошибок, запросы функций, управление задачами и вики для каждого проекта. GitHub также отличное сообщество, где вы находите и сотрудничаете много проектов с открытым исходным кодом.
Это набор инструментов разработчиков, встроенных в браузер Chrome. С помощью DevTools вы можете получить доступ к внутренним интернет -приложению, посмотрите, как оно работает на разных размерах экрана, и изменить любую страницу. Вы можете быстро отредактировать страницы в режиме реального времени и быстро диагностировать проблемы. В конечном итоге это помогает вам создать лучшие сайты и быстрее. Дополнительные сетевые инструменты могут помочь вам оптимизировать ваши погрузки, в то время как временная шкала дает вам знания о том, что делает браузер в данный момент.
React – это популярная рамка JavaScript среди веб -разработки в последние годы. Тем не менее, инструменты разработчика Google Chrome не могут изучить DOM как компоненты React. Не путайтесь ; Существует расширение Chrome, называемое инструментами разработчика React, которое позволяет вам попасть в придурок о том, как данные передаются через компоненты.
Это расширение Chrome помогает разрабатывать ваши веб-сайты с резкостью для каждого пикселя! Это для веб -разработчиков и дизайнеров наценки. PerfectPixel позволяет разработчикам поместить полупрозрачное наложение изображения в верхнюю часть разработанного HTML и выполнять Pixel Perfect Messoning между ними.
Visual Studio Code – это редактор кода номер один для создания и отладки современных веб -приложений и облачных приложений. Он очень настраиваемый, имеет встроенный GIT, огромный список интеграций, мощные функции автозаполнения и отладки. Это мощная многоцветная IDE, очень быстро и просто. Также бесплатно открытый исходный код.
Codepen Это удивительный веб-редактор кода. Вы можете сразу увидеть результаты кода. Это волшебное место для дизайнеров и разработчиков фронта, где люди делятся и комментируют свои навыки фронта. Это отличный источник вдохновения для новых идей и способов кодирования. Редактор используется для: прототипирования новых идей, мгновенное тестирование ошибок, отправка клиентов, на что можно посмотреть, оценивать потенциальные наймы и поиск вдохновения.
GraphQL – это язык запросов для API. В настоящее время это очень модно и признано ведущими техническими организациями. Редактор GraphQL делает понимание схемы GraphQL намного проще. Спланируйте это, связывая визуальные блоки, и наш редактор преобразует их в код! Создайте фальшивый бэкэнд из GraphQL, и вы можете включить свое приложение.
Это менеджер пакетов для JS. Это помогает найти пакеты многоразового кода и собирать их по -новому. Он имеет более 470 000 бесплатных пакетов кода в базе данных, которые будут использоваться вами. Этот инструмент Web Dev является утилитой командной строки для взаимодействия с репозиторием, который помогает в пакете. У него также есть командные функции с вашим частным пространством имен.
Это связки для JavaScript и друзей, который упаковывает много модулей в несколько комплексных активов. Разделение кода позволяет загружать части приложения по требованию. Через «погрузчики» модули могут быть обыкновенными, модулями AMD, ES6, CSS, изображений, JSON, CoffeeScript, меньше, … и ваших пользовательских вещей.
Figma – это приложение для дизайна, но очень модное и хорошо для сотрудничества с дизайнерами. Каждый файл Figma имеет кодовый режим, где разработчик может проверять файлы проектирования. Когда Designer совместно с просмотром файлов с разработчиком он будет иметь доступ к кодовому режиму, где они могут проверять, комментировать и экспортировать, не имея полного редактирования доступа к файлам.
Каждый веб -проект нуждается в правильной обратной связи и тестировании. С помощью этого инструмента вы можете проверить, как ваш сайт работает в соответствии с современными стандартами. Вы можете измерить вещи: производительность, статус PWA, доступность или SEO. Кроме того, вы можете практиковать навыки: например, скорость нагрузки, устойчивость к сети или безопасность данных. Проверьте, как ваш сайт работает с течением времени, и следите за тем, как вы учитесь в своем расписании.
Терминал-это текстовый интерфейс, в который вы можете ввести свои команды. Оболочка берет эти команды и говорит операционной системе выполнить их. Познакомиться с такими инструментами, как GIT из терминала, дает вам больше мощности и гибкости по сравнению с графическим интерфейсом. В конце концов, графический интерфейс представляет собой графическую оболочку перед инструментом командной строки. Будучи «ближе к металлу», это также может помочь вам избавиться от неприятностей на случай, если графический интерфейс застрял или испортится. Это важный инструмент производительности в арсенале разработчика.
- Caniuse.com – Вы беспокоитесь о совместимости браузера для некоторых передовых идей? Попробуйте этот сайт и посмотрите, сможете ли вы его использовать.
- Stackoverflow – Этот сайт не нуждается в объяснении;)
- TinyPng- расширенное сжатие с потерей для изображений PNG
- Compressor.io – другой инструмент сжатия изображения
- Itsion.so – Записи, спецификации, отзывы владельца продукта и планирование.
- Почтальон – при работе с API REST.
Оригинал: “https://dev.to/robmatyszewski/top-tools-for-junior-frontend-developer-49b1”