Привет, мой любознательный друг! Сегодня у нас будет разговор о прокачке фундаментального навыка для современного разработчика. Расскажем, как быстро, без особых затруднений и занудства, освоить основные команды и функции Git и GitHub.

Grow IT, Know IT, Git-it

Поможет нам достичь цели приложение Git-it, которое можно забрать с одноименного репозитория на Гитхабе (url: https://github.com/jlord/git-it). Приложение представляет собой пошаговый интерактивный мануал и доступно в двух версиях: консольное приложение и десктоп (на базе фреймворка Electron) для трех распространенных платформ: Windows, Mac OS и Linux.

Лично мне больше нравится консольное приложение за свою ламповость и суровый спартанский дух, но, чтобы не выделываться наш сегодняшний материал был полезен наибольшему числу пользователей (чтобы использовать консольную версию понадобится unix-based OS и npm, а десктопную версию надо просто скачать и установить), я пройду весь путь, используя десктопную версию.

Для начала выберем версию под свою ОС.

После установки откроем приложение. На начальном этапе вам предлагается выбрать язык. На сегодня имеются 9 локализаций, но русской версии нет, зато есть украинская. Слабо?

Клацаем по кнопке "Start challenge one!" и Let the party begin!

Для начала потребуется скачать и установить Git. Предлагается установить Github Desktop (якобы там Git Shell зашит), но не верьте, это не так. Мы скачаем наш Git с блэкджеком и ... командной оболочкой Git Bash с ресурса https://git-scm.com/downloads.

Потребуется пройти все шаги установки. Можете оставить настройки по умолчанию. Когда процесс установки будет завершен - найдите в меню "Пуск" Git Bash и откройте его. На вас уставится строка приветствия и тишина. Это нормально. Вернемся к нашему интерактивному мануалу.

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

А теперь клацаем по кнопке Verify и гордимся собой. Считайте, что стадию Hello World! мы миновали.

При правильном выполнении условий мы увидим такую картину:

А вот, если же мы где-то накосячили - Git-it на нас ругнется и уточнит, где именно мы ошиблись. Например, так:

Предлагаю пройти еще один шаг вместе. А потом уже поплывете сами.

Шаг 2: Создаем репозиторий

На этом шаге потребуется создать рабочий каталог, или репозиторий в терминологии Гита, и инициализировать его - примерно, как указать на него пальцем (типа, "Смотри, Git, в этой папке я буду работать, присмотри-ка за ней").

Репозиторий - каталог файловой системы, в котором находятся: файлы конфигурации, файлы журналов операций, выполняемых над репозиторием, индекс расположения файлов и хранилище, содержащее сами контролируемые файлы.

Задание снова лаконично изложено в поле "Step":

От нас требуется создать каталог, перейти в него и применить команду git-init. Снова открываем терминал и последовательно вводим три команды:

1. При помощи команды mkdir создаем каталог под названием"hello-world":

mkdir hello-world

2. Команда cd (change directory) переместит нас в созданный каталог:

cd hello-world

3. Вводим заклинание git init, чтобы случилось волшебство:

git init

Вот что у меня получилось. А вам слабо?

Для проверки задания нажмите на кнопку "Change directory", найдите в проводнике созданный каталог (по умолчанию он создастся в папке "Users") и нажмите Verify. Если все будет сделано правильно, мы увидим радостный возглас программы: "This is a Git repository!"

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

Традиционная цитата

Неработающая программа обычно приносит меньше вреда, чем работающая плохо.

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

РАЗРАБОТКА

• Школа разработки интерфейсов - лекции, проекты и хакатоны для разработчиков интерфейсов.
• Школа мобильной разработки - обучение мобильной разработке (iOS и Android).

АНАЛИЗ ДАННЫХ

• Школа анализа данных - курсы по машинному обучению и анализу данных для студентов и выпускников вузов. Продолжительность - 2 года.
• Computer Science Center - Очные вечерние курсы в Санкт-Петербурге и Новосибирске по трём направлениям: Computer Science, Data Science, Software Engineering. Заочное обучение для жителей других городов.

МЕНЕДЖМЕНТ

• Школа продакт-менеджеров - очный курс для менеджеров продуктов.
• Академия Гипербатона - очный курс для тех, кто хочет создавать и продвигать IT-продукты. Новый набор в апреле 2020 года.

ЯНДЕКС В ШКОЛАХ

• Учебник - сервис для учителей начальной школы с заданиями по математике и русскому языку.
• Лицей - образовательный проект Яндекса по обучению школьников программированию. Учебная программа рассчитана на два года. На занятиях ребята знакомятся с теорией и осваивают технологии на практике. Обучение в Яндекс.Лицее бесплатное.
• Московская школа программистов - Онлайн-курсы и очные занятия для школьников разного возраста.
• Яндекс.Репетитор - Тесты для подготовки к ЕГЭ и ОГЭ, ответы и разбор заданий.
• Атлас вузов - данные об экзаменах и проходных баллах в вузах за несколько лет.

ЯНДЕКС В ВУЗАХ

• Факультет компьютерных наук НИУ ВШЭ: программа для студентов ВШЭ в области анализа данных и программной инженерии.
• Базовые кафедры Яндекса: кафедры Яндекса открыты на профильных факультетах НИУ ВШЭ и МФТИ.
• Магистратура и бакалавриат: Яндекс участвует в магистерских программах МФТИ, МГУ, УрФУ, СПбГУ и НГУ, а также в программе бакалавриата СПбГУ.
• Лекции: cпециалисты Яндекса читают лекции в БГУ, ИТМО и Университете «Иннополис».
• Стипендия и премия им. Ильи Сегаловича: поддержка талантливых студентов и научного сообщества в России, Беларусии и Казахстане.

ОНЛАЙН-ОБУЧЕНИЕ ЯНДЕКС

• Практикум - это интерактивное онлайн-обучение для фронтенд-разработчиков, веб-разработчиков, бэкенд-разработчиков, инженеров по тестированию, аналитиков данных и специалистов по Data Science
• Онлайн-курсы - подборка онлайн-курсов Яндекса по программированию и анализу данных, Digital marketing, менеджменту и дизайну.
• Обучение рекламным технологиям - онлайн-курсы по рекламным сервисам Яндекса.

СОРЕВНОВАНИЯ

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

НАЧАЛО КАРЬЕРЫ

• Стажировки - Работа в Яндексе для начинающих разработчиков, аналитиков и специалистов по машинному обучению.

МЕДИА

• Подкаст "Войти в IT" - подкаст Академии Яндекса о молодых специалистах в IT, в котором сотрудники Яндекса с необычным бэкграундом рассказывают о том, как стали разработчиками, дата саентистами, менеджерами или дизайнерами.
• Журнал "Код" - журнал «Яндекс Практикума» о технологиях и программировании.

Надеюсь, что обзор инициатив Яндекс был вам полезен.

Дальше - больше.

Начнем с того, что у ресурса привлекательный дизайн и дружественный интерфейс. Все на своих местах, заблудиться не получится. Акцент в программе сделан на изучении HTML, CSS, JavaScript и PHP. Разработчики курсов смогли соблюсти баланс между теорией и практикой.

Курсы состоят из практических упражнений, которые работают в любом современном браузере. Ученик получает задачи от системы, пишет код и сразу же видит результат работы кода и проверок.

На сайте представлены как бесплатные материалы, так и платный контент, доступный только по подписке. Кстати, преподаватели школ и вузов могут оформить бесплатный доступ к курсам для себя и учеников (детали здесь).

Вот минутный ролик, который показывает, как работают курсы html academy.

Курсы

Доступны интерактивные курсы, разбитые на отдельные модули и сгруппированные по уровню сложности: начальный, средний и продвинутый. Сейчас можно пройти 70 курсов по HTML, CSS, SVG и JavaScript. В общей сложности ресурс содержит 1445 практических упражнений и испытаний.

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

Степень освоения учебных материалов визуализирована зеленой обводкой вокруг иконки модуля.

Предлагаю заглянуть "под капот" и посмотреть, как происходит обучение.

Слева расположена теория, справа - окно предварительного просмотра, в котором для начала придется прочитать небольшой теоретический блок, а потом закрепить знания, выполнив короткое задание.

Испытания

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

Игровые механики

Достижения и сторителлинг

Ученики получают «ачивки» за выполнение заданий, а благодаря коту Кексу проходить курсы увлекательно.

Внутренняя мотивация

Для повышения мотивации используется мгновенная обратная связь и эксплуатируется перфекционизм.

Красивый профиль

У каждого ученика есть собственный открытый профиль, который приятно показать друзьям и соперникам.

Учиться весело

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

Профессии

Помимо курсов на сайте доступны "Профессии". От курсов профессии отличаются тем, что обучение продолжительностью шесть месяцев проходит в два этапа и включает обязательную производственную практику. Это работа с коммерческими заказами, которая проходит в аутсорс-компании «Лига А.». Такая удаленная стажировка длится три месяца и оплачивается.

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

К тому же, html academy содействует трудоустройству своих выпускников.

Интенсивы

Это те же профессии с обязательной практикой и сопровождением наставников, но разбитые на несколько уровней. За счет этого интенсивы менее дорогостоящие и длятся около трех месяцев (вместо полугода).

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

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

Ну и цитата под конец:

Есть всего два типа языков программирования: те, на которые люди всё время ругаются, и те, которые никто не использует.

Почему это интересно? Во первых, потому что речь идет об образовательном продукте JetBrains - международной ИТ-компании российского происхождения. Офисы компании расположены в Праге, Санкт-Петербурге, Мюнхене, Новосибирске, Бостоне, Москве и Амстердаме. На сегодняшний день в компании работает более 1000 человек. Во-вторых, благодаря JetBrains у мира появились удобные интегрированные среды разработки (IDE - Integrated Development Environment) для Java, C#, Ruby, Python, PHP, Objective-C, JavaScript и многих других языков программирования. В общем, ребята знают толк в разработке и решили создать онлайн-курс с блэкджеком интерактивным редактором кода и системой наставничества.

Выше была преамбула, а теперь несколько слов о самой платформе и курсах, доступных на ней.

Когда пользователь попадает на платформу, ему предлагается выбрать язык программирования для изучения. Сейчас на выбор три языка: Java, Kotlin Python [Пссст. Есть даже вариант "I`m not sure" для нерешительных].

Я выбрал Python - отличный вариант для начинающего. Кстати, все материалы на английском языке, а значит есть возможность попрактиковаться в техническом английском. Полный курс по Python займет около 11 часов, так что запаситесь печеньками, бубликами, кофе и вперед: Hello world! Теперь придется определиться с вашим уровнем знаний. На выбор есть три варианта, почти как в Doom:

1. I'm Too Young To Die [Easy]
2. Ultra-Violence [Hard]
3. Nightmare [Very Hard]

Если вы выберете уровень Easy, то сможете изучить основы языка и его синтаксис, попутно разработав программу для кофемашины!

— Мне нужен хороший калькулятор. ©Bender Rodrigues

Обучение состоит из: 1) теории (в текстовом формате с примерами кода):

