Введение

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

Сфера

В руководстве будут рассмотрены инструменты, которые все веб-программисты сочтут полезными, но применимые языки включают, но не ограничиваются ими, HTML, CSS и JavaScript. По возможности обслуживаются пользователи Windows, Mac и Linux.

Прокомментируйте ниже, если у вас есть какие-либо отзывы или дополнительные инструменты, которые вы хотели бы увидеть.

Редакторы

Если вы собираетесь заниматься какой-либо разработкой, вам придется проводить много времени перед текстовым редактором. В Интернете существует множество языков для программирования, но давайте сосредоточимся на 3. HTML, CSS и JavaScript и настроим нашу среду для управления ими. Идите вперед и проверьте эти инструменты.

Код Visual Studio | Текстовый редактор

На мой взгляд, Visual Studio Code (или VSCode) - лучший редактор из существующих. Легко использовать и бесплатно, что еще вам нужно знать.



Код Visual Studio - Редактирование кода. Переопределено
Visual Studio Code - это редактор кода, переопределенный и оптимизированный для создания и отладки современных веб-сайтов и облачных сред… code.visualstudio.com



Дополнительно:

  1. Мне нравятся расширения: Rest Client, Code Spell Checker, Debugger for Chrome и Local History,
  2. Но я также добавил ряд расширений из этой статьи Лучшие расширения JavaScript VSCode для более быстрой разработки; например, Bracket Pair Colorizer и Indent Rainbow, и многие другие.

3. При установке VSCode обязательно отметьте ОБА из действий Добавить «Открыть с помощью кода»…; это упрощает открытие VSCode из файлов и внутри папок.

Почетные упоминания

  • Sublime Texts - отличный вторичный редактор, который стоит скачать; например, вы можете использовать его как редактор по умолчанию для Git, и вам не нужно делать все внутри VSCode.
  • Notepad ++ - отличный редактор общего назначения, как и Sublime, который стоит загрузить и добавить в свой набор инструментов. (Только ОС Windows)

Вот хороший обзор Codementor.io, если вы хотите посмотреть на другие мнения.

Контроль версий и менеджер репозиториев

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

Git | Управление версиями

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



Git - установка Git
Если вы действительно хотите установить Git из исходного кода, вам понадобятся следующие библиотеки, от которых зависит Git: autotools… git-scm .com



GitHub | Менеджер репозитория

GitHub - лидер на рынке репозиториев Git и лучшее место для начала обмена и хранения вашего кода.



Создавайте лучшее программное обеспечение вместе
GitHub объединяет крупнейшее в мире сообщество разработчиков для поиска, обмена и создания лучшего программного обеспечения. С… github.com



Дополнительно:

  1. Подключите локальный Git к удаленному GitHub: вам понадобится безопасное соединение между локальной системой управления версиями и удаленным репозиторием. Посмотрите это Видео или прочтите инструкции здесь, на GitHub.

Почетные упоминания

  • GitLab (Git Repository Manager) предлагает бесплатные и частные репозитории. У GitHub также есть частные репозитории, но за них нужно платить.

Вот еще несколько идей из DeployBot-blog и flow.ci

Серверная среда и диспетчер пакетов

Чтобы создать полнофункциональное приложение с использованием JavaScript, вам понадобится среда выполнения JavaScript на стороне сервера. И вам, вероятно, понадобится менеджер пакетов, пока вы работаете с ним.

Node.js | Серверная среда

Node.js построен на том же движке JavaScript, что и браузер Chrome. Он может обслуживать файлы и подключаться к вашей базе данных, используя только хороший старый JavaScript или, если хотите, язык сценариев, соответствующий Спецификации языка ECMAScript.



Скачать | Node.js
Загрузите исходный код Node.js или предварительно созданный установщик для своей платформы и начните разработку прямо сейчас. nodejs.org



Диспетчер пакетов: я сгруппировал серверные среды вместе с диспетчерами пакетов, потому что Node.js поставляется с npm, поэтому я расскажу о них здесь.

пряжа | Менеджер пакетов

У вас уже есть npm с загруженным node.js, теперь продолжайте и устанавливайте yarn. Стандартный npm будет достаточно хорош для начала, но попробуйте yarn as в какой-то момент, чтобы увидеть, нравится ли вам больше, поскольку он должен устанавливать библиотеки быстрее.



