Программирование для гуманитария: как окунуться в разработку

Кирилл Ширинкин, мeнтoр и oснoвaтeль mkdev.me, рaсскaзaл блoгу Нeтoлoгии o тoм, с чeгo нaчaть свoй путь в вeб-рaзрaбoтку тeм, ктo всeгдa считaл сeбя «гумaнитaриeм».

О том, что программирование становится обязательным для изучения навыком, не сказал только ленивый. От глав крупных IT-компаний до экс-президента США Барака Обамы, все твердят, что нужно учиться писать код. Они даже создали всякие организации, нацеленные на помощь детям научиться программировать как можно раньше и как можно быстрее.

Но что именно нужно учить из мира разработки обычному человеку? Зависит, конечно, от основного рода деятельности. Мы не будем гадать, зачем и в каком виде нужно изучать программирование профессиональному спортсмену, адвокату или мастеру стеклянных изделий ручной работы. Возможно, им это и не нужно совсем.

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

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

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

Читать ещё: «Справляемся с техническим долгом»

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

Git

Git — это система контроля версий. Это означает, что если, например, у вас есть файл, над которым вы долго работали и перерабатывали, то все версии этого файла будут сохранены в git и у вас будет возможность вернуться к каждой из них.

Система контроля версий вроде Git даёт множество преимуществ. Вот лишь парочка:

  • все версии всех файлов в git-репозитории доступны в любой момент, очень тяжело потерять какую либо часть кода;
  • разработчики могут работать над одним проектом одновременно, не мешая другу другу и не боясь затереть изменения друг друга. Предоставляемые git возможности совместной работы безграничны.

Если вы пользовались Google Docs или другим офисным пакетом, то концепция хранения предыдущих версий написанного текста (а код — это всего лишь текст) вам знакома. Но в отличии от Google Docs, git не сохраняет версии автоматически — это нужно делать самому.

Разработчики используют Git ежедневно. Это тот инструмент, которым необходимо владеть идеально каждому специалисту, потому что весь код в большинстве компаний хранится в git-репозиториях. Есть и другие, менее популярные или вышедшие из моды системы, но де-факто стандартом является именно Git.

Зачем нужно знать Git гуманитарию? Рассмотрим на примере моего коллеги Леонида.

В нашем проекте мы храним все редко меняющиеся тексты на сайте (FAQ, тексты в шапке, статьи) рядом с кодом проекта, в файлах формата YAML. Этих файлов у нас очень много, сразу на двух языках. Часто возникает необходимость менять эти тексты: сокращать, расширять, перефразировать, убирать опечатки. И очень не хочется для каждой мелкой правки дёргать одного из разработчиков.

И вот именно чтобы самостоятельно менять эти тексты в какой-то момент мы научили Леонида, нашего сооснователя — законченного гуманитария — пользоваться Git. Он узнал, что такое коммит, для чего нужны ветки и теперь может сам отредактировать нужные ему тексты, и они автоматически будут опубликованы на сайте.

Для хранения и удобной совместной работы над git-репозиториями существует несколько онлайн-сервисов, которыми пользуются почти в каждой организации. Самый популярный — GitHub, в догоняющих идёт GitLab и для больших корпоративных окружений во внутренней сети чаще всего выкатывают BitBucket. Все эти сервисы позволяют редактировать файлы в репозиториях прямо в браузере, избавляя вас от необходимости настраивать Git локально. Таким образом, вам даже не нужно учиться полноценно использовать Git, выполняя команды через командную строку или при помощи специального Git-клиента с красивым интерфейсом (смотрите SourceTree, например).

Чтобы начать изучение Git (и GitHub заодно), лучше всего подойдёт GitHub Learning Lab — бесплатный интерактивный экскурс. Пройдя его, можно либо на этом и успокоиться, либо пойти глубже — в таком случае прямая дорога в официальную документацию git. А когда основные команды (git commit, git branch, git pull, git push и т.д.) будут освоены, можно ознакомиться с лучшими практиками и разными вариантами командной работы при помощи git.

HTML/CSS

Программа обучения: «HTML-верстка: с нуля до первого макета»

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

Эти две технологии — та основа веб-разработки, которую необходимо знать каждому.

Первые сайты были ничем иным как набором .html и .css файлов. Абсолютно в каждом веб-приложении рано или поздно придётся идти и править файлы, отвечающие за его внешний вид. И это обязательно будут HTML и CSS.

