Мои инструменты и технологии

Каждый день я пишу относительно много разметки, стилей и JS, использующихся в коммерческих проектах. За время работы (с 2000 г.) попробовал довольно много техник, технологий и ПО, о которых коротко расскажу в этой статье.

Мои студентам на Эпике, в HTML Академии, учащимся Loftschool и просто интересующимся.

Общий подход

Красивый код

Всегда пишите красивый код!

Его быстрее (и приятнее) читать.
В нём видно ошибки.

Сам всегда сразу пишу красивый код, но если у вас с этим проблемы, можно смотреть в сторону автоматических средств форматирования в используемом редакторе, в сторону проверки форматирования перед коммитом (см. [Git(#git)]) или в сторону консольных утилит.

БЭМ как система именования

Это самое простое, надёжное и не зависящее от технологического стека решение, позволяющее избежать уймы проблем (большая часть проблем являются «врождёнными» для используемых в браузере технологий). Вкратце познакомиться с БЭМ как отношением к интерфейсу и системой именования селекторов можно в моём небольшом материале Как работать с CSS-препроцессорами и БЭМ, а более полно, вместе с объемным стеком БЭМ-технологий — на официальном сайте.

Если совсем коротко, то БЭМ (не полный стек, а только как система именования) даёт пространство имён селектора, что приводит к изоляции компонентов в стилях (с поправкой на наследование свойств) и к безопасной модификации стилей отдельных блоков, элементов, модификаторов.

Конечно, при использовании специфических стеков технологий (React, Vue…) можно организовать такую «изоляцию» и другими способами (CSS in JS, детка!), но они тянут за собой множество специфических инструментов.

Обучение

«Учусь, следовательно, существую», перефразируя Декарта. Если перестать учиться, можно быстро «выпасть» из профессиональной сферы.

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

Не менее 1 часа в сутки стоит уделять обучению.

Англоязычные ресурсы, которые мне нравятся:

Сообщества во ВКонтакте, за которыми я слежу:

Эксперименты

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

По ходу самообучения постоянно экспериментирую в песочницах, что тоже «прокачивает». К примеру, по ходу чтения книги Лии Веру «Секреты CSS. Идеальные решения» я пробовал все приведённые решения сразу. И многие «решения» оказались идеальными лишь в том смысле, что почти неприменимы в реальной работе.

Редактор кода

После мозгов и рук, это главный ваш инструмент, нужно знать его досканально. Я использую для написания кода Sublime Text 3.

Установленные у меня плагины:

Package Control (менеджер пакетов (для установки всего остального)),
A File Icon (чистое украшательство),
AutoFileName (облегчает указание пути к файлам в проекте),
BracketHightlighter (подсветка открывающей/закрывающей скобки),
Color Highlighter (показывает цвет в стилевых файлах),
DocBlockr (делает более удобным многострочное комментирование, описание функций в JS),
eCSStractor (извлекает список селекторов из разметки (можно в БЭМ-представлении, с амперсандами в местах разделения элементов и модификаторов)),
EditorConfig (добавляет поддержку проектных файлов .editorconfig с универсальными настройками редактора),
Emmet (быстрое написание разметки и стилей),
GitGutter (подсвечивает изменения от предыдущего коммита),
Jade, Pug, JSX, LESS, Sass, Stylus, MarkdownLight, Syntax Highlighting for PostCSS (подсветка синтаксисов соответствующих языков),
PyV8 (нужен для работы Emmet, автоматически ставится вместе с ним),
List stylesheet variables (даёт список стилевых переменных проекта с нечётким поиском),
SideBarEnhancemets (расширяет функциональность контекстного меню сайдбара),
StringEncode (преобразует строки, в т.ч. экранирует HTML-символы),
Sync Settings (синхронизирует настройки, плагины, темы между несколькими компьютерами),
View In Browser (добавляет в контекстное меню файлов проекта пункты для открытия в браузерах).

Прочие дополнения брать здесь.

Горячие кнопки радикально ускоряют работу. Смотри шпаргалку по горячим кнопкам ST3.

Настройки самого ST3 менее важны, но некоторые из них стоит сделать:

включить автосохранение файла по потере фокуса на окне,
добавить в игнорирование некоторые файлы и папки, чтобы не видеть их в ФС проекта,
отключить автодопонение, если оно мешает пользоваться Emmet.

Мои настройки на момент написания этого материала (за исключением темы оформления и словаря проверки орфографии).

Я активно пользуюсь переключением между проектами (сохраняю проекты ST3 в директорию проекта) и нечётким поиском по файлам (Crtl + P на Windows, Cmd + P на OSX).

Я экспериментировал с Atom (использовал его 4 месяца, но вернулся к ST3 из-за скорости работы) и VS Code. Для обоих этих редакторов удавалось найти похожие дополнения и организовать весьма похожий рабочий процесс.

DevTools

Второй по важности инструмент, даёт понимание того, как сработал ваш код. Поскольку изначально мы верстаем под самый распространенный в ЦА браузер (почти для всех проектов это Chrome), речь именно про DevTools Google Chrome.

Для верстальщика наиболее важны вкладки Elements (узлы DOM и применённые к ним стили в подвкладке Styles) и Network (активность браузера при открытии страницы), однако это лишь малая часть возможностей.

Для изучения:

Git

Работать над кодом (да и любым текстом) без системы контроля версий — немыслимо. С Git вы получаете:

Удобную работу в команде (даже если два разработчика правили один и тот же файл).
Удобство собственной работы на двух (и более) рабочих местах.
Полную историю изменений в проекте с возможностью возврата к любой временной точке.
Резервную копию на удалённом сервере (github, bitbucket, gitlab…).
Автоматическую проверку форматирования и некоторых типовых ошибок по хукам (перед коммитом, перед пушем…).
Возможность логического ветвления (разработка или проба какой-либо возможности проекта в отдельной ветви разработки).
В комбинации с github — интерфейс принятия изменений из ветки или форка (Pull Request) с возможностью построчного обсуждения предлагаемого кода.

Для освоения git рекомендую отличный скринкаст Ильи Кантора (на данный момент там отсутствует раздел про удалённые репозитории, но это единственный минус) и переведённый на русский язык скринкаст про Git от lynda.com.

См. так же мою шпаргалку по командам Git.

Терминал

Я использую командную строку по нескольким причинам:

Существует множество консольных инструментов, которые удобнее (и развиваются быстрее) инструментов с графическим интерфейсом и при этом бесплатны. В отрыве от вёрстки/фронтенда, к примеру, инструмент для скачивания видео с youtube, в одну команду сохраняющий видео (с он-лайн сервисами это менее удобно).
Можно писать собственные инструменты на Javascript. Например, генератор файловой структуры новых блоков в проекте.
В моей работе много задач (часто — рутинных, типа сборки спрайтов), которые могут быть автоматизированы консольными утилитами. Вся автоматизация проекта у меня работает на Gulp, а у него лишь консольный интерфейс.
Некоторые файловые операции быстрее делать из терминала.
Git имеет консольный интерфейс (все GUI для Git — лишь надстройки над командами в терминале).
~~Можно воображать себя хакером~~.

Для студентов с Windows на базовом и продвинутом курсах по вёрстке в EpicSkills я рекомендую использовать GitBash, чтобы у владельцев Windows, OSX и Linux были похожие команды в терминале, но сам недавно внедрил в свою практику терминал подсистемы Linux.

Использую алиасы (сокращения для длинных команд) для Git-команд и для быстрого перехода в папки конкретных проектов. Пример файла с алиасами.

Препроцессоры

Из стилевых препроцессоров я пробовал LESS, Sass и stylus (плюс, условно, PostCSS). На данный момент остановился на Sass (увы, stylus не разрабатывается более), хотя остались в поддержке и проекты на LESS. Возможности нативного CSS пока не устраивают и на призывы отказаться от препроцессоров я смотрю как на «ребячество в отрыве от реальной жизни».

В плане написания разметки мне по-прежнему очень нравится писать обычный html, однако для относительно простых проектов я всё чаще использую pug.

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

Автоматизация

Если вы занимаетесь веб-разработкой как хобби (как некоторая часть русскоязычных веб-евангелистов) и самые сложные ваши задачи — сайты котов и прочие «проекты», где вы сами себе заказчик, то можно обойтись и без автоматизации, ибо вам не нужны:

процессинг и постпроцессинг стилей и разметки,
автоматическая оптимизация изображений,
автоматическая сборка и пересборка (растровых и/или векторных) спрайтов,
локальный сервер в пересборкой стилей/разметки/чего_угодно, обновлением страницы в браузере и возможностью смотреть страницу с любого компьютера или мобильного устройства в той же локальной сети.

Я автоматизирую рабочий процесс с помощью Gulp (про который есть отличный скринкаст), т.к. на собственных проектах (я фрилансер) не нуждаюсь в возможностях Webpack (сейчас работаю по одному стороннему проекту с React, там, конечно, Webpack).

Есть мой стартовый репозиторий с автоматизацией и более простой репозиторий для студентов.

Стартовая библиотека

Постоянно приходится верстать похожие элементы страницы. Разумно сделать библиотеку компонентов с универсальной разметкой и самой базовой стилизацией для коросспроектного использования. У меня такая библиотека внедрена в стартовый проект.

Разное

Раскладка Бирмана

Это типографская раскладка, позволяющая вводить стрелки, кавычки-ёлочки, разные типы тире и прочие типографические символы без запоминания их кодов и/или на клавиатурах без цифрового блока.

Переключение раскладки

Нередко ошибаюсь с раскладкой при наборе, так как (стыдно), по-прежнему, часто смотрю на клавиатуру. Немного помогает Punto Switcher, но с раскладкой Бирмана он несколько глючит: показывает два пункта «Русский язык» и два «Английский язык», а ТП перестала отвечать на обращения.

Обмен скриншотами

Отправлять студенту или клиенту скриншот с какими-либо пояснениями прямо на картинке — это удобно. Использую для этого Monosnap.

Измерения на экране

Для измерений, получения цвета с экрана и в качестве экранной лупы (всё — по горячим кнопкам) использую PicPick.

Хранение паролей

Удобно хранить пароли в базе данных, можно делать пароли примерно такого вида: Gji%86gjl00ljg67c;s0-, а помнить придется лишь пароль к самой базе данных (если его забыть, то — всё тлен). Использую кросспатформенную KeePass и имею несколько резервных копий файла с паролями (все компьютеры, телефон, планшет).

Заключение

Поделитесь своими способами оптимизации рабочего процесса.

Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.