Софт

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

Visual Studio Code — бесплатный и очень популярный редактор кода от Microsoft.

Редактор поможет в работе веб-разработчикам и верстальщикам всех уровней. С одной стороны он подходит новичкам, потому что его интерфейс интуитивно прост и понятен. С другой стороны в VS Code встроены много возможностей, которые интересны опытным разработчикам.

Скачать VS Code — https://code.visualstudio.com

Программистам часто приходится работать в консоли — например, чтобы запустить тестирование проекта, закоммитить новый код на Github или отредактировать документ в vim. Всё это происходит так часто, что все основные действия с файлами становится быстрее и привычнее выполнять в консоли. Рассказываем и показываем основные команды, которые помогут ускорить работу в терминале под OS Windows.

Для начала нужно установить терминал или запустить командную строку, встроенную в Windows — для этого нажмите Win+R и введите cmd. Терминал часто встречается и прямо в редакторах кода, например, в Visual Studio Code.

Чтобы ввести команду в консоль, нужно напечатать её и нажать клавишу Enter.

В операционной системе Microsoft Windows есть предустановленный терминал, который называется cmd.exe. Использовать его в качестве основного терминала не рекомендуется, так как он слабее аналогов. Для стандартного терминала Windows существует прекрасная альтернатива в виде эмулятора консоли под названием cmder.

Скачать его можно на официальном сайте.

На сайте есть две версии для скачивания: минимальная и полная.

Полная отличается от минимальной тем, что в неё вшита поддержка системы контроля версий git. Скачиваем необходимую версию в виде архива и распаковываем его. Cmder не требует установки. Достаточно запустить файл «cmder.exe».

Запущенная консоль выглядит так.

Внимание. При работе с терминалом на Windows следует избегать названий файлов и папок на русском языке. Это может привести к некорректной работе некоторых программ и пакетов. Если возникнут проблемы с русскоязычным названием файла, то замените название на английское.

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

Но если спросить, чем программисты пользуются в работе, окажется, что всё не так просто. Нужны редактор кода, дебагер, консоль, система контроля версий, таск-трекер и много чего ещё, в зависимости от специализации. Например, верстальщикам нужны графические редакторы, а мобильным разработчикам — эмуляторы.

По большому счёту софт — это инструмент, который может подходить или не подходить для конкретной задачи. Как молоток для шурупов или отвёртка для открывания замков. Поэтому мы предложим несколько вариантов, а вы выбирайте сердцем, используйте с умом, но не относитесь к выбору слишком серьёзно. В конце концов, это просто компьютерные программы.

Графический редактор — второй по важности инструмент верстальщика после редактора кода. Дизайнеры создают макеты сайтов и приложений и передают готовые файлы в вёрстку. Верстальщик получает из них всю необходимую информацию: тексты, иллюстрации, цвета, положения элементов на странице и расстояния между ними.

Есть много графических редакторов, и как из них выбрать непонятно. Поэтому возьмём две популярные программы — Photoshop и Figma — и сравним их.

Photoshop — мощный графический редактор, основное предназначение которого — работа с растровой графикой. Он вышел в 1990 году и за это время собрал большое сообщество пользователей. В исследовании инструментов дизайна от 2019 года он занимает четвёртое место из десяти самых популярных инструментов.

Figma — онлайн-редактор для создания интерфейсов и прототипов. Он появился в 2016 году, но успел обогнать Photoshop по количеству пользователей почти в 4 раза. В том же исследовании инструментов дизайна Figma занимает второе место по количеству пользователей.

Чтобы выбрать редактор, сравним удобство интерфейсов и совместной работы, варианты использования ПО и его установки, минимальные требования к компьютеру.

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

В каждый браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Доменное имя — это текстовое представление адреса сайта в интернете, например htmlacademy.ru. С помощью этого имени DNS определяет IP-адрес сервера, на котором располагается сайт.

Доменное имя делится на уровни, которые разделяются точкой и отсчитываются с конца. Первый уровень доменного имени — это зона. Зоны бывают территориальные (ru, ua, by и так далее) и остальные (com, org, net и так далее). Часть «ru» в доменном имени htmlacademy.ru говорит о том, что сайт относится к Российской Федерации.

Второй уровень доменного имени — само имя домена, в нашем примере это «htmlacademy». Любой желающий может зарегистрировать себе домен в большинстве зон при условии, что он свободен для регистрации. Помимо первого и второго существуют и более глубокие уровни.

Если хотите глубже разобраться, как всё работает, то советуем вам статью «Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com».

