Думать как программист

  

    
Link 1
    
Link 2
    
Link 3
    
Link 4
    
Link 5
  

Как выглядит боковая панель, когда она отображается?

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

Ответив на этот вопрос, ваш CSS код будет выглядеть приблизительно так:

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background-color: #333;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style: none;
}

.sidebar li + li {
  border-top: 1px solid white;
}

.sidebar a {
  display: block;
  padding: 1em 1.5em;
  color: #fff;
  text-decoration: none;
}

Как выглядит боковая панель, когда она скрыта?

Боковая панель должна быть смещена на 300px вправо, это значит, что она окажется за пределами видимой области.

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

1. Как узнать, боковая панель отображается или скрыта?
2. Как создать скрытую боковую панель?

Как узнать, боковая панель отображается или скрыта?

Если боковая панель имеет класс .is-hidden, то она не должен отображаться. В противном случае, она должна быть видна.

Как создать скрытую боковую панель?

Мы используем свойство transform (это одно из лучших свойств для анимации), со значением translateX, для смещения боковой панели на 300 пикселей вправо. В итоге получим следующие стили:

.sidebar.is-hidden {
  transform: translateX(300px);
}

Как появляется боковая панель?

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

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

.sidebar {
  /* other properties */
  transition: transform 0.3s ease-out;
}

Как боковая панель исчезает?

Она должна исчезнуть так же как и появилась — плавным смещением в противоположную сторону. Для этого вам не нужно писать какой либо дополнительный CSS-код.

Должна ли боковая панель появляться при загрузке страницы?

Нет. Мы должны добавить класс is-hidden в разметку боковой панели, чтобы она оставалась скрытой до нажатия на кнопку.

Теперь, мы ответили почти на все вопросы, за исключением одного — что произойдет если нажать на кнопку один раз? Два раза? Три?

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

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

Как узнать, что кнопка была нажата?

Если вы знаете JavaScript, вы можете использовать метод addEventListener, который отслеживает события, вместе с необходимым нам событием click. Если вы не знаете JS, то вам снова прийдется гуглить.

Но перед тем как отследить клик по кнопке, нам нужно найти эту самую кнопку в разметке. Для этого используем метод querySelector.

const button = document.querySelector('.btn')

button.addEventListener('click', function() {
  console.log('button is clicked!')
})

Что произойдет, если нажать на кнопку один раз?

Когда кнопка нажата один раз, мы должны убрать класс is-hidden, чтобы боковая панель появилась. Чтобы удалить класс в JavaScript, используем метод Element.classList.remove. Но как и в случае с кнопкой, для начала мы должны выбрать боковую панель с помощью метода querySelector.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.remove('is-hidden')
})

Что произойдет, если нажать на кнопку второй раз?

Когда кнопка снова нажата, мы должны вернуть класс is-hidden боковой панели, и она снова исчезнет.

К сожалению, addEventListener не может отслеживать сколько раз была нажата кнопка. Лучшим выходом будет сделать проверку на наличие класса is-hidden в боковой панели. Если он есть, то убираем его. Если его нет, то добавляем.

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  if (sidebar.classList.contains('is-hidden')) {
    sidebar.classList.remove('is-hidden')
  } else {
    sidebar.classList.add('is-hidden')
  }
})

Собрав все части одной большой задачи, вы получите именно то, что планировали создать.

Шаг 4: Рефакторинг и улучшение

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

Поэтому, когда вы закончили с предыдущими тремя шагами, сделайте паузу и поработайте над чем-то другим. Когда вы лучше освоите JavaScript и вернетесь к данной работе, то сможете заметить, что упустили несколько деталей.

В приведенном выше примере можно поставить дополнительные вопросы:

1. Как сделать этот компонент более доступным для пользователей с нарушением зрения?
2. Как упростить управление компонентом для людей использующих только клавиатуру?
3. Можно ли еще как-то улучшить код?

Что до третьего пункта… Немного погуглив, вы можете обнаружить, что в JavaScript (JS) существует метод toggle, который удаляет класс, если он присутствует. И наоборот, если класс отсутствует, метод toggle добавляет его:

const button = document.querySelector('.btn')
const sidebar = document.querySelector('.sidebar')

button.addEventListener('click', function() {
  sidebar.classList.toggle('is-hidden')
})

Подведем итоги

Думать как программист довольно просто. Главное что вам нужно знать, это как разбить задачу на более мелкие.

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

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

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

Оригинал: How to think like a programmer