2) тестовых заданий:

и 3) практики в редакторе кода:

К сожалению, в ходе обучения могут попадаться досадные баги (и это можно и нужно простить - ведь сейчас Hyperskill все еще в стадии бета). Например, после успешного прохождения первого модуля и выполнения всех заданий второй модуль так и не открылся, а ссылка перехода к следующему модулю приводила меня к текущему. Пришлось закостылить и пропустить первый модуль. В целом от подачи материала, тестовых заданий и работы во встроенной в курс интерактивной среде разработки остались самые благоприятные впечатления.

Что еще хорошего таит в себе платформа и ее курсы:

• интерактивные карты компетенций для выбранных направлений развития
• вдохновляющие проекты (например, на сложности Nightmare предлагается создать игру крестики-нолики с элементами ИИ)
• возможность получать обратную связь и общаться с другими обучающимися через комментарии
• возможность запускать таймер pomodoro (25 минут), чтобы учиться без переутомления.

Остальное предлагаю вам опробовать на собственной шкуре! А закончить хочется словами Линуса Торвальдса:

Talk is cheap. Show me the code.

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

1. Sketch
2. Figma
3. Adobe XD
4. Invision Studio
5. Zepplin

Все вышеперечисленные решения уже стали классикой, а сегодня мы расскажем вам о менее известных, но не менее интересных инструментах:

