На странице проекта появились читы.
Всё перед глазами. Удобно:

Поддержка в WebStorm

Частичная, в процессе разработки, например, в последнем билде 94.335

• есть Zen HTML Elements, но с недоделками, например script:src развернется неправильно, а вот так — <script:src></script:src>
• есть алиасы по типу div#page>h3.title+ul>li.item*3>a, но с некоторыми ошибками, например, создаёт только один вложенный li
• не реализованы Zen CSS Properties

В этом билде в настройках увидеть Zen невозможно, он зашит внутри (пока?)
Несмотря на явные недоделки, я уже пользуюсь алиасами и ZenHTML

Решение

1. Фоновый цвет у блока убрать
2. Внутрь блока добавить обертку
3. Обертке задать фоновый цвет
4. Обёртке задать border-radius, меньше на толщину бордера, чем у внешнего блока

<div class="button"><div class="button-inner">Кнопка</div></div>

.button
{
    border: 5px solid #000;

    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
}

.button-inner
{
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -khtml-border-radius: 25px;

    background: #fff;
}

Update

Между фоном и бордером появляются дырки, если border-radius у обоих блоков одинаковый и:

1. Внутреннему блоку задана большая высота (height)
2. Его содержимое имеет большой font-size
3. Его содержимое представлено многострочным текстовым узлом

Внутреннему блоку нужно задавать border-radius с меньшим значением, чем у внешнего блока, потому что при border-radius:30px внешняя сторона бордера (толщина которого равна 5px) скруглена с радиусом 30px, а внутренняя сторона скруглена с радиусом 25px, меньше на толщину бордера.

Спасибо Александру Ермолаеву за багрепорт, а Степану Резникову за допиливание решения и объяснение про кривизну бордера.

В ежедневной работе я имею дело с задачами с типом «ошибка», и у каждой ошибки есть важность — «minor», «major», «critical», «blocker». Работая в этой отрасли долго и каждый день сталкиваясь с критикалами и мажорами, возникает иллюзия, что я занимаюсь делом крайне важным и ответственным.

Вот только ой ли? Сильно ли я ошибусь, если скажу, что работа HTML-верстальщика — это сфера обслуживания? Я создаю сайты, на которых люди могут найти, купить или продать услугу, товар или информацию. Что произойдет, если моя ошибка в вёрстке помешает пользователю получить, купить или продать услугу, товар и т.п.? Любой руководитель скажет, что это серьезная ошибка, и на её исправление бросит силы разработчика даже в выходные дни и среди ночи.

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

Потому что талидомид.

Талидомид — самое безопасное и эффективное снотворное в мире. Мировая фармацевтика в 1950 году посчитала изобретение этого препарата прорывом в лечении расстройств сна. Ещё бы! Человек погружался в здоровый и совершенно естественный сон. Особенно положительный эффект наблюдался у беременных.

Но в течение 10 лет после поступления этого препарата в продажу, в 34 странах мира родилось больше 12 000 детей с множественными врожденными уродствами. Из них 7 тысяч детей умерло в первые же минуты жизни.

12 000 искалеченных детей, 24 000 искалеченных родителей из-за несовершенства клинических испытаний, а другими словами из-за того что препарат был рекомендован для беременных после испытания всего на одном виде животных — на мышах. Как много позже выяснилось, помимо мыши и человека, тератогенный эффект лекарства возникал ещё только у одного существа, у шиншиллы. И для этого было достаточно принять одну таблетку препарата. Всего одну!

Одна таблетка и… искалеченная жизнь.

А наши блокеры и критикалы – что они? Не больше, чем иллюзия важности. Если не исправить ошибку на сайте, максимум, что произойдёт — пользователь сайта поморщится и уйдет с сайта. Это МАКСИМУМ. Да, владелец сайта потеряет возможного клиента. Да, прибыль будет меньше. Но никто не умрёт, дети не останутся сиротами, здоровье людей не ухудшится, и я — виновник ошибки — буду спать спокойно, в отличие от того человека, кто разрешил талидомид к продаже.

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

И теперь, когда менеджер утверждает, что ошибку в production надо срочно чинить, я понимаю, что на самом деле менеджер заботится не о том, что пользователю будет неудобно пользоваться сайтом, а о том, чтобы сайт не потерял этого пользователя. Такому менеджеру хочется посоветовать делать сайт для чего-то по-настоящему стоящего. То есть делать сайт, на который пользователь придёт за ценной информацией, а не за тем, чтобы посмотреть на закругленные уголки.

Есть отличный рекламный ролик компании EDS. Он в том числе иллюстрирует степень терпимости наших пользователей к ошибкам в свёрстанных нами сервисах. Я испытываю радость, когда смотрю на пассажиров в креслах. Они  счастливы! Больше мне добавить нечего.

Это просто волшебство. Еще в начале зимы это был невероятный концепт от Вадима Макеева – прекрасная, и как мне казалось, трудно реализуемая идея. Основная идея – написание HTML с использованием CSS-like selectors. А сейчас это уже отлаженная реализация, которая потрясает своими возможностями.

Например, для меня неожиданностью стали такие возможности (в скобках время описания этой фичи в видеоролике):

