Кузнецов Дмитрий
Как защитить свой ко
д
д
01
Как сло
✖ Дать джуниору доступ до репозитория
✖ Сменить окружение
✖ Сменить контент
✖ Не проработанные требования
✖ Против...
I. Вёрстка
03
Иконка
05
Текст
Go!
07
Длинный текст
Поехали!
11
Многострочный текст
Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
13
Текст-подсказка
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
17
Много букв
Одиннадцатиклас
сница
рентгеноэлектрокардиогра
фическая
19
Крестик
Одиннадцатикл
ассница
рентгеноэлектрокардиогра
фическая
23
Нет основного текста
рентгеноэлектрокардиогра
фическая
29
Всё починено?
31
Go! Поехали! Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
Одиннадцатикл
ассница
рент...
А как надо?
41
Графеновая
вёрстка!
43
47
100% регрессия
Go! Поехали! Нажмите чтобы
поехать!
Нажмите чтобы
поехать!
Это кнопка на которую
можно нажимать
Одиннадцати...
59
61
67
Защищаем вёрстку:
— Одиннадцатиклассница
— Многострочные тексты
— Пустые строки
— Совмещение макета с вёрсткой (pixel perf...
II. +JavaScript
73
auth
79
А что если...
— Не заполнены поля
— Слишком короткий логин
— Слишком длинный логин
— Логин не существует
— Пароль не подхо...
Ошибка авторизации
— А давайте
напишем DOM-тест!
89
DOM-тест
Сколько будет 2 + 2?
Будет 4
Действительно 4!
Запишите формулу Эйлера
--no-verify
Вы правы как никогда!
01.
02.
0...
А что будет, если мыло занято и пароль
формально не подходит?
$('.login').val('existingName')
$('.pass').val('1')
$('.subm...
Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ошибка'
01.
02...
auth.takeResponce
107
Асинхронный колбек
$.ajax({
...
callback: function(data) {
auth.takeResponce(data);
}
});
01.
02.
03.
04.
05.
06.
109
...если бэкенд ответит, что пароль
неправильный?
$('.login').val('name')
$('.pass').val('123456')
$('.submit').click()
aut...
Отвечает auth:
$('.pass').hasClass('error') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === errorData.msg
0...
...бэкент не отвечает 10 секунд?
var clock = sinon.useFakeTimers()
$('.login').val('name')
$('.pass').val('123456')
$('.su...
Отвечает auth:
$('.auth').hasClass('timeout') === true
$('.errorMsg').length === 1
$('.errorMsg').text() === 'Ваш интернет...
$.ajax
139
...нажать на вход при формально правильных
данных?
sinon.spy($, 'ajax')
$('.login').val('name')
$('.pass').val('123456')
$...
DOM-тесты на
вёрстку
151
Горизонтальная резиновость
157
Вертикальная резиновость
163
Итого
— Проверка DOM элементов и атрибутов
— CSS классов и свойств
— Резиновости
— Таймаутов
— Слежение за методами
— Всё ...
Как сломать код
✓ Дать джуниору доступ до репозитория графеновая вёрстка
✓ Сменить окружение проверка резиновости
✓ Сменит...
Как это работает у нас

Ctx

Resolve
 
Tests
 
Regression
 
push
 
hooks

179
Будь мужиком,
защити свой код!
181
Вопросы
191
Upcoming SlideShare
Loading in …5
×

Frontend

263 views
181 views

Published on

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
263
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontend

  1. 1. Кузнецов Дмитрий Как защитить свой ко д д 01
  2. 2. Как сло ✖ Дать джуниору доступ до репозитория ✖ Сменить окружение ✖ Сменить контент ✖ Не проработанные требования ✖ Противоречивые требования мать код 02
  3. 3. I. Вёрстка 03
  4. 4. Иконка 05
  5. 5. Текст Go! 07
  6. 6. Длинный текст Поехали! 11
  7. 7. Многострочный текст Нажмите чтобы поехать! Нажмите чтобы поехать! 13
  8. 8. Текст-подсказка Нажмите чтобы поехать! Это кнопка на которую можно нажимать 17
  9. 9. Много букв Одиннадцатиклас сница рентгеноэлектрокардиогра фическая 19
  10. 10. Крестик Одиннадцатикл ассница рентгеноэлектрокардиогра фическая 23
  11. 11. Нет основного текста рентгеноэлектрокардиогра фическая 29
  12. 12. Всё починено? 31
  13. 13. Go! Поехали! Нажмите чтобы поехать! Нажмите чтобы поехать! Это кнопка на которую можно нажимать Одиннадцатикл ассница рентгеноэлектрокардиогра фическая Одиннадцатикл ассница рентгеноэлектрокардиогра фическая рентгеноэлектрокардиогра фическая 37
  14. 14. А как надо? 41
  15. 15. Графеновая вёрстка! 43
  16. 16. 47
  17. 17. 100% регрессия Go! Поехали! Нажмите чтобы поехать! Нажмите чтобы поехать! Это кнопка на которую можно нажимать Одиннадцатик лассница рентгеноэлектрокарди ографическая Одиннадцати классница рентгеноэлектрокар диографическая рентгеноэлектрокар диографическая 53
  18. 18. 59
  19. 19. 61
  20. 20. 67
  21. 21. Защищаем вёрстку: — Одиннадцатиклассница — Многострочные тексты — Пустые строки — Совмещение макета с вёрсткой (pixel perfect) — И всё это на одной html странице 71
  22. 22. II. +JavaScript 73
  23. 23. auth 79
  24. 24. А что если... — Не заполнены поля — Слишком короткий логин — Слишком длинный логин — Логин не существует — Пароль не подходит — Бэкенд не отвечает — Пароль не подходит более 3 раз подряд — Капча набрана неправильно — Заполнить и нажать вход — Следующий слайд пожалуйста 83
  25. 25. Ошибка авторизации — А давайте напишем DOM-тест! 89
  26. 26. DOM-тест Сколько будет 2 + 2? Будет 4 Действительно 4! Запишите формулу Эйлера --no-verify Вы правы как никогда! 01. 02. 03. 01. 02. 03. 97
  27. 27. А что будет, если мыло занято и пароль формально не подходит? $('.login').val('existingName') $('.pass').val('1') $('.submit').click() 01. 02. 03. 101
  28. 28. Отвечает auth: $('.pass').hasClass('error') === true $('.errorMsg').length === 1 $('.errorMsg').text() === 'Ошибка' 01. 02. 03. 103
  29. 29. auth.takeResponce 107
  30. 30. Асинхронный колбек $.ajax({ ... callback: function(data) { auth.takeResponce(data); } }); 01. 02. 03. 04. 05. 06. 109
  31. 31. ...если бэкенд ответит, что пароль неправильный? $('.login').val('name') $('.pass').val('123456') $('.submit').click() auth.takeResponce(errorData) 01. 02. 03. 04. 113
  32. 32. Отвечает auth: $('.pass').hasClass('error') === true $('.errorMsg').length === 1 $('.errorMsg').text() === errorData.msg 01. 02. 03. 127
  33. 33. ...бэкент не отвечает 10 секунд? var clock = sinon.useFakeTimers() $('.login').val('name') $('.pass').val('123456') $('.submit').click() clock.tick(10 * 1000) 01. 02. 03. 04. 05. 131
  34. 34. Отвечает auth: $('.auth').hasClass('timeout') === true $('.errorMsg').length === 1 $('.errorMsg').text() === 'Ваш интернет плох' 01. 02. 03. 137
  35. 35. $.ajax 139
  36. 36. ...нажать на вход при формально правильных данных? sinon.spy($, 'ajax') $('.login').val('name') $('.pass').val('123456') $('.submit').click() 01. 02. 03. 04. 149
  37. 37. DOM-тесты на вёрстку 151
  38. 38. Горизонтальная резиновость 157
  39. 39. Вертикальная резиновость 163
  40. 40. Итого — Проверка DOM элементов и атрибутов — CSS классов и свойств — Резиновости — Таймаутов — Слежение за методами — Всё это мы не делаем! 167
  41. 41. Как сломать код ✓ Дать джуниору доступ до репозитория графеновая вёрстка ✓ Сменить окружение проверка резиновости ✓ Сменить контент электрокардиографическая одиннадцатиклассница ✓ Не проработанные требования прорабатываем ✓ Противоречивые требования невозможны 173
  42. 42. Как это работает у нас  Ctx  Resolve   Tests   Regression   push   hooks  179
  43. 43. Будь мужиком, защити свой код! 181
  44. 44. Вопросы 191

×