1. Потребовалось открыть и внести правки в изображение в форматах psd или svg? Есть у нас для вас бесплатный редактор, который работает прямо из браузера - Photopea называется. Редактор умеет работать с растровыми и векторными изображениями.

2. Нравится Sketch, но нет Mac`а? Не беда - Есть Lunacy - нативное windows-приложение, которое умеет работать с файлами sketch`а. Тоже, кстати, бесплатно.

3. Любите оупенсорс и не хотите ежемесячно платить за подписку Adobe Photoshop? Используйте Gimp - кросcплатформенный (есть версии для Linux, macOS, Windows) растровый редактор, который умеет почти все, что умеет Photoshop. Правда, придется привыкнуть к интерфейсу, - отличается заметно.

4. Являетесь активным пользователем социальных сетей и хотите использовать красочные заставки? Есть у нас для вас подгончик: Pixelixe Studio. Инструмент, традиционно, бесплатный. Есть заготовки для LinkedIn, Twitter, Instagram, Facebook, Youtube и Pinterest. Для VK и Telegram, к сожалению, шаблонов нет. В сервис зашит доступ к тысячам изображений из бесплатных фотостоков, есть свои наборы иконок и шрифтов. Экспортировать получившиеся картинки можно в форматах jpg, png или HTML.

5. И последним в нашей сегодняшней подборке станет Vectr - мощный редактор доступный через браузер или в виде desktop-приложения. Название говорит само за себя - редактор предназначен для работы с векторной графикой.