yarn
📦🐈 Быстрое, надежное и безопасное управление зависимостями. www.npmjs.com



Также ознакомьтесь с этой статьей npm-vs-yarn, если хотите узнать больше.

База данных

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

Сервер сообщества MySQL | СУБД

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



MySQL :: Загрузить MySQL Community Server
MySQL Community Edition - это бесплатно загружаемая версия самой популярной в мире базы данных с открытым исходным кодом, которая… dev.mysql.com



Дополнительно:

  1. MySQL может быть немного привередливым при установке и запуске, следуйте инструкциям внимательно и постарайтесь не слишком умно вводить пароль в первый раз.
  2. Я рекомендую как минимум установить Server, Workbench и инструмент оболочки / командной строки.
  3. Бесплатная база данных находится под лицензией GNU GPL v2, так что изучите свои варианты, прежде чем переходить к коммерческой сфере.

Издание сообщества MongoDB | NoSQL

Mongo - это не только название планеты из фильма Флэш Гордон, но и название популярной базы данных NoSQL (Not Only SQL), точнее, базы данных документов. MongoDB может кодировать данные в нотации объектов JavaScript (JSON), поэтому импорт, экспорт и манипулирование данными несколько более интуитивно понятны для кодировщиков JavaScript.



Центр загрузки MongoDB
Развертывайте, управляйте и масштабируйте базу данных MongoDB в облаке всего за несколько щелчков мышью. Полностью эластичный и высокодоступный… www.mongodb.com



Дополнительно:

  1. Существует множество вариантов использования как реляционных баз данных, так и систем NoSQL. Подробнее читайте здесь из The Geek Stuff, Stack Overflow и sitepoint.
  2. Как всегда, ознакомьтесь с лицензионной политикой.

Облачные услуги и услуги хостинга

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

GitHub Pages | Хостинг статических сайтов

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



Что такое GitHub Pages? - Пользовательская документация.
GitHub Pages - это служба хостинга статических сайтов, предназначенная для непосредственного размещения ваших личных, организационных или проектных страниц… help.github.com



Heroku | PaaS для динамического хостинга сайтов

Heroku предлагает бесплатную платформу как услугу (PaaS), на которой вы можете разместить динамический веб-сайт. Есть некоторые ограничения, но Heroku по-прежнему остается лучшим вариантом для большинства веб-разработчиков.

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



Начало работы с Heroku с Node.js | Центр разработки Heroku
Пошаговое руководство по развертыванию вашего первого приложения Node и освоению основ Heroku devcenter.heroku.com



Дополнительно:

  1. Развертывание на Heroku может быть сложным, не торопитесь и следуйте инструкциям.

Почетные упоминания

  • Amazon Web Services (AWS) - один из крупнейших поставщиков облачных услуг на планете, вы также можете узнать, как им пользоваться. Для их предложения PaaS существует уровень бесплатного пользования (Beanstalk), но некоторые из сервисов (например, EC2) основаны на часах вычислений, поэтому не запускайте несколько экземпляров одновременно и не используйте функциональные возможности, не ознакомившись с документацией.
  • Google Cloud Platform (GCP), как и AWS, это крупный облачный провайдер с бесплатным уровнем для своего предложения PaaS (App Engine).

Сообщество

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

Переполнение стека | сайт вопросов и ответов

Даже не задавай мне никаких вопросов. Просто зарегистрируйтесь и принимайте участие. Также посетите материнский сайт Stack Exchange.

Quora | сайт вопросов и ответов

Еще один хороший сайт для помощи и поддержки технического сообщества, хотя Quora является более общим, чем Stack Overflow. Кстати, я думаю, это произносится как «Квар-Ру».

Интерфейсы командной строки (для ОС Windows)

Давай будем настоящими. Любой инструмент лучше, чем тупая командная строка cmd.

  1. Cmder | Эмулятор консоли: окна с вкладками удобны
  2. Бабун | Оболочка Windows

Девиз «Толстый старый папа»: Если этот толстый старик справится с этим, то и ты сможешь.

Оставьте комментарий или предложения