Простые мелочи, упрощающие жизнь веб-разработчику

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

HTML и CSS шаблоны оформления — Twitter Bootstrap

Если Вы прототипируете, разрабатываете интерфейс администрирования или любую другую вещь, в которой не важен дизайн, но требуется функциональность, то почему бы не использовать уже готовые шаблоны и стили, прикрутив к проекту Twitter Bootstrap?

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

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

Пакетные менеджеры npm, bower

Разумеется npm особенно полезен, если мы пишем проект на основе node.js. Как минимум, c его помощью очень удобно создавать и поддерживать проекты, описывая их свойства в файле package.json, искать и устанавливать пакеты с учётом их версий в качестве зависимостей.

Кроме этого, есть вещи, на которые стоит обратить внимание, даже если проект не на node.js. Во-первых, это Grunt — сборщик проектов. Позволяет регистрировать и описывать задачи по проекту в небольшом файлике, например, Gruntfile.js. Это очень удобно в при сборке проекта или в процессе выполнения каких-либо условий (реакция на события).

Во-вторых, пакеты для выполнения задач:

  • grunt-contrib-copy — копирование папок и файлов из одного места в другое;
  • grunt-contrib-concat — объединение файлов;
  • grunt-contrib-uglify — сжатие JavaScript файлов;
  • grunt-contrib-sass — компиляция SASS/SCSS в CSS;
  • grunt-contrib-cssmin — сжатие CSS файлов;
  • grunt-contrib-watch — отслеживание изменений файлов и запуск задач;
  • grunt-remotefile — получение удалённого файла.

Браузерные инструменты разработчика: Chrome Developer Tools, Firefox Developer Tools, Firebug

Сегодня трудно представить разработку клиентской части приложения без этих инструментов. Функционал их огромен, но в общем можно сказать, что они необходимы разработчику, чтобы понять, что вообще происходит в текущем окне браузера. Конкретно — с DOM, стилями, скриптами, сетью, производительностью, памятью, и т.д. С помощью этих инструментов можно даже редактировать шейдеры WebGL на лету (Firefox Developer Tools).

Системы контроля версий

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

С git/mercurial/svn Вы не будете тратить время зря: перестанете рвать волосы, когда кто-то или Вы сами случайно удалили часть Ваших трудов или вообще всё, и седеть, когда вас просят возвратить обратно «как было» результат вашей полугодичной работы.

Метаязык на основе CSS — SASS/SCSS

С помощью SASS/SCSS можно структурировать, значительно сократить код и обеспечить возможность его повторного использования. Этот метаязык позволяет использовать возможности CSS и другие очень полезные инструменты:

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

IDE и Редакторы кода

Возможностей IDE столько, что описывать все нужно в отдельной статье или даже двух. Я упомяну только ключевые моменты:

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

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

Утилиты и возможность их использования в OS

Операционная система дает огромные возможности: записывать свои Use Case в скрипты и использовать такие автомитизации, как деплой, создание окружения для проекта и т.д.

В качестве итога

А итога и нет: тут нужно ещё много писать. В комментариях я надеюсь услышать много хорошего и плохого в адрес этой статьи и её создателя, а так же получить советы и рекомендации. Может быть, Вы даже подскажете мне темы для следующих статей, а если и нет, то “их есть у меня” и так. Удобной всем разработки!