Надеемся, что инструменты, о которых мы рассказали в этом материале вам пригодятся.

А какой инструмент для прототипирования и создания веб-графики используете вы? Ждем ваших ответов в комментариях.

А начнем мы с дедушки Vim`а. Каждый третий разработчик слышал шутку про то "Как выйти из Vim?", а в каждой шутке, как известно есть доля правды. К примеру, у вопроса "Как выйти из редактора Vi или Vim?" в русском сегменте stackowerflow более 72 тысяч просмотров, а у его заграничного аналога "How do I exit the Vim editor?" более 2 миллионов просмотров. Впечатляет.

Одна из моих любимых шуток звучит так: «Я уже два года пользуюсь Vim, в основном потому, что не знаю, как выйти из него». Спойлер: чтобы выйти из вима потребуется последовательно нажать Esc, потом :, q и Enter. В общем-то в виме все делается зубодробительными (для новичков) сочетаниями клавиш.

Дело в том, что Vim (Vi IMproved) - это редактор кода, который работает в консольном режиме. И здесь вы не найдете привычных по другим редакторам органов управления (пункта Exit в меню приложения или крестика в углу окна). Этот редактор устроен и работает по совсем иным принципам. Одним из ключевых понятий в вим являются режимы, которых аж три:

• normal (собственно, управление и навигация),
• insert (вставка и редактирование текста),
• visual (выделение текста и операции с ним).

В каждом режиме редактор ведет себя по своему и это дает кучу преимуществ. Умелое использование этих особенностей и комбинирование режимов вызывает к жизни магию.

Vim умеет "из коробки" делать, то, что другие редакторы часто не способны сделать даже при помощи специально разработанных плагинов.

Приведем в пример несколько команд Vim в режиме normal:

dd — удалить строку, на которой находится курсор

5dd - удалить 5 строк

30i- - вставит в документ 30 знаков "-"

dw - удалит слово на котором сейчас находится курсор.

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

Ах, да: дорогу осилит идущий, а для тех, кто хочет попробовать vim на зубок и не застрять в редакторе на два года - советуем попробовать интерактивный учебник OpenVim или игру vim-adventures с управлением как в виме.

Удачи!

Материал готовил вим-аддиктед @ykponyc