HTML описывает структуру веб-страницы. Разработчик оборачивает куски текста в разные теги (специальные понятные браузеру слова, обёрнутые в » и »), в зависимости от роли текста (заголовок, параграф, список и так далее), а браузер худо-бедно пытается их отобразить на экране.

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

Так выглядит страница, завёрстанная только с помощью HTML

Поэтому программисты придумали каскадные таблицы стилей (CSS). CSS описывает, как HTML-теги будут отображаться на экране: как они будут расположены, какого они будут цвета и размера и как они будут вести себя на экранах разных размеров. Комбинация этих двух технологий обеспечивает всю ту красоту, что вы видите в интернете каждый день — от новостных сайтов и сложных веб-приложений до десктопного приложения Slack.

Как знание HTML/CSS может пригодиться условному гуманитарию

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

В итоге дизайн, прошедший этап вёрстки, зачастую теряет важные детали, вроде нужного шрифта, цвета текста или отступов между блоками. Зная HTML и CSS, Леонид может сам поправить нужные ему файлы и довести криво свёрстанную программистами страницу до нужного состояния. Но это, конечно, ситуация из разряда «ленивые программисты», которая не должна случаться (или, по крайней мере, случаться не слишком часто).

Более правильное применение этих навыков для дизайнера или маркетолога — это работа над различными продающими страницами. Иногда нужно выпускать по несколько таких в неделю, и работой над их вёрсткой можно загрузить разработчиков по самые уши. Чтобы этого избежать, мы вручили Леониду аккаунт на Тильде, обучили его основам вёрстки, и теперь он без помощи кого-либо генерирует любые нужные бизнесу статичные — и не только — странички.

Где же научиться основам вёрстки? Вариантов, как обычно, множество. Для начала можно пройти тонну бесплатных интерактивных заданий на HTML Academy или CodeAcademy, освоить основной синтаксис. Но проходить синтетические задачки в браузере — скучно.

Гораздо интереснее будет сверстать настоящий сайт — создать в текстовом редакторе файлики index.html и site.css и начать творить. Преимущество изучения HTML и CSS в том, что вы сразу видите результат работы в браузере. Поэтому задайтесь целью сделать небольшой личный сайтик и приступайте.

Web-инспектор и инструменты разработчика

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

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

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

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

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

JavaScript

И, наконец, программирование! Ни Git, ни HTML, ни CSS не являются языками программирования. Ничего «живого» с ними не сделать — анимацию не добавить, всплывающее окошко не вставить — никакого праздника!

Читать ещё: «Погружение в JavaScript: подборка книг для начинающих изучать язык»

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

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

Основы программирования на JavaScript можно изучить на CodeAcademy. Но как и в случае с HTML и CSS, продолжать изучение лучше на чём-то более приближенном к реальности. Поэтому возьмите свёрстанную пунктом ранее страничку и добавьте в неё чуть больше жизни. Пусть при загрузке в лицо пользователю бросается всплывающее окно, а любой текст при попытке его скопировать сразу же исчезает.

А чтобы реализация подобных аттракционов прошла быстрее и легче, стоит посмотреть в сторону jQuery. Это набор готовых к использованию кусков кода (библиотека), он используется на 70% всех сайтов в мире и значительно облегчает написание клиентского кода. Прочитайте документацию к jQuery, научитесь с его помощью управлять HTML, и изучите как использовать бесчисленные плагины (рекомендую начать с jQuery UI). Порог вхождения в эту библиотеку предельно низок, а предоставляемые ею возможности покрывают 80% нужд.

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

Для чего JavaScript пригодился Леониду? Однажды выяснилось, что чтобы создать современный анимированный баннер, нужно уметь программировать на JavaScript. В этот момент Леонид вооружился имеющимися навыками HTML и CSS, стиснув зубы прошёл основы JavaScript и наклепал нам баннеров.

А ещё он иногда использует его внутри Google Tag Manager. Скорее всего, чтобы делать хитрые маркетинговые штуки за спиной у пользователей и коллег.

Итого

На этом я закончу быстрое погружение в некоторые полезные для изучения технологии. Как минимум, их знание поможет чуть теснее сотрудничать с программистами и даст понимание того, как устроены внутри сайты — по крайней мере, их лицевая часть. Умея использовать Git, HTML, CSS и JavaScript вы сможете не только понимать большую часть того, что делают разработчики сайтов, но и сможете самостоятельно создать простой сайт для своего проекта. От основ HTML, CSS и JavaScript можно плясать в разные стороны.

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

Читать ещё: «CSS-фреймворки для верстальщиков»

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Комментарии и уведомления в настоящее время закрыты..

Комментарии закрыты.