В началото да научите как да пишете код може да бъде много смущаващо, но тъй като четете това, можете да се поздравите, че сте по-смели от всички хора, които са се отказали, преди дори да започнат. Сериозно, има много. В тази статия ще разгледаме настройването на основните инструменти, на които уеб разработчиците от всички нива на умения разчитат ежедневно. Това са първите стъпки, които ще трябва да предприемете, за да започнете да създавате уебсайтове на вашия лаптоп.

Имайте предвид, че тези инструкции са насочени към OSX, но трябва да се преведат на Windows с малко гугъл.

Преди да започнем, искам да подчертая това ръководство, защото често ще се свързвам с него в цялата статия: nicolashery/mac-dev-setup

Все още ще се позовавам на това, когато настройвам нови настолни компютри за разработчици. Това е масивно сътрудничество с насоки от няколко разработчици. Може обаче да е малко остаряло. Важно е обаче да не се опитвате да правите всичко, което обяснява, ако тепърва започвате, може да се изгорите с неща, които няма да ви трябват с години. Препоръчвам ви просто да го направите справка, когато решите, че искате да започнете нещо ново и трябва да настроите някои инструменти. В крайна сметка ще преминете през повечето от стъпките за настройка, които те обясняват, но те няма да имат значение, докато не започнете да разработвате с тези инструменти, така че първо научете кода, който искате, след което се позовавайте на това, когато искате да настроите нещо ново.

Предпоставки

XCode

Ако все още не сте настроили това, ще трябва да го направите, преди да направите каквото и да било.

Инсталирайте XCode от App Store:

https://apps.apple.com/us/app/xcode/id497799835?mt=12

Можете също да посочите mac-dev-setup#x-code

Основни инструменти

Двата инструмента за разработка, които използвам най-често, са текстов редактор или IDE (интерактивна среда за разработка) и терминал.

IDE

https://code.visualstudio.com/

Използвал съм няколко IDE / текстов редактор през годините, включително Atom и Sublime. Бяха ми любими в миналото, но сега VSCode рита всички задници, така че определено бих използвал този. Обикновено отварям VSCode от „Терминал“. Просто следвайте стъпките за инсталиране на уебсайта. Разгледайте уебсайта и за други ръководства, като например https://code.visualstudio.com/docs/languages/html

Можете също така да посочите mac-dev-setup#visual-studio-code

Терминал

https://www.iterm2.com/

