Вадим Макишвили "Вёрстка в IntelliJIDEA"
-
Upload
yandex -
Category
Technology
-
view
493 -
download
1
description
Transcript of Вадим Макишвили "Вёрстка в IntelliJIDEA"
![Page 1: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/1.jpg)
Яндекс.Субботник, Киев, 25 апреля 2009 года
Вадим Макишвили
Вёрстка в IntelliJIDEA
![Page 2: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/2.jpg)
2
«Редактор должен помогать»
![Page 3: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/3.jpg)
3
Год 1983Моя мечта
![Page 4: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/4.jpg)
Год 2009Мечты сбываются
4
Пылесос iRobot
![Page 5: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/5.jpg)
Год 2009Мечты сбываются
5
Модель HRP-4C
Пылесос iRobot
![Page 6: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/6.jpg)
Год 2009Мечты сбываются
6
Модель HRP-4C
Грузолёт
Пылесос iRobot
![Page 7: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/7.jpg)
IntelliJIDEA – что это?
7
![Page 8: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/8.jpg)
IntelliJIDEA – это
8
Среда разработки для
![Page 9: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/9.jpg)
IntelliJIDEA – это
9
Кухонный комбайн
![Page 10: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/10.jpg)
Вхождение в IntelliJIDEA
10
![Page 11: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/11.jpg)
11
Установка
![Page 12: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/12.jpg)
12
Установка
![Page 13: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/13.jpg)
13
Установка
![Page 14: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/14.jpg)
14
![Page 15: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/15.jpg)
15
![Page 16: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/16.jpg)
16
![Page 17: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/17.jpg)
17
![Page 18: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/18.jpg)
18
Приветствие
![Page 19: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/19.jpg)
19
![Page 20: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/20.jpg)
Терминология
— Проект – это разрабатываемый нами Сервис
— IDEA Project – это некая мета-сущность, в которой IntelliJIDEA хранит всю информацию о разрабатываемых нами Сервисах
20
![Page 21: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/21.jpg)
Создание IDEA Project
21
![Page 22: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/22.jpg)
22
![Page 23: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/23.jpg)
23
![Page 24: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/24.jpg)
24
![Page 25: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/25.jpg)
25
![Page 26: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/26.jpg)
26
![Page 27: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/27.jpg)
27
![Page 28: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/28.jpg)
28
![Page 29: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/29.jpg)
29
![Page 30: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/30.jpg)
30
![Page 31: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/31.jpg)
31
![Page 32: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/32.jpg)
32
![Page 33: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/33.jpg)
33
![Page 34: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/34.jpg)
34
![Page 35: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/35.jpg)
35
![Page 36: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/36.jpg)
36
![Page 37: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/37.jpg)
37
![Page 38: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/38.jpg)
38
Вёрстка в IntelliJIDEA, или забудьте про рутину
![Page 39: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/39.jpg)
Meta Feature
Отвечать на вопросы разработчика
39
![Page 40: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/40.jpg)
Работа с абстракциямиFeatures groups
1. Файлы проектаКопирование, переименование, поиск и другие действия с файловой системой
2. Литеральное представление кодаРабота со строками файла и функции систем контроля версий
3. Структурные элементы кодаНюансы работы с конкретным кодом. Например, HTML и CSS
40
![Page 41: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/41.jpg)
41
IntelliJIDEA — Живое Целое
![Page 42: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/42.jpg)
Живое Целое
42
IntelliJIDEA File SystemIDEA Project File
IDEA Module File
Content Root’s Files
Core
Caches
![Page 43: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/43.jpg)
Живое Целое
43
IntelliJIDEA File SystemIDEA Project File
IDEA Module File
Content Root’s Files
Core
Caches
![Page 44: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/44.jpg)
Живое Целое
• Работает со своими кешами• Сохраняет всё• Анализирует взаимосвязи в коде• Повышает эффективность разработки
44
![Page 45: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/45.jpg)
Живое Целое
• Работает со своими кешами• Сохраняет всё• Анализирует взаимосвязи в коде• Повышает эффективность разработки
• И при этом не тормозит ;-)
45
![Page 46: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/46.jpg)
46
GUI and Settings
![Page 47: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/47.jpg)
Интуитивность и привычность
47
![Page 48: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/48.jpg)
Диалог настроек
48
![Page 49: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/49.jpg)
49
File Templates
![Page 50: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/50.jpg)
File Templates
50
![Page 51: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/51.jpg)
File Templates
51
![Page 52: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/52.jpg)
File Templates
52
![Page 53: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/53.jpg)
53
Live Templates
![Page 54: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/54.jpg)
Live Templates
54
Live Template Созданный код
![Page 55: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/55.jpg)
Например:
Набрать xhtml и нажать
Live Templates
55
Live Template Созданный код
![Page 56: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/56.jpg)
Live Templates
56
![Page 57: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/57.jpg)
Live Templates
Набрать table и нажать
57
![Page 58: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/58.jpg)
58
Surround, Folding, Code Style
![Page 59: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/59.jpg)
Surround
59
![Page 60: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/60.jpg)
Surround
60
![Page 61: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/61.jpg)
Surround
61
![Page 62: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/62.jpg)
Surround
62
![Page 63: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/63.jpg)
Surround, Folding
63
Cmd -
![Page 64: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/64.jpg)
Surround, Folding
64
Cmd L
Cmd Alt J
![Page 65: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/65.jpg)
Surround, Folding and Code Style
65
![Page 66: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/66.jpg)
Code Style
66
Cmd Alt L
![Page 67: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/67.jpg)
Code Style
67
![Page 68: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/68.jpg)
68
DTD
![Page 69: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/69.jpg)
DTD
69
Cmd B
Cmd Clickor
![Page 70: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/70.jpg)
DTD
70
![Page 71: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/71.jpg)
71
Autocomplete
![Page 72: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/72.jpg)
КонтекстныйAutocomplete
72
Только табличные элементы
Ctrl Space
![Page 73: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/73.jpg)
КонтекстныйAutocomplete
73
Только строчные элементы
Только табличные элементы
![Page 74: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/74.jpg)
СамообучающийсяAutocomplete
74
Запоминает использованные теги
![Page 75: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/75.jpg)
75
Killer FeatureFile Encodings
![Page 76: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/76.jpg)
Явное указание
76
![Page 77: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/77.jpg)
Конвертирование
77
![Page 78: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/78.jpg)
78
Version Control Systems
![Page 79: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/79.jpg)
Version Control SystemsКонтекстный контроль
79
![Page 80: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/80.jpg)
Version Control SystemsКонтекстный контроль
80
Добавлен
Удалён
![Page 81: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/81.jpg)
Version Control Systems
81
Изменён
![Page 82: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/82.jpg)
Version Control SystemsБыстрая навигация
82
![Page 83: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/83.jpg)
83
Local History
![Page 84: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/84.jpg)
Развенчиваем мифыLocal History
• Идея жутко тормозит, если не выключить Local History
• “И ваще, Local History невостребована, когда есть VCS”
84
![Page 85: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/85.jpg)
Local HistoryКак использую я?
85
![Page 86: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/86.jpg)
Local HistoryКак использую я?
86
![Page 87: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/87.jpg)
Local HistoryКак использую я?
87
![Page 88: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/88.jpg)
88
Diff
![Page 89: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/89.jpg)
Интуитивность и контекстный контрольDiff
89
![Page 90: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/90.jpg)
РежимыDiff
1. Compare Two FilesСравниваются два файла, выделенные одновременно в Project View
2. Compare File with EditorСравнивается файл, выделенный в Project View, с файлом, который открыт в Editor View
3. Compare Selected with ClipboardСравнивается выделенный фрагмент кода с тем, что лежит в буфере обмена
90
![Page 91: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/91.jpg)
91
Создание элементов кода
![Page 92: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/92.jpg)
Повышаем эффективностьСоздание элементов кода
1. Быстро управляем HTML-тегами и CSS-свойствамиLive Templates.
2. Мыслим мета-категориямиLive Templates?
3. Пишем компонентамиLive Templates!
92
![Page 93: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/93.jpg)
Пишем компонентами
Набрать b-userpic и нажать
93
![Page 94: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/94.jpg)
Мыслим мета-категориями
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
![Page 95: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/95.jpg)
Мыслим мета-категориями
95
dbdi
dib
Live Template Созданный код
display: blockdisplay: inline
display: -moz-inline-block; display: inline-block
![Page 96: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/96.jpg)
Мыслим мета-категориями
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
![Page 97: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/97.jpg)
Что важно понять из примеров?
• Мы пишем код фрагментами
• Задачу по формированию логических кусков нашего кода мы переносим на плечи робота
• Себе же оставляем только творчество :)
97
![Page 98: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/98.jpg)
98
Killer FeatureCode Inspection
![Page 99: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/99.jpg)
Синтаксическая корректностьCode Inspection
99
![Page 100: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/100.jpg)
ВалидностьCode Inspection
100
?
![Page 101: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/101.jpg)
ВалидностьCode Inspection
101
![Page 102: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/102.jpg)
Кириллица в CSS-селекторахCode Inspection
102
![Page 103: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/103.jpg)
103
Killer FeatureQuirks Mode Plugin
![Page 104: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/104.jpg)
Кроссбраузерные нюансыQuirks Mode Plugin
104
Питер‐Пол КохhMp://www.quirksmode.org
![Page 105: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/105.jpg)
105
Killer FeatureЭффективная работа с текстом
![Page 106: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/106.jpg)
Эффективная работа с текстом
Операции над строками без выделения строкCmd C, Cmd X, Cmd Y, Cmd D, Cmd /, Cmd Shift J, Cmd Shift Up/Down, etc…
106
![Page 107: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/107.jpg)
Без выделения строкЭффективная работа с текстом
107
Cmd Shift Up
![Page 108: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/108.jpg)
Без выделения строкЭффективная работа с текстом
108
![Page 109: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/109.jpg)
109
Эффективная работа с кодом
![Page 110: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/110.jpg)
Эффективная работа с кодом
• Операции над узламиCmd Shift Fn Backspace, Cmd Plus/Minus etc…
• Рефакторинг Shift F6
110
![Page 111: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/111.jpg)
Node’s Rename
111
Shift F6
Эффективная работа с кодом
![Page 112: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/112.jpg)
Node’s Rename
112
Type new name
Эффективная работа с кодом
![Page 113: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/113.jpg)
Node’s Rename
113
Эффективная работа с кодом
![Page 114: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/114.jpg)
Unsurround
114
Cmd Shift Fn Backspace
Эффективная работа с кодом
![Page 115: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/115.jpg)
Unsurround
115
Эффективная работа с кодом
![Page 116: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/116.jpg)
CSS Selector’s Rename
116
Эффективная работа с кодом
Shift F6
![Page 117: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/117.jpg)
CSS Selector’s Rename
117
Эффективная работа с кодом
![Page 118: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/118.jpg)
CSS Selector’s Rename
118
Эффективная работа с кодом
This important feature is a real time-saver which additionally guarantees the consistency of the refactored code
“
”
JetBrains says:
![Page 119: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/119.jpg)
119
Go To …
![Page 120: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/120.jpg)
Go To File
120
Cmd Shift N
![Page 121: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/121.jpg)
Go To File
121
Use masks!
![Page 122: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/122.jpg)
Go To File
122
Use fiters!
![Page 123: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/123.jpg)
Go To Resource
123
Cmd B
Cmd Clickor
![Page 124: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/124.jpg)
Go To Resource
124
Cmd B
Cmd Clickor
![Page 125: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/125.jpg)
125
Калейдоскоп возможностейустами JetBrains
![Page 126: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/126.jpg)
Image Size InspectionКалейдоскоп возможностей
126
Alt Enter
![Page 127: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/127.jpg)
Dublicate InspectionКалейдоскоп возможностей
127
Alt Enter
![Page 128: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/128.jpg)
CSS InspectionКалейдоскоп возможностей
128
![Page 129: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/129.jpg)
CSS InspectionКалейдоскоп возможностей
129
Ctrl Space
![Page 130: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/130.jpg)
Color PreviewКалейдоскоп возможностей
130
![Page 131: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/131.jpg)
Color RefactoringКалейдоскоп возможностей
131
Shift F6
![Page 132: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/132.jpg)
CSS AutocompleteКалейдоскоп возможностей
132
Ctrl Space
![Page 133: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/133.jpg)
Show Applied Styles for TagКалейдоскоп возможностей
133
![Page 134: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/134.jpg)
Javascript DebuggerКалейдоскоп возможностей
134
Это надо увидетьhttp://www.jetbrains.com/idea/training/demos/javascript-debugger.html
![Page 135: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/135.jpg)
135
«Подытоживая всё вышесказанное…» © Veged, Alpha-San
![Page 136: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/136.jpg)
Спасибо за Ваше внимание!
Полный вариант доступен в виде статьи
Часть №1http://makishvili.com/2009/02/verstka-v-intellijidea-1/
Часть №2http://makishvili.com/2009/04/verstka-v-intellijidea-2/
136
![Page 137: Вадим Макишвили "Вёрстка в IntelliJIDEA"](https://reader034.fdocuments.net/reader034/viewer/2022051323/54b61bb14a795950268b4756/html5/thumbnails/137.jpg)
Вадим МакишвилиРуководитель группы HTML-вёрстки поисковых и контент-сервисов
http://makishvili.com