1. создание элементов с упорядоченным именованием [0:40]
2. встраивание в CSS-like selector любых заранее созданных снипетов (в IntelliJIDEA это называется LiveTemplates) [1:18]
3. оборачивание фрагмента кода с синтаксисом Zen Coding (не просто обернуть тегом div, а, например, обернуть фрагментом кода div#wpar>div#wrap-inner и даже больше – надстройка новых узлов, предшествующих не только обертываемому блоку, а любому его родителю div#header+div#page>div#wpar>div#wrap-inner — крутизна!) [2:15]
4. оборачивание каждой строки выделенного фрагмента однотипными элементами, прям как в MS Word, при этом используются возможности предыдущего пункта – вообще крутизна! [3:33]
5. возможность использовать не только вызов статических снипетов, как в пункте 2, а применять к ним операторы множения и создания родственных осей [4:21]
6. возможность в этих снипетах кастомизировать имена CSS-классов и ID, как и в обычных элементах [5:24]

Вадиму Макееву и Сергею Чикуенку выражаю свой восторг идеей и отменной реализацией. Парни, вы молодцы!

PS Если я неправильно просклонял фамилию Сергея, прошу простить и подсказать, как правильно — я исправлю

Удивляюсь тому, насколько это быстрый и информативный поток — быстрее и информативнее, чем большие блоги и журналы. Наверное потому что «большой» пост требует вдумчивости в свои мысли и правильного оформления, а в твитере чирикнул первую необдуманную (но содержательную мысль) и всё.

И забавно, возникает иллюзия, что я вживую общаюсь с людьми, то есть голосом.

Интересный эффект от сервиса.

Система пользовательского поиска позволяет создать для своего сайта индивидуальную поисковую систему на основе технологий Goolge

Прикрутил.
Теперь у меня есть поиск по сайту

• Моргание текста
• Задержка отображения всей страницы в ИЕ
• Для загрузки шрифта не увеличивается количество параллельных загрузок с одного домена (неудивительно, но нужно помнить)
• Индикация загрузки документа, пока не загрузится шрифт

И рекомендации от Стива (вольный пересказ):

• Используйте @font-face только тогда, когда вы совершенно уверены, что он вам нужен.
• Если вы используете несколько файлов шрифтов, запрашивайте их с разных доменов
• Избегайте неиспользуемых правил @font-face — IE всё равно будет их загружать, несмотря на то, что они не применяются ни к одному элементу
• Используйте gzip-сжатие файлов шрифтов и передавайте с заголовком Expires, выставленным надолго.
• Используйте постзагрузку файлов шрифтов, по крайней мере в IE.

Настройки интерфейса можно поправить здесь:

Ежедневное общение с компьютером влияет на жизнь больше, чем может показаться

Кстати, теперь недостаточно сказать «записал в блокноте». Приходится явно указывать, что в бумажном. Вот так на наших глазах слова приобретают вторые смыслы. Забавно

Вот способ:
1. в IDEA сделать File → Export settings → получить файлик settings.jar
2. в WebIDE сделать File → Import settings ← загрузить settings.jar

Update:
Выяснилось, что Live Templates для CSS от Яндекса были включены в инсталляцию IntelliJIDEA уже в поздних билдах Diana. И в Maia они тоже уже идут по-умолчанию. А вот в WebIDE они случайно не попали (ну EAP же).

Чтобы в WebIDE подложить наши LT, скачайте архив и разверните:
MacOS: ~/Library/Preferences/WebIDE10/templates
Win: User\YouName\.WebIde10\config\templates\

А главное, работая в ней, можно навсегда забыть все хитрости настройки IDEA Project, которыми я делился здесь — достаточно из WebIDE сделать File -> Open Directory и вперёд

С пылу с жару

Web IDE is available in 2 editions:

Standard Edition

with following key features:

• Intelligent Editor: for HTML, CSS, JavaScript, XML
• Project and Code Navigation: specialized project views, file structure views and quick jumping between files, classes, methods and usages
• Error-Free Coding: on-the-fly code analysis, error highlighting and quick fixes
• VCS Integrations: out-of-the-box support for Subversion, Perforce, Git, and CVS with changelists and merge
• FTP Sync: update server using FTP or SFTP
• Cross-platform: works on WIndows, Mac OS X and Linux

PHP Developer Edition

adding the following to the standard edition:

• PHP Development: PHP syntax highlighting, documentation lookup, refactoring and debugger
• SQL support: coding assistance, SQL console and Database browser

Я работаю в ней вот уже несколько месяцев. Доволен
Если обнаружили багу, сделайте хорошее дело — напишите багрепорт

PS: EAP build includes a 45-day time-limited license..

Как хорошо.

Если кто-то ищет бесплатное хранилище для своего кода, то большой выбор по разным параметрам доступен на сайте с весьма неинтуитивным названием http://www.svnhostingcomparison.com/

…

Павел, спасибо за ссылку.

Есть структура:

<a class="b-link" href="" >
    Телефон в копилке
    <img class="b-img" src="image.png" alt=""/>
</a>

Есть стили к ней:

.b-img {
    display: none
}

.b-link:hover .b-img {
    display: inline
}

Известно, что второй селектор в ИЕ6 не отработает.

Как мы с этим боролись?

На ссылку вешали одноразовый expression и расширяли селектор:

* html .b-link {
    zoom: expression(
        runtimeStyle.zoom = 1,
        onmouseover = function() { className += " b-link-hover" },
        onmouseout = function() { className = className.replace(/ b-link-hover/, "") }
    );
}

.b-link-hover .b-img,
.b-link:hover .b-img {
    display: inline
}

Это было старое решение.

Элегантное решение

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

.b-link:hover{
    word-spacing: 0
}

Суть проста – этот селектор перезапускает Reflow, после чего ИЕ6 начинает применять селекторы для элементов в ссылках .b-link:hover .b-img {}
Приятно, что это решение работает несмотря на то, включен ли у ссылки hasLayout или нет. И не пугайтесь, это не обнуление пространства между словами, а дефолтное значение браузера.

Слова благодарности

Спасибо Роме Комарову за статью, к которой я сегодня очередной раз вернулся. Благодаря этой статье я понял, что можно не писать expression, если написать что-то из нижеследующего

.b-link:hover{background: #rgb}
.b-link:hover{background: url(transparent.gif)}
.b-link:hover{background: url(about:blank)}

Эксперимент показал, что свойство background-image не заставляет ИЕ6 перерисовать DOM. Этот селектор проблему не решает

.b-link:hover{background-image: url(about:blank)}

Но моя проблема была в том, что у элемента .b-link уже был фоновый цвет и сбрасывать его селекторами Ромы мне нельзя, потому что «дизайн».

.b-link{background: #feb247}

Первое, что пришло в голову – продублировать фоновый цвет. Оказалось, что ИЕ написан хорошо Он не перезапускает reflow, так как значение #rrggbb не изменилось:

.b-link{background: #feb247}
.b-link:hover{background: #feb247}

Второе, что мне пришло в голову — изменить последний символ в #rrggbb на «один вниз» — было 7, стало 6. И, да, заработало. При этом мой глаз не смог различить подмену цвета:

.b-link{background: #feb247}
.b-link:hover{background: #feb246}

Я позвал верстальщиков нашей Службы HTML-верстки и поделился тем, что решение Ромы рабочее и что у него есть такой нюанс с изменением rgb.

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

Я поискал 5 минут и был найден word-spacing.
Итого, стили выглядят так:

.b-img {
    display: none
}

.b-link:hover {
    word-spacing: 0
}

.b-link:hover .b-img {
    display: inline
}

Пользуйтесь на здоровье

As you may already know, Internet Explorer supports a technique of inserting JavaScript snippets into css expressions. In case you need to edit such code, IntelliJ IDEA 9 will be happy to assist you with completion and highlighting!

Helping You with JavaScript Expressions in CSS
Хорошо!

If you ever tried to understand or edit regular expression like this in JavaScript or ActionScript:
regular expression in JavaScript editor of IntelliJ IDEA 8

Then you are sure to find IntelliJ IDEA 9 a more helpful in this way. Now you can repeatedly press Ctrl+W to see non-capturing groups:

Better Regular Expression Editing in JavaScript and ActionScript
Хорошо!

Instead of wasting your time searching the menus and toolbars in an attempt find out that action you need right now, use the Find Action command (Ctrl+Shift+A) to quickly locate what you need. It works just like Go to Class:

Find Action Saves Time
Прекрасно!

Ссылка всегда должна вести на какой-нибудь ресурс, будь то веб-страница, файл или якорь. Другими словами, атрибут href всегда должен содержать адрес ресурса.

Не следует использовать ссылку, если поставить ее не на что, то есть ресурса нет. Обработчик события onclick лучше прописать непосредственно у элемента, который должен нажиматься, а для сигнализации его «кликабельности» следует задать стили для курсора.

Толковая статья, написанная Степаном больше трех лет назад, актуальна до сих пор.

Меня по-доброму улыбает категоричность многих комментаторов, которые говорят про «экономию на спичках». Хотя, если захотеть, понять их можно – они-то верстают сайты, а в статье речь про оптимизацию загрузки страниц порталов.

Прислушались бы к «умным дядькам» и мотали бы на себе на усы.
Так нет же, их болото единственное в мире )

В первой части статьи мы поговорили о том, что IntelliJIDEA — это среда разработки для Java, которую можно несложным образом приспособить для клиентской верстки. Мы разобрали, как единожды создать IDEA Project и как сделать так, чтобы разработка каждого последующего Нашего Проекта не требовала делать это заново. Еще мы поговорили о том, что интерфейс IDEA интуитивно понятен и привычен. И при этом смотрели на такой слайд.

А именно, после создания IDEA Project в Project Panel мы видим сразу вот такую картину:

То есть мы видим не только те самые физические сущности IDEA Project-а, но еще и Libraries, которые нужны для Java-проекта. А нам их видеть крайне нежелательно.
Чтобы не видеть этих файлов, нужно сменить View:
- По умолчанию он установлен в вид IDEA Project

- Выбрать нужно вид Scope: Production

А сейчас я предлагаю Вашему вниманию вторую часть презентации «Вёрстка в IntelliJIDEA».

Часть вторая

Девиз:
Забудьте про рутину

За всеми фичами Идеи, о которых я расскажу, я хочу чтобы не потерялась одна мета-фича. В чем она?

IntelliJIDEA умеет отвечать на вопросы разработчика.
Она отвечает на все явные вопросы, которые я ей задал явно. Ну, то есть, я попросил её что-то сделать — она сделала.
И ещё она отвечает на множество неявных вопросов, которые я ей сам не задавал, но ответы на которые меня интересуют постоянно.

Без примеров не сильно понятно, поэтому я раскрою свою мысль понятной аналогией.

Что такое Яндекс?
Яндекс — это такая компания, основная задача которой — давать ответы на вопросы пользователей.

На какие вопросы отвечает Яндекс?

1. На вопросы явные.
   Это вопросы, которые пользователи задают в поисковой строке, а Яндекс отвечает на них на страницах результатов поиска.
2. На вопросы неявные.
   Например, «какая сегодня погода», «происходит ли сейчас что-то важное», «можно ли проехать по городу». Яндекс отвечает на них своими справочными блоками на главной странице портала.

Ну вот, поведение IntelliJIDEA очень похоже на миссию Яндекса
Только у Яндекса ответ на вопрос пользователя — это информация, а у IntelliJIDEA ответом на вопрос разработчика является конкретная помощь.

А чем физически выражается вёрстка?
А она выражается некими действиями, которые разработчик совершает своими пальцами, работая над неким кодом.

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

То есть, если попытаться классифицировать действия, совершаемые над кодом, то я могу выделить три группы действий:

1. Работа с такой абстракцией, как файлы Проекта.
   Например, копирование, переименование, поиск и другие действия с файловой системой
2. Работа с такой абстракцией, как литеральная запись кода.
   Я имею в виду работу со строками файла + функции систем контроля версий
3. Работа с такой сущностью, как структурные элементы кода.
   Я имею в виду нюансы работы с конкретным кодом (HTML/CSS и др.)

Хорошая IDE для каждой из этих групп предоставляет некие фичи, которые облегчают выполнение этих действий.

Живое Целое

Но IntelliJIDEA двинулась дальше — она не проводит разделения кода на группы, она работает с Проектом, как с Живым Целым. Звучит это странно, но Java-разработчики меня прекрасно понимают. Я поясню, что имел в виду.

В то время, как большинство редакторов работают с Проектом, как с отдельными сущностями файлов на файловой системе, IntelliJIDEA с файловой системой не работает. Идея работает со своими кешами, в которых хранится копия-слепок файлов Проекта.
Oops?

Выглядит это так: когда вы поднимаете утром IntelliJIDEA, она загружает в память IDEA Project, который мы создали в первой части статьи. «Загружает» означает буквально следующее:

1. Идея смотрит в IDEA Project File, находит в нём информацию о том, какие IDEA Modules в нем описаны.
2. После этого смотрит в IDEA Module File и ищет путь к Content Root.
3. Затем переходит на файловой системе в этот Content Root и всасывает файлы Нашего Проекта в свои кеши. Всасывает и при этом индексирует.

«Индексирует» означает выявляет взаимосвязи файлов Проекта на основании анализа структурных элементов кода. Именно благодаря этому в IntelliJIDEA есть, к примеру, такой мощный инструмент, как Инспекторы Кода.

Я приведу несложный пример.
Например, индексация дошла до файла index.html.

1. Идея этот файл всасывает в свои кеши
2. После чего его парсит и, например, встречает в нём подключение стилевого файла

   <link type="text/css" href="../css/idea.css"/>

3. Внутри своих кешей Идея регистрирует взаимосвязь между файлами index.html и idea.css
4. После этого смотрит в файл idea.css и запоминает CSS-селекторы, которые в нём описаны.
5. Потом сравнивает селекторы из файла idea.css с именами классов у HTML-элементов в файле index.html
6. И если в idea.css есть неиспользуемые в index.html CSS-селекторы, то Идея об этом сообщит в заметной но ненавязчивой форме.

Я только что привел пример ответа Идеи на мой неявный вопрос: «Мои стили актуальны? Есть ли среди них рудиментарные селекторы, которые уже не используются, но болтаются под ногами во время разработки и выливаются в продакшн?»

Эта фича и многие другие были бы невозможны, если бы Идея не «всасывала» все взаимосвязи файлов Нашего Проекта в свои кеши, а работала с файлами, как с отдельными сущностями (как это делают многие другие редакторы)

Спешу успокоить тех из вас, кто уже озадачился: «Если Идея работает только со своими кешами, а не с файлами на файловой системе, то как тестировать в браузерах? Изменения в браузере отображаются не сразу?»

Сразу Как только IntelliJIDEA теряет фокус (вы переключились на другое приложение), происходит моментальная синхронизация кешей Идеи с файловой системой. «Моментальная» означает мгновенная, молниеносная… Придумайте еще более точный синоним
Это происходит настолько быстро, что можно работать с Идеей годами и никогда не узнать про её кеши.

К слову, редактируя код, нет необходимости руками сохранять ваши изменения. Ctrl S можно забыть — ваши изменения сохраняются автоматически. И к тому же, никогда ничего не потеряется, потому что внутри IntelliJIDEA ведется Local History ваших изменений (но об этом чуть позже).

Сразу хочу ответить на еще один скептический вопрос: «Наверное, из-за постоянной синхронизации кешей и ведения Local History всё безбожно тормозит?» Нет, всё летает. Наши ребята из Питера — молодцы, умеют!

К слову, именно благодаря Живому Целому в xsl удобно навигироваться по шаблонам, которые связаны друг с другом через импорты. То есть, если вы используете <xsl:apply-imports/>, то можете легко провалиться в базовый шаблон из переопределенного по Cmd Click или Cmd B.

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

GUI and Settings

Интерфейс действительно привычен и удобен: основная панель для редактирования файлов, вспомогательные панели (типа Project, Structure, Changes), главное меню программы, тулбар с иконками для частых действий и контекстное меню по правому клику. Освоить его и, главное, модифицировать под свои потребности можно без особых усилий. Кастомизировать в GUI можно не всё, но многое. Мне хотелось бы ещё «таскабельности» табов, которой нет, но и без неё вполне можно.

В процессе описания я буду вас отправлять в Диалог Настроек IntelliJIDEA. Он находится в двух кликах мыши от нас File -> Settings. Или если пользоваться хоткеем, то еще ближе: Cmd,

Cmd, — это хоткей в Макоси. В винде, я честно признаюсь, хоткей не помню

File Templates

Как картина начинается с чистого холста, вёрстка начинается с нового файла.
Создание файла в Идее ничем не примечательно.

Right Click -> New -> Выбрать шаблон

Примечательно, что предустановленные файловые шаблоны (которые идут в коробке) можно полностью модифицировать под свои нужды. А еще можно создавать свои шаблоны. Делается это в Settings -> File Templates.

В примере на скриншоте видны два дефолтных шаблона Html и Xhtml, внутри которых я описал некую заготовку для создания яндекс-файлов. В них я указал тот DOCTYPE, который используем мы, Meta X-UA-Compatible, который используем мы, подключение стилей по правилам, которые используем мы и т.д. Ничто вас не остановит, если вы захотите создать свои файловые шаблоны для XSLT, например.

Но в целом, File Templates (далее по тексту FT) не заслуживают пристального внимания — ничего сногсшибательного Того же результата можно достичь, если задействовать Live Templates.

Live Templates

Что такое Live Templates (далее по тексту LT)? Это некие текстовые шоткаты, которые по нажатию какой-то клавиши превращаются в соответствующий фрагмент кода. О них я еще расскажу ниже в аспекте создания элементов кода. LT тоже есть предустановленные, и есть возможность создавать свои. Использовать LT для создания каркаса новых файлов удобнее, чем FT. Удобнее тем, что они предоставляют возможность после разворачивания кода пройти по элементам кода в том порядке, который я выбрал и заполнить эти места.

Создать заготовку для создания яндекс-файлов можно набрав в файле текст «html» и нажать Tab. После этого создастся та же структура, что и при использовании File Template (неудивительно, это же я сам создал такой Live Template).

На скриншоте я показал стрелочками порядок обхода файлов. В каждой из точек Идея остановится и подождет, пока я не введу туда то, что посчитаю нужным.

В последней точке пути мы оказались в body документа. Задействуем еще раз Live Templates. Я создал свой LT для создания таблицы table -> Tab:

<table>
<tr>
    <td>
    </td>
</tr>
</table>

Surround, Folding and Code Style

После этого мы поняли, что нам для вёрстки необходим элемент tbody и обернули строку этим элементом. Для этого выделили строку и на Selection-е нажали Cmd Alt J. То есть обернуть можно любой элемент любым элементов. На скриншоте видны дефолтные «обертывания». Обертывание кавычками-ёлочками я создал сам, потому что надоело писать эти entities руками.

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

Я поясню моё утверждение на примере.
Представим, что нам нужно обернуть длинную таблицу с данными дополнительным div-ом. В классическом редакторе, типа notepad.exe, мы должны найти открывающий тег <table> и перед ним написать открывающий <div>. Потом пролистать экран вниз, глазами найти закрывающий тег </table> и написать после него закрывающий </div> А если код не ваш, а вашего предшественника? А если предшественник не структурировал код табуляцией? А если в его таблице ещё несколько вложенных таблиц, и всё вместе это кирпич нечитаемого кода? Представили свои усилия по исполнению обертывания, если вы пользуетесь notepad.exe?

А как это решается в IDEA?
Неважно, как неряшливо ваш предшественник структурировал свой код; неважно, сколько вложенных таблиц в нём, и не важно сколько экранов код занимает. Всё это на себя берёт IDEA. А что делаем мы?
1. Становимся курсором в открывающий тег <table>,
2. Фолдим (схлопываем) таблицу по хоткею Cmd- и выделяем ее мышью
3. Нажимаем знакомый нам хоткей Cmd Alt J и оборачиваем таблицу.

«Обернуть назад» тоже удобно: когда понадобится удалить div-обертку вокруг таблицы в несколько экранов, станьте на этот див и нажмите Shift Cmd Fn Backspace. И пусть макосёвые хоткеи вас не пугают — в винде они попроще.

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

Кстати, после обертывания в примере выше, вы бонусом получаете ещё и хорошо отструктурированный код. IDEA против неряшливости

Структурирование кода, конечно же, может быть вызвано не только в виде бонуса после обертывания, но и по нашему прямому указанию хоткеем Cmd Alt L. Структурирование происходит по неким правилам, которые мы можем подпилить под наши нужды — переводы строк, отбивку табами или пробелами и прочие. Эта возможность называется Code Style. Отныне работа с неряшливым кодом ваших предшественников более не проблема

DTD

Но вернемся к нашей простой задаче: мы обернули строку таблицы элементом tbody. А спустя какое-то время к нам пришел js-программист и сказал, что ему в JS было бы очень удобно некоторые группы строк оборачивать в отдельные tbody, чтобы легко получать доступ к ним.

Вот с таким вопросом ко мне пришел Женя Захаревич: «Можем ли мы это реализовать?» А я не знал, может ли таблица иметь несколько tbody по спецификации. Но знал у кого спросить — у IntelliJIDEA

Cmd Click на имени элемента провалил меня в DTD, в котором я очень быстро узнал, что tbody может быть сколько угодно. Осознайте этот момент: мне не пришлось идти в интернет, открывать соответствующую спецификацию HTML или XHTML, искать в ней раздел про таблицы, а потом еще читать по-английски. Я узнал это не уходя из Идеи за считанные секунды. Правда, для этого нужно уметь читать DTD. Но если вы пишете регекспы (и знаете что такое * + ?), то … Несложно, в-общем.

Custom DTD

А можем ли мы использовать кастомные DTD?
По сути, тут звучит сразу два вопроса:
1. Есть ли поддержка кастомных DTD в IntelliJIDEA?
2. Таки зачем оно нам надо?

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

Как решение — написать свой DTD, выложить его в инет и в доктайпе своего HTML указать путь к этому DTD. Единственная проблема — браузеры не валидируют. Это означает, что браузер никогда не пойдет по указаному нами адресу к нашему кастомному DTD — он посмотрит в свою «внутреннюю» таблицу соответствий версии HTML и DTD. Поэтому наша страница с кастомными атрибутами будет невалидна в любом браузере.
То есть в production оно таки нам не надо

А для разработки очень даже бывает надо. Когда?
Раскрою свежий «Яндекс.Секрет»
Сейчас развивается новая внутренняя технология, которая призвана облегчить взаимодействие HTML-верстальщика и XSL-верстальщика. Она называется ULL, ее автор Макс Максимов.
Идею этой технологии я раскрывать не буду, но сказать пару слов о ней в разрезе кастомного доктайпа можно — эта технология добавляет в наш HTML-документ новые элементы разметки: кастомные атрибуты в своем неймспейсе ull.

Отслеживать правильность использования этих атрибутов мне самому не хочется. Я хочу, чтобы это делала за меня IntelliJIDEA. Для этих целей Максим создал кастомный DTD на основе XHTML 1.0 Transitional, в который добавил правила для ull-атрибутов.
После того, как я подключил в документ этот DTD (на скрине видно, что в public identifier путь указан от локальной папки), Идея стала валидировать мои документы с учетом этого DTD и подсказывать мне правильность написания этих атрибутов.

Autocomplete

То есть, помнить написания этих ull-атрибутов мне уже не нужно — за меня это делает автокомплит.
Автокомплит — ни разу не новшество, он появился в редакторах еще при царе Горохе. Но особенная вкусность автокомплита IntelliJIDEA в том, что он контекстный. Контекстный на основе DTD.

На скрине за скролом всех подсказок не видно, но я поясню — в подсказке нет ни одного блочного элемента. Потому что, как мы хорошо знаем из DTD, внутри параграфа могут находиться только строчные элементы. Или вот еще более конкретный пример:

Спецификация XHTML говорит, что в том месте, где на скрине стоит курсор, могут находиться только те 7 элементов, которые нам подсказывает IntelliJIDEA. По-моему, это ещё один удачный пример ответа на мой неявный вопрос.

Контекстный автокомплит исключительно вкусен в XSL.
XSL-переменные подсказываются исходя из области видимости переменной: та переменная, которая создана в конкретном шаблоне, будет подсказана только в этом шаблоне, в остальных шаблонах и в глобальной зоне видимости она предлагаться не будет.
И по аналогии с HTML, внутри <xsl:call-template> автокомплит никогда не предложит выбрать элемент <xsl:param>, потому что по схеме XSL внутри <xsl:call-template> элемента <xsl:param> быть не может.

А в XML-файлах IntelliJIDEA анализирует структуру редактируемого файла, и автокомплит-меню предлагает использовать уже существующие теги и их атрибуты. То есть IDEA как бы «самообучается»

И завершая тему autocomplete, два слова про подстановку путей к ресурсам: в HTML-атрибутах href="", src="" и в CSS-значениях url() Идея подсказывает пути к ресурсам с помощью autocomplete-меню.

Для вызова автокомплита используется хоткей Ctrl Space. Для Mac OS X тоже используется он, так как Cmd Space занят под смену раскладки клавиатуры.

File Encodings

Кодировка. Больная мозоль для многих и многих роботов — одни не умеют работать с UTF, другие не могут определять кодировку автоматически, третьи при сохранении файла перекодируют в другую…
В IntelliJIDEA с кодировкой всё хорошо — она даёт разработчику свободу выбора по принципу «пиши в той кодировке, которая тебе нужна». Что тут рассказать? Перечислять баги других редакторов и говорить, что в Идее этих багов нет? В этом перечислении нет смысла.
Короче, работая в Идее, можно никогда в жизни не задуматься о том, что файлы могут существовать в разных кодировках

А! Есть всё-таки две фичи, о которых рассказать надо.
Первая — для разных папок Вашего IDEA-Module можно указать разные кодировки.

На скрине видно, что я принудительно указал Идее работать с разными директориями в разных кодировках. То есть, к примеру, при создании нового файла в папке deployment, файл будет создан в кодировке cp-1251, а в папке intelijidea в кодировке utf-8. Нам это особенно актуально, потому что Проектов в Яндексе много. То есть, команд разработки тоже много, и у каждой команды могут быть свои предпочтения в выборе кодировки. Работая в команде, которая не хочет (или по каким-то причинам не может) перейти на utf-8, я один раз выставляю нужную кодировку и больше об этих проблемах не думаю.

А вторая фича — возможность конвертирования файлов из кодировки в кодировку прямо в интерфейсе IntelliJIDEA. Конвертировать можно как файл, директорию, так и группу из того и другого.

Browser Preview

Ну и вот, предположим, что у нас есть уже созданная страница в нужной нам кодировке и с каким-то фрагментом кода. И уже хочется просмотреть в браузере, как она выглядит. Какие есть быстрые способы это сделать?

1. Панель прыжка в браузер. Попробуйте подвести мышь к верхне-правому углу Editor View в любом HTML-документе. Вы увидите всплывающую панель с иконками установленных у вас браузеров. Клик по иконке перебросит вас в браузер, в котором откроется ваш HTML-файл.
   
2. С помощью хоткея Cmd Shift C в Идее можно скопировать полный путь файла на файловой системе в буфер обмена. То есть, открыть на редактирование файл и вызвать хоткей. Дальше переключиться руками в браузер и Cmd V в адресной строке
3. С помощью Mozilla Preview Panel. В Идее есть встроенный Mozilla браузер — им можно просматривать верстку, не переключаясь в стендалон браузер. Но смысла в этом большого нет. Я вижу прямое назначение этой панели лишь в Javascript-дебагинге. Но об этом ниже.
   

System Version Control

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

«Живое Целое» дает бонус IntelliJIDEA и для работы с Системами Контроля Версий. Что такое CVS/SVN и с чем их едят, уверен, не мне вам рассказывать. Вы пользуетесь ими ежедневно и командной работы без них не мыслите.

В чем же вкусность? Особенность?
В том, IntelliJIDEA отслеживает любое изменение в файле и сообщает об этом в своем неповторимом ненавязчивом виде. Я остановлюсь на этом очень подробно.

После того, как я проассоциировал файлы IDEA-модуля Presentation с конкретным SVN-репозиторием, любое изменение файла отображается на левой панели Editor View цветными блоками (синими, зелеными) и серыми стрелочками.

Синий блок означает, что код справа от него изменён.
Зеленый блок означает, что код добавлен.
Серая стрелка говорит нам, что какой-то код удалён.

Эти блоки и стрелки кликабельны. Клик на них рождает малюсенькую панель с кнопками действий, которые можно совершить над изменённым кодом.

По клику на зеленый блок мы видим возможность Rollback — откатить назад локальные добавки.

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

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

Ну, синие стрелки, понятно, служат быстрой навигации по изменениям, rollback — тоже уже понятно. Следующая кнопка родит нам diff-окно, но о нем я чуть позже.
А последняя кнопка панели копирует этот фрагмент кода в буфер. Бывает нужно.

По клику на синий блок мы видим ту же панель и фрагмент кода, который предшествовал текущему

Обратите внимание, что на правой панели тоже есть какие-то блоки светло-серого цвета.

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

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

Local History

Почему-то, как у кого ни спрошу, почти никто не пользуется в IDEA такой фичей, как Local History. При этом называют такие причины:

1. Идея жутко тормозит, если не выключить LocalHistory
2. Зачем оно нужно, если есть SVC?

Давайте развенчаем миф про тормоза. Да, было. Если мне не изменяет память, когда-то давно разработчики IntelliJIDEA рекомендовали как временный воркэраунд отключать Local History. Но те проблемы давно решены и сегодня (версия 8.1) мне не известны проблемы производительности. Поэтому, не отключайте Local History, не лишайте себя такой клевой фичи.

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

Если вы пользуетесь SVN, то соглашусь, держать историю больше, вроде как и нет смысла. Но если в вашей компании не хотят поднять svn/cvs сервер или использовать децентрализованное хранилище (о, git, как ты моден сейчас), то вас выручит долгосрочная Local History. Выставьте больше дней и живите спокойно — любые ваши изменения будут сохранены.

И если вам понадобится вернуться к своему какому-то решению, вы можете просмотреть и вернуть его через диалог

Но обращаю ваше внимание, что в диалоге настроек указаны чекбоксы действий, которые автоматически ставят метки. Метки — это чекпойнты сохранения, если кому так понятнее А можно эти метки создавать самому. На скрине видно много автоматических меток, которые создались при открытии IDEA-Project-а, и одна метка, которую я создал руками. Нам, верстальщикам, стоит помнить, что автоматическая метка ставится только при открытии проекта. Остальное из списка чекбоксов работает только в Java-проектах.

Я нередко использую именно ручное создание меток в локальной истории. Так бывает, что вот уже почти сверстал какой-то блок, но уперся в трудноисправимые баги. И тут в голову приходит идея как сверстать по-другому. Что делать, чтобы не потерять уже сверстанное? Сделать копию верстки и стилей и сохранить под другими именами? Или создать ветку в репозитории и там временно похранить? Можно, конечно, но неэлегантно. И лениво.

Элегантно — сохранить верстку в Локальной Истории, поставив метку с внятным комментарием.

Сохранить можно состояние как одного файла, так и целиком Проекта, то есть и HTML-верстку и CSS-файлы и картинки и скрипты.

После этого можно пробовать реализовать второе решение, и если оно окажется хуже первого, парой кликов можно вернуться к сохраненному состоянию Проекта из Локальной Истории. Удобно же, как этим можно не пользоваться?

Diff

Функциональность сравнивания «чего-то» с «чем-то» в Идее есть по умолчанию.
Заканчивая тему SVC, приведу скриншот diff локального файла с этим же файлом в репозитории

А вообще существует три режима diff-а

• Compare Two Files — сравниаются два файла, выделенные одновременно в Project View
• Compare File with Editor — сравнивается выделенный в Project View файл с файлом, который открыт в Editor View
• Compare Selected with Clipboard — сравнивается выделенный фрагмент кода с тем, что лежит в буфере обмена

В каждом из них мы перемещаемся в окно diff-а, аналогичное тому, что на скриншоте выше. И в каждом есть активные кнопки для переноса изменений из одного файла в другой.

Создание элементов кода

Работая в IntelliJIDEA, есть возможность не думать о написании HTML-тегов и CSS-свойств. И я сейчас не о том волшебно-контекстном автокомплите, о котором я уже писал выше. Я говорю о легкой возможности мыслить не «HTML-тегами» и «CSS-свойствами», а иными категориями, например, «Раскладка страницы» или «Межпроектный HTML-CSS Компонент». То есть как это?

Я уже упоминал, что Live Templates — это некие сокращения для ввода более полной версии текста — набрали div, нажали кнопку Tab и вместо введеных трех символов получили узел <div></div> в дереве элементов.

Такие сокращения можно сделать на все известные теги. Огромную работу в этом направлении проделал Вадим Макеев для редактора TextMate. И это значительно ускоряет набор кода. Но внутри IntelliJIDEA мы эту фичу используем не только так, а ещё и по-иному.

В группе HTML-верстки мы следуем Некой Идеологии, которая служит тому, чтобы достигать максимальной надежности и максимальной поддерживаемости кода. И как инструмент этой Иделогии развивается Фреймворк, о котором на Я.Субботнике рассказывал Виталя.

Что это дает?
Вместо того, чтобы каждый раз писать анонимные теги, указывать им атрибуты класс и терять на этом время, потому что делаем мы это сотни раз в день, мы используем Live Template, который, к примеру, создает готовую верстку общепортального элемента «Юзерпик»

LT b-userpic превратится во фрагмент дерева

<!-- b-userpic -->
<i class="b-userpic"><img src="" alt=""/><b></b></i>

К слову, элемент b-userpic — часть Яндекс.Фреймворка. В этом компоненте решена проблема выравнивания юзерпика в неком плейсхолдере (25х25 или 50х50 или 100х100) по вертикали и горизонтали, когда размеры самой картинки не известны. Спасибо Юре Артюху за идею и Витале Харисову за то, что её раскопал в архивах cssing.org.ua и добавил в код элегантности

Или вот еще примеры Live Templates, которые ускоряют создание CSS-кода (в комментариях я пишу LT, справа от комментария — код, который разворачивается вместо LT):

At-символ — шоткат для быстрого создания импорта. Внутри скобок работает автокомплит имен файлов Проекта

/* @ */		@import url(…);

На каждое CSS-свойство написан свой LT, который раскрывается в полную запись.

/* poa */	position: absolute;
/* por */	position: relative;

Если CSS-свойство составное, то в нужных нам местах Идея предложит ввести нужные значения

/* bau */	background: [color]url(…) no-repeat[position]

По аналогии с HTML, использовать LT можно и для вывода узкоспециализированых значений.
В Яндексе используется два шрифта в строго указанных размерах. Я об этом не думаю вообще, потому что есть такие LT:

/* fa */	font: 100% Arial, sans-serif;
/* fv */	font: 80% Verdana, sans-serif;

Очень облегчают работу LT, которые позволяют создавать кроссбраузерные решения. Например до тех пор, пока не уйдет на покой Firefox 2, для создания инлайн-блока мы будем использовать LT dib.

/* db */	display: block;
/* di */	display: inline;
/* dib */	display: -moz-inline-block; display: inline-block;

Ну и эти два LT, как иллюстрация к кроссбраузерным решениям. Что они делают, я уверен, понятно.

/* bsb */	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box
/* bsc */	box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box

Что нужно понять из этих примеров? То, что мы пишем код фрагментами, а не HTML-тегами/CSS-свойствами. То, что максимально используя ливтеплейты, мы переносим задачу по формированию логических кусков нашего кода на плечи робота. А себе оставляем только творчество

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

Code Inspection

Вот та фича, из-за которой я не покину IntelliJIDEA. В чем ее бенефит?
Чтобы её оценить, вам придется кое-что сделать в Idea.
1. Создайте два новых пустых файла и скопируйте в них соответствующий доктайп:
В HTML-файл

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

В XHTML-файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. В оба файла скопируйте каркасную структуру

<html>
<head>
    <title>Презентация</title>
</head>
<body>

    <ul>
        <li>
            item
        </li>
    </ul>

</body>
</html>

3. Теперь как бы невзначай удалите закрывающем теге li первую скобку. В обоих файлах, чтобы получилось так:

        <li>
            item
        /li>

А теперь смотрим, что в XHTML-файле, в отличие от HTML, справа на полях появился блок красного цвета. Это включились в работу Инспекторы кода, которые сообщают нам об ошибке в коде.

Веллформность

Вообще-то, этот пример с пропущенным закрытым тегом банален. Ну, в самом-то деле, редактор распарсил xml документ и обнаружил, что дерево узлов сломано. То есть not well-formed — неправильно оформлено, по-русски. Проверка на веллформность — это полезная фича, но ничего сногсшибательного, — много говорить о ней нечего. А тот факт, что я узнал о ней сразу, как только ошибся в коде — об этом говорить уже можно с восторгом, потому что IntelliJIDEA ответила на незаданный мной вопрос: «А не слажал ли я случайно?». «Да, слажал», — ответила мне Идея радостно и стрельнула в глаз красным. «Ой!», — сказал я, и тут же (сразу же!) исправил ошибку.

Валидность

Но тем не менее, инспекция веллформности впечатляет меня меньше, чем валидация кода на лету. Прошу вас осознать этот факт — за валидностью своего кода я не слежу вообще, потому что эту часть на себя тоже забрала Идея.

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

Но что будет, если я все таки напишу внутри параграфа блочный элемент?

Я увижу в правом верхнем углу документа красный индикатор. То есть в документе есть ошибки. А еще Идея мне подсветит красным невалидный код, и при наведении на него расскажет, в чем конкретно ошибка. А ещё покажет ошибку справа на полях (для быстрого перехода к ней по клику).

То есть, когда вы совершаете ошибку, и документ становится невеллформным или невалидным, вы узнаете об этом сразу же, а не после того, как откроете документ в Firefoxe (с плагином HTML Validator) и не после того, как документ уйдет в тестирование и вам напишут багрепорт об ошибке валидации. Осознайте этот бенефит для своей эффективности.

На мой взляд, IntelliJIDEA — единственный редактор, который так элегантно, ненавязчиво и эффективно позволяет а) не допускать ошибки валидации и б) исправлять их очень быстро.

Кириллица в CSS-селекторах

Завершая тему Инспекторов Кода.
Если существовал такой человек, который продумал расположение символов двух языков на одной кнопке (рус/англ), то этот человек был с оригинальным чувством юмора. Например, он подложил свинью разработчикам, когда на одной кнопке расположил латинскую «C» и кириллическую «С». Предполагаю, что он злорадно потирал ладошки и ехидно хихикал, когда представлял себе, как разработчики будут чертыхаться и силиться понять, почему CSS-селектор, в котором всё написано правильно, не применяется к элементу. А проблема лишь в том, что в английском слове попалась кириллическая «С».

Может быть вы считаете, что этот юзкейз притянут за уши? Ну-ну Если Идеей не пользуетесь, тогда просто запомните этот смешной юзкейз на будущее, очень может быть, он сэкономит вам много времени

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

Quirks Mode Plugin

Quirks Mode Plugin идет в поставке и он на лету проверят HTML/XHTML код на кроссбраузерность. Насколько я понимаю, разработчики плагина взяли данные с сайта Питера-Пол Коха http://www.quirksmode.org/

Ума не приложу, как можно было реализовать проверку моего кода на кроссбраузерность по тесткейсам Питера. Но ребята из JetBrains смогли. Функциональность востребованная.

Удобная работа с текстом

Вообще-то удовольствия в работе верстальщика маловато, потому что, как я уже говорил, приходится писать один и тот же набор HTML-тегов и CSS-свойств каждый день по-многу раз в день. И если Live Templates нам помогли ускорить создание элементов кода, то всё равно есть такие действия, на которые макросов не напишешь.

Это какие? Насколько часто вам приходится фрагменты кода выделять, копировать, вырезать, вставлять, перемещать в документе, искать по документу, заменять и рефакторить? Мне очень часто. И до знакомства с таким понятием, как IDE, я не знал, что работа с текстовыми строками может приносить удовольствие, а не утомление.

Я сейчас покажу часть шоткатов, которые наряду с привычными (типа Cmd V – вставить из буфера) упрощают рутинные действия и ускоряют работу.

Cmd C	Скопировать в буфер строку под курсором. Выделять строку не нужно
Cmd X	Вырезать в буфер строку под курсором. Выделять строку не нужно
Cmd Y	Удалить строку под курсором. Выделять строку не нужно
Cmd D	Дублировать строку под курсором. Выделять строку не нужно
Cmd Shift ArrowUp	Переместить строку под курсором на одну вверх. Выделять строку не нужно
Cmd Shift ArrowDown	Переместить строку под курсором на одну вниз. Выделять строку не нужно
Cmd L	Выделить строку под курсором
Ctrl W	Выделить слово под курсором. Повторное нажатие расширяет выделение до логического родителя — предложение в текстовом блоке или тег родительского элемента в дереве. Используется Ctrl, потому что Cmd занят (см. ниже)
Selection -> Cmd D	Выделить подстроку или строки и дублировать выделенное
Cmd /	Закомментировать строку под курсором строчным комментарием
Selection -> Cmd /	Выделить фрагмент и закомментировать выделенное строчными комментариями. Фрагмент может быть многострочным или частью строки
Selection -> Cmd Shift /	Выделить фрагмент и закомментировать выделенное блочным комментарием. Фрагмент может быть многострочным или частью строки
Alt Fn Backspace	Удалить всё до начала следующего слова. Как вариант использования, стать в конце строки и по вызову хоткея удалить все пробельные символы до начала следующей строки. Но есть более правильный.
Cmd Shift J	Нативный способ склеить последующую строку со строкой под курсором. Не нужно становиться в конец строки
Shift Cmd Fn Backspace	Удалить открывающий и закрывающий тег, не трогая его содержимое. Нужно стать курсором на удаляемый тег
Cmd Plus/Minus	Фолдинг элемента под курсором. Стоять курсором на элементе не нужно — достаточно стать на строку с элементом
Shift Cmd Plus/Minus	Фолдинг всего дерева в документе. Стоять курсором всё равно где
Fn Cmd ArrowLeft/Right	Переместить курсор в начало/в конец файла.
Fn Cmd ArrowUp/Down	Переместить курсор в начало/в конец видимой частиэкрана. Это не листание по-странично, а именно одноразовое перемещение курсора вверх/вниз.
Cmd J	Контекстное меню для выбора Live Template. Для точного выбора (по первой букве) достаточно ввести в коде первую букву темплейта и нажать хоткей
Selection -> Alt Cmd J	Контекстное меню для выбора Surround Live Template.
Shift Cmd M	Многострочный Replace.
Shift Cmd N	Быстрое открытие файла.
Shift F6	CSS Refactoring
Cmd W	Закрыть активный таб. Ничего необычного. Просто в хоткее Ctrl W я сюда сослался

Если вы не пользователь Mac OS, то читать их нужно так: Cmd соотвествует Ctrl, сочетание Fn Backspace соотвествует Delete

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

Навигация

Вот, кстати, в списке шоткатов промелькнул неприметный и, наверное, непонятный Shift Cmd N. А ведь я нажимаю этот хоткей раз 100 в день. Он рождает мне маленький диаложек, который ожидает от меня ввода имени файла.

И знаете, какой у меня usecase сотня раз на дню? Мне нужно открыть файл на редактирование, но имени его я «…не помню. Помню только… первые три буквы» (с) М.Галустян.

И что мне делать? Искать нужный файл глазами в немаленькой файловой структуре Проекта? Это же так долго и утомительно. Тем более, если не помнишь точно, как он называется, и, соответственно, в какой конкретно папке его искать. А этот диаложек подсказывает нужные мне файлы по маске

А если надо ограничить поиск по типам файлов, то есть фильтр

А у Java-программистов есть еще поиск по символу и по имени класса (мечтательно вознеся глаза к небу).

Я хотел бы, чтобы вы меня поняли — навигироваться по Проекту можно не открывая Project Panel. Как найти любой файл я рассказал. А еще можно переходить к любому ресурсу прямо из кода.

Например, Cmd Click на имени CSS-селектора в HTML-коде провалит меня в файл с этим селектором. Если селектор написан не в одном файле, то будет предложен выбор.

Правда, хотелось бы в этом попапе видеть пути к файлам вместо имени Idea-Module. Мне это только что в голову пришло, надо зарепортить импрувмент в JetBrains.

Тот же принцип с файлами скриптов и картинок — Cmd Click по пути к ресурсу прокидывает в него.

Кстати, я говорил, что картинки можно просматривать к IntelliJIDEA? Размер посмотреть, объем, битность. А большего в IDE и не нужно, на мой взгляд.

Рефакторинг CSS

Еще в списке шоткатов промелькнул Shift F6. Как им пользоваться и что он делает? Если стать на имени CSS-класса в CSS-селекторе и нажать хоткей, то появится такой диалог

Если в нем изменить имя CSS-селектора, то он изменится во всех файлах Проекта. Разработчики IntelliJIDEA вот так говорят об этой функциональности:

This important feature is a real time-saver which additionally guarantees the consistency of the refactored code.

Я, вообще-то, люблю делать ежедневный рефакторинг. А эта фича в рефакторинге незаменима — быстрый результат и гарантированное качество. Проверено на себе. Рекомендую.

Калейдоскоп возможностей

А теперь коротенько о разнообразных IDEA-вкусностях словами самих JetBrains-овцев и будем заканчивать.

Размер картинок

Работая в IntelliJIDEA, вам не нужно думать о реальных размерах контентных картинок. Вам сообщат

Инспекция HTML-атрибутов

Работая в IntelliJIDEA, у вас не получится написать один и тот же атрибут дважды. Вам сообщат

Инспекция CSS-свойств и селекторов

Работая в IntelliJIDEA, у вас не получится ошибиться в написании CSS-свойств, их значений и, например, псевдоклассов

А еще у вас всегда под рукой будут vendor-specific CSS-свойства, и инспекция ошибок в их написании:

И небольшой импрувмент — на поле слева от CSS-свойства можно видеть цветной квадратик. Для наглядности

А если надо быстро цвет заменить во всем проекте, то знакомый вам Shift F6 поможет это сделать быстро и гарантированно без ошибок. Без ошибок еще и потому, что ввести в поле вы можете только символы #, 1-9, a-f или зарезервированные слова

Show Applied Styles for Tag

Не выходя из IntelliJIDEA, вы всегда сможете увидеть CSS-стили, которые применяются к нужному вам HTML-элементу

CSS Autocomplete

Помните, я говорил, что IntelliJIDEA в XML-е подсказывает имена использованных элементов? Ну так вот, в CSS вы имеете то же самое — вам подскажут имена существующих CSS-классов

Хлебные крошки в HTML/XHTML

Работая в IntelliJIDEA, вы не заблудитесь в чужом неряшливом коде. Вас выведут по хлебным крошкам

Navigation Bar

Работая в IntelliJIDEA, вы всегда можете получить доступ к нужному вам файлу, не открывая Project Panel. Вам поможет плавающая панели навигации Fn Alt ArrowLeft

Javascript debugger

В своей работе я не пишу такие скрипты, которые требуют дебага, потому что у меня такая специализация, что production-скрипты пишу не я, а другие крутые парни. Поэтому про дебаг я не могу ничего от себя рассказать. Но то, что он есть, и судя по видео, он удобен, я вам сказать могу
Приглашаю вас посмотреть online-demo на сайте JetBrains.

А еще обязательно загляните на страничку с описанием поддержки Javascript. Там вам будет чему порадоваться

Взаимодействие с Eclipse

You can export, import and synchronize IntelliJ IDEA projects with Eclipse, enabling all of your team members to take advantage of using their favorite IDE. Plus, IntelliJ IDEA supports Eclipse format of storing dependencies, letting you share the single code base within mixed-IDE team.

Познакомиться с этой функциональностью можно здесь

Единые настройки для команды

В версии 8.1 появилась возможность хранить все свои настройки IntelliJIDEA на IDEA Sharing Server. Сейчас туда можно только логиниться под своим аккаунтом. Но скоро настройки среды можно будет шарить в команде и между командами.

В группе HTML-верстки Яндекса используются свои настройки, которыми поделиться с вами мы пока не можем, потому что… ну кривоватый способ мы выбрали (подкладывание файликов IDEA-настроек с помощью shell-скрипта). Алексей Ефимов согласился помочь написать плагин, который будет устанавливать наши настройки нативным образом. Когда Алексей его напишет, и если до того момента IDEA Sharing Server не запустится, я выложу ссылку на плагин.

И вот на этом я, пожалуй, остановлюсь

Резюме

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

В этой статье я старался показать как именно работа в IntelliJIDEA повышает мою эффективность. И намекнуть вам, что ваша эффективность тоже может стать выше.

Мне хочется, чтобы после прочтения статьи стала понятна одна вещь: у меня не было цели доказать, что IDEA превосходит все существующие редакторы. Ставить такую цель бесполезно и слишком самонадеянно. Глупо и по-детски Я лишь хотел показать известные мне бенефиты Идеи, которые лично для меня определяют выбор именно этого редактора. Станет ли вам удобно в Идее — круто, буду рад. Но если описанные возможности Идеи (в целом) вас не впечатлили — я, в-общем то, не расстроюсь.

Единственное, что меня может опечалить — это комменты в духе «каких-то особых фич, которые дают преимущество этой IDE перед остальными, я не увидел. Статья — всего лишь акт поклонения любимому софту.» Наличие таких комментариев для меня будет означать, что их авторы не поняли цели моего мессаджа, и это целиком моя вина — не смог донести свой смысл.

Я искренне надеюсь, что описанные мной знания смогут Вам помочь верстать быстрее, эффективнее и качественнее. Успехов Вам!

По-моему, это нереально. Я бы даже сказал, нереально круто, очень круто для браузера, который больше мешал работать, чем помогал последние 5 лет.

Самая невероятная возможность нового Eagle Eyes – поддержка аддонов FireFox. Хотя IE 8.1 предупреждает, что не все плагины будут работать, мы проверили четыре популярных плагина Firefox (Firebug, Web Developer, Tab Mix Plus, и No-Script), и они работали безупречно

Летом нас ждет счастье. И мы с вами его вполне заслужили

Программа мало отличается от московской, за исключением того, что Наташа не расскажет про верстку под мобильные, вместо Федора Голубева про API будет рассказывать Александр Тармолов и не сможет выступить Женя Фирсова.

У Витали изменена тема и, насколько я могу догадаться, будет изменена структура доклада. Вадим выступит со второй обновленной версией своего доклада. Я тоже изменю многое во второй части своего сообщения.

И да, планируется видеозапись этого мероприятия.
Регистрация еще открыта

Буду рад вас видеть

Теперь у меня есть всего две категории:
— О жизни
— О технологиях

Остальные категории превратились в метки.

Так получается, что записей на технические темы у меня немного. Больше на отвлеченные темы категории «О жизни».

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

Вот Rss-фиды для Вашего удобства:
— http://makishvili.com/category/life/feed — О жизни
— http://makishvili.com/category/tech/feed — О технологиях
— http://makishvili.com/feed/ — Обе категории

Выбирайте то, что Вам у меня читать нравится

Итак, как мы подключаем стили в проект и какие задачи при этом решаем?

1. Сделать так, чтобы стили приходили минимизированые — экономим трафик пользователя и нашей компании
2. Сделать так, чтобы IE-шные костыли выливались только для IE — решаем проблему валидности кода
3. Сделать так, чтобы они выливались пользователю минимальным количеством http-запросов — решаем проблему скорости передачи данных с сервера.

Первые два пункта вообще тривиальны, говорить о них мне уже поздно. Много сказано до меня
Хочется поговорить о 3-ем.

Ещё полтора года назад мы загружали стили проекта так:

<link rel="stylesheet" href="project.css" />
<!--[if lte IE 7]><link rel=stylesheet href="project.ie.css" /><![endif]-->

Суть решения: project.css содержит в себе все необходимые («основные») селекторы, а в project.ie.css только костыли для IE, которые дополняют/переопределяют селекторы основного файла.

И если предположить, что файлы project*.css перед отдачей клиенту проходят минимизацию (удаление пробельных символов, переводов строк и комментариев), то вышеописанный код решает 2 задачи из 3.

Почему не 3?

Потому что в IE7 и ниже происходит два запроса — к project.css и project.ie.css. То есть лишний запрос. А это означает лишние байты на передаче заголовков, лишнее время ожидания. И ведь, не бог весть какие затраты. Вполне можно закрыть глаза на это?

Можно, «если вас не интересует результат» (с) М.М. Жванецкий
Если мы разрабатываем какой-то нагруженный ресурс, на который ожидается большой поток пользователей ежеминутно (!), то лишние 200 байтов запроса на один запрос превращаются в многие минуты ожидания получения данных от сервера в суточном масштабе.

Да и вообще, если есть способ отдавать байт меньше, почему это не делать?

Элегантное решение

Видимо, это очень хорошо понимал Алексей Тен, когда на ClientSide2007 после доклада Витали Харисова он рассказал, что существует известный элегантный способ отдавать IE один файл вместо двух. Вот что Алексей предложил:

<!--[if !IE]>--><link rel="stylesheet" href="project.css" /><!--<![endif]-->
<!--[if IE]><link rel=stylesheet href="project.ie.css" /><![endif]-->

И в начале файла project.ie.css пишется импорт project.css. Этим решается проблема копипаста «основных» селекторов в ie-шный файл.

@import url(project.css);

Как MSIE читает эти CC

В первой строке он встречает условный комментарий [if !IE], который понимает однозначно: «Мне нет дела до всего, что написано дальше до закрывающего [endif]«.

Во второй строке он видит условный комментарий, который выполняется согласно условию [if IE].

Обратите внимание на то, что правильный CC (неважно, с каким условием) начинается такой конструкцией:

<!--[if !IE]>

А у нас он записан c дополнительными символами -->:

<!--[if !IE]>-->

Лишние символы для IE безразличны, потому что IE игнорирует всё внутри этого CC, а для остальных браузеров эти символы формируют завершённый комментарий, благодаря чему все браузеры видят тег <link> и выполняют запрос к стилевому файлу.
Остроумный способ. Лёша, спасибо тебе за идею

Но на этом хитрости не закончились.

На горизонте замаячил IE8, в котором Microsoft пообещал полную поддержку CSS2.1.
Кстати, Вы верите? А мы, знаете ли, решили поверить. Но опыт общения с продуктами Microsoft заставляет следовать поговорке «доверяй, но проверяй». Поэтому мы, на всякий случай, подстелили соломку, спасибо Вадиму за светлую мысль.

Как результат веры в IE8, в группе HTML-верстки было принято решение разделять загрузку стилей не по схеме «IE/неIE», а по факту «поддерживаются стандарты или нет».

Мы договорились о такой классификации:

1. Браузеры с поддержкой стандартов
   Firefox/Safari/Opera/Chrome/MSIE8
2. Браузеры без поддержки стандартов
   MSIE 5-6-7

Как следует из классификации, мы поверили Microsoft на слово и отнесли IE8 к разряду «стандартных» браузеров, несмотря на то, что все существующие версии IE сейчас являются тем камнем, который тянет Web на дно. Правда, за полгода существования IE8 beta мы пару раз уже встречали странноватые баги в реализации CSS, но мы продолжаем верить. Очень хочется, просто

Как изменилась схема подключения?

Виталя взял идею, о которой рассказал Лёша, и модифицировал в такую:

<!--[if gt IE 7]><!--><link rel="stylesheet" href="project.css"/><!--<![endif]-->
<!--[if lt IE 8]><link rel=stylesheet href="project.ie.css"><![endif]-->

По-прежнему, первая строка выполняется браузерами первой группы (включая MSIE8), вторая строка — браузерами второй группы.
И снова задача «один браузер — один http-запрос к стилям» решена элегантно.

Внимательный читатель, конечно же, обратил внимание, что в первой строке есть какая-то странность?
В схеме Лёши было сказано:

<!--[if !IE]>-->

А в схеме Витали:

<!--[if gt IE 7]><!-->

Зачем писать лишние символы <!, можно прочитать по-русски, или по-английски прямо на msdn-е.

Вот теперь задача №3 может считаться не только выполненной, но и выполненной «на перспективу». То есть, когда (а когда-то ведь это произойдет) IE8 вытеснит своих предшествеников, мы быстро и очень «дёшево» оторвем довески для глючных IE 5-7 и забудем хаки, как страшный сон.

PS Неужели, это свершится на моем веку? *подняв глаза к небу*

PPS Описанная схема широко внедрена в Яндекс.Проекты и показала свою боеспособность. Можно пользоваться. Как говорит мой знакомый продавец овощей: «Покупай, картошка без проблем»

Не исключено, что Вы эту же схему придумали сами, независимо от Яндекса. В таком случае, жму Вашу руку за сообразительность и Светлые Идеи

Update
Как справедливо заметили Ольга и Антон, директива @import url(project.css); в файле project.css выполняет в браузере тот самый http-запрос, который мы стремимся избежать.
Да, во время разработки так и происходит — на сервер ходят лишние запросы и это не важно. И только когда мы выкладываем проект в production, мы осуществляем мероприятия по оптимизации CSS.

Фокус в том, что для production мы собираем стили. У нас есть перловый скрипт, который запускается на момент сборки production-версии. Он заглядывает в каждый CSS-файл, находит в нем директиву импорта и вместо нее подставляет код из файла, на который этот импорт смотрит. В результате получаем два файла project.css и project.ie.css, внутри которых уже нет ни одного импорта.

Ну что в Вашем Мироощущении ассоциируется с Большой Серьезной Компанией, которая как ледокол через мировые льды? Apple, Газпром, Google? Ну вот, представьте себе, что Google открыла офис в вашем небольшом городе, где крупнее супермаркета «Фуршет» ничего и нет. Представили?

А теперь осознайте, что офис открыли из-за двух человек (один из которых – Вы), которые не хотели переезжать в Главный Офис (в Москве, например), а хотели жить и работать в своем родном городе. Осознали?

В первый год работы в Яндексе меня периодически накрывали волны восторга от осознания всего этого. А еще накрывало от осознания того, что я делаю сервис, который будут посещать тысячи пользователей в день.

Восторг такой, что аж дыхание на миг останавливалось. И мысль: «Я работаю в Яндекс-тиме. Я? Невероятно!»

А сейчас этот восторг поутих. Но периодически нахлынывает другой.

Те люди, которых я читал в интернете, у которых многому учился, которые были для меня как некие жители Интернет-Олимпа (великие и недосягаемые), сегодня с многими из них я знаком лично. И что самое невероятное – они меня помнят, при встрече подают руку и улыбаются мне. Они мне рады.

Это невероятно! Еще три года назад я и не мечтал познакомиться с ними, а сейчас мы встречаемся на конференциях и после докладов играем в бильярд, обмениваемся улыбками в коридорах, комментируем друг друга в блогах, делаем параллельно задачи в одном проекте, обсуждаем какие-то идеи и эти люди мне рады!

Хочется сказать всем Вам, друзья, кто узнал и не узнал себя. Я безмерно Вам благодарен за то, что Вы сделали для меня и еще сделаете для сотен и тысяч таких, как я.

Для просмотра доступны форматы:
- Полноформатная версия (~1.3 Гб)
- iPod/iPhone-версия (~540 Мб)

А можно познакомиться онлайн:

К сожалению, освещение сцены оказалось недостаточно хорошим, поэтому видео-запись местами получилась темной. Но к несомненным плюсам относится то, что запись велась с двух камер, а потом монтировалась со вставками слайдов в хорошем качестве.

PS: Вторую часть статьи по мотивам этой презентации осталось ждать недолго.
Причина, по которой я её еще не опубликовал – мне не понравилось то, как я подал материал во второй части презентации. Поэтому она мной пересматривается и дорабатывается.

Бывают такие ситуации, когда даже минимальной яркости слишком много для комфортной работы в темноте (все свят, а вам надо почитать любимые блоги). Если вы сталкиваетесь с такими ситуациями, то обратите внимание на ScreenShade. Всего парой кликов эта утилита способна уменьшить яркость картинки ниже того, что позволяет OS X. Приложение также может работать с внешними мониторами.

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

По материалам RSS

От себя

Поставил. Из минусов – хоткеи Option Minus/Plus конфликтует с печатью длинного тире. Перенастраивать хоткеи в программе возможности нет. Пока?
Но отказываться из-за этого «конфликта» не хочется – мне нужна быстрая регулировка яркости внешнего монитора.

Часть первая

Девиз:
«Редактор должен помогать»

Это ключевая мысль, которая поможет мне полноценно раскрыть тему статьи.

На первый взгляд она непонятно звучит. Но это только потому , что я не смог выразить свою мысль очень коротко и одновременно очень точно, без потери смысла. Я объясню, что имел в виду. А объяснить нужно обязательно, потому что это важно для этой статьи.

Помощь – это же наша давнишняя мечта! Помните, Сыроежкин в «Приключениях Электроника» мечтал чтобы вкалывали роботы, а не человек?

Свершилось! Роботов вокруг нас стало так много, что мы перестали замечать их необычность.

Вот на кухне у меня стоит робот – хорошо умеет мыть посуду. Чисто и очень быстро. Называется «посудомойка». А в моем подъезде работает робот, который доставляет меня из квартиры на улицу. Не очень чистый, но тоже быстрый. Называется «лифт».

А с какими роботами я, верстальщик, общаюсь каждый день? Да вот – с компьютером, который стоит на моем столе. Светится надгрызанным яблоком. А внутри него еще один робот – программа, в которой я пишу код. Пишу каждый день, по 8 часов в день. И по сути пишу-то одно и то же – какой-то ограниченный набор HTML-тегов, какой-то ограниченный набор CSS-свойств.

Одно и то же! Каждый день! 8 часов в день, 5 дней в неделю, 22 дня в месяц, 11 месяцев в году – одно и то же!

И ведь было время, когда редакторы нам не помогали.
Notepad виндовый никогда нам не помогал. А порой даже вредил. Вы пробовали в нем открыть файлик больше 1 Mb?

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

А потом нам на помощь пришли модификации нотпада с полезными фичами. Небольшими такими «фичками»: подсветкой синтаксиса и автокомплитом. Стало быстрее. Стало удобнее. А главное – стало легче.

А потом пришли редакторы, которые из GUI нам давали возможность верстать и при этом почти не знать HTML/CSS. Стало совсем легко!
Вот так берете мышкой, накидали в документ контролов, перетусовали их как-то по-красивее, создали несколько таких страниц, залинковали их друг с друг. А потом отодвинулись от монитора – посмотрели так критически, как художник на полотно, наклонив голову. «А хорошо получается»! И запулили свой сайт в интернет, а потом обязательно (обязательно!) URL всем своим знакомым раздали! И так, мол: «Хороший сайт… зайди!»
Только эта легкость привела к тому, что интернет заполнился тоннами некачественного кода. Ну, а чё – легко же?

Но, славтегосподи, пришли хорошие редакторы и IDE (среды разработки), которые позволили писать и легко и качественно. Правда, все домохозяйки и домохозяины так и продолжали писать в гуевых редакторах, а специалисты – ну такие крутые ребята и девчата, как мы с вами, – стали писать в IDE. И стал интернет лучше.

А как эти IDE стали нам помогать?
А они стали выполнять за нас рутинную работу: много мелких рутинных действий, но большое количество, которые отнимали у нас 80% времени. А сейчас программа делает их сама. Или мы просим её своими какими-то несложными действиями. А нам остается только творчество – творчество в том, чтобы максимально виртуозно писать вот тот ограниченный набор HTML-тегов и CSS-свойств.

И что получается? Чем виртуознее я пишу свой код, и чем больше функций на себя берет конкретная IDE – сама берет, – тем лучше и надёжнее получается продукт. А значит, я доволен, мной довольны, и всё лучше и лучше становится интернет.

Ну и вот.

Мы в группе HTML-верстки Яндекса считаем, что (нет, я, конечно, понимаю, что мы нерепрезентативны, но мы так считаем!) что IntelliJIDEA чудесно справляется с задачей взять на себя максимум рутины и оставить нам только творческую сторону вёрстки. И я хотел бы вам рассказать, как она это делает и какую пользу получаю при этом я. Я – Вадим Макишвили – гвардии рядовой верстальщик.

IntelliJIDEA – что это?

Есть такая питерская компания JetBrains.
Наши русские ребята. Общительные и адекватные. Делают качественные продукты. IntelliJIDEA – их продукт.

Если пятью словами, то IntelliJIDEA – это среда разработки для Java.
А если образно, то ИнтелиджиАйдию можно представить себе эдаким большим кухонным комбайном, в котором можно приготовить много вкусных и разнообразных блюд из Java. А какие блюда готовятся из Java в последнее время? Всё больше такие вкусные блюда, которые называют Web-приложениями. А в них кладётся не только Java, а ещё и такие базовые для этих блюд ингридиенты, как HTML/CSS/Javascript.

И вполне логично, что в этом кухонном комбайне должна быть поддержка этих базовых ингридиентов. И точно! Она есть и весьма недурственна.

А вообще мое знакомство с IntelliJIDEA произошло 5 лет назад.
Я тогда работал в большой офшорной компании. Кем работал? Да всё тем же, кем и сейчас – верстальщиком. Но тогда, 5 лет назад, меня вдруг переклинило: «Хватит, наверстался! Пора бы чем-то серьёзным заняться.» А что тогда было серьезное? Java и .NET.  И я пошел в соседние Java-отделы (у нас их было два) с вопросом: «А в чём вы пишете?»

И я выяснил, что Java-программисты делятся на два лагеря. Отличительный признак каждого лагеря – программа, в которой они пишут код. И у них даже свои давнишние холивары по поводу этих IDE. А IDE любят две, которые примерно равнозначны для разработки Java. Но у каждой есть по главному преимуществу:
1. У одной из них привычный и интуитивно понятный интерфейс
2. А вторая… бесплатная.

Ну я и подумал: «А когда это русский человек боялся платного софта?» и поставил IntelliJIDEA. Я ее поставил, запустил. Она открылась, а там всё так красиво и по-взрослому. Но следующим шагом она меня попросила создать ПРОЕКТ.
«Хм, зачем мне проект, я ж просто “Hello World” написать хочу?» – подумал я, но честно попытался пробраться сквозь все визарды создания проекта. Не пробрался. Закрыл и подумал: «Чё-то там перепутали про интуитивный и привычный интерфейс. Ща Эклипс поставлю, уж там-то точно!».

Кстати, Эклипс я даже поднять после установки не смог. Я тогда на винде работал и не знал, что нужно отдельно Java-машину ставить.

Но главное, что я тогда, 5 лет назад, запомнил – это то смятение, которое у меня вызвала Идея, предложив пройти через визарды настройки проекта.

И сейчас я лично знаю людей, которые так же, как я тогда – 5 лет назад, – сунулись в Идею, и ничего не поняв в этих визардах, ушли из нее. Так её и не узнав. А ведь она удивительно хороша

Вхождение в IntelliJIDEA

Не побоюсь признаться, если ты не Java-программист, понять самому, как начать работать в Идее – очень трудно.
Трудно по единственной причине – в визардах создания проекта задаются очень непонятные для верстальщика вопросы, на которые отвечать как-то… Боязно, знаете ли

А знаете, что мне напоминает Идея?
Черное Море в начале лета в Крыму. Когда солнце яркое и уже жарко, а море прогрелось еще недостаточно. И купаться уже хочется, но вода такая прохладная и тебе боязно. И ты так, ногой трогаешь ее – брррр, холодно. Но так хочется! И единственный способ зайти в воду – это так хорошенько разбежаться, зажмуриться и с гиканьем вбежать в воду по колено, а потом с зажмуренными глазами нырнуть головой вперед, сделать пару больших гребков под водой, а потом вынырнуть на поверхность и всё! Ты в море! Тебе хорошо.

Вот и в Идею нужно так же решительно вбежать, пронырнуть через эти ужасные визарды и тогда окажешься там, где уже хорошо и где привычный интуитивно понятный интерфейс. А ещё легче в море вбегать с кем-то. С таким человеком, кто только что искупался. И он тебя хватает за руку, тащит в воду и вы вдвоем ныряете в прозрачную волну

Вот так, больше 2 лет назад я нырнул в IntelliJIDEA вместе с Виталей Харисовым, а сейчас у вас есть шанс нырнуть в нее вместе со мной. Ныряем?

Установка IntelliJIDEA

Установка не вызывает никаких трудностей. Ну то есть вообще: скачали, установили, открыли.
IDEA идет вместе с Java-машиной, ставить отдельно не нужно. Это я для виндоуз пользователей сообщаю

При первом запуске IDEA задаст вам несколько несложных вопросов.
Вот для HTML-верстальщиков подсказки, как на эти вопросы ответить.

Идея интересуется, пользовались ли вы ей уже когда-либо и если пользовались, то укажите путь к предыдущей инсталляции – Идея заберет оттуда настройки рабочей среды.
Мы будем исходить из посылки, что вы впервые поставили IDEA, поэтому оставляем дефолтное значение.

А тут нас спрашивают про деньги.
Пока не платим, выбираем 30-дневный триал.

В этом вам предлагают выбрать, какие Системы Контроля Версий вам нужны для работы. Мне нужны SVN и CVS. Обратите внимание, есть плагин для работы с Git

А дальше будут три настроечных визарда для выбора необязательных плагинов, которые поставляются в коробке инсталляции.
В этом вам предлагают выбрать плагины для работы с Java. Снимаем все чекбоксы – нам этого ничего не нужно.

В этом визарде предлагается выбрать плагины для HTML-верстки.
Выбираем всё, кроме, разве что, поддержки Flex.

А в этом визарде разработчики из JetBrains обращают наше внимание на другие плагины, которые в той или иной степени полезны.
Я отметил те, которые точно нужны мне, верстальщику Яндекса.

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

Еще мы видим Expiration Date – дату, когда наш триал закончится.
Мы пользуемся EAP версиями (Early Access Program). То есть промежуточными сборками, которые выходят много чаще, чем раз в тридцать дней. Поэтому если пользоваться продуктом хочется, а с деньгами расставаться не очень, качайте и пользуйтесь EAP.

Только об одном Вас попрошу:

Если используете EAP версии – пользуйтесь с пользой для продукта: если Идея вам сообщит, что возникла ошибка, не поленитесь, отправьте багрепорт. Идея сама его сформирует, вам нужно только кнопку Send нажать

Вот так выглядит Велкам-пейдж после того, как вы поставили и подняли Идею.

И на этой странице нам предлагается создать Новый Проект.
Мы, разработчики Яндекса, привыкли называть Проектом тот Сервис, над которым старательно трудимся, который спустя недели или месяцы труда запускаем, и по поводу которого в официальном блоге Яндекса создается запись «Интернет, такое-то число. Яндекс запустил проект такой-то».

Когда IntelliJIDEA предлагает нам создать Новый Проект, она предполагает, что мы разрабатываем Java-проект и предлагает нам своими визардами создать костяк Java-проекта. Справедливости ради стоит отметить, что сейчас IDEA движется в сторону создания платформы для разработки на других языках.

Но мы – верстальщики.
Отдельного билда без поддержки Java для наших нужд не существует, и перед нами стоят две насущные задачи:
1. Не привязываться к Java
2. Сделать так, чтобы разработка каждого следующего нашего Сервиса не требовала прохождения визардов создания IDEA project-а

И эти задачи легко решаемы!

Но прежде важно договориться о терминологии, чтобы избежать путаницы. Дальше в статье я буду произносить слова Проект и IDEA Project. Это два разных понятия:
1. Проект – это разрабатываемый нами Сервис
2. IDEA Project – это некая мета-сущность, в которой IntelliJIDEA хранит всю информацию о разрабатываемых нами Проектах

Итак, нажимаем ссылку «Создать проект» и погружаемся в визарды.

Это первый визард, в котором выбираем дефолтное значение и создаем структуру IDEA Project начисто.

Это самый главный визард, в котором мы рассмотрим каждое поле.

Поле “Name” – это имя IDEA Project-а. По дефолту оно называется untitled.

Наша задача создать его один раз и забыть о нем навсегда.
Поэтому имя у него может быть абсолютно любым.
У меня рабочий IDEA Project называется Yandex.
Наш тестовый IDEA Project хочется назвать как-то совсем непритязательно – назовём его Work

Как только мы изменили имя IDEA Project-а, оно автоматически подставилось в остальные поля визарда. Нам это удобно.
Поле “Project file location” – здесь нужно указать место, где Идея создаст IDEA Project file. То есть та самая мета-сущность, о которой я говорил выше, имеет свое физическое представление на файловой системе. Это как раз и есть IDEA Project file.

По дефолту IDEA сама предлагает путь и подставляет имя из предыдущего поля. Можно изменить на что-то другое, но никакого смысла в этом нет. Этот файлик нам нужно один раз создать и мы о нем больше никогда не вспомним.

Дальше переходим к разделу «Создать модуль».
Что такое «Модуль» в терминах Java-проекта, я не знаю. И, в общем-то, знать это мне – верстальщику – не обязательно. Я предлагаю эту сущность задействовать для своих целей.
Пусть Модулем будет считаться некая Категория Проектов, объединённая неким общим признаком.

Что за признак? Это вы выбираете сами.
Например, создадим группу проектов, объединенных сегодняшним мероприятием и назовем модуль просто Presentation.

Поле Content Root – это путь к файлам наших Проектов. Идея оставила дефолтный путь, потому что она ничего не знает о том, где конкретно на файловой системе мы храним файлы Проектов. Но я этот путь знаю хорошо и моя задача заменить дефолтный путь на правильный.

Нажимаем на кнопку с многоточием справа от выделенного на скриншоте пути

И в дополнительном диалоге указываем путь к папке с нашими Проектами.

Поле «Module File location» оставляем по-дефолту.

Поэтому я руками еще правлю путь, чтобы в итоге визард выглядел так:

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

Здесь нам предлагается указать, какую JDK мы будем использовать.
Нам это тоже не нужно. Идея на всякий случай переспросит, уверены ли мы. Уверены и двигаемся дальше.

И вот, наконец, мы внутри Идеи.

Мы видим слева sidebar с открытой панелью Project, справа – зона для редактирования. Сейчас она пустая.
В панели Project видим модуль Presentation, который смотрит в папку presentation. Внутри нее папки, якобы с материалами сегодняшней встречи. Это как будто отдельные проекты, в разработке которых я участвую.

Модулей может быть сколько угодно. Повторю, Модулей в смысле групп наших проектов. Если вы фрилансер, то вам может быть удобно работать с проектами, отсортированных по именам своих заказчиков.
Предположим, что в корне вашего home есть такая папка customers

В этом диалоге мы можем редактировать уже созданные модули и создавать новые.
Всё, что слева – нам ничего не нужно: ни библиотеки, ни фасеты, ни JDK. Мы же верстальщики и, спасибо, нам этого не нужно.
Мы используем единственную вещь – Модули.
Справа контент текущего модуля.

Клик на плюс нас бросает в визард, который мы с вами уже разбирали
Единственное отличие – Idea Project создавать не нужно. Только новый модуль. После заполнения его, мы увидим новый модуль Customers. Мы видим его название, мы видим Content Root для него и видим содержимое Content Root-а.

То, о чем не сказал на презентации:
Обратите внимание на кнопку

С помощью этой кнопки можно указать несколько контент рутов для одного модуля. То есть Ваши Проекты могут лежать в совершенно разных папках на файловой системе, но Идея будет работать с ними, как с одним целым.

Главное, что нам дают IDEA Modules

Это возможность не создавать для каждого нового сервиса Idea Project
То есть, когда заказчик по фамилии Nikolaev закажет мне создать новый проект, я просто создаю на файловой системе новую директорию в папке nikolaev. И с этим каталогом я могу работать в Идее сразу же.

На этом первая часть закончена. В ней мы поняли, что такое IntelliJIDEA, как ее установить, как в неё войти и как в ней создать IDEA Project единожды.

Во второй части статьи я расскажу, как IntelliJIDEA забирает у меня рутинную работу, то есть покажу конкретно те вкусности, которые делают мою работу в IDEA быстрой, удобной и продуктивной.

Атрибут xmlns — что же это такое? Этот атрибут можно встретить не только в XHTML, но и в его ближайшем родственнике: XML. Причём, как мы знаем, XML, в отличие от XHTML, не определяет никаких обязательных атрибутов и элементов, предоставляя инженеру полную свободу действий. Однако, даже в XML рассматриваемый нами атрибут выполняет особую роль, хоть он и не обязателен для определения в документе. В чём же заключается роль этого атрибута?

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

Но что самое интересное, что Иван Сагалаев для меня не просто коллега по работе. Не преувеличу, когда скажу, что самое большое влияние на становление меня, как верстальщика, оказал именно Иван своими статьями из раздела «Учебник». И если так случится, что на мой блог забредет какой-то молодой верстальщик в поисках «сакрального», то я адресую его к учебнику Ивана. Так просто и доступно о сакральном я читал только у него. Спасибо!

Именно поэтому исправляю свою оплошность и добавляю ссылку на его блог в Рубрику Русский Веб-дев.

К сожалению, http://openid.yandex.ru/ не работает здесь. Буду в Москве – будет повод дойти до Володи Епифанова

PS Алексей, если ты будешь появляться в комментах, ты меня сильно обрадуешь

Для тех, кто в танке вместе со мной: http://ru.wikipedia.org/wiki/Trackback

PS: теперь я могу комментировать посты Матюшкина

То ли ему быть узко-специализированным о веб-разработке.
То ли в нем освещать вообще всё, что нас (меня, Наташу и нашу семью) волнует. В том числе профессиональную деятельность мою и Наташину.

Кстати, было бы интересно агрегировать здесь свой некоторый опыт верстки под большие браузеры и опыт Наташи верстки под мобильные браузеры. Я планирую активно писать в блог, посмотрим понравится ли блоговая деятельность Наташе

В результате я пришел к такому первичному соглашению с самим собой: не загонять себя в рамки и писать о том, что пришло в душу.
Мне это точно интересно. Через три-шесть месяцев посмотрим, будет ли это интересно Вам.

А как мы это увидим? А запросто – посмотрим, сколько у этого блога RSS-читателей

Ну вот, приветственное слово произнесено
Буду рад Вашим отзывам на мои сообщения и обещаю ни один вопрос ко мне не оставить без ответа.

Установка WordPress проблем не вызвала.

Тему выбрал от фонаря, просто понравилась раскладка блоков.

15994623.42a1cb61894b26850d4e47b6c7abfee9.1227910273.25d2ff32a07ea51a01231ca5772fbcce