Советы начинающему веб-разработчику

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

Всегда делайте однотипную работу

Что это значит? Если вы берете макет и его необходимо сверстать, то для начала нарежьте все изображения, картинки которые используются по дизайну (как правило небольшого размера) объедините в спрайты (чтобы уменьшить количество запросов к серверу и общий размер страницы), после этого создайте HTML разметку, сразу перенесите весь текст и займитесь CSS стилями. Поверьте, проверял это на своем личном опыте, и это действительно работает и экономит время. Не обязательно делать все в таком порядке – самое главное чтобы вы делали однотипную работу, и только по завершению одного этапа переходили к следующему.

Используйте инструменты которые экономят время

Как минимум, вы должны использовать удобный для вас редактор кода – я использую Sublime Text, раньше использовал Notepad++.

– Используйте плагин Emmet (раньше назывался Zen Coding) – существенно упрощает верстку и написание стилей, вам всего лишь нужно написать:

ul>li*10

нажать Tab и перед вами список из 10 пунктов, и это лишь вершина айсберга.

– Используйте препроцессоры – HAML для HTML, SASS для CSS, CoffeeScript для JavaScript (или любые другие). Может показаться, что времени тратится больше, или нужно следить за отступами, но это только по началу, а потом вы привыкнете и все пойдет как надо. Конечно, браузер (без подключения сторонних библиотек) понимает только HTML, CSS и JavaScript – но что мешает потом скомпилировать (преобразовать) SASS в CSS и тд?

– Используйте сторонние библиотеки, которые необходимы для работы – лично для себя выбрал jQuery, Bootstrap Grid, FontAwesome, Normalize.css, Gulp.js. Без jQuery вообще сейчас сложно что-то представить, т.к. понимание работы обычного javascript и написание кода на нем, требует куда больше времени и внимания, чем с джиквери. Бутстрап конечно же шикарный фреймворк, где все написано за вас, но лично я использую только адаптивную сетку. Font Awesome представляет собой шрифт (спасибо кэп), но вместо буквенных символов вы получаете огромный набор иконок, цвет и размер которых вы можете изменить с помощью стилей, а не фотошопа (что уже экономит время и не нужно дергать дизайнера). Нормалайз.css, насколько я помню, есть и в самом бутстрапе, но я предпочитаю выносить все в отдельный файл (с недавних пор).

Gulp.js довольно молодой и развивающийся сборщик проектов (для работы понадобится установленный Node.js). С его помощью вы сможете объединить все ваши CSS файлы в один (конкатенация), затем минифицировать его и даже удалить лишние стили которые не используются в вашем проекте, сжать HTML код, сжать и объединить JS файлы, скомпилировать ваши haml, sass, less, coffescript файлы, сжать изображения, переместить итоговые файлы в отдельную папку, использовать livereload на локальном сервере (обновление страницы в браузере, когда вы сохраняете свой код) и многое другое. Под галп уже написано огромное количество плагинов и судя по всему дальше будет только лучше. Честно говоря, я не смотрел что из себя представляет Grunt (еще один сборщик проектов), но по отзывам говорили что работает он медленнее и для настройки нужно больше все расписывать – в галпе все более очевидней.

Можно использовать плагины для слайдеров, всплывающих окон, или чего-нибудь еще – а можно написать самому, тут уже зависит от вашего опыта, интереса и свободного времени – но иногда стоит спросить себя “а нужно ли заново изобретать велосипед?”.

Старайтесь быть идеальным во всем

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

Включите в своем редакторе отображение скрытых символов (хотя бы пробелов) и следите чтобы код был чистым. Везде используется один стиль написания кода, один размер отступов (в моем случае tab равен 4 пробелам, вместо наиболее часто встречаемых 2). Не забывайте, что лучше использовать привычные для данного языка варианты написания:
my-class – для HTML и CSS
myNameFunctions – для JavaScript
$my_name_functions – для PHP
Убедитесь что ваши картинки минимизированы, иконки объедены в спрайты, код сжат и валиден, скрипты и стили подключены в самом низу страницы (в идеале это 1 файл), а гугл пейдж спид не ругается на вашу страницу. При этом желательно чтобы ваш код не посылал кучу ненужных запросов и данных. И даже если страница после натяжки значительно опустится по показателям пейдж спида, просто за счет того, что это хостинг и “привет внешние скрипты”, вы будете знать что сделали всё как надо.

Читайте книги, статьи и чужой код

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

Не перерабатывайте

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

Пишите списки

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

Старайтесь писать все на английском языке

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

Всегда и во всем сомневайтесь

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

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