+7 (800) 500-57-25
Воронеж +7 (473) 261-94-98
Саратов 8 (800) 500-57-25
Представительства:
Липецк +7 (4742) 522-304
Курск +7 (4712) 770-465
Белгород +7 (4722) 402-160
Заказать услугу!
закрыть
Получить совет специалиста
Ваш город
Как к вам обращаться?
Укажите, пожалуйста, Ваш номер телефона
Ваш адрес электронной почты
По какому вопросу желаете получить совет?
Продвижение Контекст Разработка SMM, SERM, EMAIL
Главная / Дневник /

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

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

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

Twitter Bootstrap

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

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

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

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

node, npm, bower, grunt

Разумеется 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

Chrome Developer Tools

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

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

Системы контроля версий git, mercurial, svn

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

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

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

sass, scss

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

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

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

WebStorm, PhpStorm, Netbeans, Eclipse, Sublime Text

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

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

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

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

linux terminal

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

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

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

Об авторе
Программист
Заказать услугу
Заинтересовала одна из наших услуг? Вы можете заказать её прямо здесь! От Вас требуется только описать задачу, которую вы хотите решить, и оставить свои контактные данные. Мы свяжемся с Вами в ближайшее время!
Ваш город
Как к вам обращаться?
Укажите, пожалуйста, Ваш номер телефона
Мы свяжемся с вами для уточнения деталей
Укажите адрес электронной почты
Будем использовать её для отправки информации
Адрес вашего сайта
Какая услуга вас интересует?
Опишите вашу задачу, мы постараемся её решить!
Расскажи коллегам
Свяжитесь с нашим менеджером!   ЗАКАЗАТЬ УСЛУГУ
закрыть
Заказать услугу
Заинтересовала одна из наших услуг? Вы можете заказать её прямо здесь! От Вас требуется только описать задачу, которую вы хотите решить, и оставить свои контактные данные.
Мы свяжемся с Вами в ближайшее время!
Ваш город
Как к вам обращаться?
Укажите, пожалуйста, Ваш номер телефона
Мы свяжемся с вами для уточнения деталей
Укажите адрес электронной почты
Спамить не будем. Будем использовать её для отправки важной информации.
Адрес вашего сайта
Какая услуга вас интересует?
Опишите вашу задачу, мы постараемся её решить!