Mac OSX идва с вграден терминал, можете да го отворите с Spotlight (cmd + интервал, след което потърсете „Терминал“). Не е много хубав терминал обаче. Бих препоръчал да инсталирате ITerm. Отново просто следвайте стъпките за инсталиране на уебсайта. Прегледайте документацията на уебсайта, за да научите как да използвате това (например вижте https://www.iterm2.com/documentation-highlights.html)

Можете също да посочите mac-dev-setup#iterm2

Използване

Сега можем да създадем малък уебсайт с помощта на тези 2 инструмента.

1. Създайте директория на проекта

Обикновено пазя всичките си проекти в директория „работно пространство“, така че ще го направим тук:

Отворете терминал и стартирайте:

mkdir -p ~/workspace/my-first-project

Това ще създаде директория в ~/workspace/my-first-project.

Ако сте любопитни за някакви терминални команди, можете да стартирате:

man <command>

eg

man mkdir

Това ще отвори „ръководството“ за тази команда. Някои скриптове, които инсталирате по-късно, предпочитат вместо това флаг „--help“:

<script> --help

eg

code --help

Ще покаже помощната информация за командния ред на VSCode.

2. промените в новата директория

За да отидете в директорията, която току-що създадохте:

cd ~/workspace/my-first-project

Сега ще бъдете в тази директория за тази терминална сесия.

Sidenote ~ се отнася до директорията „$HOME“ на вашия компютър.

Можете да видите в коя директория се намирате в момента, като изпълните:

pwd

pwd или „работна директория за печат“ показва пълния път на вашия терминал.

3. създайте файл index.html

От ~/workspace/my-first-project (в момента трябва да сте там), изпълнете:

touch index.html

Това ще създаде извикване на файл index.html на адрес ~/workspace/my-first-project/index.html

4. Отворете VSCode

След като инсталирате VSCode, надяваме се, че имате налична команда „код“. тичам:

code .

За да отворите текущата директория във VSCode. трябва да видите вашия файл index.html там.

Трябва да можете да започнете да го редактирате веднага.

Напишете малко текст в този файл, не е необходимо да е правилен html, за да демонстрирате това. Например, просто напишете „Hello World“ и запазете файла (cmd+s).

5. Отворете уебсайта си във вашия браузър

За да видите какво сте направили, трябва да можете просто да отворите този файл в браузъра си, без да стартирате уеб сървър. тичам:

open index.html

Това трябва да отвори браузъра ви с прозорец и текст, който сте написали във вашия файл index.html. Ако това не работи, можете да намерите пътя на файла и да го поставите в браузъра си. Първо изпълнение:

pwd

За да получите пълния път на файла. Трябва да е нещо като „/Users/‹your-username›/workspace/my-first-project“

Копирайте този път на файла и добавете „file://“ в началото и „/index.html“ в края, след което поставете всичко това в URL адреса на вашия браузър. Трябва да изглежда така:

file:///Users/<your-username>/workspace/my-first-project/index.html

забележете, че има 3 “/” след “file:” (“file:///”).

Сега можете просто да се забавлявате, като пишете html, css и js в този файл index.html. Ако импортирате други файлове, използвайте относителен път. Например, ако искате да импортирате файл „style.css“ във вашия „index.html“:

създайте файла “style.css” (с VSCode или като стартирате “touch style.css”).

Добавете връзката с относителен път към вашия файл index.html, вътре в таговете „‹head›“:

<link href=”style.css” rel=”stylesheet” />

В случай, че имате нужда от помощ за структуриране на html, това ще бъде пълен html документ:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <title>My First Project</title>
    <link href=”style.css” rel=”stylesheet” />
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Сега, ако опресните браузъра си, трябва да импортирате style.css. За да потвърдите това, можете да добавите това към вашия файл style.css:

h1 {
 color: red;
}

Други важни инструменти (по избор)

Мениджъри на пакети

Мениджърите на пакети се използват за инсталиране на пакети от „регистър“. Пакетите могат да бъдат помощни програми или зависимости, които използвате в проекти. Има различни мениджъри на пакети за всеки кодиращ език и някои за други цели. Не е нужно да се тревожите за тях сега, ако просто си играете с HTML и CSS, но в крайна сметка ще трябва да ги използвате.

Домашно производство

https://brew.sh/

Бих инсталирал този, дори ако все още не пишете javascript. Това е основният мениджър на пакети за Mac OSX помощни програми. Повечето помощни програми са достъпни за изтегляне от тук с помощта на терминалната команда „brew install ‹package›“. Ако инсталирате homebrew (като следвате инструкциите на уебсайта), ще имате налична командата „brew“.

Имайте предвид, че може да се наложи да затворите и отворите нов терминал, след като инсталирате нещо от тук

Можете също да посочите mac-dev-setup#homebrew

NPM (Node Package Manager)

https://www.npmjs.com/

След като започнете да пишете javascript, в крайна сметка ще трябва да използвате NPM, тъй като това е основният мениджър на пакети за javascript пакети. Получавате npm, като инсталирате NodeJS. Node.js е само среда за изпълнение от страна на сървъра на javascript. Не се притеснявайте, ако това няма смисъл, но накратко: JavaScript първоначално е бил само за изпълнение на скриптове в браузъра (3-те езика на браузъра са HTML, CSS и JavaScript – по отношение на изграждането на къща, HTML е стените и други структура, CSS е боята, а JS е електричеството, водопровода и всичко, което се движи). Node.js беше създаден преди известно време, за да можете да създавате собствени приложения (напр. „Приложение“ на вашия компютър или сървър), използвайки езика Javascript.

Знам, че технически е реализация на езиковата спецификация на ECMA, но това е объркващо, ако тепърва започвате.

Ако искате, можете да инсталирате Node (и да получите включен NPM) с помощта на Homebrew от вашия терминал:

brew инсталиращ възел

Други опции за инсталиране на възел са изброени на официалния уебсайт https://nodejs.org/en/download/package-manager/#macos

Като алтернатива можете да използвате NVM (мениджър на версии на възли), за да инсталирате възел. Това е по-сложно и може да се направи по-късно, ако желаете. NVM ще ви позволи да инсталирате множество версии на node, което ще ви бъде полезно по-късно в пътуването ви.

Можете да препратите към mac-dev-setup#nodejs, ако искате да отидете по маршрута на NVM.

Инсталирането на Node.js ще ви даде още няколко терминални команди

node

Това стартира интерактивния възел repl (все още не се притеснявайте за това) и това:

node my-file.js

изпълнява my-file.js с възел

npm

вашата команда за взаимодействие с мениджъра на пакети на възли (npm).

eg

npm install <package-name>

Можете да опитате това за забавление:

npm install goldhand

or

npm init

ще създаде нов npm пакет.

Добре, това е всичко, за което имам време сега. Google е ваш приятел, ако имате проблеми.

Успех и се наслаждавайте на пътуването, а не на дестинацията.