Front-end веб-разработка — захватывающая область с растущим спросом и высокооплачиваемой карьерой. В то же время в веб-домене ведется большая работа, которая позволяет веб-разработчикам работать более эффективно.
Ниже мой распорядок дняФронтенд-тренинг12 инструментов, которые часто используются в разработке, доступны всем, в надежде быть полезными для всех.
Примечание переводчика. Эти инструменты являются расширениями Chrome (также применимы к браузерам на основе Chromium, таким как Microsoft Edge, Opera и т. д.), а число после названия — это количество загрузок.
1. Wappalyzer
Этот инструмент позволяет вам понимать, что используется сайт, то есть его система управления контентом, платформа электронной коммерции или инструмент автоматизации маркетинга. Изучение того, как создать сайт, это отличный инструмент.
Он также создает список веб-сайтов, использующих определенные методы, которые могут помочь вам понять, как структурировать веб-сайт вашего клиента. Я использую этот инструмент бесчисленное количество раз при подготовке к большим проектам.
2. Window Resizer
Адаптивный дизайн — одна из важнейших особенностей современных веб-сайтов. Вам нужно проверить, что ваш сайт просматривается на самых разных устройствах. Я использую Window Resizer для изменения размера окна веб-браузера, чтобы имитировать различные разрешения экрана.
Затем вы можете увидеть, как ваш макет будет выглядеть при определенном разрешении. Вы можете настроить разрешение, установить ширину и высоту окна, положение окна и т. д.
3. Marmoset
Часть работы программиста состоит в том, чтобы показать свой код клиенту или руководителю, но обычные скриншоты могут быть не такими привлекательными, поэтому вам нужно воплотить их в жизнь. Я использовал Marmoset, чтобы сделать несколько крутых снимков моего кода и поместить эти снимки на слайды, чтобы произвести хорошее впечатление.
Излишне говорить, что мои слайды с кодом совсем не скучны. Я начал возиться с шаблонами и цветовыми темами, чтобы сделать свои презентации более запоминающимися.
4. Web Developer Checklist
Как фронтенд-разработчик, легко забыть обо всем, что нужно сделать. Когда вы спешите закончить проект раньше установленного срока, вы, вероятно, пропускаете важные шаги. Это контрольный список веб-разработчиков Toptal, который поможет вам сэкономить время.
Я использую Контрольный список веб-разработчика, чтобы убедиться, что я учитываю все самое необходимое в каждом проекте. Он предоставляет контрольный список наиболее важных шагов в веб-разработке переднего плана. Он также анализирует веб-страницы на наличие нарушений передового опыта, чтобы вы могли их исправить.
5. Code Cola: Source Code Viewer
Если вы используете Chrome и хотите редактировать CSS на странице, вы можете использовать функцию проверки элементов, но она может быть слишком гибкой. расширение Chrome, которое намного проще в использовании.
Это лучший редактор CSS для Chrome с особенно удобным интерфейсом для начинающих. Я использовал его много раз, пытаясь редактировать CSS на своих веб-страницах.
6. CSSViewer — 100 000+
CSSViewer отлично подходит, если вам просто нужно просмотреть свойства CSS на веб-странице. Просто щелкните значок и наведите указатель мыши на любой элемент, который хотите проверить, чтобы увидеть его свойства CSS.
Я обнаружил, что это быстрее и проще в использовании, чем элемент Inspect в Chrome, из-за его функции наведения.
7. JSONView
JSON часто используется на веб-сайтах, связанных с передачей данных, и любой разработчик внешнего интерфейса должен освоить его и быть знакомым с ним. При работе с JSON часто необходимо просмотреть и проверить документ JSON на странице.
JSONView — простой инструмент. С годами я понял, что простота превыше всего, и нет ничего проще, чем JSONView.
8. Lighthouse
Примечание переводчика: Lighthouse уже интегрирован в Google Chrome (или Microsoft Edge), отдельная загрузка не требуется.
Сегодня автоматизация становится все более необходимой для фронтенд-разработки. Lighthouse — это инструмент автоматизации с открытым исходным кодом для улучшения качества веб-страниц. Вы можете использовать его для определения производительности страницы, доступности, SEO и многого другого.
Теперь я не разрабатываю интерфейсные проекты без использования Lighthouse. Это помогает мне улучшать мои веб-страницы различными способами.
9. Clear Cache
Всякий раз, когда вам нужно очистить кеш в вашем веб-браузере, вам обычно нужно перейти на страницу настроек вручную. Это задача, которую фронтенд-разработчики часто выполняют для тестирования веб-страниц, над которыми они работают.
Сделайте это с расширением Chrome, гораздо эффективнее. Я использую расширение «Очистить кеш», которое можно сделать одним щелчком мыши и не тратить драгоценное время.
10. Cookie Manager
Наличие хорошего диспетчера файлов cookie — еще один ключевой инструмент для разработки интерфейса, особенно когда ваш веб-сайт обрабатывает данные. Сделайте процесс диспетчера файлов cookie проще и эффективнее.
Есть много менеджеров файлов cookie, и я нашел этот, который подходит для моего рабочего процесса. Он предназначен не только для разработчиков интерфейса, но и для веб-пользователей, заботящихся о конфиденциальности.
11. LiveReload: Preview Tool
Возможно, вы захотите точно знать, что ваша веб-страница делает за кулисами, например, какие файлы она изменяет во время использования. LiveReload — отличный инструмент для предварительного просмотра.
Я использую LiveReload, чтобы точно видеть, что делает моя страница. Это дает мне лучшее понимание того, как работают мои веб-страницы. Если что-то пойдет не так, что я могу сделать.
12. Postman
Наконец, давайте посмотрим на API. Сегодня фронтенд-разработчикам приходится иметь дело с API для интеграции страниц с различными веб-сервисами. В целом, написание кода для него — не самое простое занятие, поэтому вам нужен инструмент, который позволит вам быть более эффективным.
Это отличный инструмент для упрощения процесса создания API, а также для совместной работы в команде. Ни я, ни моя команда не знаем, как разрабатывать API без использования Postman.