Embed Size (px)
DESCRIPTION
Citation preview
Яндекс.Субботник, Киев, 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
![verstka 03 2016 10 - Фонд ИСЭПИ7] Леонид Поляков Cлово к читателю Представлять очередной номер «Тетрадей по](https://img.pdfslide.tips/doc/110x75/5f0dd80b7e708231d43c5dc5/verstka-03-2016-10-7-c.jpg)
