Перестаньте портить код еще до начала работы

Можно ли испортить проект еще до его начала? Оказывается, можно. И пусть статья Меган Хебел касается веб-проектов, почти все ее советы подходят и для мобильной разработки. Вот 5 рекомендаций, которые помогут организовать вашу работу.

Новый проект с многообещающим наброском дизайна приземляется вам в руки. Он кажется очевидным, поэтому вы приступаете к работе. Вы включаете классическую фортепианную музыку, потому что в этот раз у вас нет потребности в “Don’t Stop Believing”. Вы представляете, как у вас будет полноценный час на обед, и вы наконец-то сможете пройти эти дополнительные два квартала, чтобы взять чизбургер с беконом. Вы представляете, как уходите из офиса в 5, а вам все завидуют. Это будет хороший день.

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

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

1. Нарисуйте структуру на бумаге

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

Это поможет вам:

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

Не пропускайте этот шаг, каким бы ни был ваш опыт. Эти 20% первоначальной работы дадут 80% качества конечного проекта.

2. Организуйте свои активы

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

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

3. Сначала напишите HTML

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

В этом есть смысл, особенно для начинающих программистов, потому что вы попытаетесь создать отдельные компоненты и «поставить» их друг на друга. Но лучше этого не делать. Так вы вероятнее будете повторяться, создадите неорганизованную архитектуру и упустите реализацию классов, которые будут сохранять ваш CSS чистым по мере роста таблицы стилей. Напишите всю структуру HTML до того, как сделать все красивым.

4. Разделите CSS на секции

Выясните, как вы хотите, чтобы ваш CSS организовал и реализовал ваши основные требования (например, clearfix и размер окна). Со временем вы найдете то, что работает для вас, но вот для начала два примера (один простой и один более сложный).

5. Создайте список багов и задач

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

Так как вам придется вернуться к этой начальной проблеме, заметки помогут вам быстрее это сделать. Как только вы поймете, в чем проблема, запишите в список и решение. Если вы наткнетесь на подобную проблему снова, вы будете знать, как её решить.

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