Стратегия для вёрстки "с нуля"
Текстовый редактор
Немножко истории
Начинал верстать в 2000-м году с родного для Windows Notepad'а. Тогда ещё кнопочка-баннер была популярная такая. Но без подсветки синтаксиса верстать конечно было сложно. Устроившись на ГРЭС-1 для эффективности использовал Intellisence InterDev'а в MS Visual Studio 6. Была возможность использовать автогенератор Frontpage, но после полученных знаний по HTML и CSS и желания придерживаться стратегии разделения кода и оформления, любые автогенераторы были отвергнуты как зло =) В том числе были отвергнуты Flash и Silverlight как закрытые/компилируемые технологии, расчёт оказался верен, умерли (нынче так же умирают и js-фреймворки, особенно с развитием CSS) ;)
По переезду в Москву продолжил пользоваться MS Studio, но, как только устроился в GeneGo, где платные продукты MS были не в почёте, перешёл на jEdit.
Сейчас
Notepad++ с плагинами:
- CSS-zencoding - удобная штука вместо Intellisence, пишется на манеру CSS3-правил + разные сокращения которые следует выучить.
- TextFX - после установки ZenCoding пользуюсь им реже, но у него по прежнему много полезных функций.
- XMLTools - для XSD-валидации, иногда для прямой (небраузерной) XSLT-трансформации и авто-форматирования.
На новый компьютер не стал устанавливать MS Office, при необходимости пользуюсь MS Office Viewer'ами и Google-документами.
Платформа и браузеры
Да, я продолжаю оставаться на Windows, и в сторону Linux'а не заглядываюсь, поскольку использовать графический интерфейс, мне проще. Всё же я больше разработчик, чем админ, командной строкой наелся во времена NortonCommander'а. В своё время установкой систем тоже занимался, теперь же, как инженер, предпочитаю сосредотачиваться исключительно на веб-разработке, а не на настройке окружения.
От платформы идёт и выбор того какую поддержку браузеров обеспечивать, и соответственно насколько дорого (по трудозатратам) будет обходиться тестирование (использование вирт. машин).
Internet Explorer
Сейчас у меня Wingows 7 с IE8. Для Windows XP, который ещё долго может жить, максимально можно установить только IE8 (см. таблицу). Так что, как в своё время сообщество веб-разработчиков не могло отказаться от поддержки IE6, то же самое произойдёт и с IE8, но новые фичи в коде использовать не запрещено (см. далее). О js-скриптах для IE5+, эмулирующих поддержку кода написанного под IE7/8, в курсе, но это плохой способ поддержки обратной совместимости.
Opera
Сейчас у меня установлена 37-я версия, которая недоступна на XP и Vista. Можно конечно тестировать Presto, тем более что в 2016-м году вышла версия 12.18. На XP можно поставить максимум 28-ю (см. таблицу), а на 98-й Windows версию 10.10, но до таких динозавров желания скатываться нету =)
Mozilla Firefox
Не использую, тестирую в Chrome. Самый свежий 46-й Firefox по заявлению разработчика можно установить на Windows XP.
Apple Safari
Имеет смысл тестировать при наличии удалённого доступа к Mac. Сейчас таким делом не заморачиваюсь. Apple Safari на том же движке WebKit что и Chrome (до 28-й версии). На XP можно установить самую свежую win-версию (5.1.7).
Google Chrome
Установлена 34-я версия, автообновления отключены. На XP можно поставить самую свежую версию.
Другие браузеры...
Кстати, нынче в таблицах сравнения всё чаще пишут не названия браузеров, а названия движков. Из "других браузеров" следует тестировать те, что используются для смартфонов и планшетов. В конечном счёте такое тестирование должно оплачиваться заказчиком дополнительно, в том числе и с предоставлением соответствующего устройства.
Рабочее окружение
Поскольку я интересуюсь прежде всего фронтендом, и не занимаюсь нынче серверной частью, то настройка веб-серверов меня менее всего интересует. Сейчас не оптимизирую файлы, пишу код таким образом, чтобы макеты можно было запускать сразу, без настройки окружения - без запуска скриптов Grunt/Gulp.
CSS-препроцессоры и постпроцессоры
Основная засада с ними это перевод проекта с одной технологии на другую, например при смене версии Bootstrap: v3 на LESS, v4 на SASS, v5 вообще обещают на PostCSS. Соответственно, чтобы сэкономить время при портировании проекта, в дальнейшем можно использовать только схожий синтаксис. Stylus мне показался интересным, благодаря возможности клиентской трансформации кода в CSS, но уже сейчас народ переводит код на PostCSS, за ним будущее, читайте интервью Андрея Ситника.
В принципе, чтобы не маяться настройкой сервера, если находишься OnLine, Достаточно просто использовать CodePen, там на выбор можно указать любой процессор. Но в целом я тоже придерживаюсь мнения, что нынешний Web overengineering.
Вставки повторного кода
Server Side Includes, подразумевают настройку сервера ;) Перевёл это дело на клиентскую сторону за счёт рендеринга XML-движком, который позволяет включать отдельные файлы plain-текстом, и загружать деревья элементов - открыл локальный файл в браузере и работает! Таким образом порог вхождения в проект будет ниже, проще разобраться.
Помимо этого, разделение на xml-контент и xsl-трансформацию в html позволяет легче менять отображение, поскольку xml-элемент может быть трансформирован в какой угодно набор html-элементов (wrapper/inner) и содержать любые необходимые атрибуты и их значения, будь то свой велосипед, Twitter Bootstrap, Google Material Design Light, Yahoo PureCSS, LeafCSS или что-то ещё...
Про js/css фрэймворки написано отдельно, а вывод из неё сделал следующий: завязываться на фреймворк сопоставимо со сдачей своего проекта на аутсорс. Со стороны разработчика: ты никогда не можешь быть уверен за то, что чужой код не повлияет на тот, который ты пишешь. Соответственно, можно будет потерять больше времени на багфиксы. Со стороны работодателя: если проект жёстко завязан на какой-либо фреймворк, то и специалистов придётся искать соответствующих, которых, со временем и умиранием или несовместимостью версий фреймворка/используемой технологии, может стать очень мало.
Облако/Интернет
CVS
На предыдущем месте для контроля версий использовали TortoiseSVN, для баг-репортов Jira. Сейчас осваиваю Git, в качестве сервера использую GitHub, в качестве GUI для Git использую TortoiseGit, что логично.
DevLinks > Хранение кода
На GitHub имеет смысл выкладывать крупные проекты, а всё что помельче и попроще/атомарно (небольшие тесты), что хотелось бы показать сразу в действии, буду выкладывать на CodePen. На CodePen по сравнению с jsFiddle не нужно каждый раз жать кнопочку отрисовки, свой код можно тематически организовать расставив тэги, помимо JS подсвечиваются ошибки CSS и HTML, и можно даже блог вести!
DevLinks > Самообучение
В качестве отличного справочного ресурса по фронтенду использую webref.ru (реинкарнацию htmlbook.ru), спецификации от w3c, да и stackoverflow никто не отменял ;)
Отказоустойчивость
До появления таких модных ныне словосочетаний как "Mobile first", "Progressive enchancement", я успел узнать про CSS naked day и CSSZenGarden. По тому же naked-принципу сайт проверялся на отключение отображения картинок и js-скриптов (показан только тот контент и элементы, которым хорошо и без js). Ортодоксальные последователи такого принципа, даже свои "вебдванольные" AJAX сайты верстают так, чтобы они могли быть одновременно и "вебоднонольными" (с перезагрузкой страницы) ;) Чисто теоретически такой подход хорош, но на практике требует бОльших трудозатрат, посему не придерживаюсь (хоть и хотелось бы).
Чтобы придерживаться стратегии "Mobile first" нужно тестирование на как большем количестве мобильных устройств, что пока не входит в мою практику, так что у меня "Screen first" с тестированием при уменьшенном размере экрана (mobile-устройства отличаются от desktop'а не только размером экрана).
Про CodeStyle отдельный пост нужно писать... Про CSS вкратце: текущая реализация БЭМа избыточна (хотя его красиво использует уже и Google), совсем от каскада (мощной фичи CSS) я бы, наверное, отказываться не стал. Использую lowerCamelCase для именованияБлока (но по хорошему надо прийти к Венгерской нотации - с набором префиксов перед первой заглавной), нижнее подчёркивание чтобы отделить _имяЭлемента, дефис для -модификатора, в том числе чтобы указать блоку-наименованиеСостояния, которое может быть и самостоятельным (глобальным), например -hidden. Об IE6 забыли, потому множественные селекторы наконец-то приветствуются.
