Вадим Макишвили "Вёрстка в IntelliJIDEA"

Яндекс.Субботник, Киев, 25 апреля 2009 года

Вадим Макишвили

Вёрстка в IntelliJIDEA

2

«Редактор должен помогать»

3

Год 1983Моя мечта

Год 2009Мечты сбываются

4

Пылесос iRobot

Год 2009Мечты сбываются

5

Модель HRP-4C

Пылесос iRobot

Год 2009Мечты сбываются

6

Модель HRP-4C

Грузолёт

Пылесос iRobot

IntelliJIDEA – что это?

7

IntelliJIDEA – это

8

Среда разработки для

IntelliJIDEA – это

9

Кухонный комбайн

Вхождение в IntelliJIDEA

10

11

Установка

12

Установка

13

Установка

14

15

16

17

18

Приветствие

19

Терминология

— Проект – это разрабатываемый нами Сервис

— IDEA Project – это некая мета-сущность, в которой IntelliJIDEA хранит всю информацию о разрабатываемых нами Сервисах

20

Создание IDEA Project

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

Вёрстка в IntelliJIDEA, или забудьте про рутину

Meta Feature

Отвечать на вопросы разработчика

39

Работа с абстракциямиFeatures groups

1. Файлы проектаКопирование, переименование, поиск и другие действия с файловой системой

2. Литеральное представление кодаРабота со строками файла и функции систем контроля версий

3. Структурные элементы кодаНюансы работы с конкретным кодом. Например, HTML и CSS

40

41

IntelliJIDEA — Живое Целое

Живое Целое

42

IntelliJIDEA File SystemIDEA Project File

IDEA Module File

Content Root’s Files

Core

Caches

Живое Целое

43

IntelliJIDEA File SystemIDEA Project File

IDEA Module File

Content Root’s Files

Core

Caches

Живое Целое

• Работает со своими кешами• Сохраняет всё• Анализирует взаимосвязи в коде• Повышает эффективность разработки

44

Живое Целое

• Работает со своими кешами• Сохраняет всё• Анализирует взаимосвязи в коде• Повышает эффективность разработки

• И при этом не тормозит ;-)

45

46

GUI and Settings

Интуитивность и привычность

47

Диалог настроек

48

49

File Templates

File Templates

50

File Templates

51

File Templates

52

53

Live Templates

Live Templates

54

Live Template Созданный код

Например:

Набрать xhtml и нажать

Live Templates

55

Live Template Созданный код

Live Templates

56

Live Templates

Набрать table и нажать

57

58

Surround, Folding, Code Style

Surround

59

Surround

60

Surround

61

Surround

62

Surround, Folding

63

Cmd -

Surround, Folding

64

Cmd L

Cmd Alt J

Surround, Folding and Code Style

65

Code Style

66

Cmd Alt L

Code Style

67

68

DTD

DTD

69

Cmd B

Cmd Clickor

DTD

70

71

Autocomplete

КонтекстныйAutocomplete

72

Только табличные элементы

Ctrl Space

КонтекстныйAutocomplete

73

Только строчные элементы

Только табличные элементы

СамообучающийсяAutocomplete

74

Запоминает использованные теги

75

Killer FeatureFile Encodings

Явное указание

76

Конвертирование

77

78

Version Control Systems

Version Control SystemsКонтекстный контроль

79

Version Control SystemsКонтекстный контроль

80

Добавлен

Удалён

Version Control Systems

81

Изменён

Version Control SystemsБыстрая навигация

82

83

Local History

Развенчиваем мифыLocal History

• Идея жутко тормозит, если не выключить Local History

• “И ваще, Local History невостребована, когда есть VCS”

84

Local HistoryКак использую я?

85

Local HistoryКак использую я?

86

Local HistoryКак использую я?

87

88

Diff

Интуитивность и контекстный контрольDiff

89

РежимыDiff

1. Compare Two FilesСравниваются два файла, выделенные одновременно в Project View

2. Compare File with EditorСравнивается файл, выделенный в Project View, с файлом, который открыт в Editor View

3. Compare Selected with ClipboardСравнивается выделенный фрагмент кода с тем, что лежит в буфере обмена

90

91

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

Повышаем эффективностьСоздание элементов кода

1. Быстро управляем HTML-тегами и CSS-свойствамиLive Templates.

2. Мыслим мета-категориямиLive Templates?

3. Пишем компонентамиLive Templates!

92

Пишем компонентами

Набрать b-userpic и нажать

93

Мыслим мета-категориями

94

@

poapor

bau

fafv

Live Template Созданный код

@import url(…)

position: absoluteposition: relative

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

font: 100% Arial, sans-seriffont: 80% Verdana, sans-serif

Мыслим мета-категориями

95

dbdi

dib

Live Template Созданный код

display: blockdisplay: inline

display: -moz-inline-block; display: inline-block

Мыслим мета-категориями

96

bsb

bsc

Live Template Созданный код

box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box

box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box

Что важно понять из примеров?

• Мы пишем код фрагментами

• Задачу по формированию логических кусков нашего кода мы переносим на плечи робота

• Себе же оставляем только творчество :)

97

98

Killer FeatureCode Inspection

Синтаксическая корректностьCode Inspection

99

ВалидностьCode Inspection

100

?

ВалидностьCode Inspection

101

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

102

103

Killer FeatureQuirks Mode Plugin

Кроссбраузерные нюансыQuirks Mode Plugin

104

Питер‐Пол КохhMp://www.quirksmode.org

105

Killer FeatureЭффективная работа с текстом

Эффективная работа с текстом

Операции над строками без выделения строкCmd C, Cmd X, Cmd Y, Cmd D, Cmd /, Cmd Shift J, Cmd Shift Up/Down, etc…

106

Без выделения строкЭффективная работа с текстом

107

Cmd Shift Up

Без выделения строкЭффективная работа с текстом

108

109

Эффективная работа с кодом

Эффективная работа с кодом

• Операции над узламиCmd Shift Fn Backspace, Cmd Plus/Minus etc…

• Рефакторинг Shift F6

110

Node’s Rename

111

Shift F6

Эффективная работа с кодом

Node’s Rename

112

Type new name

Эффективная работа с кодом

Node’s Rename

113

Эффективная работа с кодом

Unsurround

114

Cmd Shift Fn Backspace

Эффективная работа с кодом

Unsurround

115

Эффективная работа с кодом

CSS Selector’s Rename

116

Эффективная работа с кодом

Shift F6

CSS Selector’s Rename

117

Эффективная работа с кодом

CSS Selector’s Rename

118

Эффективная работа с кодом

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

“

”

JetBrains says:

119

Go To …

Go To File

120

Cmd Shift N

Go To File

121

Use masks!

Go To File

122

Use fiters!

Go To Resource

123

Cmd B

Cmd Clickor

Go To Resource

124

Cmd B

Cmd Clickor

125

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

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

126

Alt Enter

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

127

Alt Enter

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

128

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

129

Ctrl Space

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

130

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

131

Shift F6

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

132

Ctrl Space

Show Applied Styles for TagКалейдоскоп возможностей

133

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

134

Это надо увидетьhttp://www.jetbrains.com/idea/training/demos/javascript-debugger.html

135

«Подытоживая всё вышесказанное…» © Veged, Alpha-San

Спасибо за Ваше внимание!

Полный вариант доступен в виде статьи

Часть №1http://makishvili.com/2009/02/verstka-v-intellijidea-1/

Часть №2http://makishvili.com/2009/04/verstka-v-intellijidea-2/

136

Вадим МакишвилиРуководитель группы HTML-вёрстки поисковых и контент-сервисов

http://makishvili.com

[email protected]