Читать статью на Хабре

Стоимость домена в зоне «ru» в среднем составляет 500 рублей в год. Каждый год его необходимо продлевать.

Если у вас OS X, поставьте iTerm2, он лучше стандартного Terminal.app. Если у вас Linux, то у вас наверняка уже есть неплохой терминал, или вы можете самостоятельно поставить любой, который вам нравится. Я вот люблю Sakura. Ещё я обычно меняю цветовую схему. Стандартные чёрные мне не очень нравятся, есть крутая схема Solarized. Как её устанавливать тоже зависит от вашего терминала.

Теперь настроим непосредственно шелл. Шелл — это оболочка, в которой выполняются команды. Он показывает вам так называемое приглашение, оно обычно состоит из имени пользователя, имени компьютера и пути к тому месту, где вы сейчас находитесь. И выполняет команды, которые вы в него вводите. Стандартный шелл выглядит так:

Скучновато, правда? Первое, что мы сделаем — сменим оболочку с bash на zsh. Bash — это стандартная оболочка, которая поставляется в комплекте большинства систем. Zsh — это более современная оболочка со множеством плюшек. По сравнению с bash улучшены автодополнение, алиасы, хоткеи. Всё, что может bash, zsh может тоже, так что не вижу причин не переходить. У пользователей OS X zsh уже есть на компьютере, а пользователям Linux, скорее всего, нужно его установить. В Ubuntu и Debian это делается просто:

Пользователи остальных систем наверняка справятся с установкой. Теперь нужно сделать, чтобы zsh был вашей оболочкой по умолчанию, то есть использовался каждый раз, когда вы открываете терминал. Для этого есть команда chsh (change shell):

У вас спросят пароль администратора. По мере ввода на экране ничего изменяться не будет, просто напечатайте ваш пароль и нажмите Enter. Появится сообщение о том, что ваш шелл изменён:

Теперь нужно выйти из системы и снова зайти. Когда вы откроете терминал, увидите приветственное сообщение zsh. Он предлагает вам ничего не делать, записать в свои настройки только комментарии, чтобы это сообщение не появлялось в следующий раз или пойти в меню настройки:

Мы, ничего не делая, выйдем (нажмём q), потому что знаем секрет. Секрет в том, что не нужно писать длинный конфиг, если вы новый пользователь: частые проблемы и хотелки уже решили другие, и родилась такая замечательная штука — Oh My ZSH. Это набор плагинов и настроек, которые решают самые популярные задачи и делают ваш шелл просто офигенным. Установим его, следуя инструкциям с официального сайта:

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Установка прошла, но ничего не поменялось? Надо закрыть терминал и снова открыть его, чтобы настройки, которые приехали к нам из oh-my-zsh, прочитались и применились. Закрыли-открыли, теперь видим новое приветствие:

Это стандартная тема oh-my-zsh под названием robbyrussell (по имени автора). Мы можем поставить любую из тем, которые поставляются с oh-my-zsh. Я, например, использую Bureau, когда-то я её писала, потому что не нашла подходящей. Чтобы поменять тему, напишите её название (маленькими буквами, как на странице со списком тем) в файле .zshrc. Он лежит в вашей домашней папке (/Users/Ваш_логин или /home/ваш_логин). Поскольку он начинается с точки, он скрыт. Включите отображение скрытых файлов. Тему нужно прописать в переменную ZSH_THEME, это в районе восьмой строки, вот так:

Сохраните файл и снова перезапустите терминал (или откройте в нём новую вкладку). Теперь шелл выглядит по-новому:

Это тема Bureau. В верхней строчке сначала имя пользователя, потом имя машины, потом путь к папке, где пользователь сейчас находится. Справа текущее время. В следующей строке просто символы, которые обозначают, что ввод здесь, а справа после шестиугольника текущая версия Node. js, ветка Git (если пользователь сейчас в Git-репозитории), и кружочки, которые обозначают, что есть несохранённые изменения. В этой теме версия Node. js показывается только если вы используете Node Version Manager.

А это тема Лёши, можете её взять из GitHub и сохранить в папке ~/.oh-my-zsh/themes, или установить простой командой:

curl https://gist.githubusercontent.com/meritt/53dcaf7f8f5ecaa62b2b/raw/ec63d857f9ad565011047ab5b486d159ddf0e2ef/meritt.zsh-theme -o ~/.oh-my-zsh/themes/meritt.zsh-theme

Не забудьте прописать тему meritt в вашем файле .zshrc.