Хороший художник будет инвестировать в качественные инструменты. Хороший веб-разработчик будет использовать лучшие инструменты для выполнения работы. К счастью, единственное значительное вложение, которое вам нужно сделать как разработчику, - это выбор компьютера.
Предполагая, что вы работаете в предпочитаемой среде или иным образом имеете доступ к компьютеру для развития своих навыков и выполнения работы, вы захотите убедиться, что используете лучшие инструменты для оттачивания своего мастерства. Ниже приведены пять основных инструментов, которые должен освоить каждый веб-разработчик, чтобы в долгосрочной перспективе выполнять свою работу наилучшим образом.
1. Инструменты разработчика Chrome
Для начала, когда вы учитесь, использование инспектора и веб-консоли - отличный способ закрепить понимание важнейших основных концепций в режиме реального времени. Эти концепции включают работу с объектной моделью документа (DOM), блочной моделью CSS, а также значительно облегчают отладку кода JavaScript.
Я уверен, что многие из вас знакомы с инструментами Chrome DevTools, но если вы не знакомы, то вот как получить к ним доступ:
На macOS нажмите ⌘+⌥+I (Cmd+Option+I) или Ctrl+Shift+I на Windows, или вы можете нажать F12. Вы также можете перемещаться по меню хрома, но это медленно! Вы должны увидеть экран, подобный приведенному ниже, либо прикрепленный к основному окну браузера, либо выскочивший из него.
Обратите внимание на каждую часть окна инструментов разработчика. Как вы можете видеть, здесь есть несколько вкладок. Вкладка по умолчанию - Elements, а под ней, по крайней мере в моей установке, находится консоль JavaScript.
Возьмите образец HTML-файла (или набросайте что-нибудь вместе), откройте его в chrome и откройте инструменты разработчика, описанные выше. Поиграйте с ним. Попробуйте захватить элементы DOM в консоли JavaScript (REPL, которая позволяет манипулировать представлением страницы на вашей машине) или изменить HTML или CSS на других экранах.
Для работы с DevTools вам не нужно предоставлять собственные веб-документы. Вы можете открыть любую веб-страницу и отредактировать ее. Не бойтесь делать это! Это не приведет к поломке страницы, а просто временно изменит некоторые вещи на стороне клиента, пока вы не нажмете кнопку обновления/перезагрузки.
Попробуйте выбрать элементы и изменить их текст или цвет фона. Если это слишком скучно, вы можете добавить или удалить элементы или полностью изменить макет страницы. Опять же, это не приведет к поломке реальной веб-страницы - изменения будут видны только в веб-браузере на вашем компьютере, пока страница не будет перезагружена. Итак, чего же вы ждете? Попробуйте придумать, как изменить текст этой статьи, если хотите.
Кроме того, вы можете улучшить Chrome Devtools с помощью расширений Chrome (например, The React Developer Tools)!
Позже я выпущу учебник по основным возможностям DevTools. А пока экспериментируйте с ними!
2. Менеджер пакетов Node (NPM)
Вам необходимо знать, как работать с Node.js для создания современных веб-приложений. Важной частью этого является знание базового синтаксиса и команд менеджера пакетов Node (npm).
Вы можете использовать npm для
- инициализировать новый проект Node.js
- установить зависимости, такие как фреймворки, библиотеки и другие инструменты для разработки веб-приложений
- Для обновления установленных пакетов
3. Git/Github
Вы когда-нибудь беспокоились, что из-за небольшого изменения или двух изменений вы сломаете все свое приложение? Что, если ваш жесткий диск выйдет из строя или вы прольете кофе на свой ноутбук? Хотелось бы вам иметь простой способ отслеживать изменения в коде и сравнивать разные версии одного и того же файла? А как насчет возможности легко вернуться к предыдущей версии вашей базы данных, если что-то пошло не так? Хотите ли вы иметь возможность легко делиться своим кодом с другими разработчиками? Еще лучше, если вы хотите быть уверены, что изменения, внесенные другими разработчиками, не сломают все приложение? И хотите ли вы получить все эти замечательные возможности бесплатно или относительно недорого?
Именно здесь на помощь приходит система контроля версий, такая как git. Github - это платформа для размещения ваших проектов. Большинство серьезных разработчиков имеют учетную запись на Github и ежедневно отправляют коммиты в свои репозитории.
Вернемся назад, Джеймс, что значит "отправлять коммиты в репозиторий"? Когда я впервые услышал о Github в колледже, кто-то описал мне коммиты как просто очень функциональную кнопку сохранения. Я думаю, что такое представление не отражает всей силы git-коммита, но, несмотря на это, это хорошая аналогия. Когда вы фиксируете изменения в git-репозитории, вы, по сути, говорите: "git, добавь эту версию моего кода в базу данных и запиши сделанные изменения, но сохрани записи всех предыдущих изменений".
Вы можете сделать много коммитов за один push в удаленный репозиторий. По сути, коммит - это сохранение, а push - это облачная резервная копия локальных сохранений. Это не полная картина, но с git связано многое, что выходит за рамки этой статьи, поэтому ознакомьтесь с документацией по git. Помните, что git и Github связаны, но git - это VCS, а Github - популярный сервис удаленного хостинга git-репозиториев.